-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (116 loc) · 5.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium Car Rental</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">
<img src="logo.png" alt="Carera Logo" class="logo">
</a>
<nav>
<a href="about-us.html">About Us</a>
<a href="cars.html">Cars</a>
<a href="contact.html">Contact</a>
<a href="#" class="download-button">Download App</a>
</nav>
</header>
<section class="hero">
<h1>Premium Car Rental</h1>
<p>Don't deny yourself the pleasure of driving the best premium cars from around the world here and now</p>
<div class="car-image">
<img src="honda-city.png" alt="Car Image">
</div>
</section>
<section class="brands">
<img src="icons8-toyota-50.png" alt="Toyota">
<img src="icons8-honda-50.png" alt="Honda">
<img src="icons8-ford-48.png" alt="Ford"><!--
<img src="icons8-hyundai-48.png" alt="Hyundai">
<img src="icons8-isuzu-is-a-japanese-commercial-vehicle-and-diesel-engine-manufacturing-company-48.png" alt="Isuzu">
<img src="icons8-mitsubishi-50.png" alt="Mitsubishi"> -->
</section>
<section class="fleet" id="fleet">
<h4>Only the Best Cars</h4>
<h2>Our Vehicle Fleet</h2>
<p>We provide our customers with the most incredible driving emotions. That's why we have only world-class cars in our fleet.</p>
<div class="category-filters">
<button onclick="filterImages(event, 'sedan')">Sedan</button>
<button onclick="filterImages(event, 'suv')">SUV</button>
<button onclick="filterImages(event, 'sports-car')">Sports Car</button>
<!--
<button onclick="filterImages(event, 'van')">Van</button>
<button onclick="filterImages(event, 'motorcycle')">Motorcycle</button>
-->
</div>
<div class="car-gallery">
<img src="ford-mustang.png" alt="Ford Mustang" data-category="sports-car">
<img src="toyota-supra.png" alt="Toyota Supra" data-category="sports-car">
<img src="honda-civic-type-r.png" alt="Honda Civic" data-category="sedan">
<img src="toyota-corolla-cross.png" alt="Toyota Cross" data-category="suv">
<img src="honda-nsx.png" alt="Honda NSX" data-category="sports-car">
<img src="ford-focus.png" alt="Ford Focus" data-category="sedan">
<img src="ford-f150.png" alt="Ford F150" data-category="suv">
<img src="toyota-hilux.png" alt="Toyota Hilux" data-category="suv">
<img src="toyota-vios.png" alt="Toyota Vios" data-category="sedan">
<img src="ford-escape.png" alt="Ford Escape" data-category="suv">
<img src="toyota-wigo.png" alt="Toyota Wigo" data-category="sedan">
<img src="honda-city.png" alt="Honda City" data-category="sedan">
<img src="ford-expedition.png" alt="Ford Expedition" data-category="suv">
<img src="honda-crv.png" alt="Honda CRV" data-category="suv">
<img src="ford-gt.png" alt="Ford GT" data-category="sports-car">
<!-- Additional images as needed -->
</div>
<a href="cars.html" class="show-all-button">Show All (15 models) →</a>
</section>
<footer>
<div class="footer-container">
<div class="footer-logo">
<a href="index.html">
<div class="logo">Carera</div>
</a>
<p>Your premium car rental service in New York.</p>
</div>
<div class="footer-links">
<h3>Quick Links</h3>
<ul>
<li><a href="about-us.html">About Us</a></li>
<li><a href="cars.html">Our Fleet</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#">Download App</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>Contact Us</h3>
<p>123 Premium Car St, New York, NY 10001</p>
<p>Phone: (123) 456-7890</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
</div>
<div class="footer-social">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#" aria-label="Facebook"><img src="facebook-icon.png" alt="Facebook"></a>
<a href="#" aria-label="Instagram"><img src="instagram-icon.png" alt="Instagram"></a>
<a href="#" aria-label="Twitter"><img src="twitter-icon.png" alt="Twitter"></a>
<a href="#" aria-label="LinkedIn"><img src="linkedin-icon.png" alt="LinkedIn"></a>
</div>
</div>
<div class="footer-subscribe">
<h3>Stay Updated</h3>
<p>Subscribe for the latest offers and news.</p>
<form action="#" method="post">
<input type="email" name="email" placeholder="Your Email" required>
<button type="submit">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Carera. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>