A responsive two-section property landing page with step-by-step word animations.
English. A long, step-by-step specification with fonts, colours and breakpoints. Image is a frame from the source post's video, not a result verified by Combos. Model attribution is the source author's claim; this prompt has not been independently run by Combos.
Read source prompt · 6813 characters
Build a responsive real-estate landing page for "Sabrina Residences" (two sections: Hero + "Our Latest Houses"). It must look perfect on desktop, tablet and mobile, and every element must animate in step by step, word by word, on load.
STEP 1 — FONTS & BASE
- Google Fonts: Playfair Display (400, 500), Archivo (400, 500), Manrope (400, 500).
- Body: margin 0, background #fff, box-sizing border-box, antialiased. Links: inherit color, no underline.
- Default font: Archivo, color #fff.
STEP 2 — PAGE BACKGROUND (wraps both sections)
- Vertical gradient (180deg): #1150ef 0%, #135af3 30%, #3c7af6 52%, #76a2fa 64%, #86acfb 70%, #b9cffd 84%, #ffffff 100%.
- Soft cloud glow overlay: radial-gradient(40% 18% at 30% 12%, rgba(120,170,255,.35)), radial-gradient(35% 14% at 78% 26%, rgba(130,175,255,.28)), radial-gradient(30% 10% at 55% 3%, rgba(110,160,255,.3)), each fading to transparent at 70%.
- 4 full-height vertical grid lines, 1px, rgba(255,255,255,.28), at left 4.8%, 35.45%, 64.7%, 95.2%. On load each grows downward from the top (scaleY 0→1, 1.6s, cubic-bezier(.65,0,.35,1), delays 0 / .1 / .2 / .3s).
STEP 3 — HERO SECTION
- position relative, overflow hidden, min-height clamp(760px, 75vw, 1300px), flex column.
- Main house image (transparent PNG):
https://t.co/SLhPfjOQ0H
Absolute, right 4.8vw, bottom 0, width max(83vw, 640px), height auto, z-index 1.
Load animation (slow, smooth parallax rise from the bottom): 0% opacity 0, translateY(70%) scale(1.06) → 25% opacity 1 → 100% translateY(0) scale(1). Duration 4.2s, cubic-bezier(.22,.61,.24,1), delay .2s.
STEP 4 — HEADER / NAV
- 3-column grid (1fr auto 1fr), gap 12px, padding 24px clamp(16px,2.2vw,40px) 0, z-index 10.
- Left: white SVG logo mark, 40×30.
- Center (desktop > 860px only): pill nav, gap 1px. Every pill: height 40px, padding 0 18px, radius 999px, 13px, letter-spacing -.035em.
• HOME: white bg, text #161616, Lucide "house" icon 15px, gap 10px.
• PROPERTIES, AGENT, PARTNER: bg rgba(255,255,255,.16), backdrop blur 8px; hover rgba(255,255,255,.3).
- Right (gap 10px):
• Language switch pill (height 40px, bg rgba(255,255,255,.16), blur 8px) with "BA" and "EN" buttons. The active one is white with #161616 text, the inactive one is transparent with white text. Default EN. Clickable toggle.
• SIGN IN: height 41px, padding 0 19px, radius 999px, 1px border rgba(255,255,255,.9). Hover: white bg, text #1150ef.
• Mobile/tablet (≤ 860px): 44×44 round hamburger button (rgba(255,255,255,.16), blur 8px). It opens a dropdown: top 78px, radius 24px, padding 10px, gap 6px, bg rgba(255,255,255,.18), blur 18px, border 1px rgba(255,255,255,.3), with 48px-tall pill links (HOME white with icon, then PROPERTIES, AGENT, PARTNER).
- Nav items fade down (translateY -14px → 0, .8s, cubic-bezier(.2,.7,.2,1)), staggered: logo .1s, HOME .2s, PROPERTIES .28s, AGENT .36s, PARTNER .44s, language switch .52s, SIGN IN .6s, hamburger .65s.
STEP 5 — HERO HEADLINE + TAGLINE
- Row: flex wrap, column-gap 24px, padding clamp(28px,3.4vw,60px) clamp(16px,2.2vw,40px) 0, z-index 3.
- H1 in Playfair Display 400, uppercase, font-size clamp(40px, calc(39px + 4.9vw), 170px), line-height .87, letter-spacing -.005em, on 3 lines:
"SABRINA" (indented padding-left .92em) / "RESIDENCES" / "HOUSE"
- Tagline on the right (margin-left auto, margin-top clamp(24px,4.3vw,80px)): Archivo, uppercase, clamp(13px,1.66vw,26px), line-height 1.02, letter-spacing -.045em, first line only indented 3.6em:
"TRUSTED REAL ESTATE / EXPERTS FOR A SMOOTHER, SMARTER / PROPERTY JOURNEY."
On small screens it wraps below the headline.
STEP 6 — EXPLORE LINK
- Padding clamp(36px,5.6vw,100px) clamp(16px,2.2vw,40px) 0.
- "EXPLORE PROPERTIES" + Lucide "arrow-up-right" icon 18px. Font clamp(13px,1.3vw,20px), letter-spacing -.01em, gap clamp(18px,2.4vw,34px). Hover opacity .8.
STEP 7 — BOTTOM-LEFT VIDEO CARD
- Absolute, left clamp(16px,2.2vw,40px), bottom clamp(36px,8.6vw,140px), width clamp(150px,17vw,290px), z-index 3.
- Video box: aspect-ratio 1.7, radius clamp(8px,.9vw,14px), overflow hidden, bg rgba(255,255,255,.2). Video object-fit cover:
https://t.co/v97JdB6wYg
autoplay, muted, loop, playsinline. It must NEVER stop: re-play on pause/ended/stalled, check every 1s, resume on tab visibility change and on the first tap.
- Caption below (margin-top 8px): Manrope, clamp(13px,1.4vw,22px), line-height 1.02, letter-spacing .035em:
"Find a home that fits / your lifestyle"
- 4 progress bars (margin-top 12px, gap 5px): each bar 3px tall, radius 2px, in a 14px-tall clickable area. The active bar is flex 1.7 and #fff, the others flex 1 and rgba(255,255,255,.4), with .6s transitions. The active bar follows the video's progress (the video split into 4 equal parts); clicking a bar jumps the video to that part.
- Card animation: from translateY(30px) scale(.97) and opacity 0, 1s, delay 2s. The bars grow in from the left (scaleX, .9s, delay 2.55s).
STEP 8 — WORD-BY-WORD TEXT ANIMATION ("wordIn")
- Each word animates on its own: opacity 0, translateY(.45em), blur(10px) → visible, sharp. cubic-bezier(.2,.7,.2,1).
- Timing:
• H1: SABRINA .55s, RESIDENCES .75s, HOUSE .95s (1s each).
• Tagline: each word .7s, starting at 1.15s, +.06s per word (Trusted 1.15 … journey. 1.69).
• EXPLORE PROPERTIES: .8s at 1.85s.
• Caption: each word .7s, starting at 2.15s, +.06s per word (Find 2.15 … lifestyle 2.51).
STEP 9 — SECTION 2: "OUR LATEST HOUSES"
- Flex wrap, row-gap 32px, padding clamp(56px,9.9vw,170px) clamp(16px,4vw,70px) clamp(40px,4.4vw,80px) clamp(16px,2.8vw,48px).
- Left heading (flex 1 1 max(200px,24.5vw), margin-top clamp(0px,.9vw,16px)): Playfair Display 400, clamp(40px,4.6vw,80px), line-height 1.2, color #0d0d0d, underlined (1.5px thick, offset .06em), one word per line:
"OUR" / "LATEST" / "Houses"
- Right: 3 image cards in a row (flex 999 1 540px, grid columns minmax(170px,1fr), gap clamp(10px,1.25vw,20px)). On narrow screens it scrolls sideways with snap and the scrollbar hidden.
Each card: aspect-ratio .79, radius clamp(6px,.8vw,12px), overflow hidden, image object-fit cover. Hover zooms the image to scale(1.05) over 1s.
1. https://t.co/1LJHNufHYm
2. https://t.co/FQiIvxBa4O
3. https://t.co/iYjcnc3zyQ
- Scroll-triggered (IntersectionObserver, threshold .15): the heading words use wordIn (.9s, delays 0 / .15 / .3s), and the cards rise in (translateY 30px, scale .97 → 1, 1.1s, delays .2 / .35 / .5s).
STEP 10 — RESPONSIVE RULES
- Desktop > 860px: full pill nav. ≤ 860px: nav hidden, hamburger + dropdown shown.
- All type, spacing and sizes use the clamp() values above, so they scale smoothly between mobile (~375px), tablet (~768–1024px) and desktop (1440px+).
- Nothing overflows horizontally. The tagline stacks under the headline on small screens, and the gallery becomes a swipeable row.