HTML Code
<!Doctype HTML>
<html>
<head>
<title>My Website</title>
<!-- Font Awesome Icons ke liye Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- 1. Header & Navigation -->
<header class="navbar">
<div class="logo">My<span>Website</span></div>
<nav>
<ul class="nav-links">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="nav-btn">
<a href="#" class="btn-primary">Get Started</a>
</div>
</header>
<!-- 2. Hero Section (Main Banner) -->
<section class="hero">
<div class="hero-content">
<h1>Aapki Safalta Ka Naya Rasta</h1>
<p>Hum banate hain behtareen digital designs aur websites jo aapke business ko badhane me madad karti hain.</p>
<div class="hero-buttons">
<a href="#" class="btn-primary">Explore More</a>
<a href="#" class="btn-secondary">Learn Video</a>
</div>
</div>
</section>
<!-- 3. Features / Services Section -->
<section class="services">
<h2 class="section-title">Humari Services</h2>
<div class="services-container">
<div class="service-card">
<div class="icon"><i class="fas fa-laptop-code"></i></div>
<h3>Web Development</h3>
<p>Clean, fast aur fully responsive websites jo har screen par perfect dikhein.</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-chart-line"></i></div>
<h3>Digital Marketing</h3>
<p>Aapke brand ko logon tak pahunchane ke liye sahi marketing strategy.</p>
</div>
<div class="service-card">
<div class="icon"><i class="fas fa-palette"></i></div>
<h3>UI/UX Design</h3>
<p>Modern aur user-friendly designs jo aapke customers ko pasand aayenge.</p>
</div>
</div>
</section>
<!-- 4. Footer Section -->
<footer class="footer-area">
<div class="footer-container">
<p>© 2026 MyWebsite. All Rights Reserved.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</footer>
</body>
</html>CSS Code
/* —- Reset & Base Styles —- */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}
body {
color: #333;
}
/* —- Header / Navigation —- */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 2%;
background-color: white;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.logo {
font-size: 24px;
font-weight: 700;
color: #222;
}
.logo span {
color: #4f46e5; /* Primary Indigo Purple Color */
}
.nav-links {
display: flex;
list-style: none;
margin:0;
padding:0;
}
.nav-links li {
margin: 0 20px;
}
.nav-links a {
text-decoration: none;
color: #555;
font-weight: 600;
transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active {
color: #4f46e5;
}
/* Buttons styling */
.btn-primary {
text-decoration: none;
background-color: #4f46e5;
color: #fff;
padding: 12px 25px;
border-radius: 6px;
font-weight: 600;
transition: background 0.3s ease;
}
.btn-primary:hover {
background-color: #4338ca;
}
.btn-secondary {
text-decoration: none;
background-color: transparent;
color: #fff;
border: 2px solid #fff;
padding: 10px 25px;
border-radius: 6px;
font-weight: 600;
margin-left: 15px;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background-color: #fff;
color: #4f46e5;
}
/* —- Hero Section —- */
.hero {
background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.85)),
url(‘https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&w=1500&q=80‘) no-repeat center center/cover;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 800;
}
.hero-content p {
font-size: 1.25rem;
max-width: 600px;
margin: 0 auto 35px;
opacity: 0.9;
line-height: 1.6;
}
/* —- Services Section —- */
.services {
padding: 40px 8%;
text-align: center;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 25px;
color: #111827;
}
.services-container {
display: flex;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.service-card {
flex: 1;
min-width: 280px;
background: #fff;
padding: 40px 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(79, 70, 229, 0.1);
}
.service-card .icon {
font-size: 2.5rem;
color: #4f46e5;
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
color: #1f2937;
}
.service-card p {
color: #4b5563;
line-height: 1.6;
}
/* —- Footer Section —- */
.footer-area {
background-color: #111827;
color: #9ca3af;
padding: 25px 8%;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.social-links a {
color: #9ca3af;
font-size: 1.5rem;
margin-left: 20px;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #fff;
}
/* —- Responsive Design (Mobile View) —- */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 15px;
padding: 20px;
}
.nav-links {
margin-bottom: 10px;
}
.hero-content h1 {
font-size: 2.3rem;
}
.footer-container {
flex-direction: column;
text-align: center;
}
.social-links {
margin-top: 10px;
}
.social-links a {
margin: 0 10px;
}
}