Design a luxury jewelry homepage mockup – modern, elegant, high-end aesthetic
Design a detailed homepage layout mockup for a luxury jewelry website targeting a wealthy, discerning audience. The design should feel modern yet timeless, exuding elegance and exclusivity. **Requirements:** - Provide the mockup as structured HTML/CSS (or a detailed wireframe description with exact layout, typography, and color specifications) - **Color palette**: Rich golds, silvers, deep blacks, and white/cream accents — think diamonds, precious metals, and sophistication - **Sections to include**: - Hero section with a bold headline and a stunning full-width jewelry image placeholder - Featured collections (e.g., Diamonds, Gold, Silver) - A "signature piece" spotlight section - Testimonials or brand story snippet - Newsletter signup with an exclusive feel - Elegant footer with navigation and social links - **Typography**: Use refined, high-end serif or modern sans-serif fonts appropriate for luxury branding - **Overall vibe**: Think Tiffany & Co., Cartier, or Bulgari — clean, spacious, premium feel with generous whitespace - The design should feel immersive and aspirational, as if browsing would be an experience in itself
0
Of course. Here is a detailed homepage mockup for a luxury jewelry brand, designed with a modern, elegant, and exclusive aesthetic.
Design Philosophy
The design is built on a foundation of minimalism, generous whitespace, and a strict, sophisticated color palette. The goal is to make the jewelry the hero of the page. The typography pairs a classic, high-contrast serif for headings (Playfair Display) with a clean, highly legible sans-serif for body text (Lato), creating a balance between timeless elegance and modern clarity.
The layout uses a centered container to ensure a comfortable reading width on all screen sizes, while full-bleed image sections create an immersive, editorial feel.
Homepage Mockup: HTML & CSS
You can copy and paste the code below into an HTML file and open it in your browser to see a live preview. The design is responsive and will adapt to smaller screen sizes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aeterna Jewels - Homepage</title>
<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=Lato:wght@300;400&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<style>
/* --- GLOBAL STYLES & VARIABLES --- */
:root {
--color-black: #0A0A0A;
--color-cream: #FDFBF6;
--color-gold: #D4AF37;
--color-silver: #C0C0C0;
--font-serif: 'Playfair Display', serif;
--font-sans: 'Lato', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans);
background-color: var(--color-cream);
color: var(--color-black);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
h1, h2, h3 {
font-family: var(--font-serif);
font-weight: 700;
line-height: 1.2;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
img {
max-width: 100%;
display: block;
}
/* --- HEADER --- */
.main-header {
padding: 2rem 0;
background-color: var(--color-cream);
}
.main-header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-serif);
font-size: 1.5rem;
letter-spacing: 2px;
text-transform: uppercase;
}
.main-nav ul {
list-style: none;
display: flex;
gap: 2.5rem;
}
.main-nav a {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.main-nav a:hover {
color: var(--color-gold);
}
.header-icons {
display: flex;
gap: 1.5rem;
}
.header-icons svg {
width: 20px;
height: 20px;
cursor: pointer;
}
/* --- HERO SECTION --- */
.hero {
height: 85vh;
background: url('https://images.unsplash.com/photo-1611652022417-a55445a46535?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=3200') no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-cream);
}
.hero-content {
max-width: 700px;
background: rgba(0,0,0,0.3);
padding: 2rem;
backdrop-filter: blur(5px);
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 2rem;
font-weight: 300;
}
.btn {
display: inline-block;
padding: 0.8rem 2.5rem;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.btn-primary {
background-color: transparent;
border: 1px solid var(--color-cream);
color: var(--color-cream);
}
.btn-primary:hover {
background-color: var(--color-cream);
color: var(--color-black);
}
/* --- FEATURED COLLECTIONS --- */
.featured-collections {
padding: 6rem 0;
text-align: center;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1rem;
color: #555;
margin-bottom: 4rem;
}
.collections-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.collection-item {
position: relative;
overflow: hidden;
}
.collection-item img {
transition: transform 0.4s ease;
}
.collection-item:hover img {
transform: scale(1.05);
}
.collection-item-content {
margin-top: 1.5rem;
}
.collection-item h3 {
font-size: 1.5rem;
}
.collection-item a {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid var(--color-black);
padding-bottom: 2px;
}
.collection-item a:hover {
color: var(--color-gold);
border-color: var(--color-gold);
}
/* --- SIGNATURE PIECE SPOTLIGHT --- */
.spotlight {
padding: 6rem 0;
background-color: var(--color-black);
color: var(--color-cream);
}
.spotlight .container {
display: flex;
align-items: center;
gap: 4rem;
}
.spotlight-image {
flex: 1;
}
.spotlight-content {
flex: 1;
}
.spotlight-content h3 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-gold);
margin-bottom: 1rem;
}
.spotlight-content h2 {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.spotlight-content p {
font-size: 1.1rem;
font-weight: 300;
margin-bottom: 2.5rem;
max-width: 500px;
}
.btn-secondary {
background-color: var(--color-gold);
border: 1px solid var(--color-gold);
color: var(--color-black);
}
.btn-secondary:hover {
background-color: transparent;
color: var(--color-gold);
}
/* --- BRAND STORY --- */
.brand-story {
padding: 6rem 0;
text-align: center;
}
.brand-story .container {
max-width: 800px;
}
.brand-story h2 {
font-size: 2rem;
font-style: italic;
margin-bottom: 2rem;
font-weight: normal; /* A softer serif style */
font-family: 'Times New Roman', Times, serif;
}
.brand-story p {
font-size: 1.1rem;
color: #333;
}
/* --- NEWSLETTER --- */
.newsletter {
padding: 5rem 0;
background-color: #111;
color: var(--color-cream);
text-align: center;
}
.newsletter h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.newsletter p {
margin-bottom: 2rem;
color: #aaa;
}
.newsletter-form {
display: flex;
justify-content: center;
max-width: 500px;
margin: 0 auto;
}
.newsletter-form input {
flex-grow: 1;
padding: 0.8rem 1rem;
border: 1px solid #444;
background: #222;
color: var(--color-cream);
font-family: var(--font-sans);
font-size: 1rem;
}
.newsletter-form input:focus {
outline: none;
border-color: var(--color-gold);
}
.newsletter-form button {
padding: 0.8rem 1.5rem;
background-color: var(--color-gold);
color: var(--color-black);
border: 1px solid var(--color-gold);
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background-color: transparent;
color: var(--color-gold);
}
/* --- FOOTER --- */
.main-footer {
background-color: var(--color-black);
color: #aaa;
padding: 5rem 0 2rem 0;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 4rem;
}
.footer-col h4 {
font-family: var(--font-sans);
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1.5rem;
color: var(--color-cream);
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 0.8rem;
}
.footer-col a:hover {
color: var(--color-cream);
}
.social-links a {
margin-right: 1rem;
}
.social-links svg {
width: 20px;
height: 20px;
fill: #aaa;
transition: fill 0.3s ease;
}
.social-links a:hover svg {
fill: var(--color-cream);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #222;
font-size: 0.9rem;
}
/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
.main-nav, .header-icons {
display: none; /* Simple hide for mockup, real site needs a hamburger menu */
}
.hero h1 {
font-size: 2.5rem;
}
.collections-grid {
grid-template-columns: 1fr;
}
.spotlight .container {
flex-direction: column;
text-align: center;
}
.spotlight-content p {
margin: 0 auto 2.5rem auto;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
</style>
</head>
<body>
<!-- ======================= HEADER ======================= -->
<header class="main-header">
<div class="container">
<a href="#" class="logo">Aeterna</a>
<nav class="main-nav">
<ul>
<li><a href="#">Collections</a></li>
<li><a href="#">Engagement</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Bespoke</a></li>
</ul>
</nav>
<div class="header-icons">
<!-- SVG icons for search, user, bag -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48z"/></svg>
</div>
</div>
</header>
<main>
<!-- ======================= HERO SECTION ======================= -->
<section class="hero">
<div class="hero-content">
<h1>Elegance, Redefined</h1>
<p>Discover timeless pieces crafted with passion and precision, destined to be cherished for generations.</p>
<a href="#" class="btn btn-primary">Explore The Collection</a>
</div>
</section>
<!-- ======================= FEATURED COLLECTIONS ======================= -->
<section class="featured-collections">
<div class="container">
<h2 class="section-title">Our Collections</h2>
<p class="section-subtitle">Crafted from the earth's most precious materials.</p>
<div class="collections-grid">
<div class="collection-item">
<img src="https://images.unsplash.com/photo-1620353326231-5a2d6a65529f?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=1000&fit=crop" alt="Diamond Jewelry">
<div class="collection-item-content">
<h3>The Diamond Edit</h3>
<a href="#">Shop Now</a>
</div>
</div>
<div class="collection-item">
<img src="https://images.unsplash.com/photo-1617038220319-276d3cfab638?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=1000&fit=crop" alt="Gold Jewelry">
<div class="collection-item-content">
<h3>The Gold Standard</h3>
<a href="#">Shop Now</a>
</div>
</div>
<div class="collection-item">
<img src="https://images.unsplash.com/photo-1611591437134-48d6575c3a48?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=1000&fit=crop" alt="Silver Jewelry">
<div class="collection-item-content">
<h3>The Silver Lining</h3>
<a href="#">Shop Now</a>
</div>
</div>
</div>
</div>
</section>
<!-- ======================= SIGNATURE PIECE SPOTLIGHT ======================= -->
<section class="spotlight">
<div class="container">
<div class="spotlight-image">
<img src="https://images.unsplash.com/photo-1599335623858-622835272313?ixlib=rb-4.0.3&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&h=800&fit=crop" alt="Signature Necklace">
</div>
<div class="spotlight-content">
<h3>Our Signature Piece</h3>
<h2>The Lumina Necklace</h2>
<p>An icon of modern design. The Lumina Necklace features a flawless, ethically sourced central diamond, embraced by a fluid ribbon of 18k white gold. It is a testament to our unwavering commitment to artistry.</p>
<a href="#" class="btn btn-secondary">Discover The Icon</a>
</div>
</div>
</section>
<!-- ======================= BRAND STORY ======================= -->
<section class="brand-story">
<div class="container">
<h2>"Jewelry is a quiet whisper of elegance, a personal story worn for the world to see."</h2>
<p>Since 1923, Aeterna has been synonymous with exceptional craftsmanship and timeless design. Each piece is born from a legacy of artistry, designed not just to adorn, but to inspire.</p>
</div>
</section>
<!-- ======================= NEWSLETTER SIGNUP ======================= -->
<section class="newsletter">
<div class="container">
<h2>Join The Inner Circle</h2>
<p>Be the first to discover new collections, exclusive events, and the world of Aeterna.</p>
<form class="newsletter-form">
<input type="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe</button>
</form>
</div>
</section>
</main>
<!-- ======================= FOOTER ======================= -->
<footer class="main-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<h4>Aeterna</h4>
<p>Timeless elegance, crafted for eternity.</p>
</div>
<div class="footer-col">
<h4>Shop</h4>
<ul>
<li><a href="#">New Arrivals</a></li>
<li><a href="#">Rings</a></li>
<li><a href="#">Necklaces</a></li>
<li><a href="#">Bracelets</a></li>
</ul>
</div>
<div class="footer-col">
<h4>About</h4>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Craftsmanship</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Appointments</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9 26.3 26.2 58 34.4 93.9 36.2 37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8z"/></svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg></a>
<
This response may be incomplete — the model reached its output limit.
Comments