LUNAR is a free, copy-paste ready luxury fashion landing page template built
with pure HTML and CSS — zero JavaScript required. It features a
full-screen hero section using a real Unsplash fashion model photograph
overlaid with a linear-gradient scrim for text legibility, a ::after
pseudo-element that fades the hero into the dark page below,
gold accent (#d4af37) CTA buttons with square borders for a high-fashion editorial feel,
Playfair Display serif typography for headings and product labels,
a responsive CSS Grid collection with 3 columns and
transform: scale(1.08) hover zoom over 0.8 seconds on product images,
a Limited Edition pre-order CTA section, and an elegant minimal footer.
This project demonstrates polished luxury web design techniques: the full-viewport
height: 100vh hero with background overlay, the ::after gradient
fade-to-dark transition between sections, square-cornered buttons (border-radius: 0)
for editorial fashion aesthetics, CSS Grid's repeat(auto-fit, minmax(340px, 1fr))
for a responsive product grid, and slow-duration hover zoom with transition: transform 0.8s
for a premium feel. Perfect for fashion brands, designers, and any project requiring an
elegant dark luxury aesthetic.
The gold used throughout LUNAR is #d4af37 — a jewelry-grade gold hue that reads as
genuinely luxurious. It's defined once as --accent: #d4af37 in the CSS
:root variables and applied to section headings, button backgrounds, and
hover states globally. To change the color scheme entirely: find-replace #d4af37
and --accent with your brand color. For silver, try #c0c0c0.
For rose gold, try #b76e79.
Each .item card has overflow: hidden which clips child elements to
the card boundary. The img inside has transition: transform 0.8s.
On .item:hover img, the transform changes to scale(1.08) — a subtle
8% zoom that creates an upscale browsing feel. The 0.8 second duration (vs the typical 0.3s)
is deliberate — slower animations signal luxury and sophistication in fashion UI design.
LUNAR is ideal for: fashion brand websites, luxury apparel landing pages, jewellery brand homepages, fragrance product launches, haute couture designer portfolios, hotel and hospitality brand sites, premium beauty brand pages, wedding planning websites, and any project requiring a dark, editorial, gold-accented luxury aesthetic built entirely with HTML and CSS.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LUNAR • Timeless Luxury Fashion</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0d0d0d;
--text: #f2f2f2;
--accent: #d4af37; /* gold */
--light: #e8e8e8;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.7;
overflow-x: hidden;
}
/* Hero */
.hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)),
url('https://images.unsplash.com/photo-1523381210434-271e8be1f52a?w=1920') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 200px;
background: linear-gradient(transparent, var(--bg));
}
.hero-content {
z-index: 2;
max-width: 900px;
padding: 2rem;
}
.brand {
font-family: 'Playfair Display', serif;
font-size: 6.5rem;
font-weight: 700;
letter-spacing: 8px;
color: white;
margin-bottom: 1rem;
text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.tagline {
font-size: 1.6rem;
font-weight: 300;
letter-spacing: 4px;
color: var(--light);
margin: 1.5rem 0;
}
.btn {
display: inline-block;
padding: 16px 48px;
margin: 2rem 10px 0;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 2px;
border: 2px solid white;
color: white;
background: transparent;
border-radius: 0;
cursor: pointer;
transition: all 0.4s;
text-transform: uppercase;
}
.btn:hover {
background: white;
color: #000;
}
.btn-gold {
background: var(--accent);
border-color: var(--accent);
color: #000;
}
.btn-gold:hover {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
/* Sections */
section {
padding: 120px 5%;
text-align: center;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
margin-bottom: 3rem;
color: var(--accent);
}
/* Collection Grid */
.collection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 4rem auto;
}
.item {
position: relative;
overflow: hidden;
border-radius: 4px;
}
.item img {
width: 100%;
height: 520px;
object-fit: cover;
transition: transform 0.8s;
}
.item:hover img {
transform: scale(1.08);
}
.overlay {
position: absolute;
bottom: 30px;
left: 30px;
background: rgba(0,0,0,0.7);
padding: 1rem 2rem;
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
letter-spacing: 3px;
}
/* CTA */
.cta {
background: #000;
padding: 140px 5%;
}
.cta h2 {
font-size: 4.5rem;
color: white;
}
footer {
text-align: center;
padding: 4rem;
background: #000;
font-size: 0.9rem;
color: #888;
}
.social {
margin: 2rem 0;
}
.social a {
color: #888;
font-size: 1.6rem;
margin: 0 1rem;
transition: color 0.3s;
}
.social a:hover { color: var(--accent); }
@media (max-width: 768px) {
.brand { font-size: 4rem; }
.tagline { font-size: 1.2rem; }
h2 { font-size: 3rem; }
.item img { height: 420px; }
}
</style>
</head>
<body>
<!-- Hero -->
<section class="hero">
<div class="hero-content">
<div class="brand">LUNAR</div>
<p class="tagline">Autumn / Winter 2025</p>
<div>
<a href="#collection" class="btn">Shop The Collection</a>
<a href="#preorder" class="btn btn-gold">Pre-Order Now</a>
</div>
</div>
</section>
<!-- New Collection -->
<section id="collection">
<h2>New Arrivals</h2>
<div class="collection">
<div class="item">
<img src="https://images.unsplash.com/photo-1542272201-b1ca555f3fd5?w=800" alt="Silk Dress">
<div class="overlay">Midnight Silk</div>
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1595776613213-9d0f1e11358f?w=800" alt="Coat">
<div class="overlay">Cashmere Coat</div>
</div>
<div class="item">
<img src="https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?w=800" alt="Leather">
<div class="overlay">Noir Leather</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="preorder">
<h2>Limited Edition</h2>
<p style="font-size:1.4rem; max-width:700px; margin:2rem auto; opacity:0.9;">
Only 100 pieces available worldwide.<br>
Be the first to own the future of luxury.
</p>
<a href="#" class="btn btn-gold" style="font-size:1.3rem; padding:20px 60px; margin-top:1rem;">
Reserve Your Piece
</a>
</section>
<footer>
<div class="social">
<a href="#">Instagram</a>
<a href="#">TikTok</a>
<a href="#">Pinterest</a>
</div>
<p>© 2025 LUNAR • Handcrafted in Paris & Milano</p>
</footer>
</body>
</html>
Common questions about LUNAR — the free luxury fashion landing page HTML CSS template.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in personal or commercial projects with attribution to Coodeverse.
LUNAR's hero uses height: 100vh and background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url('image.jpg') center/cover no-repeat. The gradient overlay darkens the photo for text legibility. A ::after pseudo-element at the bottom uses background: linear-gradient(transparent, var(--bg)) to fade the hero into the dark page below — a standard luxury website technique.
LUNAR uses --accent: #d4af37 — jewelry-grade gold that looks luxurious against dark backgrounds. Define it as a CSS variable in :root and apply it to headings, buttons, and hover states globally. For silver use #c0c0c0, for rose gold try #b76e79. Avoid using gold on white — it loses its premium appearance.
Each .item has overflow: hidden to clip child elements. The img has transition: transform 0.8s. On .item:hover img, transform: scale(1.08) zooms the image 8%. The 0.8s duration (vs typical 0.3s) is intentionally slow — it conveys luxury and sophistication in fashion UI design.
LUNAR uses Playfair Display (free on Google Fonts) for headings — its high-contrast thick-thin serif strokes convey editorial luxury similar to Vogue mastheads. Inter handles body text. Other great luxury pairings: Cormorant Garamond + Inter, Libre Baskerville + Source Sans, EB Garamond + Raleway. Avoid heavy sans-serifs for headings in luxury design.
Yes. Under CC BY 4.0 you may use LUNAR commercially with attribution to Coodeverse. Replace the Unsplash hero with your photography, update the brand name and season tagline, swap product images, and change --accent: #d4af37 to your brand color. Add a navigation bar and shopping cart for a complete fashion e-commerce site.
Browse the full collection at coodeverse.com/projects — INterior Design Landing Page, NEXUS 3D Pure CSS, Luxury Business Card, Red Bull Landing Page, VORTEX Canvas and more. All 100% free with complete source code.