├── .vscode
    └── settings.json
├── images
    ├── faq.png
    ├── tvs.png
    ├── bike-1.png
    ├── bike-2.png
    ├── bike-3.png
    ├── bike-4.jpg
    ├── honda.png
    ├── suzuki.png
    ├── user-1.png
    ├── user-2.png
    ├── user-3.jpg
    ├── yamaha.png
    ├── appleapp.png
    ├── googleapp.png
    ├── header-bike.png
    └── feature-bike.jpg
├── README.md
├── css
    └── style.css
└── index.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/images/faq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/faq.png


--------------------------------------------------------------------------------
/images/tvs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/tvs.png


--------------------------------------------------------------------------------
/images/bike-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/bike-1.png


--------------------------------------------------------------------------------
/images/bike-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/bike-2.png


--------------------------------------------------------------------------------
/images/bike-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/bike-3.png


--------------------------------------------------------------------------------
/images/bike-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/bike-4.jpg


--------------------------------------------------------------------------------
/images/honda.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/honda.png


--------------------------------------------------------------------------------
/images/suzuki.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/suzuki.png


--------------------------------------------------------------------------------
/images/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/user-1.png


--------------------------------------------------------------------------------
/images/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/user-2.png


--------------------------------------------------------------------------------
/images/user-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/user-3.jpg


--------------------------------------------------------------------------------
/images/yamaha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/yamaha.png


--------------------------------------------------------------------------------
/images/appleapp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/appleapp.png


--------------------------------------------------------------------------------
/images/googleapp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/googleapp.png


--------------------------------------------------------------------------------
/images/header-bike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/header-bike.png


--------------------------------------------------------------------------------
/images/feature-bike.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hazrat-Ali9/Honda-Shop/HEAD/images/feature-bike.jpg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bike-Shop
2 | 
3 | Project Name : Bike
4 | 
5 |  you can check out the live site link from: https://hazrat-ali-bike.netlify.app/
6 | 
7 | * This Website is Bike related Website.
8 | * The Website Using HTML & Vanila CSS
9 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | /*==========Fonts==========*/
  2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');
  3 | 
  4 | 
  5 | 
  6 | 
  7 | 
  8 | /*========== Common Style Start ==========*/
  9 | 
 10 | 
 11 | body
 12 | {
 13 |     font-family: 'Poppins'!important;
 14 | }
 15 | 
 16 | 
 17 | .hero-button
 18 | {
 19 |     background:#E76F51 !important;
 20 |     color:#fff !important;
 21 | }
 22 | 
 23 | .hero-button-2
 24 | {
 25 |     border:2px solid #E76F51 !important;
 26 |     color:#E76F51   !important;
 27 | }
 28 | 
 29 | .section-header-font
 30 | {
 31 |     font-size:35px;
 32 |     font-weight: 600;
 33 | }
 34 | 
 35 | .section-container
 36 | {
 37 |     margin:100px 0 150px;
 38 | }
 39 | 
 40 | .container-header span
 41 | {
 42 |     color:#E76F51 !important;
 43 | }
 44 | 
 45 | .header-pera
 46 | {
 47 |     color:#E76F51;
 48 | }
 49 | 
 50 | .header-pera::after
 51 | {
 52 |     content:"";
 53 |     height:1px;
 54 |     width:50%;
 55 |     background-color: #E76F51;
 56 |     display: block;
 57 |     margin:auto;
 58 | }
 59 | /*========== Common Style End ==========*/
 60 | 
 61 | 
 62 | 
 63 | 
 64 | /*========== Header Custom Style Start ==========*/
 65 | 
 66 | .header, .nav-color
 67 | {
 68 |     background-color:#264653;
 69 | }
 70 | 
 71 | .custom-nav-link a
 72 | {
 73 |     color:#fff !important;
 74 | }
 75 | 
 76 | .header-datails
 77 | {
 78 |     margin-top:20px;
 79 | }
 80 | 
 81 | /*========== Header Custom Style End ==========*/
 82 | 
 83 | 
 84 | 
 85 | 
 86 | 
 87 | 
 88 | 
 89 | /*========== Fetured Bikes  Custom Style Start ==========*/
 90 | .image-filter
 91 | {
 92 |     filter:grayscale(1);
 93 | }
 94 | /*========== Fetured Bikes  Custom Style End ==========*/
 95 | 
 96 | 
 97 | 
 98 | 
 99 | /*========== Latest News Custom Style Start ==========*/
100 | .latest-news-card
101 | {
102 |     border:none;
103 |     box-shadow: 0 0 10px 0.5px #33333360;
104 | }
105 | /*========== Latest News Custom Style End ==========*/
106 | 
107 | 
108 | 
109 | 
110 | /*========== Happy Clients Custom Style Start ==========*/
111 | .clint-img img
112 | {
113 | 
114 |     height: 100px;
115 |     width:100px;
116 |     border-radius: 50%;
117 | }
118 | 
119 | .rating-icon
120 | {
121 |     color:#E76F51;
122 |     margin:10px 0;
123 | }
124 | 
125 | .clint-name a
126 | {
127 |     text-decoration:none;
128 |     font-weight: 600;
129 | }
130 | /*========== Happy Clients Custom Style End ==========*/
131 | 
132 | 
133 | 
134 | 
135 | /*========== Brand Overview Custom Style Start ==========*/
136 | .single-brand img {
137 |     transition: .4s ease;
138 |     border: 1px solid transparent;
139 | }
140 | .single-brand img:hover {
141 |     box-shadow: 0 0 5px 3px rgba(170, 170, 170, .5);
142 |     border: 1px solid  rgba(170, 170, 170, .5);
143 | }
144 | /*========== Brand Overview Custom Style End==========*/
145 | 
146 | 
147 | 
148 | /*========== Footer Custom Style Start==========*/
149 | .footer
150 | {
151 |     background-color:#0B0D17;
152 | }
153 | 
154 | .footer-link a
155 | {
156 |     display:inline-block;
157 |     text-decoration:none;
158 |     margin:5px ;
159 |     color:#fff;
160 | }
161 | 
162 | .footer-link a:hover
163 | {
164 |     color:#fff;
165 | }
166 | 
167 | .copyright
168 | {
169 |     color:#D9DBE1;
170 |     margin:15px 0 0 0 ;
171 | }
172 | 
173 | /*========== Footer Custom Style end==========*/


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Bike-Shop</title>
  9 | 
 10 |   <!--========== Custom CSS Style Sheet ==========-->
 11 | 
 12 |   <link rel="stylesheet" href="css/style.css">
 13 | 
 14 | 
 15 |   <!--========== Bootstrap CDN CSS Style Sheet ==========-->
 16 | 
 17 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 18 |     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 19 | 
 20 | 
 21 |   <!--========== Font Awesome Kit ==========-->
 22 | 
 23 |   <script src="https://kit.fontawesome.com/1ea2824026.js" crossorigin="anonymous"></script>
 24 | 
 25 | 
 26 | </head>
 27 | 
 28 | <body>
 29 | 
 30 | 
 31 |   <!--========== Header Section Start ==========-->
 32 | 
 33 |   <header class="header container-fluid">
 34 | 
 35 | 
 36 | 
 37 |     <nav class="navbar navbar-expand-lg navbar-dark fixed-top container-fluid nav-color">
 38 |       <div class="container-fluid me-lg-5">
 39 | 
 40 |         <button class="navbar-toggler ms-auto custom-toggle-icon" type="button" data-bs-toggle="collapse"
 41 |           data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
 42 |           aria-label="Toggle navigation">
 43 |           <span class="navbar-toggler-icon "></span>
 44 |         </button>
 45 | 
 46 |         <div class="collapse navbar-collapse " id="navbarNavAltMarkup">
 47 |           <div class="navbar-nav ms-auto me-lg-5 custom-nav-link">
 48 |             <a class="nav-link active" aria-current="page" href="#Home">Home</a>
 49 |             <a class="nav-link " href="#Features">Features</a>
 50 |             <a class="nav-link" href="#Pricing">Pricing</a>
 51 |           </div>
 52 |           <button type="button" class="btn hero-button">Login</button>
 53 |         </div>
 54 |       </div>
 55 |     </nav>
 56 | 
 57 | 
 58 |     <div class="container header-datails">
 59 | 
 60 |       <div class="row py-5 d-flex justify-content-center align-items-center " id="Home">
 61 | 
 62 |         <div class="col-md-6  col-lg-6 ">
 63 |           <p class="text-light mb-1">Computer-controlled digital transistorized with electronic advance</p>
 64 | 
 65 |           <h1 class="text-light section-header-font">Honda CBR 300R</h1>
 66 | 
 67 |           <p class="text-light my-4">
 68 |             Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim
 69 |             velit mollit. Exercitation veniam consequat sunt nostrud amet.
 70 |           </p>
 71 | 
 72 |           <div class="custom-modal">
 73 | 
 74 |             <!-- Button trigger modal -->
 75 |             <button type="button" class="btn hero-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
 76 |               Purchase
 77 |             </button>
 78 | 
 79 |             <!-- Modal -->
 80 |             <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
 81 |               aria-hidden="true">
 82 |               <div class="modal-dialog">
 83 |                 <div class="modal-content">
 84 |                   <div class="modal-header">
 85 |                     <h5 class="modal-title" id="exampleModalLabel">term and conditione</h5>
 86 |                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 87 |                   </div>
 88 |                   <div class="modal-body">
 89 |                     <h1>Registration Access and Use</h1>
 90 |                     <p>We welcome users to register on our digital platforms. We offer the below mentioned registration
 91 |                       services which may be subject to change in the future. All changes will be appended in the terms
 92 |                       and conditions page and communicated to existing users by email.
 93 | 
 94 |                       Registration services are offered for individual subscribers only. If multiple individuals propose
 95 |                       to access the same account or for corporate accounts kindly contact or write in to us.
 96 |                       Subscription rates will vary for multiple same time access.
 97 | 
 98 |                       The nature and volume of Business Standard content services you consume on the digital platforms
 99 |                       will vary according to the type of registration you choose, on the geography you reside or the
100 |                       offer you subscribe to.
101 | 
102 |                       a) Free Registration
103 | 
104 |                       b) Premium Registration
105 | 
106 |                       c) Special Offers
107 | 
108 |                       d) Combo registrations with partners
109 | 
110 |                       The details of the services and access offered for each account have been listed on
111 |                       www.business-standard.com/subscription-cart/product
112 | 
113 |                       We may in exceptional circumstances cease to provide subscription services. We will give you at
114 |                       least 7 days notice of this, if possible. If we do so, then we will have no further obligation to
115 |                       you.</p>
116 |                   </div>
117 |                   <div class="modal-footer">
118 |                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
119 |                     <button type="button" class="btn btn-primary">Accept</button>
120 |                   </div>
121 |                 </div>
122 |               </div>
123 |             </div>
124 | 
125 |           </div>
126 | 
127 |         </div>
128 | 
129 |         <div class="col-md-12 col-lg-6 p-5">
130 |           <img src="images/header-bike.png" alt="" class="d-block w-100">
131 |         </div>
132 | 
133 |   </header>
134 | 
135 |   <!--========== Header Section End ==========-->
136 | 
137 | 
138 | 
139 |   <main>
140 | 
141 |     <!--========== Fetured Bikes Section Start ==========-->
142 | 
143 |     <section class="container section-container"id="Features">
144 | 
145 |       <div class="container-header py-4 ">
146 |         <div class="d-flex justify-content-center">
147 |           <h1 class="section-header-font">Fetured Bikes 2023</h1>
148 |         </div>
149 |         <div class="d-flex justify-content-center">
150 |           <p class="header-pera fw-bold">Best bike collection</p>
151 |         </div>
152 |       </div>
153 | 
154 | 
155 | 
156 |       <div class="row d-flex justify-content-between align-items-center mt-5">
157 | 
158 |         <div class="col-lg-3 col-sm-10 mx-auto mb-5">
159 |           <img src="images/feature-bike.jpg" alt="" class="w-100 image-filter">
160 |         </div>
161 | 
162 |         <div class="col-lg-3 col-sm-10 mx-auto mb-5">
163 |           <img src="images/feature-bike.jpg" alt="" class="w-100">
164 |         </div>
165 | 
166 |         <div class="col-lg-3 col-sm-10 mx-auto mb-5">
167 |           <img src="images/feature-bike.jpg" alt="" class="w-100 image-filter">
168 |         </div>
169 | 
170 | 
171 |       </div>
172 | 
173 | 
174 | 
175 |     </section>
176 | 
177 |     <!--========== Fetured Bikes Section End ==========-->
178 | 
179 | 
180 |     <!--========== latest News Section Start ==========-->
181 | 
182 |     <article class="container section-container">
183 | 
184 | 
185 |       <div class="container-header py-4">
186 |         <div class="d-flex justify-content-center">
187 |           <h1 class="section-header-font">latest News</h1>
188 |         </div>
189 |       </div>
190 | 
191 |       <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 justify-content-center mt-5 ">
192 | 
193 |         <div class="col  mx-auto mb-5 ">
194 |           <div class="card latest-news-card">
195 |             <div class="card-img p-3">
196 |               <img src="images/bike-1.png" class="card-img-top" alt="...">
197 |             </div>
198 | 
199 |             <div class="card-body">
200 |               <h5 class="card-title fw-bold">Ducati XDIAVEL S-73</h5>
201 |               <p class="card-text">Ducati renews the XDiavel range by introducing two new versions for 2021: the XDiavel
202 |                 Dark and the XDiavel Black Star.</p>
203 | 
204 |               <button type="button" class="btn hero-button fw-bold">Read More</button>
205 | 
206 |             </div>
207 | 
208 |           </div>
209 |         </div>
210 | 
211 |         <div class="col  mx-auto mb-5 ">
212 |           <div class="card latest-news-card">
213 |             <div class="card-img p-3">
214 |               <img src="images/bike-2.png" class="card-img-top" alt="...">
215 |             </div>
216 | 
217 |             <div class="card-body">
218 |               <h5 class="card-title fw-bold">Motorcycles & Scooters</h5>
219 |               <p class="card-text">A scooter or motor scooter is a motorcycle with a step-through frame and a platform
220 |                 for the rider's feet.</p>
221 | 
222 |               <button type="button" class="btn hero-button-2 fw-bold">Read More</button>
223 | 
224 |             </div>
225 | 
226 |           </div>
227 |         </div>
228 | 
229 | 
230 |         <div class="col mx-auto mb-5 ">
231 |           <div class="card latest-news-card">
232 |             <div class="card-img p-3">
233 |               <img src="images/bike-3.png" class="card-img-top" alt="...">
234 |             </div>
235 | 
236 |             <div class="card-body">
237 |               <h5 class="card-title fw-bold">2021 Honda CBR500R</h5>
238 |               <p class="card-text">Is it any wonder why the Honda CBR500R is one of our most popular sportbikes? It just
239 |                 gets so many things right. </p>
240 | 
241 |               <button type="button" class="btn hero-button-2 fw-bold">Read More</button>
242 | 
243 |             </div>
244 | 
245 |           </div>
246 |         </div>
247 | 
248 |       </div>
249 |     </article>
250 | 
251 |     <!--========== latest News Section end ==========-->
252 | 
253 |     <!--========== Happy Clients Section Start ==========-->
254 | 
255 | 
256 | 
257 |     <section class="container section-container">
258 | 
259 |       <div class="container-header py-4 ">
260 |         <div class="d-flex justify-content-center text-center">
261 |           <h1 class=" section-header-font">Happy <span>Clients says</span></h1>
262 |         </div>
263 |       </div>
264 | 
265 |       <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 justify-content-center gb-5 mt-5">
266 | 
267 |         <div class="col mb-5">
268 |           <div class="card">
269 |             <div class="clint-img mx-auto my-4 ">
270 |               <img src="images/user-1.png" class="card-img-top" alt="...">
271 |             </div>
272 | 
273 |             <div class="card-body text-center">
274 |               <p class="card-text">Slate helps you see how
275 |                 many more days you need
276 |                 to work to reach your financial
277 |                 goal for the month and year.</p>
278 | 
279 |               <div class="rating-icon">
280 |                 <i class="fas fa-star"></i>
281 |                 <i class="fas fa-star"></i>
282 |                 <i class="fas fa-star"></i>
283 |                 <i class="fas fa-star"></i>
284 |                 <i class="far fa-star"></i>
285 |               </div>
286 | 
287 |               <div class="clint-name">
288 |                 <a href="#">Regina Miles</a>
289 |               </div>
290 | 
291 |               <p class="fw-bold mt-4 mb-5">Banker</p>
292 |             </div>
293 |           </div>
294 |         </div>
295 | 
296 | 
297 | 
298 |         <div class="col mb-5">
299 |           <div class="card">
300 |             <div class="clint-img mx-auto my-4 ">
301 |               <img src="images/user-2.png" class="card-img-top" alt="...">
302 |             </div>
303 | 
304 |             <div class="card-body text-center">
305 |               <p class="card-text">Slate helps you see how
306 |                 many more days you need
307 |                 to work to reach your financial
308 |                 goal for the month and year.</p>
309 | 
310 |               <div class="rating-icon">
311 |                 <i class="fas fa-star"></i>
312 |                 <i class="fas fa-star"></i>
313 |                 <i class="fas fa-star"></i>
314 |                 <i class="fas fa-star"></i>
315 |                 <i class="far fa-star"></i>
316 |               </div>
317 | 
318 |               <div class="clint-name">
319 |                 <a href="#">Regina Miles</a>
320 |               </div>
321 | 
322 |               <p class="fw-bold mt-4 mb-5">Banker</p>
323 |             </div>
324 |           </div>
325 |         </div>
326 | 
327 | 
328 | 
329 |         <div class="col mb-5">
330 |           <div class="card">
331 |             <div class="clint-img mx-auto my-4 ">
332 |               <img src="images/user-3.jpg" class="card-img-top" alt="...">
333 |             </div>
334 | 
335 |             <div class="card-body text-center">
336 |               <p class="card-text">Slate helps you see how
337 |                 many more days you need
338 |                 to work to reach your financial
339 |                 goal for the month and year.</p>
340 | 
341 |               <div class="rating-icon">
342 |                 <i class="fas fa-star"></i>
343 |                 <i class="fas fa-star"></i>
344 |                 <i class="fas fa-star"></i>
345 |                 <i class="fas fa-star"></i>
346 |                 <i class="far fa-star"></i>
347 |               </div>
348 | 
349 |               <div class="clint-name">
350 |                 <a href="#">Regina Miles</a>
351 |               </div>
352 | 
353 |               <p class="fw-bold mt-4 mb-5">Banker</p>
354 |             </div>
355 |           </div>
356 |         </div>
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 |     </section>
366 | 
367 | 
368 |     <!--========== Happy Clients Section End ==========-->
369 | 
370 | 
371 | 
372 | 
373 |     <!--========== FAQ Section Start ==========-->
374 | 
375 | 
376 |     <section class="container section-container">
377 | 
378 | 
379 |       <div class="container-header py-4">
380 |         <div class="d-flex justify-content-center text-center ">
381 |           <h1 class="section-header-font">Frequently Asked <span>Questions</span></h1>
382 |         </div>
383 |       </div>
384 | 
385 | 
386 |       <div class="row d-flex justify-content-center align-items-center mt-5 ">
387 | 
388 |         <div class="col-md-8 col-lg-4 mx-auto mb-5">
389 |           <img src="images/faq.png" alt="" class="d-block w-100">
390 | 
391 |         </div>
392 | 
393 | 
394 | 
395 |         <div class="col-md-10  col-lg-5 mx-auto mb-5 ">
396 | 
397 | 
398 | 
399 |           <div class="accordion" id="accordionPanelsStayOpenExample">
400 | 
401 |             <div class="accordion-item">
402 |               <h2 class="accordion-header" id="panelsStayOpen-headingOne">
403 |                 <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse"
404 |                   data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true"
405 |                   aria-controls="panelsStayOpen-collapseOne">
406 |                   What are the most important things I should know about riding a bike?
407 |                 </button>
408 |               </h2>
409 |               <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show"
410 |                 aria-labelledby="panelsStayOpen-headingOne">
411 |                 <div class="accordion-body">
412 |                   Safety First! Always obey the rules of the road. Obey all traffic signals, signs, and laws. Get in the
413 |                   mindset of “driving” your bike—not just “riding” your bike. This will help you be a more focused and
414 |                   legally compliant bike rider.
415 |                 </div>
416 |               </div>
417 |             </div>
418 | 
419 | 
420 |             <div class="accordion-item">
421 |               <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
422 |                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
423 |                   data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
424 |                   aria-controls="panelsStayOpen-collapseTwo">
425 |                   How to tell if you need a new helmet?
426 |                 </button>
427 |               </h2>
428 |               <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
429 |                 aria-labelledby="panelsStayOpen-headingTwo">
430 |                 <div class="accordion-body">
431 |                   Bear in mind that if the helmet did its job most people would tell you that they did not even hit
432 |                   their head, or did not hit their head that hard. And the thin shells on most helmets now tend to hide
433 |                   any dents in the foam. But if you can see marks on the shell or measure any foam crush at all, replace
434 |                   the helmet.
435 |                 </div>
436 |               </div>
437 |             </div>
438 | 
439 | 
440 |             <div class="accordion-item">
441 |               <h2 class="accordion-header" id="panelsStayOpen-headingThree">
442 |                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
443 |                   data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false"
444 |                   aria-controls="panelsStayOpen-collapseThree">
445 |                   My bike has been in storage is it safe to ride?
446 |                 </button>
447 |               </h2>
448 |               <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse"
449 |                 aria-labelledby="panelsStayOpen-headingThree">
450 |                 <div class="accordion-body">
451 |                   The bottom line: Leaving your bike outside for a day or two won't do major damage. You may see signs
452 |                   of rust after a week of neglect. After one month in bad conditions, your beloved bike parts will start
453 |                   to degrade.
454 |                 </div>
455 |               </div>
456 |             </div>
457 | 
458 | 
459 |             <div class="accordion-item">
460 |               <h2 class="accordion-header" id="panelsStayOpen-headingFour">
461 |                 <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse"
462 |                   data-bs-target="#panelsStayOpen-collapseFour" aria-expanded="false"
463 |                   aria-controls="panelsStayOpen-collapseFour">
464 |                   What rules should I follow when riding my bike?
465 |                 </button>
466 |               </h2>
467 |               <div id="panelsStayOpen-collapseFour" class="accordion-collapse collapse"
468 |                 aria-labelledby="panelsStayOpen-headingFour">
469 |                 <div class="accordion-body">
470 |                   Be visible at all times. - Wear bright and visible clothes. Reflective stripes ads viability. Always
471 |                   stay out of blind zones. Alert other drivers before entering their blind zone.
472 |                 </div>
473 |               </div>
474 |             </div>
475 | 
476 | 
477 |           </div>
478 | 
479 | 
480 | 
481 |         </div>
482 | 
483 |       </div>
484 | 
485 |       </div>
486 | 
487 |     </section>
488 | 
489 | 
490 |     <!--========== FAQ Section End ==========-->
491 | 
492 | 
493 | 
494 |     <!--========== Brand Overview Section Start ==========-->
495 | 
496 |     <section class="container section-container"" id="Pricing">
497 | 
498 |       <div class="container-header mt-5">
499 |         <div class="d-flex justify-content-center">
500 |           <h1 class="section-header-font">Brand <span>Overview</span></h1>
501 |         </div>
502 |       </div>
503 | 
504 |       <div class="row py-5 pb-0">
505 |         <div class="col-lg-2 col-7 m-auto single-brand p-3">
506 |           <a href="#"><img src="images/honda.png" class="img-fluid  mb-4" alt=""></a>
507 |         </div>
508 |         <div class="col-lg-2 col-7 m-auto single-brand  p-3 ">
509 |           <a href="#"><img src="images/tvs.png" class="img-fluid mb-4" alt=""></a>
510 |         </div>
511 |         <div class="col-lg-2 col-7 m-auto single-brand   p-3">
512 |           <a href="#"><img src="images/suzuki.png" class="img-fluid mb-4" alt=""></a>
513 |         </div>
514 |         <div class="col-lg-2 col-7 m-auto single-brand  p-3">
515 |           <a href="#"><img src="images/yamaha.png" class="img-fluid mb-4" alt=""></a>
516 |         </div>
517 | 
518 |       </div>
519 | 
520 |     </section>
521 | 
522 |     <!--========== Brand Overview Section End ==========-->
523 | 
524 | 
525 | 
526 |     <!--========== Shop Location Section Start ==========-->
527 | 
528 | 
529 |     <section class="container section-container">
530 | 
531 |       <div class="container-header mt-5">
532 |         <div class="d-flex justify-content-center">
533 |           <h1 class="section-header-font">Our <span>Showroom</span></h1>
534 |         </div>
535 |       </div>
536 | 
537 |       <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2  mt-5">
538 | 
539 |         <div class="col mb-5 text-center">
540 | 
541 |           <div class="w-50  mx-auto">
542 | 
543 |             <h3 class="fw-bold">Dhaka</h3>
544 |             <p><b>Address:</b> Hazrat Ali, Dhaka 1361</p>
545 |             <p><b>Phone:</b>+01986234683</p>
546 |           </div>
547 | 
548 |         </div>
549 | 
550 |         <div class="col mb-5 text-center">
551 | 
552 |           <div class="w-50 mx-auto">
553 | 
554 |             <h3 class="fw-bold">Barisal</h3>
555 |             <p><b>Address:</b> Solih Ahmed, Barisal 3124</p>
556 |             <p><b>Phone:</b>+01521559166</p>
557 | 
558 |           </div>
559 | 
560 |         </div>
561 | 
562 |         <div class="col mb-5 text-center">
563 | 
564 |           <div class="w-50 mx-auto">
565 | 
566 |             <h3 class="fw-bold">Narshindhi</h3>
567 |             <p><b>Address:</b> Morsedul Islam , Dhaka 1721</p>
568 |             <p><b>Phone:</b>+01631840701</p>
569 | 
570 |           </div>
571 | 
572 |         </div>
573 | 
574 |         <div class="col mb-5 text-center">
575 | 
576 |           <div class="w-50 mx-auto">
577 | 
578 |             <h3 class="fw-bold">Jessor</h3>
579 |             <p><b>Address:</b> Nazmul Hasan, jessor 4352 </p>
580 |             <p><b>Pnone:</b>01739838971</p>
581 | 
582 |           </div>
583 |         </div>
584 |       </div>
585 | 
586 | 
587 |     </section>
588 | 
589 |     <!--========== Shop Location Section End ==========-->
590 | 
591 |   </main>
592 | 
593 |   <!--========== Footer Section Start ==========-->
594 | 
595 | 
596 |   <footer class="container-fluid footer">
597 | 
598 |     <div class="container py-5 mt-5 ">
599 |       <div class="row">
600 | 
601 |         <div class="col-md-10 mb-5">
602 | 
603 |           <div class="col footer-link">
604 |             <a href="#">Download Now</a>
605 |             <a href="#">License</a>
606 |           </div>
607 | 
608 |           <div class="col footer-link">
609 |             <a href="#">About</a>
610 |             <a href="#">Features</a>
611 |             <a href="#">Pricing</a>
612 |             <a href="#">Careers</a>
613 |             <a href="#">Help</a>
614 |             <a href="#">Privacy Policy</a>
615 |           </div>
616 | 
617 |           <div class="col copyright">
618 |             <p> Copyright @ 2023-All Right Reserved By Hazrat Ali</p>
619 |           </div>
620 | 
621 |         </div>
622 | 
623 | 
624 |         <div class="col-6 col-md-4 col-lg-2">
625 |           <h4 class="fw-bold text-light">Get the App</h4>
626 |           <div class="app-image d-flex flex-column ">
627 |             <a href="https://www.apple.com/store"><img src="images/appleapp.png" alt="" class="w-100"></a>
628 |             <a href="https://play.google.com/intl/en_us/badges/"><img src="images/googleapp.png" alt="" class="w-100"></a>
629 |           </div>
630 |         </div>
631 |       </div>
632 |     </div>
633 | 
634 | 
635 |   </footer>
636 | 
637 |   <!--========== Footer Section end ==========-->
638 | 
639 |   <!--========== Bootstrap CDN JS Script Start ==========-->
640 | 
641 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
642 |     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
643 |     crossorigin="anonymous"></script>
644 | 
645 |   <!--========== Bootstrap CDN JS Script End ==========-->
646 | </body>
647 | 
648 | </html>


--------------------------------------------------------------------------------