Car
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car History by Ammar Qureshi</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
color: #333;
}
header {
background-color: #000;
color: #fff;
padding: 1rem 0;
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
.content {
margin: 2rem auto;
max-width: 800px;
text-align: left;
line-height: 1.6;
}
.button-container {
margin: 2rem 0;
}
.button-container button {
padding: 10px 20px;
font-size: 1rem;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button-container button:hover {
background-color: #0056b3;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 2rem auto;
max-width: 1200px;
}
.gallery-item {
background-color: white;
padding: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.gallery-item img {
max-width: 100%;
border-radius: 10px;
}
.gallery-item h3 {
margin: 15px 0 10px;
font-size: 1.5rem;
}
footer {
background-color: #000;
color: #fff;
padding: 1rem 0;
margin-top: 2rem;
}
footer p {
margin: 0;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Ammar Qureshi's Car Enthusiast Page</h1>
</header>
<div class="content">
<h2>Explore the Legacy of Automobiles</h2>
<p>
Cars are more than just machines; they are symbols of innovation, freedom, and progress. From the humble beginnings of steam-powered vehicles to the roaring combustion engines of the 20th century, automobiles have shaped our world in profound ways.
</p>
<p>
Discover the stories behind some of the most legendary car brands, their technological advancements, and the designs that have stood the test of time. Join us as we explore the fascinating history of cars and the passion that drives this incredible industry.
</p>
</div>
<div class="button-container">
<button onclick="displayCarInfo()">Get Car Info</button>
</div>
<div class="gallery" id="carGallery" style="display: none;">
<div class="gallery-item">
<img src="https://assets.onecompiler.app/42yrs7ju5/42yrtn2db/1000049817.jpg" alt="BMW">
<h3>BMW 3 Series</h3>
<p>The BMW 3 Series is a symbol of luxury and performance, featuring advanced engineering and a driver-focused design.</p>
</div>
<div class="gallery-item">
<img src="https://assets.onecompiler.app/42yrs7ju5/42yrtn2db/1000049816.jpg" alt="Audi RS5">
<h3>Audi RS5</h3>
<p>The Audi RS5 is a high-performance coupe with a twin-turbocharged engine and quattro all-wheel drive.</p>
</div>
<div class="gallery-item">
<img src="https://assets.onecompiler.app/42yrs7ju5/42yrtn2db/1000049815.jpg" alt="Porsche 911">
<h3>Porsche 911</h3>
<p>The Porsche 911 is a timeless sports car with a rear-engine layout and exceptional handling dynamics.</p>
</div>
<div class="gallery-item">
<img src="https://assets.onecompiler.app/42yrs7ju5/42yrtn2db/1000049814.jpg" alt="Ferrari LaFerrari">
<h3>Ferrari LaFerrari</h3>
<p>The Ferrari LaFerrari is a hybrid supercar, combining electric power with a V12 engine for breathtaking performance.</p>
</div>
<div class="gallery-item">
<img src="https://assets.onecompiler.app/42yrs7ju5/42yrtn2db/1000049813.jpg" alt="Lamborghini Huracán">
<h3>Lamborghini Huracán</h3>
<p>The Lamborghini Huracán is a V10-powered supercar that delivers a perfect blend of style and speed.</p>
</div>
</div>
<footer>
<p>© 2024 Ammar Qureshi - Car Enthusiast</p>
</footer>
<script>
function displayCarInfo() {
document.getElementById('carGallery').style.display = 'grid';
}
</script>