<!--
Responsive homepage inspired by your screenshot layout.
How to use in Avada:
1) Create a new page (or a test page).
2) Add an Avada "Code Block" element.
3) Paste EVERYTHING from <style> through </html> into the Code Block.
- If your Code Block strips <html>/<head>/<body>, paste only the <style> + the <main> content.
4) Replace image URLs + links + copy.
-->
<style>
:root{
--bg: #ffffff;
--ink: #1b1b1b;
--muted: #666;
--paper: #f6f1ea; /* warm cream panels */
--charcoal: #5a5a58; /* dark sections */
--accent: #b08a4b; /* button gold */
--accent-dark: #8f6e36;
--max: 1120px;
--gutter: 24px;
--radius: 0px;
--shadow: 0 18px 45px rgba(0,0,0,.12);
--serif: "Georgia", "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*{ box-sizing:border-box; }
body{
margin:0;
font-family: var(--sans);
color: var(--ink);
background: var(--bg);
line-height: 1.55;
}
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* Top Nav (optional if you keep Avada header) */
.topbar{
position: absolute;
inset: 0 0 auto 0;
z-index: 10;
padding: 18px 0;
color: #fff;
}
.topbar .wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
}
.brand{
font-family: var(--serif);
letter-spacing: .12em;
font-size: 13px;
text-transform: uppercase;
opacity:.95;
white-space: nowrap;
}
.nav{
display:flex;
gap: 18px;
align-items:center;
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
opacity: .95;
}
.nav a{ opacity:.9; }
.nav a:hover{ opacity:1; }
/* Hero */
.hero{
position: relative;
min-height: 74vh;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
overflow:hidden;
background: #000;
}
.hero::before{
/* background image */
content:"";
position:absolute;
inset:0;
background:
url("https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=1800&q=70")
center center / cover no-repeat;
transform: scale(1.02);
}
.hero::after{
/* black overlay */
content:"";
position:absolute;
inset:0;
background: rgba(0,0,0,.38);
}
.hero-inner{
position: relative;
z-index: 2;
width: min(820px, calc(100% - 2*var(--gutter)));
text-align:center;
padding: 90px 0;
}
.hero h1{
font-family: var(--serif);
font-weight: 600;
font-size: clamp(34px, 4.8vw, 64px);
line-height: 1.08;
margin: 0 0 14px 0;
letter-spacing: .02em;
}
.hero p{
margin: 0 auto 24px auto;
max-width: 640px;
font-size: 15px;
color: rgba(255,255,255,.9);
}
.btn{
display:inline-block;
background: var(--accent);
color:#fff;
border: 1px solid rgba(255,255,255,.15);
padding: 12px 18px;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
transition: transform .12s ease, background .12s ease;
}
.btn:hover{ background: var(--accent-dark); transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
/* Section headers */
.section{
padding: 70px 0;
}
.kicker{
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--accent);
text-align:center;
margin: 0 0 10px 0;
}
.h2{
font-family: var(--serif);
font-weight: 600;
letter-spacing: .02em;
text-align:center;
margin: 0 0 14px 0;
font-size: clamp(28px, 3.2vw, 42px);
}
.lede{
max-width: 760px;
margin: 0 auto;
text-align:center;
color: var(--muted);
font-size: 14px;
}
.center-btn{
display:flex;
justify-content:center;
margin-top: 26px;
}
/* Alternating blocks */
.alt{
padding: 0;
}
.alt-grid{
display:grid;
grid-template-columns: 1fr 1fr;
}
.alt-block{
min-height: 360px;
display:flex;
align-items:center;
justify-content:center;
padding: 54px;
}
.alt-block.paper{ background: var(--paper); }
.alt-block.image{
background: #111;
background-position:center;
background-size: cover;
background-repeat: no-repeat;
}
.alt-content{
width: min(430px, 100%);
}
.alt-num{
font-size: 11px;
letter-spacing: .2em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 10px;
}
.alt-title{
font-family: var(--serif);
font-size: 28px;
line-height: 1.15;
margin: 0 0 12px 0;
}
.alt-text{
color: #555;
font-size: 13px;
margin: 0 0 16px 0;
}
.alt-link{
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: #222;
display:inline-flex;
gap: 8px;
align-items:center;
}
.alt-link span{ opacity:.7; }
.alt-link:hover span{ opacity:1; }
/* Features */
.features{
padding: 60px 0 0 0;
}
.feature-band{
background: var(--charcoal);
color: #fff;
padding: 56px 0;
}
.feature-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.feature{
padding: 8px 6px;
}
.feature h3{
font-family: var(--serif);
font-size: 20px;
margin: 0 0 10px 0;
letter-spacing: .02em;
}
.feature p{
margin:0;
font-size: 13px;
color: rgba(255,255,255,.85);
}
.feature .rule{
width: 34px;
height: 1px;
background: rgba(255,255,255,.35);
margin: 18px 0 16px 0;
}
/* Testimonials */
.testimonials{
padding: 70px 0;
}
.test-grid{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 34px;
}
.quote{
background: transparent;
padding: 0;
}
.quote p{
margin:0 0 12px 0;
color:#4a4a4a;
font-size: 13px;
}
.quote .name{
font-size: 12px;
color:#777;
margin-top: 8px;
}
/* CTA band */
.cta{
background: var(--charcoal);
color: #fff;
padding: 70px 0;
text-align:center;
}
.cta h2{
font-family: var(--serif);
font-size: clamp(26px, 3.2vw, 44px);
margin: 0 0 12px 0;
}
.cta p{
margin: 0 auto 22px auto;
max-width: 720px;
color: rgba(255,255,255,.85);
font-size: 13px;
}
/* Footer (optional if you keep Avada footer) */
.footer{
background: #efe7db;
padding: 36px 0;
color:#3b3b3b;
}
.foot-grid{
display:grid;
grid-template-columns: 1.3fr 1fr 1fr 1fr;
gap: 22px;
}
.foot h4{
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
margin: 0 0 10px 0;
opacity: .9;
}
.foot p{
margin:0;
font-size: 12px;
color:#555;
}
.copyright{
text-align:center;
font-size: 12px;
color:#666;
padding: 18px 0 0 0;
}
/* Responsive */
@media (max-width: 980px){
.alt-grid{ grid-template-columns: 1fr; }
.alt-block{ padding: 44px 22px; min-height: 320px; }
.feature-grid{ grid-template-columns: 1fr; gap: 18px; }
.test-grid{ grid-template-columns: 1fr; }
.foot-grid{ grid-template-columns: 1fr; }
.nav{ display:none; } /* keep it simple, Avada header can handle mobile menu */
.hero-inner{ padding: 74px 0; }
}
@media (max-width: 600px){
.hero{ min-height: 60vh; }
.hero-inner{ padding: 64px 0; }
.btn{ width: 100%; max-width: 320px; text-align:center; }
}
</style>
<!-- If you keep Avada header, you can delete this topbar entirely -->
<header class="topbar" aria-label="Site header">
<div class="wrap">
<div class="brand">Bella Luce Boudoir</div>
<nav class="nav" aria-label="Primary">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#offerings">Offerings</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>
<main id="home">
<!-- HERO -->
<section class="hero" aria-label="Hero">
<div class="hero-inner">
<!-- Swap copy to your current content -->
<h1>Every Woman Deserves to Feel Beautiful</h1>
<p>Boudoir for women who have put themselves last for too long - a relaxed, guided experience that helps you see yourself in a new light.</p>
<a class="btn" href="#contact">Book Your Session</a>
</div>
</section>
<!-- WELCOME / INTRO -->
<section class="section" id="about">
<div class="wrap">
<div class="kicker">Welcome</div>
<h2 class="h2">Your Journey to Self-Acceptance</h2>
<p class="lede">
Replace this paragraph with your current homepage intro content. Keep it to 2 to 5 sentences. You can talk about comfort, guidance, privacy, and the "real woman" vibe you’re known for.
</p>
<div class="center-btn">
<a class="btn" href="/about/">Read More</a>
</div>
</div>
</section>
<!-- OFFERINGS (alternating image/paper blocks) -->
<section class="section alt" id="offerings" aria-label="Offerings">
<div class="alt-grid">
<div class="alt-block image" style="background-image:url('https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="alt-block paper">
<div class="alt-content">
<div class="alt-num">01</div>
<h3 class="alt-title">Boudoir Photography Session</h3>
<p class="alt-text">A fully guided session designed to help you feel confident, comfortable, and genuinely you.</p>
<a class="alt-link" href="/portfolio/">
Read More <span>›</span>
</a>
</div>
</div>
<div class="alt-block paper">
<div class="alt-content">
<div class="alt-num">02</div>
<h3 class="alt-title">Glamour Photography Session</h3>
<p class="alt-text">A polished, timeless option that leans classy and elevated while still feeling like you.</p>
<a class="alt-link" href="/offerings/">
Read More <span>›</span>
</a>
</div>
</div>
<div class="alt-block image" style="background-image:url('https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="alt-block image" style="background-image:url('https://images.unsplash.com/photo-1524503033411-f1df0fdbf5f8?auto=format&fit=crop&w=1400&q=70');"></div>
<div class="alt-block paper">
<div class="alt-content">
<div class="alt-num">03</div>
<h3 class="alt-title">Motherhood Sessions</h3>
<p class="alt-text">For the woman who has poured into everyone else and wants photos that feel warm, real, and beautiful.</p>
<a class="alt-link" href="/contact/">
Read More <span>›</span>
</a>
</div>
</div>
</div>
</section>
<!-- STUDIO FEATURES -->
<section class="features" aria-label="Studio features">
<div class="wrap">
<div class="kicker">Facilities and Amenities</div>
<h2 class="h2">Our Boutique Studio Features</h2>
</div>
<div class="feature-band">
<div class="wrap">
<div class="feature-grid">
<div class="feature">
<h3>Comfortable Setting</h3>
<div class="rule"></div>
<p>Relax in a warm, welcoming studio designed for comfort, privacy, and real-life confidence.</p>
</div>
<div class="feature">
<h3>Expert Guidance</h3>
<div class="rule"></div>
<p>You will be coached every step of the way - poses, expression, and flow. No experience needed.</p>
</div>
<div class="feature">
<h3>Pampering Treatment</h3>
<div class="rule"></div>
<p>Optional hair and makeup add-ons to help you feel pulled together without feeling overdone.</p>
</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="testimonials" aria-label="Testimonials">
<div class="wrap">
<div class="kicker">Testimonials</div>
<h2 class="h2">What Our Clients Are Saying</h2>
<div class="test-grid">
<div class="quote">
<p>This experience was life-changing. I felt beautiful and confident the entire time.</p>
<div class="name">- Client Name</div>
</div>
<div class="quote">
<p>I cannot believe how stunning the photos turned out. I finally see myself differently.</p>
<div class="name">- Client Name</div>
</div>
<div class="quote">
<p>The atmosphere was so inviting. I left feeling new confidence I did not expect.</p>
<div class="name">- Client Name</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta" id="contact" aria-label="Call to action">
<div class="wrap">
<h2>Ready to Celebrate Yourself?</h2>
<p>Join me for a boudoir experience that feels comfortable, guided, and genuinely you. Book your session and let’s create images you love.</p>
<a class="btn" href="/contact/">Book Your Session</a>
</div>
</section>
<!-- Footer (optional if you keep Avada footer) -->
<footer class="footer" aria-label="Footer">
<div class="wrap foot-grid">
<div class="foot">
<h4>Our Story</h4>
<p>Bella Luce Boudoir empowers women through authentic, timeless images in a private studio setting.</p>
</div>
<div class="foot">
<h4>Hours</h4>
<p>Mon - Fri: 9 AM - 6 PM<br>Sat: 9 AM - 5 PM<br>Sun: By request</p>
</div>
<div class="foot">
<h4>Location</h4>
<p>Orfordville, WI<br>Serving Southern WI and Northern IL</p>
</div>
<div class="foot">
<h4>Contact</h4>
<p>your@email.com<br>(###) ###-####</p>
</div>
</div>
<div class="wrap copyright">© 2026 Bella Luce Boudoir</div>
</footer>
</main>
Skip to content