-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
315 lines (299 loc) · 14.8 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cars - A website present by developWithSawan</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="hero.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<nav class="navbar " >
<div class="logo" data-aos="zoom-in">
<img src="/img/logo.png" alt="" >
<span style="font-family:'Lobster', sans-serif;">SK cars</span>
</div>
<ul class="navlist " data-aos="zoom-in" >
<li><a href="index.html">HOME</a></li>
<li><a href="#abt">ABOUT US </a></li>
<li><a href="#car">CARS</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
</nav>
<section class="heroSection">
<div class="banner1">
<img src="/img/bg3.jpg" alt="" >
<div class="textArea" data-aos="fade" data-aos-duration="2300" >
<h1>Unleash Your Automotive Dreams</h1>
<span></span>
<p>At Car Info Hub, we're more than just a website. We're your gateway to the thrilling world of
automobiles. Whether you dream of conquering rugged terrains, cruising in style, or making
eco-conscious choices, we're here to fuel your passion and guide your journey. Explore, compare, and
make informed decisions – because your automotive dreams are our driving force <br>
Whether you're seeking the thrill of the open road, the embrace of luxury, or the latest in
possibilities together</p>
</div>
</div>
<div class="banner2">
<img src="/img/bg2.jpg" alt="">
<div class="textArea" data-aos="fade" data-aos-duration="2000">
<h1>Your Roadmap to Automotive Excellence </h1>
<span></span>
<p>At Car Info Hub, we're dedicated to providing you with the ultimate roadmap to automotive excellence.
Our passion for cars knows no bounds, and our commitment to delivering the latest insights, reviews,
and updates is unwavering. Explore the world of automobiles with confidence and embark on a journey
where every turn of the wheel is an adventure. Your dream car, your automotive aspirations – we're
here to make them a reality.</p>
</div>
</div>
<div class="banner3">
<img src="/img/bg.jpg" alt="">
<div class="textArea" data-aos="fade" data-aos-duration="2000">
<h1>Drive Your Imagination with Car Info Hub </h1>
<span></span>
<p>Welcome to a world where possibilities are endless, where cars are not just vehicles but the
embodiment of dreams and adventures. Car Info Hub is your key to unlocking the doors of imagination
on the open road. From classic elegance to cutting-edge innovation, we're here to help you navigate
the vast landscape of automotive choices. Buckle up, because your automotive journey starts here –
where innovation meets inspiration</p>
</div>
</div>
</section>
<section class="carsSection" id="car">
<h1 style="color:#095565; margin-top: 20px;" data-aos="zoom-in">Rev Up Your Knowledge: Discover the World of Cars!</h1>
<div class="box" >
<div class="left " data-aos="slide-left" >
<h1>THAR</h1>
<ul class="carInfo">
<li><span>Colors:</span> Red, Blue, Silver</li>
<li><span>Price:</span> Starting Price: $30,000</li>
<li><span>Mileage:</span> 20 mpg (city), 25 mpg (highway)</li>
<li><span>Power:</span> 180 hp, <span>Torque:</span> 250 lb-ft</li>
<li><span>Interior:</span>
<ul>
<li>Seats 4</li>
<li>8-inch touchscreen</li>
<li>Comfort Features</li>
</ul>
</li>
<li><span>Exterior:</span>
<ul>
<li>Iconic Grille</li>
<li>Round Headlamps</li>
<li>Rugged Design</li>
</ul>
</li>
<li><span>Reviews:</span> "Love my Thar!", "Best off-road vehicle!"</li>
<li><span>Conclusion:</span> Ultimate off-road adventure companion.</li>
</ul>
</div>
<div class="right" data-aos="slide-right">
<a href="https://en.wikipedia.org/wiki/Mahindra_Thar" target="_blank"> <img src="/img/thar.jpg"
alt=""></a>
</div>
</div>
<div class="box wrap" >
<div class="right" data-aos="slide-left" >
<a href="https://en.wikipedia.org/wiki/Mercedes-Benz" target="_blank"><img src="/img/mercedes.jpg"
alt=""></a>
</div>
<div class="left" data-aos="slide-right" >
<h1>MERCEDES</h1>
<ul class="carInfo">
<li><span>Colors:</span> Silver, Black, White</li>
<li><span>Price:</span> Starting Price: $40,000</li>
<li><span>Mileage:</span> 25 mpg (city), 30 mpg (highway)</li>
<li><span>Power:</span> 250 hp, <span>Torque:</span> 300 lb-ft</li>
<li><span>Interior:</span>
<ul>
<li>Seats 5</li>
<li>10-inch touchscreen</li>
<li>Luxury Features</li>
</ul>
</li>
<li><span>Exterior:</span>
<ul>
<li>Sleek Design</li>
<li>LED Headlights</li>
<li>Premium Finish</li>
</ul>
</li>
<li><span>Reviews:</span> "Luxury on wheels!", "Smooth ride and stylish!"</li>
<li><span>Conclusion:</span> The epitome of luxury and performance.</li>
</ul>
</div>
</div>
<div class="box" >
<div class="left" data-aos="slide-left" >
<h1>JAGUAR</h1>
<ul class="carInfo">
<li><span>Colors:</span> Black, Silver, Red</li>
<li><span>Price:</span> Starting Price: $50,000</li>
<li><span>Mileage:</span> 22 mpg (city), 28 mpg (highway)</li>
<li><span>Power:</span> 300 hp, <span>Torque:</span> 350 lb-ft</li>
<li><span>Interior:</span>
<ul>
<li>Seats 5</li>
<li>12-inch touchscreen</li>
<li>Luxury Features</li>
</ul>
</li>
<li><span>Exterior:</span>
<ul>
<li>Signature Grille</li>
<li>Bi-LED Headlights</li>
<li>Elegant Design</li>
</ul>
</li>
<li><span>Reviews:</span> "Pure luxury and performance!", "Elegance in motion!"</li>
<li><span>Conclusion:</span> A symbol of sophistication and power.</li>
</ul>
</div>
<div class="right" data-aos="slide-right">
<a href="https://en.wikipedia.org/wiki/Jaguar_Cars"><img src="/img/jaguar.jpg" alt=""></a>
</div>
</div>
<div class="box wrap" >
<div class="right" data-aos="slide-left" >
<a href="https://en.wikipedia.org/wiki/BMW"><img src="/img/bmw.jpg" alt=""></a>
</div>
<div class="left" data-aos="slide-right">
<h1>BMW</h1>
<ul class="carInfo">
<li><span>Colors:</span> White, Black, Blue</li>
<li><span>Price:</span> Starting Price: $45,000</li>
<li><span>Mileage:</span> 24 mpg (city), 32 mpg (highway)</li>
<li><span>Power:</span> 320 hp, <span>Torque:</span> 350 lb-ft</li>
<li><span>Interior:</span>
<ul>
<li>Seats 5</li>
<li>10.25-inch touchscreen</li>
<li>Luxury and Technology Features</li>
</ul>
</li>
<li><span>Exterior:</span>
<ul>
<li>Iconic Kidney Grille</li>
<li>LED Headlights</li>
<li>Sporty Design</li>
</ul>
</li>
<li><span>Reviews:</span> "Ultimate driving experience!", "The ultimate driving machine!"</li>
<li><span>Conclusion:</span> A perfect blend of luxury and performance.</li>
</ul>
</div>
</div>
<div class="box" >
<div class="left" data-aos="slide-left" >
<h1>BUGATTI</h1>
<ul class="carInfo">
<li><span>Colors:</span> Blue, Black, Red</li>
<li><span>Price:</span> Starting Price: $2,000,000</li>
<li><span>Mileage:</span> 8 mpg (city), 15 mpg (highway)</li>
<li><span>Power:</span> 1500 hp, <span>Torque:</span> 1180 lb-ft</li>
<li><span>Interior:</span>
<ul>
<li>Seats 2</li>
<li>Luxurious Handcrafted Interior</li>
<li>Advanced Infotainment</li>
</ul>
</li>
<li><span>Exterior:</span>
<ul>
<li>Signature Horseshoe Grille</li>
<li>LED Headlights</li>
<li>Aerodynamic and Sleek Design</li>
</ul>
</li>
<li><span>Reviews:</span> "The pinnacle of automotive engineering!", "A masterpiece of performance
and luxury!"</li>
<li><span>Conclusion:</span> An exclusive symbol of automotive excellence and speed.</li>
</ul>
</div>
<div class="right" data-aos="slide-right">
<a href="https://en.wikipedia.org/wiki/Bugatti"> <img src="/img/bugatti.jpg" alt=""></a>
</div>
</div>
</section>
<section class="aboutSection bg" id="abt">
<h1 data-aos="zoom-in">About us-Discover Car Info Hub</h1>
<div class="about1" data-aos="fade-up">
<div class="aboutBox" >
<h2>Who We Are?</h2>
<p>Welcome to Car Info Hub, your trusted resource for comprehensive and reliable information about
automobiles. We are a dedicated team of car enthusiasts and industry experts who are deeply
passionate
about all things automotive. Our mission is to empower you, whether you're a seasoned car
enthusiast, a
prospective car buyer, or simply someone looking to expand your knowledge about cars.
At Car Info Hub, we understand that cars are not just machines; they are a reflection of innovation,
engineering excellence, and a profound love for the open road. We believe that well-informed
individuals
make the best decisions, and that's where we come in. </p>
</div>
<div class="aboutBox " >
<h2>Our Mission</h2>
<p>At Car Info Hub, our mission is clear: to be your trusted resource in the world of automobiles. We
believe that an informed choice is the best choice, and we're here to provide you with the knowledge
you need to make well-informed decisions about your automotive journey. Our website is designed to
help you explore, compare, and understand different car models, ensuring you find the perfect
vehicle that aligns with your needs and preferences.
Our website is meticulously designed with one purpose in mind – to be your compass in the vast
landscape of the automotive world. We are here to guide you as you explore, compare, and understand
different car models. We aim to ensure that you find preferences, and aspirations.
</p>
</div>
</div>
<div class="about2" data-aos="slide-right">
<div class="aboutImg aboutBox">
<img src="/img/thar.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/bugatti.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/bmw.jpg" alt="">
</div>
</div>
<div class="about3" data-aos="slide-left" >
<div class="aboutImg aboutBox">
<img src="/img/jaguar.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/mercedes.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/about.jpg" alt="">
</div>
</div>
<div class="about2" data-aos="slide-right">
<div class="aboutImg aboutBox">
<img src="/img/thar.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/bugatti.jpg" alt="">
</div>
<div class="aboutImg aboutBox">
<img src="/img/bmw.jpg" alt="">
</div>
</div>
</section>
<section class="footer">
<div class="footerDiv" >
<footer>
<p data-aos="zoom-in" data-aos-offset="40">© 2023 Car Enthusiasts. All rights reserved.</p>
</footer>
</div>
</section>
<!-- Your HTML content -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
offset: 70,
duration: 1500,
})
</script>
</body>
</html>