├── css
    └── styles.css
├── images
    ├── Bike 2.png
    ├── bike-1.png
    ├── bike-2.png
    ├── bike-3.png
    ├── bike-4.jpg
    ├── bike-5.png
    ├── bike-6.png
    ├── bike-7.png
    ├── bike-8.png
    ├── faq.png
    ├── feature-bike.jpg
    ├── header-bike.png
    ├── icons
    │   ├── star-half-stroke-solid.svg
    │   ├── star-regular.svg
    │   └── star-solid.svg
    ├── user-1.png
    ├── user-2.png
    └── user-3.png
└── index.html


/css/styles.css:
--------------------------------------------------------------------------------
 1 | .bikerz-zone-light-red{
 2 |     background-color: rgba(255, 0, 0, 0.19);
 3 | }
 4 | .rating-icon{
 5 |     width: 20px;
 6 | }
 7 | 
 8 | .btn-bz-danger{
 9 |     background-color: rgba(234, 82, 115, 0.505);
10 |     color: white;
11 | }
12 | 
13 | .w-25{
14 |     width: 75% !important;
15 | }


--------------------------------------------------------------------------------
/images/Bike 2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/Bike 2.png


--------------------------------------------------------------------------------
/images/bike-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-1.png


--------------------------------------------------------------------------------
/images/bike-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-2.png


--------------------------------------------------------------------------------
/images/bike-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-3.png


--------------------------------------------------------------------------------
/images/bike-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-4.jpg


--------------------------------------------------------------------------------
/images/bike-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-5.png


--------------------------------------------------------------------------------
/images/bike-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-6.png


--------------------------------------------------------------------------------
/images/bike-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-7.png


--------------------------------------------------------------------------------
/images/bike-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/bike-8.png


--------------------------------------------------------------------------------
/images/faq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/faq.png


--------------------------------------------------------------------------------
/images/feature-bike.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/feature-bike.jpg


--------------------------------------------------------------------------------
/images/header-bike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/header-bike.png


--------------------------------------------------------------------------------
/images/icons/star-half-stroke-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="#ffc107" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M288 376.4l.1-.1 26.4 14.1 85.2 45.5-16.5-97.6-4.8-28.7 20.7-20.5 70.1-69.3-96.1-14.2-29.3-4.3-12.9-26.6L288.1 86.9l-.1 .3V376.4zm175.1 98.3c2 12-3 24.2-12.9 31.3s-23 8-33.8 2.3L288.1 439.8 159.8 508.3C149 514 135.9 513.1 126 506s-14.9-19.3-12.9-31.3L137.8 329 33.6 225.9c-8.6-8.5-11.7-21.2-7.9-32.7s13.7-19.9 25.7-21.7L195 150.3 259.4 18c5.4-11 16.5-18 28.8-18s23.4 7 28.8 18l64.3 132.3 143.6 21.2c12 1.8 22 10.2 25.7 21.7s.7 24.2-7.9 32.7L438.5 329l24.6 145.7z"/></svg>


--------------------------------------------------------------------------------
/images/icons/star-regular.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="#ffc107" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M287.9 0C297.1 0 305.5 5.25 309.5 13.52L378.1 154.8L531.4 177.5C540.4 178.8 547.8 185.1 550.7 193.7C553.5 202.4 551.2 211.9 544.8 218.2L433.6 328.4L459.9 483.9C461.4 492.9 457.7 502.1 450.2 507.4C442.8 512.7 432.1 513.4 424.9 509.1L287.9 435.9L150.1 509.1C142.9 513.4 133.1 512.7 125.6 507.4C118.2 502.1 114.5 492.9 115.1 483.9L142.2 328.4L31.11 218.2C24.65 211.9 22.36 202.4 25.2 193.7C28.03 185.1 35.5 178.8 44.49 177.5L197.7 154.8L266.3 13.52C270.4 5.249 278.7 0 287.9 0L287.9 0zM287.9 78.95L235.4 187.2C231.9 194.3 225.1 199.3 217.3 200.5L98.98 217.9L184.9 303C190.4 308.5 192.9 316.4 191.6 324.1L171.4 443.7L276.6 387.5C283.7 383.7 292.2 383.7 299.2 387.5L404.4 443.7L384.2 324.1C382.9 316.4 385.5 308.5 391 303L476.9 217.9L358.6 200.5C350.7 199.3 343.9 194.3 340.5 187.2L287.9 78.95z"/></svg>


--------------------------------------------------------------------------------
/images/icons/star-solid.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="#ffc107" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>


--------------------------------------------------------------------------------
/images/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/user-1.png


--------------------------------------------------------------------------------
/images/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/user-2.png


--------------------------------------------------------------------------------
/images/user-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/bikerz-zone/3c8f5d38d3609e384927b8d9a69c388cd2fde499/images/user-3.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="utf-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <title>Bikerz Zone</title>
  8 |     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
  9 |         integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
 10 | 
 11 |         <link rel="stylesheet" href="css/styles.css">
 12 |         <script src="https://kit.fontawesome.com/d7b7563d24.js" crossorigin="anonymous"></script>
 13 |     
 14 | </head>
 15 | 
 16 | <body class="container-lg">
 17 |     <header>
 18 |         <nav class="navbar navbar-expand-lg bg-body-tertiary">
 19 |             <div class="container-fluid">
 20 |                 <a class="navbar-brand" href="#">Bikerz Zone</a>
 21 |                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 22 |                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 23 |                     aria-expanded="false" aria-label="Toggle navigation">
 24 |                     <span class="navbar-toggler-icon"></span>
 25 |                 </button>
 26 |                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
 27 |                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0 fw-semibold">
 28 |                         <li class="nav-item">
 29 |                             <a class="nav-link active" aria-current="page" href="#">Home</a>
 30 |                         </li>
 31 |                         <li class="nav-item">
 32 |                             <a class="nav-link" href="#">Bikes</a>
 33 |                         </li>
 34 |                         <li class="nav-item">
 35 |                             <a class="nav-link" href="#">Discount</a>
 36 |                         </li>
 37 |                         <li class="nav-item">
 38 |                             <a class="nav-link" href="#">Blog</a>
 39 |                         </li>
 40 |                     </ul>
 41 | 
 42 |                     <button class="ms-5 btn btn-outline-success" type="submit">Login</button>
 43 | 
 44 |                 </div>
 45 |             </div>
 46 |         </nav>
 47 | 
 48 |         <!-- banner slider  -->
 49 |         <div id="carouselExample" class="carousel slide bg-danger rounded bg-opacity-10 p-5">
 50 |             <div class="carousel-inner">
 51 |               <div class="carousel-item active">
 52 |                 <div class="row">
 53 |                     <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
 54 |                         <div>
 55 |                             <h1>Ride-on R15 V4 with Smile
 56 |                             </h1>
 57 |                             <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
 58 |                             </p>
 59 |                             <button class="btn btn-bz-danger">Purchase</button>
 60 |                         </div>
 61 |                     </div>
 62 |                     <div class="col-12 col-md-6">
 63 |                         <img src="images/bike-1.png" class="d-block w-100" alt="...">
 64 |                     </div>
 65 |                 </div>
 66 |               </div>
 67 |               <div class="carousel-item">
 68 |                 <div class="row">
 69 |                     <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
 70 |                         <div>
 71 |                             <h1>Ride-on R15 V4 with Smile
 72 |                             </h1>
 73 |                             <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
 74 |                             </p>
 75 |                             <button class="btn btn-danger">Purchase</button>
 76 |                         </div>
 77 |                     </div>
 78 |                     <div class="col-12 col-md-6">
 79 |                         <img src="images/bike-2.png" class="d-block w-100" alt="...">
 80 |                     </div>
 81 |                 </div>
 82 |               </div>
 83 |               <div class="carousel-item">
 84 |                 <div class="row">
 85 |                     <div class="col-12 col-md-6 d-flex justify-content-center align-items-center">
 86 |                         <div>
 87 |                             <h1>Ride-on R15 V4 with Smile
 88 |                             </h1>
 89 |                             <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
 90 |                             </p>
 91 |                             <button class="btn btn-danger">Purchase</button>
 92 |                         </div>
 93 |                     </div>
 94 |                     <div class="col-12 col-md-6">
 95 |                         <img src="images/bike-3.png" class="d-block w-100" alt="...">
 96 |                     </div>
 97 |                 </div>
 98 |               </div>
 99 |             </div>
100 |             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
101 |               <span class="carousel-control-prev-icon bikerz-zone-light-red" aria-hidden="true"></span>
102 |               <span class="visually-hidden">Previous</span>
103 |             </button>
104 |             <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
105 |               <span class="carousel-control-next-icon bikerz-zone-light-red" aria-hidden="true"></span>
106 |               <span class="visually-hidden">Next</span>
107 |             </button>
108 |           </div>
109 |     </header>
110 | 
111 |     <!-- main -->
112 |     <main>
113 |         <!-- hot bikes section -->
114 |         <section class="text-start text-md-center mt-5">
115 |             <h1>Hot Bikes In This Year</h1>
116 |             <p class="text-danger">Best bike collection</p>
117 |             <hr class="w-25 mx-auto border-danger">
118 |             <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-5 mt-3 px-5">
119 |                 <div class="col">
120 |                     <img class="w-100" src="images/feature-bike.jpg" alt="">
121 |                 </div>
122 |                 <div class="col">
123 |                     <img class="w-75" src="images/feature-bike.jpg" alt="">
124 |                 </div>
125 |                 <div class="col">
126 |                     <img class="w-100" src="images/feature-bike.jpg" alt="">
127 |                 </div>
128 |             </div>
129 |         </section>
130 |         <!-- new arrival section -->
131 |         <section class="bg-info bg-opacity-25 rounded py-5 px-3">
132 |             <h1 class="text-center mt-5">New Arrival</h1>
133 |             <div class="row row-cols-1 row-cols-md-3 g-4">
134 |                 <div class="col">
135 |                   <div class="card rounded-4 h-100">
136 |                     <img src="images/bike-1.png" class="card-img-top" alt="...">
137 |                     <div class="card-body">
138 |                       <h5 class="card-title">Card title</h5>
139 |                       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
140 |                     </div>
141 |                     <div class="card-footer">
142 |                         <button class="btn btn-outline-danger">Purchase</button>
143 |                     </div>
144 |                   </div>
145 |                 </div>
146 |                 <div class="col">
147 |                   <div class="card h-100 rounded-4">
148 |                     <img src="images/bike-2.png" class="card-img-top" alt="...">
149 |                     <div class="card-body">
150 |                       <h5 class="card-title">Card title</h5>
151 |                       <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
152 |                     </div>
153 |                     <div class="card-footer">
154 |                         <button class="btn btn-outline-danger">Purchase</button>
155 |                     </div>
156 |                   </div>
157 |                 </div>
158 |                 <div class="col">
159 |                   <div class="card h-100 rounded-4">
160 |                     <img src="images/bike-3.png" class="card-img-top" alt="...">
161 |                     <div class="card-body">
162 |                       <h5 class="card-title">Card title</h5>
163 |                       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
164 |                     </div>
165 |                     <div class="card-footer">
166 |                       <button class="btn btn-outline-danger">Purchase</button>
167 |                     </div>
168 |                   </div>
169 |                 </div>
170 |               </div>
171 |         </section>
172 | 
173 |         <!-- happy clients -->
174 |         <section class="mt-5">
175 |             <h1 class="text-center py-5">Happy <span class="text-warning">Clients</span> </h1>
176 |             <div class="row row-cols-1 row-cols-md-3 g-4">
177 |                 <div class="col">
178 |                   <div class="card text-center h-100">
179 |                     <img src="images/user-1.png" class="w-25 mx-auto mt-3 card-img-top" alt="...">
180 |                     <div class="card-body">
181 |                       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
182 |                       <p class="text-warning">
183 |                         <i class="fa-solid fa-star"></i>
184 |                         <i class="fa-solid fa-star"></i>
185 |                         <i class="fa-solid fa-star"></i>
186 |                         <i class="fa-solid fa-star"></i>
187 |                         <i class="fa-solid fa-star-half-stroke"></i>
188 |                       </p>
189 |                       <h5 class="text-primary">Micheal Jackson</h5>
190 |                       <p>Banker, Boston</p>
191 |                     </div>
192 |                   </div>
193 |                 </div>
194 |                 <div class="col">
195 |                   <div class="card text-center h-100">
196 |                     <img src="images/user-2.png" class="w-25 mx-auto mt-3 card-img-top" alt="...">
197 |                     <div class="card-body">
198 |                       <p class="card-text">This is a short card.</p>
199 |                       <p class="text-warning">
200 |                         <img class="rating-icon" src="images/icons/star-solid.svg" alt="">
201 |                         <img class="rating-icon" src="images/icons/star-solid.svg" alt="">
202 |                         <img class="rating-icon" src="images/icons/star-solid.svg" alt="">
203 |                         <img class="rating-icon" src="images/icons/star-half-stroke-solid.svg" alt="">
204 |                         <img class="rating-icon" src="images/icons/star-regular.svg" alt="">
205 |                       </p>
206 |                       <h5 class="text-primary">Micheal Jackson</h5>
207 |                       <p>Banker, Boston</p>
208 |                     </div>
209 |                   </div>
210 |                 </div>
211 |                 <div class="col">
212 |                   <div class="card h-100 text-center">
213 |                     <img src="images/user-3.png" class="w-25 mx-auto mt-3 card-img-top" alt="...">
214 |                     <div class="card-body">
215 |                       <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
216 |                       <p class="text-warning">
217 |                         <i class="fa-solid fa-star"></i>
218 |                         <i class="fa-solid fa-star"></i>
219 |                         <i class="fa-solid fa-star"></i>
220 |                         <i class="fa-solid fa-star"></i>
221 |                         <i class="fa-solid fa-star-half-stroke"></i>
222 |                       </p>
223 |                       <h5 class="text-primary">Micheal Jackson</h5>
224 |                       <p>Banker, Boston</p>
225 |                     </div>
226 |                   </div>
227 |                 </div>
228 |               </div>
229 |         </section>
230 |         
231 |         <!-- FAQ section -->
232 |         <section class="mt-5 py-5 px-3 bg-secondary-subtle rounded">
233 |             <h1 class="my-5 text-center">Frequently Asked <span class="text-warning">Questions</span> </h1>
234 |             <div class="row row-cols-1 row-cols-md-2 mt-5 g-4">
235 |                 <div class="col text-center">
236 |                     <img class="w-50" src="images/faq.png" alt="">
237 |                 </div>
238 |                 <div class="col">
239 |                     <div class="accordion" id="accordionExample">
240 |                         <div class="accordion-item">
241 |                           <h2 class="accordion-header" id="headingOne">
242 |                             <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
243 |                               Accordion Item #1
244 |                             </button>
245 |                           </h2>
246 |                           <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
247 |                             <div class="accordion-body">
248 |                               <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
249 |                             </div>
250 |                           </div>
251 |                         </div>
252 |                         <div class="accordion-item">
253 |                           <h2 class="accordion-header" id="headingTwo">
254 |                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
255 |                               Accordion Item #2
256 |                             </button>
257 |                           </h2>
258 |                           <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
259 |                             <div class="accordion-body">
260 |                               <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
261 |                             </div>
262 |                           </div>
263 |                         </div>
264 |                         <div class="accordion-item">
265 |                           <h2 class="accordion-header" id="headingThree">
266 |                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
267 |                               Accordion Item #3
268 |                             </button>
269 |                           </h2>
270 |                           <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
271 |                             <div class="accordion-body">
272 |                               <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
273 |                             </div>
274 |                           </div>
275 |                         </div>
276 |                       </div>
277 |                 </div>
278 |             </div>
279 |         </section>
280 | 
281 | 
282 |     </main>
283 | 
284 |     <!-- footer -->
285 |     <footer>
286 | 
287 |     </footer>
288 | 
289 |     <!-- bootstrap js -->
290 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
291 |         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
292 |         crossorigin="anonymous"></script>
293 | </body>
294 | 
295 | </html>


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