Scribd
Upload
19 views4 pages

Perfect!

The document provides a modern HTML template for a website called 'Dream Car' featuring hover effects, transitions, and animations for a stylish layout. It includes sections for services, biography, products, and contact information, with specific styling for each section. The template encourages users to add additional features like testimonials or a contact form if desired.

Uploaded by

kamran451665
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
19 views4 pages

Perfect!

The document provides a modern HTML template for a website called 'Dream Car' featuring hover effects, transitions, and animations for a stylish layout. It includes sections for services, biography, products, and contact information, with specific styling for each section. The template encourages users to add additional features like testimonials or a contact form if desired.

Uploaded by

kamran451665
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

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?

You might also like