<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serene Spaces</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
color: #333;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.container {
max-width: 800px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 3rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.container:hover {
transform: translateY(-5px);
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #2c3e50;
text-align: center;
}
p {
font-size: 1.1rem;
margin-bottom: 1.5rem;
color: #34495e;
}
.cta-button {
display: inline-block;
background-color: #3498db;
color: white;
padding: 0.8rem 1.5rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
background-color: #2980b9;
transform: scale(1.05);
}
.features {
display: flex;
justify-content: space-between;
margin-top: 2rem;
}
.feature {
flex-basis: 30%;
text-align: center;
padding: 1rem;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
transition: transform 0.3s ease;
}
.feature:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
.container {
padding: 2rem;
}
h1 {
font-size: 2rem;
}
.features {
flex-direction: column;
}
.feature {
margin-bottom: 1rem;
}
}
</style>
</head> <body> <div class="container"> <h1>Welcome to Serene Spaces</h1> <p>Discover the perfect balance of comfort and style in our thoughtfully designed living spaces. Experience tranquility in every corner of your home.</p> <a href="#" class="cta-button">Explore Our Designs</a> <div class="features"> <div class="feature"> <div class="feature-icon">🏠</div> <h3>Cozy Homes</h3> <p>Designed for comfort</p> </div> <div class="feature"> <div class="feature-icon">🌿</div> <h3>Eco-Friendly</h3> <p>Sustainable living</p> </div> <div class="feature"> <div class="feature-icon">🎨</div> <h3>Modern Aesthetics</h3> <p>Sleek and stylish</p> </div> </div> </div> </body> </html>
