-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
283 lines (257 loc) · 16.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youth's Warehouse</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-banner">
<div class="container">
<div class="small-bold-text banner-text">
Fantasize your ride with <i>Royal Endfield</i></div>
</div>
</div>
<nav>
<div class="container main-nav flex">
<a href="#" class="company-logo">
<img src="photos/cop.jpg" alt="company logo">
</a>
<div class="nav-link" id="nav-link">
<ul class="flex">
<li class="parent"><a href="#" class="hover-link">Models<i class="fa-solid fa-angle-down"></i></a>
<ul class="sub-list">
<li><a href="#meteor"> Royal Enfield Super Meteor 650</a></li>
<li><a href="#Hunter"> Royal Enfield Hunter 350</a></li>
<li><a href="#Scram"> Royal Enfield Scram 441</a></li>
<li><a href="#Classic"> Royal Enfield Classic 350</a></li>
<li><a href="#Meteor350"> Royal Enfield Meteor 350</a></li>
<li><a href="#Intercepter"> Royal Enfield Intercepter</a></li>
<li><a href="#Continental"> Royal Enfield Continental GT</a></li>
<li><a href="#Himalayan"> Royal Enfield Himalayan</a></li>
<!-- <li><a href="#Bullet"> Royal Enfield Bullet 350</a></li> -->
</ul>
</li>
<li><a href="#" class="hover-link">Customers</a></li>
<li><a href="#" class="hover-link">Pricing</a></li>
<li><a href="#" class="hover-link">Resources</a></li>
<li><a href="#" class="hover-link primary-btn">Sign in</a></li>
<li><a href="#" class="hover-link secondary-btn">Sign up</a></li>
</ul>
</div>
<a href="#" class="nav-toogle hover-link" id="toogle-link"><i class="fa-solid fa-bars"></i></a>
</div>
</nav>
<header>
<div class="container header flex">
<div class="left-head">
<h1>Go Limitless ....</h1>
<p>" <i>Dugg Dugg Dugg</i> is enough "</p>
<a href="#bik" class="primary-btn">Ready to Ride</a>
</div>
<div class="right-head">
<img src="photos/head.jpg" alt="hero image">
</div>
</div>
</header>
<!-- <section class="company-section"></section> -->
<section class="features-section">
<div id="bik" class="container product flex">
<div class="bike">
<img src="photos/1.jpg" alt="bike 1">
<h3> Royal Enfield Super Meteor 650</h3>
<p>Rs 3.48 - 3.78 lakh</p>
<p class="lower-para">648 cc | 32 kmpl</p>
<a class="read-more" href="#meteor">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 18.avif" alt="bike 1">
<h3> Royal Enfield Hunter 350</h3>
<p>Rs 1.49 - 1.71 lakh</p>
<p class="lower-para">349.34 cc | 36 kmpl</p>
<a class="read-more" href="#Hunter">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 19.avif" alt="bike 1">
<h3> Royal Enfield Scram 441</h3>
<p>Rs 2.03 - 2.08 lakh</p>
<p class="lower-para">441 cc | 38 kmpl</p>
<a class="read-more" href="#Scram">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 20.avif" alt="bike 1">
<h3> Royal Enfield Classic 350</h3>
<p>Rs 1.90 - 2.21 lakh</p>
<p class="lower-para">349.34 cc | 42 kmpl</p>
<a class="read-more" href="#Classic">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 21.avif" alt="bike 1">
<h3> Royal Enfield Meteor 350</h3>
<p>Rs 2.01 - 2.19 lakh</p>
<p class="lower-para">349 cc | 42 kmpl</p>
<a class="read-more" href="#Meteor350">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 22.avif" alt="bike 1">
<h3> Royal Enfield Interceptor 650</h3>
<p>Rs 2.88 - 3.31 lakh</p>
<p class="lower-para">648 cc | 32 kmpl</p>
<a class="read-more" href="#Intercepter">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 23.jpeg" alt="bike 1">
<h3> Royal Enfield Continental GT</h3>
<p>Rs 3.05 - 3.31 lakh</p>
<p class="lower-para">648 cc | 30 kmpl</p>
<a class="read-more" href="#Continental">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 24.avif" alt="bike 1">
<h3> Royal Enfield Himalayan</h3>
<p>Rs 2.15 - 2.23 lakh</p>
<p class="lower-para">441 cc | 32 kmpl</p>
<a class="read-more" href="#Himalayan">Read more...</a>
</div>
<div class="bike">
<img src="photos/asset 25.jpeg" alt="bike 1">
<h3> Royal Enfield Bullet</h3>
<p>Rs 1.54 - 1.63 lakh</p>
<p class="lower-para">346 cc | 42 kmpl</p>
<a class="read-more" href="#Bullet">Read more...</a>
</div>
</div>
</section>
<section class="specification-bike">
<div class="container overview flex for-media">
<div class="spec-overview">
<h3>Specification of Royal Enfield Super Meteor 650</h3>
<div class="in-para"><p>Royal Enfield Super Meteor 650 is powered by 648 cc engine. This super Meteor 650 engine generates a power of 47PS @ 7250 RPM and a torque of 52.3 Nm @5650 rpm. Royal Enfield Super Meteor 650 gets disc brakes int the front and rear. The kerb weight of Super Meteor 650 is 241 kg. Royal Enfield Super Meteor has Tubless Tyre</p></div>
</div>
<div id="meteor" class="overview-img">
<img src="photos/1.jpg" alt="super meteor 650">
</div>
</div>
<div class="container overview flex">
<div id="Hunter" class="overview-img">
<img src="photos/asset 18.avif" alt="super meteor 650">
</div>
<div class="spec-overview">
<h3>Specification of Royal Enfield Hunter 350</h3>
<div class="in-para"><p>The Royal Enfield Hunter 350 is powered by the same 349cc, single-cylinder, air-cooled engine as the Royal Enfield Meteor 350 and the Classic 350. Despite a slightly sportier state of tune, it produces the same 20.2PS and 27Nm. The motor is paired to a five-speed gearbox. The Hunter is built on a split dual-cradle frame, linked to a telescopic fork and dual shock absorber suspension setup, same as its siblings. It employs a 300mm disc with a dual-piston floating calliper up front and a 270mm disc with a single-piston floating calliper at the rear. There’s also the safety net of dual channel ABS or single-channel ABS in the more affordable Retro variant.</p></div>
</div>
</div>
<div class="container overview flex for-media">
<div class="spec-overview">
<h3>Specification of Royal Enfield Scram 441</h3>
<div class="in-para"><p>The Royal Enfield Scram 411 uses the same long-stroke 411cc air-cooled single-cylinder engine making 24.3PS at 6500rpm and 32Nm at 4250rpm as the Himalayan. This engine is mated to a 5-speed gearbox. The Royal Enfield Scram 411 is equipped with a 41mm telescopic fork with 190mm travel (10mm less than the Himalayan’s) up front, and a rear linked monoshock with 180mm wheel travel. The motorcycle rolls on a smaller 19-inch front spoke wheel wrapped with a meatier 100-section block pattern tyre whereas the rear gets the same 17-inch wheel with 120-section rubber as the Himalayan. The Scram 411 tips the scale at 185kg dry, including the optional centre stand, making it 5kg lighter than the Himalayan.</p></div>
</div>
<div id="Scram" class="overview-img">
<img src="photos/asset 19.avif" alt="super meteor 650">
</div>
</div>
<div class="container overview flex">
<div id="Classic" class="overview-img">
<img src="photos/asset 20.avif" alt="super meteor 650">
</div>
<div class="spec-overview">
<h3>Specification of Royal Enfield Classic 350</h3>
<div class="in-para"><p>The J-platform Classic 350 gets the same 349cc, air-cooled single-cylinder engine as the Meteor 350. That said, the state of tune is slightly different. While it makes the same power and torque as the Meteor 350 at 20.2PS at 6100rpm and 27Nm at 4000rpm, it gets new fuel mapping that changes the way the power is fed, making it an easygoing bike. The Classic 350 gets a 13-litre fuel tank and tips the scales at 195kg kerb. The Royal Enfield Classic features a 41mm telescopic fork and a twin rear shock absorber suspension setup. Braking is done via a 300mm disc up front and a 270mm rear disc brake, with Bybre axial callipers. Braking is done via a 300mm disc up front and a 270mm rear disc brake, with Bybre axial callipers. It rolls on a 19-inch front and an 18-inch rear wheel, wrapped in 90-section and 120-section tyres. For better ride comfort, the Classic 350 gets a redesigned rider and pillion seat with thicker padding. The handlebar sits taller, offering a more upright riding posture.</p></div>
</div>
</div>
<div class="container overview flex for-media">
<div class="spec-overview">
<h3>Specification of Royal Enfield Meteor 350</h3>
<div class="in-para"><p>The Royal Enfield Meteor 350 is powered by an all-new 349cc air-cooled SOHC 2-valve motor with fuel-injection. The powerplant generates 20.4PS at 6100rpm and 27Nm at 4000rpm, working in conjunction with a 5-speed transmission. The engine is counterbalanced for optimum refinement, which is a first for a 350cc Royal Enfield bike. The engine nestles inside a double downtube split cradle frame which is suspended on a 41mm telescopic front fork and twin 6-stage preload-adjustable emulsion shock absorbers at the rear. Braking hardware consists of a 300mm front disc and a 270mm rear unit with dual-channel ABS as standard. The 350cc Royal Enfield bike sports a 19-inch front and 17-inch rear alloy wheel wrapped with tubeless 100-section front and 140-section rear tubeless tyres. At 191kg kerb, the Meteor 350 is 6kg lighter than its predecessor, the Thunderbird 350X.</p></div>
</div>
<div id="Meteor350" class="overview-img">
<img src="photos/asset 21.avif" alt="super meteor 650">
</div>
</div>
<div class="container overview flex">
<div id="Intercepter" class="overview-img">
<img src="photos/asset 22.avif" alt="super meteor 650">
</div>
<div class="spec-overview">
<h3>Specification of Royal Enfield Intercepter 650</h3>
<div class="in-para"><p>The Royal Enfield Interceptor 650 uses a 647.9cc air-cooled delivering 47PS and 52Nm. It gets a 6-speed gearbox with a slipper clutch. The Royal Enfield Interceptor 650 gets a dual-cradle frame with telescopic forks and dual gas-charged shock absorbers. Braking is via a 320mm disc up front and 240mm unit at the rear, with dual-channel ABS. It gets 18-inch aluminium wheels shod with Ceat Zoom Cruze tyres.</p></div>
</div>
</div>
<div class="container overview flex for-media">
<div class="spec-overview">
<h3>Specification of Royal Enfield continental GT 650</h3>
<div class="in-para"><p>The Continental GT 650 is powered by a 648cc, air and oil-cooled parallel-twin motor making 47.6PS at 7100rpm and 52Nm at 5200rpm. A 6-speed transmission assisted by a slip-and-assist clutch transfers power to the rear wheel via chain drive. Suspension duties are handled by 41mm telescopic forks at the front and twin gas-charged shock absorbers at the rear with preload adjustability. The bike is anchored by a single 320mm disc mated to a ByBre four-piston calliper up front and a single 240mm disc brake at the rear and dual-channel ABS as standard. Royal Enfield has equipped the Continental GT 650 with Ceat Zoom Curve tyres.</p></div>
</div>
<div id="Continental" class="overview-img">
<img src="photos/asset 23.jpeg" alt="super meteor 650">
</div>
</div>
<div class="container overview flex">
<div id="Himalayan" class="overview-img">
<img src="photos/asset 24.avif" alt="super meteor 650">
</div>
<div class="spec-overview">
<h3>Specification of Royal Enfield Himalayan</h3>
<div class="in-para"><p>The Royal Enfield Himalayan is propelled by a 411cc, single-cylinder engine making 24.31PS and 32Nm. It is paired with a five-speed gearbox. The latest iteration of the Himalayan remains a capable off-roader, and is suspended by long-travel suspension units at both ends. The affordable ADV tourer rolls on a 21-/17-inch spoke wheel setup that comes shod in dual-purpose Ceat tyres. For braking, the bike features a 300mm front disc with a twin-piston caliper and a 240mm disc with a single-piston caliper at the rear. Switchable dual-channel ABS comes as standard.</p></div>
</div>
</div>
<div class="container overview flex for-media">
<div class="spec-overview">
<h3>Specification of Royal Enfield Bullet 350</h3>
<div class="in-para"><p>The Royal Enfield Bullet 350 flaunts the UCE 346cc, single-cylinder engine making 19.3PS at 5250rpm and 28Nm at 4000rpm. The engine is paired to a 5-speed gearbox and is nestled inside a traditional single downtube frame suspended by a telescopic front fork and twin rear shock absorbers. Braking is taken care of by a front 280mm disc and 153mm rear drum brake. However, single-channel ABS on Bullet 350 has been available since 2019.</p></div>
</div>
<div id="Bullet" class="overview-img">
<img src="photos/asset 25.jpeg" alt="super meteor 650">
</div>
</div>
</section>
<section class="ready-to-ride flex">
<h3>Start Riding Today</h3>
<a href="#" class="secondary-btn">Get Started</a>
</section>
<footer class="main-footer">
<div class="container footer flex">
<div class="sub-footer sub-foot">
<h3>Join Us On</h3>
<div class="logos">
<i class="fa-brands fa-facebook fa-2x"></i>
<i class="fa-brands fa-twitter fa-2x"></i>
<i id="insta" class="fa-brands fa-instagram fa-2x"></i>
<i class="fa-brands fa-linkedin fa-2x"></i>
<i id="utube" class="fa-brands fa-youtube fa-2x"></i>
</div>
</div>
<div class="sub-footer info flex">
<h4>company</h4>
<a href="#"><h5>About Us</h5></a>
<a href="#"><h5>Sitemap</h5></a>
</div>
<div class="sub-footer sub-foot">
<h3>Download Mobile App</h3>
<div class="logos">
<i class="fa-brands fa-google-play fa-2x"></i>
<i class="fa-brands fa-app-store-ios fa-2x"></i>
</div>
</div>
</div>
<div class="conaiter">
<div class="log">
<img src="photos/cop.jpg" alt="company logo">
</div>
</div>
</footer>
<script src="https://kit.fontawesome.com/955a9a9a24.js" crossorigin="anonymous"></script>
<script>
const toogleButton = document.getElementById('toogle-link');
const toogleNav = document.getElementById('nav-link');
const mainNav = document.getElementsByClassName('main-nav');
toogleButton.addEventListener('click', () => {
// console.log(mainNav[0].classList);
toogleNav.classList.toggle('active');
mainNav[0].classList.toggle('main-nav-toogle');
})
</script>
</body>
</html>