<!DOCTYPE html>
<html>
<head>
<title>TERRA — Luxury Nature Retreat Template</title>
</head>
<body>

<div class="terra" id="top">
  <header class="site-header" id="header">
    <a class="logo" href="#top">TERRA<span>✳</span></a>
    <nav class="nav" id="nav">
      <a href="#story">Our Story</a>
      <a href="#stays">The Stays</a>
      <a href="#experience">Experiences</a>
      <a href="#gallery">Gallery</a>
    </nav>
    <a class="header-book" href="#contact">Plan your stay <span>↗</span></a>
    <button class="menu-btn" id="menuBtn" aria-label="Toggle navigation" aria-expanded="false">☰</button>
  </header>

<main>
    <section class="hero">
      <div class="hero-bg" id="heroBg"></div>
      <div class="hero-shade"></div>
      <div class="hero-content">
        <div class="hero-kicker"><span class="tiny-line"></span> A DIFFERENT KIND OF ESCAPE</div>
        <h1>Find your<br><em>own</em> rhythm<span>.</span></h1>
        <p>Where the world slows down, nature takes over, and every moment feels like it belongs to you.</p>
        <a class="pill light-pill" href="#stays">Explore our retreats <span>↗</span></a>
      </div>
      <div class="hero-bottom">
        <span>01 / 05 — THE ART OF SLOW LIVING</span>
        <a href="#story">SCROLL TO EXPLORE <span>↓</span></a>
        <span>35° NORTH · SOMEWHERE BEAUTIFUL</span>
      </div>
    </section>

<section class="booking-bar" aria-label="Stay planner">
      <div class="booking-item">
        <span>CHECK IN</span>
        <input id="checkin" type="date" aria-label="Check in date">
      </div>
      <div class="booking-item">
        <span>CHECK OUT</span>
        <input id="checkout" type="date" aria-label="Check out date">
      </div>
      <div class="booking-item">
        <span>GUESTS</span>
        <select id="guests" aria-label="Number of guests">
          <option value="1">1 Guest</option>
          <option value="2" selected>2 Guests</option>
          <option value="3">3 Guests</option>
          <option value="4">4 Guests</option>
        </select>
      </div>
      <button class="availability-btn" id="availabilityBtn">EXPLORE AVAILABILITY ↗</button>
    </section>

<section class="intro section-pad" id="story">
      <div class="section-label"><span>01 / OUR PHILOSOPHY</span><span>ROOTED IN NATURE</span></div>
      <div class="intro-layout">
        <div class="intro-title">
          <h2>Less noise.<br>More <em>meaning.</em></h2>
          <div class="decorative-flower">✳</div>
        </div>
        <div class="intro-copy">
          <p>Some places ask you to do more. We invite you to do less.</p>
          <p>Tucked away from the everyday, Terra is a collection of thoughtfully imagined retreats where architecture, nature, and the simple pleasures of living come together.</p>
          <a class="text-link" href="#experience">Discover the Terra philosophy ↗</a>
        </div>
      </div>
      <div class="intro-images">
        <div class="intro-img-large"><img loading="lazy" src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?w=1200&auto=format&fit=crop&q=85" alt="Warm modern interior"></div>
        <div class="intro-img-small"><img loading="lazy" src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=700&auto=format&fit=crop&q=85" alt="Sunlit green forest"><span>NATURE IS THE ULTIMATE LUXURY.</span></div>
      </div>
    </section>

<section class="immersive">
      <div class="immersive-bg"></div>
      <div class="immersive-overlay"></div>
      <div class="immersive-content">
        <span class="eyebrow">A MOMENT TO REMEMBER</span>
        <h2>Stay close<br>to <em>what matters.</em></h2>
        <p>Wake to the sound of the forest. Wander without a destination. Rediscover the beauty of doing absolutely nothing.</p>
        <a href="#stays" class="outline-pill">Find your sanctuary ↗</a>
      </div>
      <span class="image-caption">THE WORLD CAN WAIT / TERRA</span>
    </section>

<section class="stays section-pad" id="stays">
      <div class="section-label"><span>02 / THE COLLECTION</span><span>SPACES TO CALL YOUR OWN</span></div>
      <div class="section-heading"><h2>Beautifully<br><em>unhurried.</em></h2><p>Considered spaces, extraordinary surroundings, and the freedom to simply be.</p></div>
      <div class="stay-grid">
        <article class="stay-card">
          <div class="stay-photo"><img loading="lazy" src="https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?w=1100&auto=format&fit=crop&q=85" alt="Woodland retreat cabin"><span class="stay-number">01 / THE FOREST</span></div>
          <div class="stay-info"><div><h3>Woodland House</h3><p>Quiet mornings. Endless green.</p></div><a href="#contact" aria-label="Explore Woodland House">↗</a></div>
        </article>
        <article class="stay-card">
          <div class="stay-photo"><img loading="lazy" src="https://images.unsplash.com/photo-1611892440504-42a792e24d32?w=1100&auto=format&fit=crop&q=85" alt="Luxury suite"><span class="stay-number">02 / THE HIDEAWAY</span></div>
          <div class="stay-info"><div><h3>The Hideaway Suite</h3><p>A little luxury, a lot of calm.</p></div><a href="#contact" aria-label="Explore Hideaway Suite">↗</a></div>
        </article>
        <article class="stay-card">
          <div class="stay-photo"><img loading="lazy" src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1100&auto=format&fit=crop&q=85" alt="Earth-toned luxury residence"><span class="stay-number">03 / THE RESIDENCE</span></div>
          <div class="stay-info"><div><h3>Earth & Ember</h3><p>Space to breathe. Room to dream.</p></div><a href="#contact" aria-label="Explore Earth and Ember">↗</a></div>
        </article>
      </div>
    </section>

<section class="experience" id="experience">
      <div class="experience-image"><img loading="lazy" src="https://images.unsplash.com/photo-1470252649378-9c29740c9fa8?w=1400&auto=format&fit=crop&q=85" alt="Golden light over natural landscape"></div>
      <div class="experience-text">
        <span class="eyebrow">03 / THE EXPERIENCE</span>
        <h2>The luxury<br>of <em>slowing<br>down.</em></h2>
        <p>We believe the most meaningful experiences are often the simplest ones. A sunrise. A quiet walk. A meal shared slowly.</p>
        <div class="experience-list">
          <div><span>01</span><strong>Reconnect with nature</strong><span>↗</span></div>
          <div><span>02</span><strong>Find your balance</strong><span>↗</span></div>
          <div><span>03</span><strong>Savor every moment</strong><span>↗</span></div>
        </div>
      </div>
    </section>

<section class="quote-section">
      <span class="eyebrow">A DIFFERENT PERSPECTIVE</span>
      <blockquote>“The best things in life<br>aren't things. They're <em>moments.</em>”</blockquote>
      <span class="quote-flower">✳</span>
    </section>

<section class="gallery section-pad" id="gallery">
      <div class="section-label"><span>04 / THE JOURNAL</span><span>POSTCARDS FROM TERRA</span></div>
      <div class="section-heading"><h2>Life, in its<br><em>natural state.</em></h2><p>A glimpse into the moments that make a place unforgettable.</p></div>
      <div class="gallery-grid">
        <div class="gallery-img tall"><img loading="lazy" src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=900&auto=format&fit=crop" alt="Forest landscape"></div>
        <div class="gallery-img"><img loading="lazy" src="https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=900&auto=format&fit=crop" alt="Wellness spa"></div>
        <div class="gallery-img"><img loading="lazy" src="https://images.unsplash.com/photo-1510798831971-661eb04b3739?w=900&auto=format&fit=crop" alt="Cabin in nature"></div>
        <div class="gallery-img wide"><img loading="lazy" src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=1300&auto=format&fit=crop" alt="Peaceful mountain lake"></div>
      </div>
    </section>

<section class="closing-hero" id="contact">
      <div class="closing-bg"></div>
      <div class="closing-shade"></div>
      <div class="closing-content">
        <span class="eyebrow">YOUR NEXT CHAPTER BEGINS HERE</span>
        <h2>Somewhere<br><em>you belong.</em></h2>
        <p>Take the scenic route. Stay a little longer. Find your place in the world.</p>
        <a href="mailto:hello@example.com?subject=Terra%20Retreat%20Inquiry" class="pill light-pill" id="inquiryLink">Enquire about a stay ↗</a>
      </div>
    </section>
  </main>

<footer>
    <div class="footer-main"><div><a class="footer-logo" href="#top">TERRA✳</a><p>A collection of spaces for a slower, more meaningful way of living.</p></div><div class="footer-links"><a href="#story">Our Story</a><a href="#stays">The Stays</a><a href="#experience">Experiences</a><a href="#gallery">Gallery</a></div><div class="footer-news"><span>LET'S STAY IN TOUCH</span><p>Good things are worth sharing.</p><form id="newsletter"><input type="email" placeholder="Your email address" aria-label="Email address" required><button type="submit" aria-label="Join mailing list">↗</button></form><small id="newsletterMessage" aria-live="polite"></small></div></div>
    <div class="footer-bottom"><span>© 2026 TERRA — CONCEPT TEMPLATE</span><span>IMAGINED WITH INTENTION</span><a href="#top">BACK TO TOP ↑</a></div>
  </footer>
</div>

</body>
</html>

:root{--brown:#38271e;--dark:#261b16;--coffee:#654b3a;--cream:#f3eee5;--sand:#e3d6c5;--tan:#c2a687;--white:#fffaf2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--brown);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p,blockquote{margin:0}
h1,h2,h3{font-family:"Playfair Display",serif;font-weight:400;letter-spacing:-.045em}
em{font-weight:400}
.terra{overflow:hidden}
.site-header{height:95px;position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 5%;color:white;transition:background .3s}
.site-header.scrolled{position:fixed;background:rgba(38,27,22,.96);height:75px;box-shadow:0 6px 25px #0002}
.logo{font-family:Manrope;font-size:27px;font-weight:800;letter-spacing:.12em}
.logo span{font-size:19px;margin-left:5px;color:var(--tan)}
.nav{display:flex;gap:38px;font-size:12px;font-weight:600}
.nav a{transition:color .3s}
.nav a:hover{color:var(--tan)}
.header-book{border:1px solid #ffffff80;border-radius:50px;padding:13px 22px;font-size:12px;font-weight:700}
.header-book span{margin-left:22px}
.header-book:hover{background:white;color:var(--brown)}
.menu-btn{display:none;background:none;border:0;color:white;font-size:26px}
.hero{height:100vh;min-height:650px;position:relative;color:white;display:flex;align-items:center}
.hero-bg,.hero-shade,.immersive-bg,.immersive-overlay,.closing-bg,.closing-shade{position:absolute;inset:0}
.hero-bg{background:url("https://images.unsplash.com/photo-1448375240586-882707db888b?w=2000&auto=format&fit=crop&q=90") center/cover no-repeat;transform:scale(1.06);will-change:transform}
.hero-shade{background:linear-gradient(90deg,rgba(26,18,13,.76),rgba(26,18,13,.23) 75%),linear-gradient(0deg,#1d160e80,transparent 30%)}
.hero-content{position:relative;z-index:2;padding:100px 8% 50px;max-width:1050px}
.hero-kicker,.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em}
.tiny-line{display:inline-block;width:28px;height:1px;background:white;vertical-align:middle;margin-right:12px}
.hero h1{font-size:clamp(80px,10vw,170px);line-height:1.05;margin:35px 0 28px}
.hero h1 em{color:#e8d3b6}
.hero h1>span{color:#c6a17b}
.hero-content p{font-size:17px;line-height:1.8;max-width:470px;color:#f0e7db}
.pill{display:inline-flex;align-items:center;gap:40px;border-radius:40px;padding:18px 28px;font-size:12px;font-weight:700;transition:.3s;margin-top:35px}
.light-pill{background:var(--cream);color:var(--brown)}
.pill:hover{background:var(--tan);transform:translateY(-3px)}
.hero-bottom{position:absolute;z-index:2;bottom:32px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.13em}
.hero-bottom a span{margin-left:12px}
.booking-bar{position:relative;z-index:5;background:var(--white);display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr;align-items:stretch;max-width:1150px;margin:-1px auto 0;box-shadow:0 15px 45px #28190d18}
.booking-item{padding:28px 25px;border-right:1px solid #e1d8cd;display:flex;flex-direction:column;gap:12px}
.booking-item>span{font-size:10px;letter-spacing:.13em;font-weight:800}
.booking-item input,.booking-item select{border:0;outline:none;background:transparent;color:var(--coffee);font-size:14px;width:100%;min-width:0}
.availability-btn{border:0;background:var(--brown);color:white;font-size:11px;letter-spacing:.08em;font-weight:700;padding:25px 15px;transition:.3s}
.availability-btn:hover{background:#79563c}
.section-pad{padding:120px 7%}
.section-label{display:flex;justify-content:space-between;border-bottom:1px solid #d7c9b8;padding-bottom:22px;font-size:10px;font-weight:700;letter-spacing:.14em}
.intro-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:12%;padding:80px 0}
.intro h2,.section-heading h2{font-size:clamp(65px,7vw,110px);line-height:1.15}
.intro h2 em,.section-heading h2 em{color:#99775b}
.decorative-flower{font-size:90px;color:#ac8d6e;margin-top:40px}
.intro-copy{padding-top:15px}
.intro-copy p:first-child{font-family:"Playfair Display";font-size:29px;line-height:1.4;margin-bottom:25px}
.intro-copy p:nth-child(2){font-size:15px;line-height:1.9;color:#7d6b5e}
.text-link{display:inline-block;border-bottom:1px solid var(--brown);padding-bottom:12px;margin-top:30px;font-size:12px;font-weight:700}
.intro-images{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:end}
.intro-img-large{height:560px;overflow:hidden}
.intro-img-small{height:370px;position:relative}
.intro-img-small span{position:absolute;bottom:-30px;left:0;font-size:10px;font-weight:700;letter-spacing:.12em}
.immersive{height:800px;position:relative;color:white;display:flex;align-items:center;justify-content:center;text-align:center}
.immersive-bg{background:url("https://images.unsplash.com/photo-1470770841072-f978cf4d019e?w=2000&auto=format&fit=crop&q=90") center/cover no-repeat}
.immersive-overlay{background:#1a1812a0}
.immersive-content{position:relative;z-index:2;padding:30px}
.immersive h2{font-size:clamp(65px,8vw,130px);line-height:1.13;margin:35px 0}
.immersive h2 em{color:#e9d1ae}
.immersive p{max-width:520px;margin:auto;font-size:16px;line-height:1.8}
.outline-pill{display:inline-block;border:1px solid #fff9;border-radius:40px;padding:17px 30px;margin-top:35px;font-size:12px;font-weight:700;transition:.3s}
.outline-pill:hover{background:white;color:var(--brown)}
.image-caption{position:absolute;bottom:35px;right:5%;font-size:10px;letter-spacing:.1em}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:65px 0}
.section-heading p{max-width:300px;line-height:1.8;color:#7d6b5e;font-size:15px}
.stay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.stay-photo{height:420px;position:relative;overflow:hidden}
.stay-photo img,.gallery-img img{transition:transform .7s}
.stay-card:hover img,.gallery-img:hover img{transform:scale(1.06)}
.stay-number{position:absolute;bottom:20px;left:20px;background:var(--cream);padding:12px 15px;font-size:10px;font-weight:700;letter-spacing:.08em}
.stay-info{display:flex;justify-content:space-between;align-items:center;padding-top:22px}
.stay-info h3{font-size:29px}
.stay-info p{font-size:13px;color:#8a7564;margin-top:8px}
.stay-info a{border:1px solid #b9a794;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:21px}
.stay-info a:hover{background:var(--brown);color:white}
.experience{display:grid;grid-template-columns:1fr 1fr;min-height:700px;background:var(--brown);color:var(--cream)}
.experience-image{overflow:hidden}
.experience-text{padding:100px 10%;display:flex;flex-direction:column;justify-content:center}
.experience h2{font-size:clamp(60px,6vw,100px);line-height:1.15;margin:40px 0}
.experience h2 em{color:#d0af8b}
.experience-text>p{font-size:15px;line-height:1.9;color:#cdbfb2;max-width:430px}
.experience-list{margin-top:55px}
.experience-list>div{display:grid;grid-template-columns:35px 1fr 25px;gap:15px;align-items:center;border-top:1px solid #ffffff38;padding:23px 0}
.experience-list>div:last-child{border-bottom:1px solid #ffffff38}
.experience-list span{font-size:12px}
.experience-list strong{font-size:15px;font-weight:500}
.quote-section{background:#d9c8b2;text-align:center;padding:125px 5%;position:relative}
.quote-section blockquote{font-family:"Playfair Display";font-size:clamp(35px,5.2vw,80px);line-height:1.4;margin:40px 0}
.quote-section blockquote em{color:#8c654a}
.quote-flower{font-size:60px;color:#9a7658}
.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:270px 270px;gap:18px}
.gallery-img{overflow:hidden}
.gallery-img.tall{grid-row:span 2}
.gallery-img.wide{grid-column:span 2}
.closing-hero{height:750px;position:relative;color:white;display:flex;align-items:center;justify-content:center;text-align:center}
.closing-bg{background:url("https://images.unsplash.com/photo-1510798831971-661eb04b3739?w=2000&auto=format&fit=crop&q=90") center/cover no-repeat}
.closing-shade{background:#1d140fb0}
.closing-content{position:relative;z-index:2;padding:25px}
.closing-content h2{font-size:clamp(75px,10vw,160px);line-height:1.1;margin:35px 0}
.closing-content h2 em{color:#ead2b2}
.closing-content p{font-size:17px;line-height:1.7}
footer{background:var(--dark);color:var(--cream);padding:80px 7% 30px}
.footer-main{display:grid;grid-template-columns:1.1fr .7fr 1fr;gap:60px}
.footer-logo{font-family:Manrope;font-weight:800;font-size:45px;letter-spacing:.1em}
.footer-main p{font-size:14px;line-height:1.8;color:#b8a89a;margin-top:20px;max-width:300px}
.footer-links{display:flex;flex-direction:column;gap:18px;font-size:13px}
.footer-news>span{font-size:11px;letter-spacing:.12em}
.footer-news form{display:flex;border-bottom:1px solid #9b897a;margin-top:25px}
.footer-news input{background:transparent;border:0;outline:none;color:white;padding:15px 0;width:100%;min-width:0}
.footer-news button{background:none;color:white;border:0;font-size:25px}
.footer-news small{display:block;margin-top:12px;color:#c8b8a7}
.footer-bottom{border-top:1px solid #55463c;margin-top:80px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;color:#a99686}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(max-width:950px){
.nav{gap:18px}
.intro-layout{gap:6%}
.stay-photo{height:320px}
.experience-text{padding:70px 7%}
}
@media(max-width:700px){
.site-header{height:75px}
.nav{display:none;position:absolute;top:75px;left:0;right:0;background:var(--dark);padding:30px 7%;flex-direction:column;z-index:30}
.nav.open{display:flex}
.site-header.scrolled .nav{top:75px}
.header-book{margin-left:auto;padding:11px 14px}
.header-book span{margin-left:5px}
.menu-btn{display:block}
.hero{min-height:680px;height:100svh}
.hero-content{padding:80px 7% 40px}
.hero h1{font-size:clamp(66px,13vw,100px)}
.hero-content p{font-size:15px}
.hero-bottom span:last-child{display:none}
.booking-bar{grid-template-columns:1fr 1fr}
.booking-item{padding:20px 15px}
.booking-item:nth-child(2){border-right:0}
.availability-btn{padding:20px 10px;font-size:10px}
.section-pad{padding:80px 6%}
.intro-layout{grid-template-columns:1fr;padding:50px 0;gap:25px}
.intro h2,.section-heading h2{font-size:clamp(55px,11vw,80px)}
.decorative-flower{font-size:55px;margin-top:20px}
.intro-copy p:first-child{font-size:25px}
.intro-images{grid-template-columns:1fr 1fr;gap:12px}
.intro-img-large{height:340px}
.intro-img-small{height:240px}
.intro-img-small span{font-size:8px}
.immersive{height:650px}
.immersive h2{font-size:12vw}
.section-heading{flex-direction:column;align-items:flex-start;gap:20px}
.stay-grid{grid-template-columns:1fr;gap:45px}
.stay-photo{height:440px}
.experience{grid-template-columns:1fr}
.experience-image{height:380px}
.experience-text{padding:70px 6%}
.experience h2{font-size:65px}
.quote-section{padding:90px 6%}
.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:220px 220px 220px}
.gallery-img.tall{grid-row:span 2}
.gallery-img.wide{grid-column:span 2}
.closing-hero{height:650px}
.closing-content h2{font-size:13vw}
.footer-main{grid-template-columns:1fr;gap:45px}
.footer-bottom{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
.hero-bg{transform:none!important}
}

.reveal {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .nav {
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: column;
  }

.menu-btn {
    display: none;
  }
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground