Scribd
Upload
2 views

1.html

This document is an HTML template for a business website featuring a navigation bar, a hero section, a products section, and a footer. It includes styles for layout and design elements, such as a responsive grid for product cards and smooth scrolling for navigation links. The template is designed to showcase products like wedding invitations and anniversary cards, with a focus on aesthetics and user engagement.

Uploaded by

Prakash D
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

1.html

This document is an HTML template for a business website featuring a navigation bar, a hero section, a products section, and a footer. It includes styles for layout and design elements, such as a responsive grid for product cards and smooth scrolling for navigation links. The template is designed to showcase products like wedding invitations and anniversary cards, with a focus on aesthetics and user engagement.

Uploaded by

Prakash D
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Business Name</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

/* Navigation */
nav {
background: #ffffff;
padding: 20px 80px;
position: fixed;
width: 100%;
z-index: 999;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 24px;
font-weight: bold;
color: #333;
}

.nav-links {
display: flex;
gap: 30px;
}

.nav-links a {
text-decoration: none;
color: #333;
font-weight: 500;
}

/* Hero Section */
.hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('your-hero-image.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
padding: 0 20px;
}

.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
}

.cta-button {
padding: 15px 30px;
background: #e74c3c;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: 0.3s;
}

/* Products Section */
.products {
padding: 80px 20px;
text-align: center;
}

.products h2 {
margin-bottom: 40px;
}

.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}

.product-card {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
transition: 0.3s;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px;
}

/* Footer */
footer {
background: #333;
color: white;
padding: 40px 20px;
text-align: center;
}

@media (max-width: 768px) {


nav {
padding: 20px;
}

.nav-links {
display: none;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-content">
<div class="logo">Your Logo</div>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</nav>

<!-- Hero Section -->


<section class="hero" id="home">
<div class="hero-content">
<h1>Beautiful Designs for Special Occasions</h1>
<button class="cta-button">Explore Collections</button>
</div>
</section>

<!-- Products Section -->


<section class="products" id="products">
<h2>Our Products</h2>
<div class="product-grid">
<div class="product-card">
<img src="product1.jpg" alt="Product 1">
<h3>Wedding Invitations</h3>
<p>Beautiful custom wedding cards</p>
</div>
<div class="product-card">
<img src="product2.jpg" alt="Product 2">
<h3>Anniversary Cards</h3>
<p>Celebrate special milestones</p>
</div>
<!-- Add more product cards -->
</div>
</section>

<!-- Footer -->


<footer id="contact">
<p>Contact us: [email protected]</p>
<p>Phone: +1 234 567 890</p>
<div class="social-links">
<!-- Add social media icons -->
</div>
</footer>

<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});

// Animation on scroll
window.addEventListener('scroll', function() {
const cards = document.querySelectorAll('.product-card');
cards.forEach(card => {
const cardPosition = card.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3;

if(cardPosition < screenPosition) {


card.style.opacity = '1';
}
});
});
</script>
</body>
</html>

You might also like