Created
December 19, 2025 22:44
-
-
Save MrAhmedElsayed/057a8f9ba4820bd8584b3a22d1469bfb to your computer and use it in GitHub Desktop.
Revisions
-
MrAhmedElsayed created this gist
Dec 19, 2025 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,229 @@ <!-- Hero section recreation inspired by: https://dribbble.com/shots/23090247-Videaste-Personal-Videographer-Portfolio-Landing-Page-Website • Tech stack: Tailwind CSS (CDN), Google Fonts, Material Symbols • Scope: Hero section only • Focus: Art-directed layout, asymmetric alignment, responsive structure • Purpose: Educational and layout reference Not intended for commercial use. --> <!doctype html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Miss+Fajardose&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <style type="text/tailwindcss"> @theme { /* 1. Set Inter as the default sans font */ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; /* 2. Define your decorative font (accessible via font-cursive) */ --font-cursive: "Miss Fajardose", cursive; } /* 3. Handle specific Material Symbol settings */ @utility icon-sharp { font-family: "Material Symbols Sharp"; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48; display: inline-block; line-height: 1; } /* 4. Optional: Set default body background */ @layer base { body { @apply bg-white antialiased; } } </style> </head> <body class="font-sans"> <!-- Header --> <header class="relative w-full bg-white pt-[1.5px] sticky top-0 z-50"> <div class="absolute top-3 left-1/2 -translate-x-1/2 w-[90%] h-[1.5px] bg-gradient-to-r from-transparent via-gray-200 to-transparent"> </div> <nav class="w-full max-w-[1400px] mx-auto px-6 lg:px-12 h-24 flex items-center justify-between"> <a href="#" class="flex-shrink-0 flex items-center group"> <svg height="34" viewBox="0 0 75 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-black group-hover:fill-gray-700 transition-colors"> <circle cx="15" cy="15" r="15" /> <path d="M30 0 V30 A15 15 0 0 0 30 0 Z" /> <path d="M45 0 V30 A15 15 0 0 0 45 0 Z" /> </svg> </a> <ul class="hidden lg:flex items-center gap-7"> <li><a href="#" class="text-[18px] font-medium text-gray-900 hover:text-black transition-colors">Home</a></li> <li class="text-gray-300/60 text-xl font-extralight select-none">/</li> <li><a href="#" class="text-[18px] font-medium text-gray-900 hover:text-black transition-colors">About</a></li> <li class="text-gray-300/60 text-xl font-extralight select-none">/</li> <li><a href="#" class="text-[18px] font-medium text-gray-900 hover:text-black transition-colors">Portfolio</a> </li> <li class="text-gray-300/60 text-xl font-extralight select-none">/</li> <li><a href="#" class="text-[18px] font-medium text-gray-900 hover:text-black transition-colors">Exhibitions</a> </li> <li class="text-gray-300/60 text-xl font-extralight select-none">/</li> <li><a href="#" class="text-[18px] font-medium text-gray-900 hover:text-black transition-colors">Contact</a> </li> </ul> <div class="flex items-center gap-5"> <div class="hidden sm:flex items-center gap-2 text-[15px] font-medium"> <span class="text-amber-500 text-sm">✦</span> <span class="text-gray-950">Sala Canal, <span class="text-gray-400 font-normal">22 Nov 23</span></span> </div> <div class="size-11 rounded-full overflow-hidden bg-gray-100 ring-1 ring-gray-100 cursor-pointer"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=2459&auto=format&fit=crop" alt="Profile" class="h-full w-full object-cover"> </div> </div> </nav> <div class="absolute bottom-3 left-1/2 -translate-x-1/2 w-[90%] h-[1.5px] bg-gradient-to-r from-transparent via-gray-200 to-transparent"> </div> </header> <!-- Main Hero Section - PROPER CONTAINER --> <main class="w-full"> <div class="max-w-[1400px] mx-auto px-20 py-20"> <!-- Asymmetric grid - left heavier than right --> <div class="grid grid-cols-1 lg:grid-cols-[1.1fr_0.9fr] items-start gap-20"> <!-- LEFT COLUMN - Art-directed alignment zones --> <div class="relative"> <!-- ZONE 1: Title - Right aligned, massive --> <div class="max-w-[720px]"> <h1 class="text-right font-black leading-[0.88] tracking-[-0.04em] text-gray-900 text-[clamp(4rem,10vw,6rem)] lg:text-[clamp(6rem,12vw,10rem)]"> visual<br>poetry </h1> </div> <!-- ZONE 2: Description + Socials - Right half alignment --> <div class="mt-10"> <p class="text-lg text-gray-700 leading-relaxed ml-auto max-w-[70%]"> Welcome to a visual journey that transcends time and space. Discover the artistry of moments captured in motion. </p> <!-- Social icons with full-width divider --> <div class="mt-8 flex items-center gap-6"> <div class="flex items-center -space-x-3"> <!-- Social Icon Item (Repeat for each) --> <div class="flex size-14 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:border-amber-500"> yt </div> <div class="flex size-14 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:border-amber-500"> ig </div> <div class="flex size-14 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:border-amber-500"> fb </div> <div class="flex size-14 cursor-pointer items-center justify-center rounded-full border-2 border-gray-200 bg-white text-sm font-semibold text-gray-700 transition-all duration-300 ease-in-out hover:-translate-y-0.5 hover:border-amber-500"> x </div> </div> <div class="h-0.5 flex-1 bg-gray-300"></div> </div> </div> <!-- ZONE 3: Stats - Re-centers composition --> <div class="mt-20 grid grid-cols-1 sm:grid-cols-2 gap-16 max-w-[640px]"> <div> <h2 class="text-6xl font-extrabold leading-none text-gray-900">+250k</h2> <p class="text-sm text-gray-600 mt-3 leading-snug max-w-[240px]"> Videos that reaching a wide audience and give lasting impression </p> </div> <div> <h2 class="text-6xl font-extrabold leading-none text-gray-900">+800k</h2> <p class="text-sm text-gray-600 mt-3 leading-snug max-w-[240px]"> Hours watched, engaging storytelling that captivates viewers </p> </div> </div> </div> <!-- RIGHT COLUMN - RIGHT ALIGNED with SVG clip mask --> <div class="relative ml-auto"> <!-- Original SVG clip-path container --> <div class="relative h-[680px] w-[650px]"> <div class="h-[680px] w-[650px] bg-amber-500 flex items-end justify-center" style="-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 681"><defs><style>.cls-1{fill:%23000;stroke:%23000;stroke-miterlimit:10;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="draw"><path class="cls-1" d="M83,.5H517.5c24.85,0,45,19.15,45,44,1,23.93,20.82,45,45,45,24.85,0,42,20.15,42,45V596A84.49,84.49,0,0,1,565,680.5H180.6c-113-2.61-78.08-144.86-83.1-217,0-27.06-23.94-49-51-49H47A46.46,46.46,0,0,1,.5,368V82.77C.5,37.33,38.07.5,83.5.5h243"/></g></g></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 681"><defs><style>.cls-1{fill:%23000;stroke:%23000;stroke-miterlimit:10;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="draw"><path class="cls-1" d="M83,.5H517.5c24.85,0,45,19.15,45,44,1,23.93,20.82,45,45,45,24.85,0,42,20.15,42,45V596A84.49,84.49,0,0,1,565,680.5H180.6c-113-2.61-78.08-144.86-83.1-217,0-27.06-23.94-49-51-49H47A46.46,46.46,0,0,1,.5,368V82.77C.5,37.33,38.07.5,83.5.5h243"/></g></g></svg>'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;"> <!-- Photographer image --> <img src="/img/photographer.png" alt="photographer" class="h-[600px] w-auto object-contain" /> </div> <!-- Name overlay --> <h4 class="font-cursive text-7xl text-amber-100 absolute top-16 left-16">Ahmed Elsayed</h4> <!-- Globe icon - top right --> <div class="absolute top-0 right-0 z-20 flex h-[72px] w-[72px] cursor-pointer items-center justify-center rounded-full bg-black shadow-lg transition-all duration-300 ease-in-out"> <span class="material-symbols-sharp text-white !text-5xl">language</span> </div> <!-- Avatar circles - left side stack --> <div class="absolute left-2 bottom-2 flex flex-col gap-2 z-20"> <div class="h-19 w-19 rounded-full bg-cover bg-center" style="background-image: url('/img/avatar2.jpg');"></div> <div class="h-19 w-19 rounded-full bg-cover bg-center" style="background-image: url('/img/avatar1.jpg');"></div> <!-- Arrow circle --> <div class="flex h-[72px] w-[72px] cursor-pointer items-center justify-center rounded-full bg-black shadow-lg transition-all duration-300 ease-in-out"> <span class="material-symbols-sharp text-white !text-5xl -rotate-45">arrow_forward</span> </div> </div> </div> </div> </div> </div> </main> </body> </html>