├── images
    ├── icons
    │   ├── star-half-stroke-solid.svg
    │   ├── star-regular.svg
    │   └── star-solid.svg
    ├── others
    │   ├── android.png
    │   ├── extrabike.png
    │   ├── faq.png
    │   ├── feature-bike.png
    │   ├── ios.png
    │   ├── latest1.png
    │   ├── latest2.png
    │   ├── latest3.png
    │   ├── user-1.png
    │   ├── user-2.png
    │   └── user-3.png
    └── slider
    │   ├── bike1.png
    │   ├── bike2.png
    │   ├── bike3.png
    │   └── bike4.png
├── index.html
└── tailwind.config.js


/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/others/android.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/android.png


--------------------------------------------------------------------------------
/images/others/extrabike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/extrabike.png


--------------------------------------------------------------------------------
/images/others/faq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/faq.png


--------------------------------------------------------------------------------
/images/others/feature-bike.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/feature-bike.png


--------------------------------------------------------------------------------
/images/others/ios.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/ios.png


--------------------------------------------------------------------------------
/images/others/latest1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/latest1.png


--------------------------------------------------------------------------------
/images/others/latest2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/latest2.png


--------------------------------------------------------------------------------
/images/others/latest3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/latest3.png


--------------------------------------------------------------------------------
/images/others/user-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/user-1.png


--------------------------------------------------------------------------------
/images/others/user-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/user-2.png


--------------------------------------------------------------------------------
/images/others/user-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/others/user-3.png


--------------------------------------------------------------------------------
/images/slider/bike1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/slider/bike1.png


--------------------------------------------------------------------------------
/images/slider/bike2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/slider/bike2.png


--------------------------------------------------------------------------------
/images/slider/bike3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/slider/bike3.png


--------------------------------------------------------------------------------
/images/slider/bike4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/batch9-biker-zone-with-daisyui/a760658b0b70891bd4a964fb0f9ccb4d9ce3b04f/images/slider/bike4.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.0">
  7 |     <title>Biker Zone</title>
  8 |     <!-- tailwind and daisy ui cdn -->
  9 | 
 10 |     <link href="https://cdn.jsdelivr.net/npm/daisyui@3.2.1/dist/full.css" rel="stylesheet" type="text/css" />
 11 |     <script src="https://cdn.tailwindcss.com"></script>
 12 |     <!-- Google font Poppins -->
 13 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 14 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 15 |     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"
 16 |         rel="stylesheet">
 17 | 
 18 |     <!-- tailwind custom classes -->
 19 |     <script>
 20 |         tailwind.config = {
 21 |             theme: {
 22 |                 extend: {
 23 |                     colors: {
 24 |                         clifford: '#da373d',
 25 |                         'bike-primary': '#E76F51',
 26 |                         'bike-primary-bg': 'rgba(231, 111, 81, 0.10)',
 27 |                     }
 28 |                 }
 29 |             }
 30 |         }
 31 |     </script>
 32 | 
 33 |     <!-- custom styles -->
 34 |     <style>
 35 |         .font-poppins {
 36 |             font-family: 'Poppins', sans-serif;
 37 |         }
 38 |     </style>
 39 | </head>
 40 | 
 41 | <body class="font-poppins">
 42 |     <header class="md:container md:mx-auto">
 43 |         <nav>
 44 |             <div class="navbar bg-base-100">
 45 |                 <div class="flex-1">
 46 |                     <div class="dropdown">
 47 |                         <label tabindex="0" class="btn btn-ghost lg:hidden">
 48 |                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
 49 |                                 stroke="currentColor">
 50 |                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
 51 |                                     d="M4 6h16M4 12h8m-8 6h16" />
 52 |                             </svg>
 53 |                         </label>
 54 |                         <ul tabindex="0"
 55 |                             class="menu menu-sm dropdown-content mt-3 z-[1] p-2 text-base shadow bg-base-100 rounded-box w-52">
 56 |                             <li><a>Home</a></li>
 57 |                             <li><a>Shop</a></li>
 58 |                             <li><a>News</a></li>
 59 |                             <li><a>Contact</a></li>
 60 |                         </ul>
 61 |                     </div>
 62 |                     <a class="btn btn-ghost normal-case text-xl lg:text-4xl">Biker Zone</a>
 63 |                 </div>
 64 |                 <div class="navbar-center hidden lg:flex">
 65 |                     <ul class="menu text-base menu-horizontal px-1">
 66 |                         <li><a>Home</a></li>
 67 |                         <li><a>Shop</a></li>
 68 |                         <li><a>News</a></li>
 69 |                         <li><a>Contact</a></li>
 70 |                     </ul>
 71 |                 </div>
 72 |                 <div class="">
 73 |                     <a class="btn bg-bike-primary text-white">Login</a>
 74 |                 </div>
 75 |             </div>
 76 |         </nav>
 77 |         <!-- slider or carousel -->
 78 |         <div class="carousel w-full lg:h-[550px] bg-bike-primary-bg">
 79 |             <!-- slide 1 -->
 80 |             <div id="slide1" class="carousel-item relative w-full">
 81 |                 <div class="flex flex-col lg:flex-row gap-20 p-4 lg:p-24">
 82 |                     <div class="space-y-7 flex-1">
 83 |                         <h2 class="text-2xl lg:text-6xl font-bold">
 84 |                             Ride-on R15 V4
 85 |                             <br>
 86 |                             with Smile
 87 |                         </h2>
 88 |                         <p>
 89 |                             Amet minim mollit non deserunt ullamco
 90 |                             est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
 91 |                         </p>
 92 |                         <button class="btn bg-bike-primary text-white">Purchase</button>
 93 |                     </div>
 94 |                     <div class="flex-1">
 95 |                         <img src="/images/slider/bike1.png" class="w-[400px]" />
 96 |                     </div>
 97 |                 </div>
 98 |                 <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
 99 |                     <a href="#slide4" class="btn btn-circle">❮</a>
100 |                     <a href="#slide2" class="btn btn-circle">❯</a>
101 |                 </div>
102 |             </div>
103 |             <!-- slide 2 -->
104 |             <div id="slide2" class="carousel-item relative w-full">
105 |                 <div class="flex flex-col lg:flex-row gap-20 p-4 lg:p-24">
106 |                     <div class="space-y-7 flex-1">
107 |                         <h2 class="text-2xl lg:text-6xl font-bold">
108 |                             Ride-on R15 V4
109 |                             <br>
110 |                             with Smile
111 |                         </h2>
112 |                         <p>
113 |                             Amet minim mollit non deserunt ullamco
114 |                             est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
115 |                         </p>
116 |                         <button class="btn bg-bike-primary text-white">Purchase</button>
117 |                     </div>
118 |                     <div class="flex-1">
119 |                         <img src="/images/slider/bike2.png" class="w-[400px]" />
120 |                     </div>
121 |                 </div>
122 |                 <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
123 |                     <a href="#slide1" class="btn btn-circle">❮</a>
124 |                     <a href="#slide3" class="btn btn-circle">❯</a>
125 |                 </div>
126 |             </div>
127 |             <div id="slide3" class="carousel-item relative w-full">
128 |                 <div class="flex flex-col lg:flex-row gap-20 p-4 lg:p-24">
129 |                     <div class="space-y-7 flex-1">
130 |                         <h2 class="text-2xl lg:text-6xl font-bold">
131 |                             Ride-on R15 V4
132 |                             <br>
133 |                             with Smile
134 |                         </h2>
135 |                         <p>
136 |                             Amet minim mollit non deserunt ullamco
137 |                             est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
138 |                         </p>
139 |                         <button class="btn bg-bike-primary text-white">Purchase</button>
140 |                     </div>
141 |                     <div class="flex-1">
142 |                         <img src="/images/slider/bike3.png" class="w-[400px]" />
143 |                     </div>
144 |                 </div>
145 |                 <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
146 |                     <a href="#slide2" class="btn btn-circle">❮</a>
147 |                     <a href="#slide4" class="btn btn-circle">❯</a>
148 |                 </div>
149 |             </div>
150 |             <div id="slide4" class="carousel-item relative w-full">
151 |                 <div class="flex flex-col lg:flex-row gap-20 p-4 lg:p-24">
152 |                     <div class="space-y-7 flex-1">
153 |                         <h2 class="text-2xl lg:text-6xl font-bold">
154 |                             Ride-on R15 V4
155 |                             <br>
156 |                             with Smile
157 |                         </h2>
158 |                         <p>
159 |                             Amet minim mollit non deserunt ullamco
160 |                             est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
161 |                         </p>
162 |                         <button class="btn bg-bike-primary text-white">Purchase</button>
163 |                     </div>
164 |                     <div class="flex-1">
165 |                         <img src="/images/slider/bike4.png" class="w-[400px]" />
166 |                     </div>
167 |                 </div>
168 |                 <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
169 |                     <a href="#slide3" class="btn btn-circle">❮</a>
170 |                     <a href="#slide1" class="btn btn-circle">❯</a>
171 |                 </div>
172 |             </div>
173 |         </div>
174 |     </header>
175 |     <main class="md:container md:mx-auto">
176 |         <!-- featured bike -->
177 |         <section>
178 | 
179 |         </section>
180 |         <!-- latest bikes -->
181 |         <section class="my-24">
182 |             <h3 class="text-5xl mb-12 font-semibold text-center">Latest Bikes</h3>
183 |             <div class="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
184 |                 <!-- first card -->
185 |                 <div class="card bg-base-100 shadow-xl">
186 |                     <figure><img src="/images/others/latest1.png" alt="Shoes" /></figure>
187 |                     <div class="card-body">
188 |                         <h2 class="card-title text-3xl">Ducati XDIAVEL S-73</h2>
189 |                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus, fermentum amet faucibus sed
190 |                             id nisi lectus at.</p>
191 |                         <div class="card-actions">
192 |                             <button class="btn text-white bg-bike-primary uppercase">Purchase</button>
193 |                         </div>
194 |                     </div>
195 |                 </div>
196 |                 <!-- second card -->
197 |                 <div class="card bg-base-100 shadow-xl">
198 |                     <figure><img src="/images/others/latest2.png" alt="Shoes" /></figure>
199 |                     <div class="card-body">
200 |                         <h2 class="card-title text-3xl">Ducati XDIAVEL S-73</h2>
201 |                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus, fermentum amet faucibus sed
202 |                             id nisi lectus at.</p>
203 |                         <div class="card-actions">
204 |                             <button class="btn text-white bg-bike-primary uppercase">Purchase</button>
205 |                         </div>
206 |                     </div>
207 |                 </div>
208 |                 <!-- third card -->
209 |                 <div class="card bg-base-100 shadow-xl">
210 |                     <figure><img src="/images/others/latest3.png" alt="Shoes" /></figure>
211 |                     <div class="card-body">
212 |                         <h2 class="card-title text-3xl">Ducati XDIAVEL S-73</h2>
213 |                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lacus, fermentum amet faucibus sed
214 |                             id nisi lectus at.</p>
215 |                         <div class="card-actions">
216 |                             <button class="btn text-white bg-bike-primary uppercase">Purchase</button>
217 |                         </div>
218 |                     </div>
219 |                 </div>
220 |             </div>
221 |         </section>
222 |         <!-- happy clients -->
223 |         <section class="my-24">
224 |             <h3 class="text-5xl mb-12 font-semibold text-center">Happy <span class="text-bike-primary">Clients Says</span></h3>
225 |             <div class="grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
226 |                 <!-- first review -->
227 |                 <div class="card bg-base-100 p-9 border border-gray-400">
228 |                     <figure><img class="w-36" src="/images/others/user-1.png" alt="Shoes" /></figure>
229 |                     <div class="card-body">
230 |                       <p>Slate helps you see how 
231 |                         many more days you need 
232 |                         to work to reach your financial 
233 |                         goal for the month and year.</p>
234 |                         <div class="rating justify-center">
235 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
236 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400"  />
237 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
238 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked/>
239 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
240 |                           </div>
241 |                       <div class="text-center space-y-4 mt-4">
242 |                         <h4 class="text-sm font-semibold text-info">Regina Miles</h4>
243 |                         <p>Banker</p>
244 |                       </div>
245 |                     </div>
246 |                   </div>
247 |                 <!-- second review -->
248 |                 <div class="card bg-base-100 p-9 border border-gray-400">
249 |                     <figure><img class="w-36" src="/images/others/user-2.png" alt="Shoes" /></figure>
250 |                     <div class="card-body">
251 |                       <p>Slate helps you see how 
252 |                         many more days you need 
253 |                         to work to reach your financial 
254 |                         goal for the month and year.</p>
255 |                         <div class="rating justify-center">
256 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
257 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400"  />
258 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
259 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked/>
260 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
261 |                           </div>
262 |                       <div class="text-center space-y-4 mt-4">
263 |                         <h4 class="text-sm font-semibold text-info">Regina Miles</h4>
264 |                         <p>Banker</p>
265 |                       </div>
266 |                     </div>
267 |                   </div>
268 |                 <!-- third review -->
269 |                 <div class="card bg-base-100 p-9 border border-gray-400">
270 |                     <figure><img class="w-36" src="/images/others/user-3.png" alt="Shoes" /></figure>
271 |                     <div class="card-body">
272 |                       <p>Slate helps you see how 
273 |                         many more days you need 
274 |                         to work to reach your financial 
275 |                         goal for the month and year.</p>
276 |                         <div class="rating justify-center">
277 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
278 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400"  />
279 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
280 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" checked/>
281 |                             <input type="radio" name="rating-2" class="mask mask-star-2 bg-orange-400" />
282 |                           </div>
283 |                       <div class="text-center space-y-4 mt-4">
284 |                         <h4 class="text-sm font-semibold text-info">Regina Miles</h4>
285 |                         <p>Banker</p>
286 |                       </div>
287 |                     </div>
288 |                   </div>
289 |             </div>
290 |         </section>
291 |         <!-- FAQ -->
292 |         <section class="my-24">
293 |             <h3 class="text-5xl mb-12 font-semibold text-center">Frequently Asked  <span class="text-bike-primary">Questions</span></h3>
294 |             <div class="hero">
295 |                 <div class="hero-content flex-col lg:gap-24 lg:flex-row">
296 |                   <img src="/images/others/faq.png" class="w-3/4 lg:max-w-sm rounded-lg shadow-2xl" />
297 |                   <div>
298 |                     <!-- first question -->
299 |                     <div class="collapse collapse-arrow ">
300 |                         <input type="radio" name="my-accordion-2" checked="checked" /> 
301 |                         <div class="collapse-title text-xl font-medium">
302 |                             What are the most important things I should
303 |                             know about riding a bike?
304 |                         </div>
305 |                         <div class="collapse-content"> 
306 |                           <p>Safety First! Always obey the rules of the road. Obey all traffic signals, signs, and laws. Get in the mindset of “driving” your bike—not just “riding” your bike. This will help you be a more focused and legally compliant bike rider. </p>
307 |                         </div>
308 |                       </div>
309 |                       <div class="collapse collapse-arrow ">
310 |                         <input type="radio" name="my-accordion-2" /> 
311 |                         <div class="collapse-title text-xl font-medium">
312 |                             How can I tell if my helmet is old and I need a 
313 |                             new one?
314 |                         </div>
315 |                         <div class="collapse-content"> 
316 |                           <p>Safety First! Always obey the rules of the road. Obey all traffic signals, signs, and laws. Get in the mindset of “driving” your bike—not just “riding” your bike. This will help you be a more focused and legally compliant bike rider. </p>
317 |                         </div>
318 |                       </div>
319 |                       <div class="collapse collapse-arrow ">
320 |                         <input type="radio" name="my-accordion-2" /> 
321 |                         <div class="collapse-title text-xl font-medium">
322 |                           Click to open this one and close others
323 |                         </div>
324 |                         <div class="collapse-content"> 
325 |                           <p>hello</p>
326 |                         </div>
327 |                       </div>
328 |                       <div class="collapse collapse-arrow ">
329 |                         <input type="radio" name="my-accordion-2" /> 
330 |                         <div class="collapse-title text-xl font-medium">
331 |                           Click to open this one and close others
332 |                         </div>
333 |                         <div class="collapse-content"> 
334 |                           <p>hello</p>
335 |                         </div>
336 |                       </div>
337 |                       <div class="collapse collapse-arrow ">
338 |                         <input type="radio" name="my-accordion-2" /> 
339 |                         <div class="collapse-title text-xl font-medium">
340 |                           Click to open this one and close others
341 |                         </div>
342 |                         <div class="collapse-content"> 
343 |                           <p>hello</p>
344 |                         </div>
345 |                       </div>
346 |                   </div>
347 |                 </div>
348 |               </div>
349 |         </section>
350 |     </main>
351 |     <footer class="footer p-10 bg-neutral text-neutral-content">
352 |         <div>
353 |           
354 |           <p>ACME Industries Ltd.<br/>Providing reliable tech since 1992</p>
355 |         </div> 
356 |         <div>
357 |           <span class="footer-title">Social</span> 
358 |           <div class="grid grid-cols-1 gap-4">
359 |             <a><img class="w-36" src="images/others/android.png" alt=""></a> 
360 |             <a><img class="w-36" src="images/others/ios.png" alt=""></a> 
361 |             
362 |           </div>
363 |         </div>
364 |       </footer>
365 | </body>
366 | 
367 | </html>


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |     content: ["./src/**/*.{html,js}"],
4 |     theme: {
5 |       extend: {},
6 |     },
7 |     plugins: [],
8 |   }


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