← GalleryDownload source code
- Category
- Templates
- Tier
- Free
- Prompt
- 825 words
- Includes
- Prompt + source code
Templates
Dusty Rose Travel Landing — Luxury Editorial
html-css-js
The prompt
# SUPER TRAVEL — LUXURY EDITORIAL TRAVEL LANDING PAGE ## SUMMARY A LUXURY-FOCUSED, HIGH-CONTRAST SINGLE-PAGE LANDING SITE CALLED 'SUPER TRAVEL' THAT USES BOLD GEOMETRIC TYPOGRAPHY, A SIGNATURE #E4A4BD DUSTY-ROSE ACCENT, GRAYSCALE-TO-COLOR IMAGERY, AND A STAGGERED PORTFOLIO GRID TO CREATE A PREMIUM EDITORIAL FEEL. THE BUILD MUST REPRODUCE THE REFERENCE DESIGN SAME-TO-SAME, INCLUDING EXACT COPY AND IMAGERY. ## STYLE BUILT ON THE 'LEAGUE SPARTAN' SANS-SERIF (LOAD VIA GOOGLE FONTS), USING WEIGHT AND LETTER-SPACING FOR HIERARCHY. PALETTE: WARM OFF-WHITE #FDF8F3 (PRIMARY BG), #F5F0EB (SECONDARY BG), CHARCOAL #262626 (PRIMARY TEXT), DUSTY ROSE #E4A4BD (ACCENT). SMOOTH `CUBIC-BEZIER(0.16, 1, 0.3, 1)` TRANSITIONS AT 1S DURATION. GRAYSCALE-TO-COLOR HOVER ON ALL IMAGES. SOLID MUTED COLORS ONLY — NO VIBRANT GRADIENTS. ## SPEC USE 'LEAGUE SPARTAN' FOR ALL ELEMENTS (BODY AND HEADERS) FOR GEOMETRIC CONSISTENCY. HEADINGS: FONT-WEIGHT 700–900, TRACKING-TIGHTER, LINE-HEIGHT 0.8. UTILITY LABELS: FONT-SIZE 10PX, FONT-WEIGHT 900, TRACKING 0.4EM, UPPERCASE. ANIMATIONS: `CUBIC-BEZIER(0.16, 1, 0.3, 1)`, 1S. IMAGE HOVER: GRAYSCALE(100%) → GRAYSCALE(0%) AND SCALE TO 1.08. NAVIGATION GLASSMORPHISM: `BACKGROUND: RGBA(253, 248, 243, 0.8); BACKDROP-FILTER: BLUR(12PX);` WITH A 1PX BORDER AT 5% OPACITY. ## LAYOUT & STRUCTURE 12-COLUMN GRID, GENEROUS WHITESPACE. HIGH-IMPACT HERO, A 3-COLUMN SERVICES GRID, A SIGNATURE STAGGERED PORTFOLIO GRID, AND A MULTI-COLUMN FOOTER. ## NAVIGATION FIXED TOP NAV, 80PX HEIGHT, GLASSMORPHISM. LEFT: 'SUPER TRAVEL' IN BOLD UPPERCASE. CENTER MENU ITEMS IN 10PX UPPERCASE TRACKING-WIDEST (0.2EM): HOME, SERVICES, JOURNEYS, PHILOSOPHY. FAR RIGHT: PILL-SHAPED CTA BUTTON LABELED 'CONSULTATION' (#E4A4BD BACKGROUND, #262626 TEXT), 32PX PADDING-X, 12PX PADDING-Y. ## HERO SECTION FULL VIEWPORT HEIGHT. LEFT SIDE: MASSIVE HEADLINE AT ~15VW, LINE-HEIGHT 0.8 — TEXT READS "LUXURY" ON ONE LINE AND "JOURNEYS" BELOW IT, WHERE THE WORD "JOURNEYS" IS LOWERCASE ITALIC IN #E4A4BD. BELOW THE HEADLINE, BODY COPY IN #262626 AT ~70% OPACITY: "WE DEFINE TRAVEL AS A HIGH-ART FORM. HYPER-PERSONALIZED ITINERARIES FOR THE WORLD'S MOST DISCERNING TRAVELERS, WHERE EVERY DETAIL IS A MASTERPIECE OF PRECISION." THEN AN ARROW-CTA "EXPLORE DESTINATIONS" WITH A BORDER-BOTTOM-2PX #E4A4BD. INCLUDE A SMALL "CURRENTLY PLANNING" / DESTINATIONS STRIP LISTING: SWISS ALPS • KYOTO • AMALFI. RIGHT SIDE: LARGE CARD WITH 24PX BORDER-RADIUS CONTAINING A GRAYSCALE-TO-COLOR IMAGE (USE https://images.unsplash.com/photo-1520250497591-112f2f40a3f4). FLOATING CIRCULAR BADGE (160PX DIAMETER) IN #E4A4BD WITH ITALIC '01' TEXT AND A SMALL UPPERCASE "GLOBAL RANK" / "CONCIERGE" LABEL, POSITIONED OFF-CENTER WITH A SLOW 4S VERTICAL BOUNCE ANIMATION. FEATURED VILLA LABEL: "POSTANA PRIVATE VILLA". ## SERVICES GRID (THE ART OF SERVICE) BACKGROUND #F5F0EB. HEADLINE ~8XL. GRID OF 3 COLUMNS SEPARATED BY 1PX BORDERS, EACH CARD 40PX PADDING. ON HOVER THE CARD BACKGROUND SHIFTS #FDF8F3 → #E4A4BD; ICONS (4XL) TRANSITION #E4A4BD → #262626. CARD TEXT: H3 BOLD UPPERCASE, P SMALL LEADING-RELAXED. THE THREE CARDS: 1. BESPOKE STRATEGY — "WE DON'T BOOK TRIPS; WE ARCHITECT EXPERIENCES. EACH ITINERARY STARTS WITH A DEEP CONSULTATION OF YOUR DESIRES AND EXPECTATIONS." 2. ELITE ACCESS — "PRIVATE MUSEUM TOURS AFTER HOURS, OFF-MARKET YACHT CHARTERS, AND DIRECT CONTACT WITH THE WORLD'S MOST ELUSIVE ARTISANS." 3. GLOBAL CUSTODY — "24/7 ON-GROUND SUPPORT ACROSS TIME ZONES. WE ARE YOUR ADVOCATES, PROBLEM-SOLVERS, AND SHADOWS THROUGHOUT YOUR JOURNEY." ## PORTFOLIO — STAGGERED GRID (EXQUISITE PORTFOLIO) TWO-COLUMN GRID WHERE EVERY EVEN (RIGHT-COLUMN) ITEM IS OFFSET DOWNWARD BY 100PX. EACH ITEM: A 3:4 ASPECT-RATIO IMAGE WITH 16PX BORDER-RADIUS, GRAYSCALE-TO-COLOR ON HOVER. ON HOVER SHOW A CENTERED 96PX BLACK CIRCLE WITH WHITE 'VIEW CASE' TEXT IN 10PX. BELOW EACH IMAGE: CATEGORY LABEL IN 10PX #E4A4BD BOLD TRACKING-WIDEST, THEN A 3XL TITLE, THEN TAG METADATA SEPARATED BY BULLET POINTS. ITEMS: 1. CATEGORY "INDIAN OCEAN" — TITLE "THE SONEVA RETREAT" — TAGS: OVERWATER VILLAS • PRIVATE JET TRANSFER — IMAGE https://images.unsplash.com/photo-1514282401047-d79a71a590e8 2. CATEGORY "SWISS ALPS" — TITLE "SUMMIT SANCTUARY" — TAGS: HELI-SKIING • MICHELIN PRIVATE CHEF — IMAGE https://images.unsplash.com/photo-1502784444187-359ac186c5bb (USE https://images.unsplash.com/photo-1460627390041-532a28402358 AS THE REMAINING/LIMITED-MEMBERSHIP SHOWCASE IMAGE.) ## FOOTER BACKGROUND #F5F0EB. 12-COLUMN SPLIT: LEFT 5 COLUMNS FOR 'SUPER TRAVEL' BRAND LOGO AND MISSION STATEMENT — "A GLOBAL TRAVEL COLLECTIVE SPECIALIZING IN HIGH-NET-WORTH LOGISTICS AND EXPERIENTIAL LUXURY. MEMBER OF THE EXCLUSIVE VIRTUOSO & SELECT PARTNER PROGRAMS." RIGHT 7 COLUMNS SPLIT INTO 3 SUB-COLUMNS FOR NAVIGATION (HOME, JOURNEYS, OUR ART), SOCIAL (INSTAGRAM, LINKEDIN), AND LOCATIONS (LONDON, NYC, DUBAI, TOKYO). USE 10PX BOLD UPPERCASE HEADERS IN #E4A4BD WITH AN 8PX OFFSET UNDERLINE. BOTTOM BAR: THIN 1PX BORDER, 9PX FONT-SIZE, #262626 AT 30% OPACITY — "© 2024 SUPER TRAVEL. ARCHITECTS OF LUXURY." PLUS LEGAL LINKS PRIVACY | TERMS. ## SPECIAL COMPONENTS ### FLOATING CONCIERGE BADGE 160PX CIRCLE, BACKGROUND #E4A4BD, TEXT #262626. ITALIC '01' (~3XL) PLUS 8PX UPPERCASE TRACKING-WIDEST LABEL. `ANIMATION: BOUNCE-SLOW 4S EASE-IN-OUT INFINITE;` KEYFRAMES SHIFTING TRANSLATEY FROM -5% TO 5%. ### REVEAL-UP WRAPPER SCROLL-TRIGGERED ENTRANCE FOR ALL CONTENT BLOCKS. START `OPACITY: 0; TRANSFORM: TRANSLATEY(40PX);`. WHEN ACTIVE TRANSITION TO `OPACITY: 1; TRANSFORM: TRANSLATEY(0);` VIA `TRANSITION: ALL 1S CUBIC-BEZIER(0.16, 1, 0.3, 1);`. USE INTERSECTIONOBSERVER AT 0.15 THRESHOLD. ## SPECIAL NOTES MUST USE 'LEAGUE SPARTAN' FOR BOTH BODY AND HEADERS. MUST NOT USE VIBRANT GRADIENTS; KEEP COLORS SOLID AND MUTED. ALL REVEAL ANIMATIONS MUST USE CUBIC-BEZIER(0.16, 1, 0.3, 1) FOR A WEIGHTED, HIGH-END MOTION FEEL. IMAGES MUST BE GRAYSCALE BY DEFAULT AND REVEAL COLOR ONLY ON INTERACTION. THE FINAL RESULT MUST MATCH THE REFERENCE UI SAME-TO-SAME.



