Perfect!
Perfect!
Neeche main aapko ek modern version de raha hoon same website ka — ismein
hover effects, transitions, thodi animation aur stylish layout added hai. Isse
website aur advanced lagegi.
Aap same tarah isse Notepad mein paste karke .html file save kar lo, images waise
hi apni rakhni hain jaise pehle bataya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dream Car</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #0f0f0f;
color: #fff;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(to right, #1c1c1c, #2a2a2a);
padding: 20px 50px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
transition: transform 0.3s;
}
.logo img:hover {
transform: scale(1.1);
}
h1 {
font-size: 28px;
letter-spacing: 2px;
color: #f5c518;
}
nav a {
margin-left: 25px;
text-decoration: none;
color: #ddd;
font-weight: bold;
transition: color 0.3s;
}
nav a:hover {
color: #f5c518;
}
.quote {
background: #1a1a1a;
text-align: center;
padding: 40px 20px;
font-size: 24px;
font-style: italic;
animation: fadeIn 2s ease-in;
}
.section {
padding: 50px 60px;
}
.services, .bio, .products, .contact {
background: #1a1a1a;
margin-bottom: 30px;
padding: 30px;
border-radius: 15px;
transition: transform 0.3s ease, box-shadow 0.3s;
}
.services:hover, .bio:hover, .products:hover, .contact:hover {
transform: scale(1.02);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
h2 {
margin-bottom: 20px;
border-bottom: 2px solid #f5c518;
display: inline-block;
padding-bottom: 5px;
}
.bio img {
float: right;
width: 200px;
height: auto;
margin-left: 20px;
border-radius: 10px;
}
ul li {
margin-bottom: 10px;
line-height: 1.6;
}
.product-item {
background-color: #2a2a2a;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
transition: background 0.3s;
}
.product-item:hover {
background-color: #333;
}
.product-item img {
width: 100%;
border-radius: 10px;
margin-top: 10px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="logo">
<img src="logo.jpg" alt="Logo" />
<!-- Add your logo image in same folder -->
<h1>Dream Car</h1>
</div>
<nav>
<a href="#services">Services</a>
<a href="#bio">Biography</a>
<a href="#products">Products</a>
<a href="#contact">Contact</a>
</nav>
</header>
<!-- Quote Section -->
<div class="quote">
"Speed meets style, only at Dream Car."
</div>
<!-- Main Content -->
<div class="section">
<!-- Services -->
<div class="services" id="services">
<h2>Our Services</h2>
<ul>
<li>Luxury Car Sales</li>
<li>Car Customization</li>
<li>Maintenance & Repair</li>
<li>24/7 Customer Support</li>
</ul>
</div>
<!-- Biography -->
<div class="bio" id="bio">
<h2>Founder Biography</h2>
<img src="founder.jpg" alt="Founder Image" />
<!-- Add founder image here -->
<p>
Mr. Arman Khan, founder of Dream Car, turned his passion into a global car
brand.
With 15+ years in luxury cars, he built a dream empire of wheels and
wonder.
</p>
</div>
<!-- Products -->
<div class="products" id="products">
<h2>Our Cars</h2>
<div class="product-item">
<h3>Lamborghini Aventador</h3>
<p>Price: $400,000</p>
<img src="aventador.jpg" alt="Lamborghini" />
<!-- Add Lamborghini image here -->
</div>
<div class="product-item">
<h3>Ferrari F8 Tributo</h3>
<p>Price: $350,000</p>
<img src="ferrari.jpg" alt="Ferrari" />
<!-- Add Ferrari image here -->
</div>
</div>
<!-- Contact -->
<div class="contact" id="contact">
<h2>Contact Us</h2>
<p>Email: [email protected]</p>
<p>Phone: +92 300 1234567</p>
<p>Location: Karachi, Pakistan</p>
</div>
</div>
</body>
</html>
Aapko agar ismein aur bhi cheezein chahiyein — jaise testimonial, map location, ya
contact form — toh wo bhi add kar sakte hain. Batao kya aur chahiye?