Thorgal
T
Designed byThorgal
View on AwwwardsOne-Shot Build Prompt
# Fantasy Portal Website Hero Section
Create a dark fantasy-themed hero section with an atmospheric background featuring floating rocks and a mystical portal. This design uses a warm gradient background with overlaid illustration elements and cinematic typography.
## Overall Layout Structure
The design follows a full-viewport hero layout with:
- Fixed header navigation with hamburger menu and brand logo
- Central hero content with large typography and call-to-action
- Atmospheric background illustration with floating elements
- Side navigation elements positioned on the left edge
## Key Components and Visual Styling
**Header Navigation**
- Semi-transparent overlay bar at top
- Left-aligned hamburger menu icon
- Centered brand logo "THORGAL" in bold uppercase
- Right-aligned "Actualités" link with bullet point
**Hero Content**
- Large centered heading "L'UNIVERS" in bold serif/display font
- Ornate decorative door/portal graphic above the text
- Two action buttons stacked vertically below
- Dark overlay behind text for readability
**Background Illustration**
- Warm gradient from orange/tan at top to deep red at bottom
- Multiple floating rock elements in dark silhouettes
- Desert/rocky landscape at bottom
- Atmospheric depth with varying rock sizes and positions
**Side Navigation**
- Vertical navigation dots on left edge
- Small floating UI element in bottom left corner
## Responsive Behavior
- Hero typography scales down on smaller screens
- Floating rock elements maintain relative positions
- Header navigation adapts to mobile with preserved hamburger menu
- Background gradient maintains aspect ratio across viewports
## Dark/Light Mode
This design is optimized for a dark fantasy aesthetic and should maintain consistent theming across modes with adjustments to:
- Text contrast ratios
- Background overlay opacity
- Navigation element visibility
<design-specification>
```jsonc
{
"project": {
"name": "Fantasy Portal Hero",
"description": "Dark fantasy hero section with atmospheric floating elements and mystical portal centerpiece"
},
"tokens": {
"colors": {
"primary-900": { "light": "#1a0f0a", "dark": "#0a0503" },
"primary-800": { "light": "#2d1b14", "dark": "#1a0f0a" },
"primary-700": { "light": "#4a2c1d", "dark": "#2d1b14" },
"accent-500": { "light": "#d2691e", "dark": "#ff8c42" },
"accent-400": { "light": "#f4a460", "dark": "#ffa366" },
"accent-300": { "light": "#deb887", "dark": "#ffb380" },
"neutral-100": { "light": "#ffffff", "dark": "#f8f8f8" },
"neutral-200": { "light": "#f5f5f5", "dark": "#e8e8e8" },
"neutral-800": { "light": "#2a2a2a", "dark": "#1a1a1a" },
"neutral-900": { "light": "#1a1a1a", "dark": "#0a0a0a" },
"overlay-dark": { "light": "rgba(0,0,0,0.6)", "dark": "rgba(0,0,0,0.8)" },
"overlay-light": { "light": "rgba(255,255,255,0.1)", "dark": "rgba(255,255,255,0.05)" }
},
"typography": {
"families": {
"serif": "Playfair Display, Georgia, serif",
"sans": "Inter, system-ui, sans-serif"
},
"sizes": {
"xs": "12px",
"sm": "14px",
"base": "16px",
"lg": "18px",
"xl": "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "36px",
"5xl": "48px",
"6xl": "72px"
},
"weights": {
"normal": "400",
"medium": "500",
"semibold": "600",
"bold": "700",
"black": "900"
},
"lineHeights": {
"tight": "1.1",
"normal": "1.5",
"relaxed": "1.75"
},
"letterSpacing": {
"tight": "-0.025em",
"normal": "0em",
"wide": "0.1em",
"widest": "0.2em"
}
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"4xl": "96px",
"rationale": "Progressive scale based on 8px grid system for consistent rhythm"
},
"radii": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"full": "9999px"
},
"shadows": {
"sm": { "light": "0 1px 2px rgba(0,0,0,0.1)", "dark": "0 1px 2px rgba(0,0,0,0.4)" },
"md": { "light": "0 4px 6px rgba(0,0,0,0.1)", "dark": "0 4px 6px rgba(0,0,0,0.3)" },
"lg": { "light": "0 10px 15px rgba(0,0,0,0.1)", "dark": "0 10px 15px rgba(0,0,0,0.25)" },
"text": { "light": "0 2px 4px rgba(0,0,0,0.5)", "dark": "0 2px 4px rgba(0,0,0,0.8)" }
}
},
"screens": [
{
"name": "FantasyPortalHero",
"route": "/hero",
"layout": "Full viewport hero with fixed header, centered content, and atmospheric background",
"components": [
{
"name": "HeaderNavigation",
"type": "header",
"properties": {
"background": "tokens.colors.overlay-light",
"backdrop-blur": "8px",
"padding": "tokens.spacing.md tokens.spacing.lg",
"position": "fixed",
"top": "0",
"width": "100%",
"z-index": "50"
},
"states": {
"default": {
"opacity": "0.9"
}
}
},
{
"name": "BrandLogo",
"type": "text",
"properties": {
"font-family": "tokens.typography.families.sans",
"font-size": "tokens.typography.sizes.xl",
"font-weight": "tokens.typography.weights.black",
"color": "tokens.colors.neutral-100",
"letter-spacing": "tokens.typography.letterSpacing.widest",
"text-align": "center"
}
},
{
"name": "HeroBackground",
"type": "div",
"properties": {
"background": "linear-gradient(180deg, tokens.colors.accent-300 0%, tokens.colors.accent-500 50%, tokens.colors.primary-800 100%)",
"height": "100vh",
"position": "relative",
"overflow": "hidden"
}
},
{
"name": "FloatingRock",
"type": "div",
"properties": {
"background": "tokens.colors.primary-900",
"border-radius": "tokens.radii.lg",
"position": "absolute",
"filter": "drop-shadow(tokens.shadows.md)",
"transform": "rotate(var(--rotation))"
},
"states": {
"default": {
"opacity": "0.8"
},
"animated": {
"animation": "float 6s ease-in-out infinite"
}
}
},
{
"name": "PortalGraphic",
"type": "div",
"properties": {
"background": "tokens.colors.primary-800",
"border": "2px solid tokens.colors.accent-500",
"border-radius": "tokens.radii.md",
"padding": "tokens.spacing.sm",
"margin-bottom": "tokens.spacing.lg"
}
},
{
"name": "HeroTitle",
"type": "h1",
"properties": {
"font-family": "tokens.typography.families.serif",
"font-size": "tokens.typography.sizes.6xl",
"font-weight": "tokens.typography.weights.black",
"color": "tokens.colors.neutral-100",
"text-align": "center",
"letter-spacing": "tokens.typography.letterSpacing.wide",
"line-height": "tokens.typography.lineHeights.tight",
"text-shadow": "tokens.shadows.text",
"margin-bottom": "tokens.spacing.2xl"
}
},
{
"name": "ActionButton",
"type": "button",
"properties": {
"background": "tokens.colors.overlay-dark",
"color": "tokens.colors.neutral-100",
"border": "1px solid tokens.colors.accent-500",
"padding": "tokens.spacing.md tokens.spacing.xl",
"border-radius": "tokens.radii.sm",
"font-family": "tokens.typography.families.sans",
"font-size": "tokens.typography.sizes.sm",
"font-weight": "tokens.typography.weights.medium",
"text-transform": "uppercase",
"letter-spacing": "tokens.typography.letterSpacing.wide"
},
"states": {
"default": {
"backdrop-filter": "blur(8px)"
},
"hover": {
"background": "tokens.colors.accent-500",
"transform": "translateY(-2px)",
"box-shadow": "tokens.shadows.lg"
}
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.