ippadmin/mooresunnydaze
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2f744811fc1224576ce752a647146c9302b3e278
mooresunnydaze/mockups/theme-c-coastal-elegant.html
T

600 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moore Sunny Daze — Maravilla 1403</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<style>
/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
font-family:'Inter',-apple-system,sans-serif;
color:#3D4A53;
background:#FBF9F6;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* ── Typography ── */
h1,h2,h3,h4,.serif{font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-0.01em}
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.08;color:#fff}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;color:#2C3E4E;margin-bottom:1.5rem}
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);color:#2C3E4E}
.accent-line{
display:block;
width:60px;height:2px;
background:linear-gradient(90deg,#C5A572 0%,#C5A572 40%,transparent 100%);
margin:0 auto 1.8rem;
}
.accent-line.left{margin:0 0 1.8rem 0}
/* ── Colors ── */
:root{
--dusty-blue:#8BA4BC;
--dusty-blue-dark:#6B8AA0;
--sand:#D4C5B9;
--sand-light:#EAE0D6;
--gold:#C5A572;
--gold-light:#D4B98A;
--cream:#FBF9F6;
--white:#FFFFFF;
--text:#3D4A53;
--text-light:#6B7B86;
}
/* ── Navigation ── */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
padding:1.5rem 3rem;
display:flex;justify-content:space-between;align-items:center;
transition:background 0.4s ease, padding 0.4s ease;
}
.nav.scrolled{
background:rgba(255,255,255,0.95);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
padding:0.8rem 3rem;
box-shadow:0 1px 0 rgba(0,0,0,0.05);
}
.nav-logo{
font-family:'Playfair Display',serif;
font-size:1.4rem;font-weight:600;color:#fff;
letter-spacing:0.04em;
transition:color 0.4s ease;
}
.nav.scrolled .nav-logo{color:#2C3E4E}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{
text-decoration:none;color:rgba(255,255,255,0.85);
font-size:0.85rem;font-weight:400;letter-spacing:0.08em;
text-transform:uppercase;
transition:color 0.3s ease;
}
.nav.scrolled .nav-links a{color:#6B7B86}
.nav-links a:hover{color:#C5A572}
/* ── Sections ── */
section{padding:7rem 2rem}
.section-header{text-align:center;max-width:650px;margin:0 auto 4rem}
.section-header p{color:var(--text-light);font-size:1.05rem;line-height:1.8}
/* ── Hero ── */
.hero{
position:relative;
height:100vh;min-height:650px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.hero-bg{
position:absolute;inset:0;
background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;
will-change:transform;
}
.hero::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(44,62,78,0.35) 0%,rgba(44,62,78,0.15) 60%,rgba(44,62,78,0.4) 100%);
}
.hero-content{
position:relative;z-index:2;
text-align:center;
max-width:800px;
padding:0 1.5rem;
}
.hero-overline{
font-family:'Inter',sans-serif;
font-size:0.8rem;font-weight:500;
letter-spacing:0.25em;text-transform:uppercase;
color:var(--gold-light);
margin-bottom:1.5rem;
}
.hero h1{margin-bottom:1rem}
.hero-subtitle{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.1rem,2vw,1.4rem);
font-style:italic;font-weight:400;
color:rgba(255,255,255,0.85);
margin-bottom:2.5rem;
}
.hero-btn{
display:inline-block;
padding:0.9rem 2.8rem;
border:1.5px solid rgba(255,255,255,0.8);
color:#fff;
text-decoration:none;
font-size:0.85rem;font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
transition:all 0.35s ease;
}
.hero-btn:hover{background:#fff;color:#2C3E4E;border-color:#fff}
/* ── Story / Intro ── */
.story{background:var(--cream)}
.story-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:5rem;
align-items:center;
max-width:1100px;
margin:0 auto;
}
.story-image{
position:relative;
overflow:hidden;
border-radius:2px;
}
.story-image img{
width:100%;height:100%;
object-fit:cover;
display:block;
transition:transform 0.6s ease;
}
.story-image:hover img{transform:scale(1.04)}
.story-text .tag{
display:inline-block;
font-size:0.75rem;font-weight:500;
letter-spacing:0.2em;text-transform:uppercase;
color:var(--gold);
margin-bottom:1rem;
}
.story-text h2{margin-bottom:1rem}
.story-text p{color:var(--text-light);margin-bottom:1.2rem;font-size:1.02rem;line-height:1.85}
/* ── Bedroom Gallery ── */
.gallery{background:var(--white)}
.gallery-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.5rem;
max-width:1150px;
margin:0 auto;
}
.gallery-card{
position:relative;
overflow:hidden;
border-radius:2px;
cursor:pointer;
aspect-ratio:4/5;
}
.gallery-card img{
width:100%;height:100%;
object-fit:cover;
display:block;
transition:transform 0.6s ease;
}
.gallery-card:hover img{transform:scale(1.06)}
.gallery-card .overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 40%,rgba(44,62,78,0.7) 100%);
display:flex;flex-direction:column;justify-content:flex-end;
padding:1.8rem;
transition:opacity 0.35s ease;
}
.gallery-card .room-name{
font-family:'Playfair Display',serif;
font-size:1.3rem;color:#fff;font-weight:500;
}
.gallery-card .room-detail{
font-family:'Inter',sans-serif;
font-size:0.8rem;color:rgba(255,255,255,0.75);
margin-top:0.3rem;letter-spacing:0.05em;
}
/* ── Amenities ── */
.amenities{background:var(--cream)}
.amenities-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:2.5rem;
max-width:1050px;
margin:0 auto;
}
.amenity-item{text-align:center}
.amenity-icon{
width:56px;height:56px;
margin:0 auto 1.2rem;
display:flex;align-items:center;justify-content:center;
opacity:0.7;
}
.amenity-icon svg{width:36px;height:36px;stroke:var(--dusty-blue)}
.amenity-item h4{
font-family:'Playfair Display',serif;
font-size:1.05rem;font-weight:500;
color:#2C3E4E;
margin-bottom:0.4rem;
}
.amenity-item p{
font-size:0.85rem;color:var(--text-light);
line-height:1.5;
}
/* ── Area Highlights ── */
.area{background:var(--white)}
.area-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2rem;
max-width:1100px;
margin:0 auto;
}
.area-card{
background:var(--cream);
padding:2.2rem 2rem;
border-radius:2px;
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.area-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 40px rgba(0,0,0,0.06);
}
.area-card .cat{
font-size:0.72rem;font-weight:500;
letter-spacing:0.18em;text-transform:uppercase;
color:var(--gold);
margin-bottom:0.8rem;
}
.area-card h4{
font-family:'Playfair Display',serif;
font-size:1.25rem;margin-bottom:0.8rem;
}
.area-card p{
font-size:0.9rem;color:var(--text-light);
line-height:1.7;
}
/* ── Booking CTA ── */
.cta{
position:relative;
padding:8rem 2rem;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.cta-bg{
position:absolute;inset:0;
background:url('https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg') center/cover no-repeat;
will-change:transform;
}
.cta::after{
content:'';position:absolute;inset:0;
background:rgba(44,62,78,0.55);
}
.cta-content{
position:relative;z-index:2;
text-align:center;
max-width:650px;
}
.cta-content h2{color:#fff;margin-bottom:1rem}
.cta-content p{color:rgba(255,255,255,0.8);font-size:1.1rem;line-height:1.8;margin-bottom:2.5rem}
.cta-btn{
display:inline-block;
padding:1rem 3rem;
background:var(--gold);
color:#fff;
text-decoration:none;
font-size:0.85rem;font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
border-radius:2px;
transition:all 0.35s ease;
}
.cta-btn:hover{background:#B8955F;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
/* ── Footer ── */
.footer{
background:#2C3E4E;
color:rgba(255,255,255,0.7);
padding:4rem 2rem 2.5rem;
text-align:center;
}
.footer-owners{
width:90px;height:90px;
border-radius:50%;
object-fit:cover;
margin:0 auto 1.5rem;
border:2px solid rgba(255,255,255,0.15);
}
.footer h3{color:#fff;font-size:1.4rem;margin-bottom:0.3rem}
.footer .byline{font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:2rem}
.footer-info{font-size:0.85rem;line-height:1.8;margin-bottom:2rem}
.footer-bottom{
border-top:1px solid rgba(255,255,255,0.08);
padding-top:1.5rem;
font-size:0.78rem;color:rgba(255,255,255,0.35);
}
/* ── Fade-in Animations ── */
.fade-in{
opacity:0;
transform:translateY(40px);
transition:opacity 0.8s ease,transform 0.8s ease;
}
.fade-in.visible{opacity:1;transform:translateY(0)}
.fade-in-delay-1{transition-delay:0.15s}
.fade-in-delay-2{transition-delay:0.3s}
.fade-in-delay-3{transition-delay:0.45s}
/* ── Mobile Nav Toggle ── */
.mobile-toggle{
display:none;
background:none;border:none;
cursor:pointer;
padding:0.5rem;
}
.mobile-toggle span{
display:block;
width:24px;height:2px;
background:#fff;
margin:5px 0;
transition:all 0.3s ease;
}
.nav.scrolled .mobile-toggle span{background:#2C3E4E}
/* ── Responsive ── */
@media(max-width:900px){
.nav{padding:1.2rem 1.5rem}
.nav.scrolled{padding:0.7rem 1.5rem}
.nav-links{display:none}
.mobile-toggle{display:block}
section{padding:4rem 1.2rem}
.story-grid{grid-template-columns:1fr;gap:2.5rem}
.gallery-grid{grid-template-columns:1fr 1fr}
.amenities-grid{grid-template-columns:1fr 1fr;gap:2rem}
.area-grid{grid-template-columns:1fr;max-width:500px}
.hero{min-height:500px}
}
@media(max-width:520px){
.gallery-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
.amenities-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
.hero h1{font-size:2rem}
.hero-subtitle{font-size:1rem}
h2{font-size:1.5rem}
section{padding:3rem 1rem}
}
</style>
</head>
<body>
<!-- ── Navigation ── -->
<nav class="nav" id="nav">
<a href="#" class="nav-logo">Moore Sunny Daze</a>
<ul class="nav-links">
<li><a href="#story">The Property</a></li>
<li><a href="#gallery">Rooms</a></li>
<li><a href="#amenities">Amenities</a></li>
<li><a href="#area">Explore</a></li>
<li><a href="#cta">Book</a></li>
</ul>
<button class="mobile-toggle" id="mobileToggle" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</nav>
<!-- ── Hero ── -->
<section class="hero" id="home">
<div class="hero-bg" id="heroBg"></div>
<div class="hero-content fade-in" id="heroContent">
<p class="hero-overline">Maravilla 1403 · Miramar Beach, Florida</p>
<h1>Moore<br>Sunny Daze</h1>
<p class="hero-subtitle">A refined coastal retreat on the sugar-white shores of the Emerald Coast</p>
<a href="#cta" class="hero-btn">Reserve Your Stay</a>
</div>
</section>
<!-- ── Story ── -->
<section class="story" id="story">
<div class="section-header fade-in">
<span class="accent-line"></span>
<h2>Where the Gulf Meets Grace</h2>
<p>Nestled within the gated enclave of Maravilla, this thoughtfully appointed three-bedroom retreat offers the rare combination of privacy, comfort, and effortless access to Miramar Beach's celebrated shoreline.</p>
</div>
<div class="story-grid">
<div class="story-image fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Moore Sunny Daze living room" loading="lazy">
</div>
<div class="story-text fade-in fade-in-delay-1">
<span class="tag">The Property</span>
<p>Perched on the 14th floor, Moore Sunny Daze captures panoramic Gulf views from every angle. Wake to the sound of waves, sip coffee on your private balcony, and let the rhythm of the coast set the pace. With three bedrooms, two full baths, and accommodations for eight, this is sanctuary redefined — where every detail has been curated for the discerning traveler.</p>
<p>Step beyond your door to discover 2.5 acres of pristine private beach, two resort-style pools (one heated seasonally), and the warm hospitality that Miramar Beach is known for. This is more than a rental — it's your home on the Gulf.</p>
<p style="font-style:italic;color:#8BA4BC;">— Tim &amp; Ashley Moore, Owners</p>
</div>
</div>
</section>
<!-- ── Bedroom Gallery ── -->
<section class="gallery" id="gallery">
<div class="section-header fade-in">
<span class="accent-line"></span>
<h2>Restful Interiors</h2>
<p>Each sleeping space is designed for comfort and tranquility — premium linens, thoughtful touches, and the kind of quiet that invites deep rest.</p>
</div>
<div class="gallery-grid">
<div class="gallery-card fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary bedroom with king bed" loading="lazy">
<div class="overlay">
<span class="room-name">Primary Suite</span>
<span class="room-detail">King Bed · En-Suite Bath · Balcony Access</span>
</div>
</div>
<div class="gallery-card fade-in fade-in-delay-1">
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy">
<div class="overlay">
<span class="room-name">Gourmet Kitchen</span>
<span class="room-detail">Fully Equipped · Open Plan · Gulf Views</span>
</div>
</div>
<div class="gallery-card fade-in fade-in-delay-2">
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
<div class="overlay">
<span class="room-name">Bunk Room</span>
<span class="room-detail">Twin Bunks · Shared Bath · Coastal Charm</span>
</div>
</div>
</div>
<div style="max-width:1150px;margin:2rem auto 0;text-align:center" class="fade-in">
<p style="color:var(--text-light);font-size:0.95rem;">
<strong style="color:#2C3E4E;">Sleeping Arrangements:</strong> Primary Suite — King with en-suite · Guest Room — King with direct bath access · Bunk Room — Twin bunks · Living Room — Queen sleeper sofa
</p>
</div>
</section>
<!-- ── Amenities ── -->
<section class="amenities" id="amenities">
<div class="section-header fade-in">
<span class="accent-line"></span>
<h2>Thoughtful Amenities</h2>
<p>Every detail has been considered for an effortless stay — from beach service to resort recreation.</p>
</div>
<div class="amenities-grid">
<div class="amenity-item fade-in">
<div class="amenity-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M2 20h20M5 12l-1 8M12 4l-1 16M19 8l-1 12"/></svg>
</div>
<h4>Private Beach</h4>
<p>2.5 acres of sugar-white sand, exclusive to Maravilla guests</p>
</div>
<div class="amenity-item fade-in fade-in-delay-1">
<div class="amenity-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><rect x="2" y="4" width="20" height="16" rx="1"/><circle cx="12" cy="12" r="3"/></svg>
</div>
<h4>Beach Service</h4>
<p>4 chairs + 2 umbrellas included mid-March through late October</p>
</div>
<div class="amenity-item fade-in fade-in-delay-2">
<div class="amenity-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M6 9h12M6 13h12M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"/></svg>
</div>
<h4>Two Pools</h4>
<p>Resort-style pools with one heated in winter, plus hot tub</p>
</div>
<div class="amenity-item fade-in fade-in-delay-3">
<div class="amenity-icon">
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
</div>
<h4>Sports &amp; Rec</h4>
<p>Tennis, pickleball, basketball court, BBQ grills, fitness center</p>
</div>
</div>
</section>
<!-- ── Area Highlights ── -->
<section class="area" id="area">
<div class="section-header fade-in">
<span class="accent-line"></span>
<h2>Explore the Emerald Coast</h2>
<p>Miramar Beach sits at the heart of it all — between Destin Harbor and iconic 30A, with world-class dining and shopping within minutes.</p>
</div>
<div class="area-grid">
<div class="area-card fade-in">
<span class="cat">Dining</span>
<h4>Coastal Flavors</h4>
<p>Pompano Joe's for beachfront seafood, Captain Dave's for Gulf-to-table fare, Bijoux for New Orleans-inspired fine dining, and Mama Clemenza's for Italian breakfast.</p>
</div>
<div class="area-card fade-in fade-in-delay-1">
<span class="cat">Shopping</span>
<h4>Grand Boulevard</h4>
<p>An upscale open-air district with Vin'Tij Food &amp; Wine, Tommy Bahama Restaurant, and boutique shopping. Silver Sands Premium Outlets just minutes away.</p>
</div>
<div class="area-card fade-in fade-in-delay-2">
<span class="cat">Beyond the Beach</span>
<h4>Adventures Await</h4>
<p>Drive the scenic 30A through Seaside and Rosemary Beach, explore Destin Harbor's fishing fleet, or simply stroll James Lee Beach at sunset.</p>
</div>
</div>
</section>
<!-- ── Booking CTA ── -->
<section class="cta" id="cta">
<div class="cta-bg" id="ctaBg"></div>
<div class="cta-content fade-in">
<span class="accent-line" style="margin:0 auto 1.8rem"></span>
<h2>Begin Your Stay</h2>
<p>A limited number of dates remain for the coming season. Three-night minimum · Beach service included · Dog friendly upon request. Secure your reservation today.</p>
<a href="https://www.vrbo.com/1313017" class="cta-btn" target="_blank" rel="noopener">View Availability</a>
</div>
</section>
<!-- ── Footer ── -->
<footer class="footer">
<img class="footer-owners" src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim &amp; Ashley Moore" loading="lazy">
<h3>Tim &amp; Ashley Moore</h3>
<p class="byline">Your Hosts at Moore Sunny Daze</p>
<p class="footer-info">
Maravilla 1403 · Miramar Beach, FL 32550<br>
3 Bedrooms · 2 Bathrooms · Sleeps 8<br>
Gated Community · 2.5 Acres Private Beach
</p>
<p class="footer-bottom">
&copy; 2026 Moore Sunny Daze. All rights reserved. Designed with love on the Emerald Coast.
</p>
</footer>
<!-- ── Scripts ── -->
<script>
// Parallax
(function(){
const heroBg=document.getElementById('heroBg'),
ctaBg=document.getElementById('ctaBg'),
heroContent=document.getElementById('heroContent');
function parallax(){
const sy=window.scrollY;
if(heroBg)heroBg.style.transform='translateY('+(sy*0.35)+'px)';
if(ctaBg)ctaBg.style.transform='translateY('+((sy-ctaBg.parentElement.offsetTop)*0.25)+'px)';
}
window.addEventListener('scroll',parallax,{passive:true});
parallax();
// Nav scroll effect
const nav=document.getElementById('nav');
window.addEventListener('scroll',function(){
nav.classList.toggle('scrolled',window.scrollY>60);
});
// Fade-in on scroll
const faders=document.querySelectorAll('.fade-in');
const observer=new IntersectionObserver(function(entries){
entries.forEach(function(entry){
if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target);}
});
},{threshold:0.15,rootMargin:'0px 0px -40px 0px'});
faders.forEach(function(el){observer.observe(el);});
// Trigger hero content visible immediately
if(heroContent)heroContent.classList.add('visible');
// Mobile toggle placeholder
document.getElementById('mobileToggle').addEventListener('click',function(){
// Placeholder for mobile menu expansion
this.classList.toggle('open');
});
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink