<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>The Perfect Home | Premium Layout</title>
<!– Fonts for Luxury Look –>
<link href=”https://fonts.googleapis.com” rel=”stylesheet”>
<style>
:root {
–bg-color: #cfd3ce;
–dark-text: #1a1a1a;
–accent-brown: #a68b75;
–white-glass: rgba(255, 255, 255, 0.95);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Plus Jakarta Sans’, sans-serif;
}
body {
background-color: var(–bg-color);
background-image: linear-gradient(rgba(207, 211, 206, 0.6), rgba(207, 211, 206, 0.6)),
url(‘https://images.unsplash.com’);
background-size: cover;
background-position: center bottom;
background-attachment: fixed;
color: var(–dark-text);
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Navbar */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 35px 80px;
}
.logo { font-size: 22px; font-weight: 800; letter-spacing: 2px; }
.nav-links { display: flex; list-style: none; gap: 40px; }
.nav-links a { text-decoration: none; color: var(–dark-text); font-size: 14px; font-weight: 600; opacity: 0.8; }
.contact-btn { background: var(–dark-text); color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-size: 12px; font-weight: 700; }
/* Hero Section */
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 60px 100px;
flex: 1;
}
.hero-left { max-width: 500px; }
.hero-left h1 {
font-family: ‘Playfair Display’, serif;
font-size: clamp(50px, 8vw, 85px);
line-height: 0.9;
font-weight: 900;
margin-bottom: 25px;
text-transform: uppercase;
}
.sub-heading { font-size: 18px; color: #555; margin-bottom: 45px; font-style: italic; opacity: 0.9; }
.start-btn { background: #353430; color: white; padding: 18px 55px; border-radius: 50px; text-decoration: none; font-weight: 700; letter-spacing: 1px; transition: 0.3s; }
.start-btn:hover { background: #000; transform: scale(1.05); }
/* Visual Area (White Card + Video Badge) */
.hero-right {
position: relative;
width: 550px;
height: 450px;
}
.white-card {
background: var(–white-glass);
backdrop-filter: blur(15px);
border-radius: 45px;
padding: 55px;
width: 100%;
height: 100%;
box-shadow: 0 40px 100px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
justify-content: center;
}
.tags { display: flex; gap: 12px; margin-bottom: 30px; }
.tag { border: 1px solid #ddd; padding: 6px 20px; border-radius: 25px; font-size: 12px; font-weight: 700; color: #666; }
.tag.active { background: #1a1a1a; color: #fff; border: none; }
.white-card h2 { font-size: 38px; font-weight: 700; line-height: 1.2; margin-bottom: 12px; }
.white-card p { color: #888; font-size: 15px; }
/* Video Widget Badge */
.video-badge {
position: absolute;
top: -25px;
right: -25px;
background: #fff;
padding: 15px 25px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
z-index: 10;
}
.play-icon {
width: 45px;
height: 45px;
background: var(–accent-brown);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
}
/* Bottom Section (Footer Bar) */
.bottom-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 60px 100px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
.brown-card {
background: var(–accent-brown);
color: white;
padding: 30px 45px;
border-radius: 35px;
display: flex;
align-items: center;
gap: 25px;
width: 420px;
}
.stats-group { display: flex; align-items: center; gap: 20px; }
.stats-group h2 { font-size: 52px; font-family: ‘Playfair Display’, serif; font-style: italic; font-weight: 700; }
.avatar-stack { display: flex; }
.avatar-stack img { width: 55px; height: 55px; border-radius: 50%; border: 4px solid #cfd3ce; margin-left: -25px; }
.avatar-stack img:first-child { margin-left: 0; }
.comfort-text { max-width: 350px; font-weight: 800; font-size: 18px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.learn-btn { font-size: 12px; font-weight: 900; text-decoration: underline; margin-top: 15px; display: block; color: var(–dark-text); }
/* Responsive */
@media (max-width: 1024px) {
nav, .hero, .bottom-bar { padding: 30px 40px; }
.hero { flex-direction: column; text-align: center; gap: 60px; }
.hero-left { max-width: 100%; }
.hero-right { width: 100%; max-width: 500px; height: 400px; }
.bottom-bar { flex-direction: column; gap: 40px; text-align: center; }
}
</style>
</head>
<body>
<nav>
<div class=”logo”>⬛ RANTY</div>
<ul class=”nav-links”>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Homes</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Cases</a></li>
</ul>
<div style=”display:flex; align-items:center; gap:25px;”>
<span style=”font-weight: 800; font-size: 13px;”>ENG</span>
<a href=”#” class=”contact-btn”>CONTACT US</a>
</div>
</nav>
<section class=”hero”>
<div class=”hero-left”>
<h1>THE <br> PERFECT <br> HOME®</h1>
<p class=”sub-heading”>/ We craft custom homes /</p>
<a href=”#” class=”start-btn”>START</a>
</div>
<div class=”hero-right”>
<!– Video Badge (Positioned relative to White Card) –>
<div class=”video-badge”>
<div class=”play-icon”>â–¶</div>
<div style=”font-size: 11px; font-weight: 800; line-height: 1.2;”>ROOMTOUR <br> <span style=”color:#aaa;”>VIDEO</span></div>
</div>
<!– Main Info Card –>
<div class=”white-card”>
<div class=”tags”>
<span class=”tag”>Interior</span>
<span class=”tag”>Design</span>
<span class=”tag active”>3D</span>
</div>
<h2>Unique design & <br> ergonomics</h2>
<p>From blueprints to renders.</p>
</div>
</div>
</section>
<div class=”bottom-bar”>
<!– Brown Info Box –>
<div class=”brown-card”>
<div>
<h3 style=”font-size: 22px; margin-bottom: 8px;”>We use best <br> materials!</h3>
<p style=”font-size: 11px; opacity: 0.8;”>Working with verified suppliers.</p>
</div>
<!– Reliable SVG Icon –>
<svg width=”60″ height=”60″ viewBox=”0 0 24 24″ fill=”none” stroke=”white” stroke-width=”1.5″><path d=”M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5″””)/>></svg>
</div>
<!– Customers Stats –>
<div class=”stats-group”>
<div class=”avatar-stack”>
<img src=”https://i.pravatar.cc” alt=”user”>
<img src=”https://i.pravatar.cc” alt=”user”>
</div>
<div>
<h2>12m+</h2>
<p style=”font-size: 14px; font-weight: 600; color: #555;”>Customers</p>
</div>
</div>
<!– Tagline –>
<div class=”comfort-text”>
WE CAN COMBINE NATURE & HOME COMFORT
<a href=”#” class=”learn-btn”>LEARN MORE —</a>
</div>
</div>
</body>
</html>