├── images
    ├── Categories
    │   ├── bag.png
    │   ├── pale-order.png
    │   ├── perfume.png
    │   └── shoe.png
    ├── banner-products
    │   ├── product-1.png
    │   ├── slider-1.png
    │   └── slider-3.png
    ├── hot-gadget.png
    ├── laptop
    │   ├── product-1.png
    │   ├── product-2.png
    │   └── product-3.png
    ├── logo.png
    └── phone
    │   ├── phone-1.png
    │   ├── phone-2.png
    │   └── phone-3.png
├── index.html
└── style.css


/images/Categories/bag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/Categories/bag.png


--------------------------------------------------------------------------------
/images/Categories/pale-order.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/Categories/pale-order.png


--------------------------------------------------------------------------------
/images/Categories/perfume.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/Categories/perfume.png


--------------------------------------------------------------------------------
/images/Categories/shoe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/Categories/shoe.png


--------------------------------------------------------------------------------
/images/banner-products/product-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/banner-products/product-1.png


--------------------------------------------------------------------------------
/images/banner-products/slider-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/banner-products/slider-1.png


--------------------------------------------------------------------------------
/images/banner-products/slider-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/banner-products/slider-3.png


--------------------------------------------------------------------------------
/images/hot-gadget.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/hot-gadget.png


--------------------------------------------------------------------------------
/images/laptop/product-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/laptop/product-1.png


--------------------------------------------------------------------------------
/images/laptop/product-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/laptop/product-2.png


--------------------------------------------------------------------------------
/images/laptop/product-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/laptop/product-3.png


--------------------------------------------------------------------------------
/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/logo.png


--------------------------------------------------------------------------------
/images/phone/phone-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/phone/phone-1.png


--------------------------------------------------------------------------------
/images/phone/phone-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/phone/phone-2.png


--------------------------------------------------------------------------------
/images/phone/phone-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ProgrammingHero1/hot-gadget-solution/a2238ad419670cfddc2945003c0b4803e71351c0/images/phone/phone-3.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 | <head>
  4 |   <title>Hot Gadgets</title>
  5 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  6 |     integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  7 |   <link rel="stylesheet" href="style.css">
  8 | </head>
  9 | 
 10 | <body>
 11 | 
 12 |   <section>
 13 |     <div class="container">
 14 |       <nav class="navbar navbar-expand-lg navbar-light mt-3">
 15 |         <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
 16 |         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
 17 |           aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 18 |           <span class="navbar-toggler-icon"></span>
 19 |         </button>
 20 |         <div class="collapse navbar-collapse" id="navbarNav">
 21 |           <ul class="navbar-nav ml-auto">
 22 |             <li class="nav-item active">
 23 |               <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
 24 |             </li>
 25 |             <li class="nav-item">
 26 |               <a class="nav-link" href="#product">Product</a>
 27 |             </li>
 28 |             <li class="nav-item">
 29 |               <a class="nav-link" href="#about-us">About us</a>
 30 |             </li>
 31 |             <li class="nav-item">
 32 |               <a class="nav-link" href="#contact-us">Contact us</a>
 33 |             </li>
 34 |           </ul>
 35 |         </div>
 36 |       </nav>
 37 |   </section>
 38 | 
 39 |   <section>
 40 |     </div>
 41 |     <div class="container">
 42 |       <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
 43 |         <ol class="carousel-indicators">
 44 |           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
 45 |           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
 46 |           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
 47 |         </ol>
 48 |         <div class="carousel-inner">
 49 |           <div class="carousel-item active">
 50 |             <div class="row align-items-center">
 51 |               <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
 52 |                 <h2>Macbook Pro</h2>
 53 |                 <br>
 54 |                 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
 55 |                   classical Latin literature.
 56 |                 </p>
 57 |                 <br>
 58 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
 59 |               </div>
 60 |               <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7">
 61 |                 <img src="images/banner-products/product-1.png" class="d-block w-100" alt="...">
 62 |               </div>
 63 |             </div>
 64 |           </div>
 65 |           <div class="carousel-item ">
 66 |             <div class="row align-items-center">
 67 |               <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
 68 |                 <h2>Amazon Echo</h2>
 69 |                 <br>
 70 |                 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
 71 |                   classical Latin literature.
 72 |                 </p>
 73 |                 <br>
 74 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
 75 |               </div>
 76 |               <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7">
 77 |                 <img src="images/banner-products/slider-1.png" class="d-block w-100" alt="...">
 78 |               </div>
 79 |             </div>
 80 |           </div>
 81 |           <div class="carousel-item ">
 82 |             <div class="row align-items-center">
 83 |               <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
 84 |                 <h2>JBL Xtreme Portable Speaker</h2>
 85 |                 <br>
 86 |                 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
 87 |                   classical Latin literature.
 88 |                 </p>
 89 |                 <br>
 90 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
 91 |               </div>
 92 |               <div class="col-7 col-sm-7 col-md-7 col-lg-7 col-xl-7">
 93 |                 <img src="images/banner-products/slider-3.png" class="d-block w-100" alt="...">
 94 |               </div>
 95 |             </div>
 96 |           </div>
 97 |         </div>
 98 |         <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
 99 |           <span class="carousel-control-prev-icon" aria-hidden="true"></span>
100 |           <span class="sr-only">Previous</span>
101 |         </a>
102 |         <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
103 |           <span class="carousel-control-next-icon" aria-hidden="true"></span>
104 |           <span class="sr-only">Next</span>
105 |         </a>
106 |       </div>
107 |     </div>
108 |   </section>
109 | 
110 |   <section class="smartphone-section">
111 | 
112 |     <div class="container">
113 |       <div class="row title-pad">
114 |         <div class="w-50">
115 |           <h4 class="float-left">Smartphone</h4>
116 |         </div>
117 |         <div class="w-50">
118 |           <a href="#" class="float-right text-warning text-decoration-none">See All</a>
119 |         </div>
120 |       </div>
121 | 
122 |       <div class="row">
123 | 
124 |         <div class="col-md-4">
125 |           <div class="card card-item">
126 |             <div class="card-body">
127 |               <img class="w-100" src="images/phone/phone-1.png">
128 |               <div class="text-center">
129 |                 <h4>I Phone 11 pro</h4>
130 |                 <p>Some quick example of to build the card title</p>
131 |                 <h5>$999</h5>
132 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
133 |               </div>
134 |             </div>
135 |           </div>
136 |         </div>
137 | 
138 |         <div class="col-md-4">
139 |           <div class="card card-item">
140 |             <div class="card-body">
141 |               <img class="w-100" src="images/phone/phone-2.png">
142 |               <div class="text-center">
143 |                 <h4>Samsung Galaxy Note 10+</h4>
144 |                 <p>Some quick example of to build the card title</p>
145 |                 <h5>$799</h5>
146 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
147 |               </div>
148 |             </div>
149 |           </div>
150 |         </div>
151 | 
152 |         <div class="col-md-4">
153 |           <div class="card card-item">
154 |             <div class="card-body">
155 |               <img class="w-100" src="images/phone/phone-3.png">
156 |               <div class="text-center">
157 |                 <h4>Nokia 7.1</h4>
158 |                 <p>Some quick example of to build the card title</p>
159 |                 <h5>$699</h5>
160 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
161 |               </div>
162 |             </div>
163 |           </div>
164 |         </div>
165 |       </div>
166 |     </div>
167 |   </section>
168 | 
169 |   <section class="laptop-section">
170 |     <div class="container">
171 |       <div class="row title-pad">
172 |         <div class="w-50">
173 |           <h4 class="float-left">Laptop</h4>
174 |         </div>
175 |         <div class="w-50">
176 |           <a href="#" class="float-right text-warning text-decoration-none">See All</a>
177 |         </div>
178 |       </div>
179 |       <div class="row">
180 | 
181 |         <div class="col-md-4">
182 |           <div class="card card-item">
183 |             <div class="card-body">
184 |               <img class="w-100" src="images/laptop/product-1.png">
185 |               <div class="text-center">
186 |                 <h4>Asus VivoBook</h4>
187 |                 <p>Some quick example of to build the card title</p>
188 |                 <h5>$999</h5>
189 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
190 |               </div>
191 |             </div>
192 |           </div>
193 |         </div>
194 | 
195 |         <div class="col-md-4">
196 |           <div class="card card-item">
197 |             <div class="card-body">
198 |               <img class="w-100" src="images/laptop/product-2.png">
199 |               <div class="text-center">
200 |                 <h4>Razer Blade 15</h4>
201 |                 <p>Some quick example of to build the card title</p>
202 |                 <h5>$799</h5>
203 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
204 |               </div>
205 |             </div>
206 |           </div>
207 |         </div>
208 | 
209 |         <div class="col-md-4">
210 |           <div class="card card-item">
211 |             <div class="card-body">
212 |               <img class="w-100" src="images/laptop/product-3.png">
213 |               <div class="text-center">
214 |                 <h4>Xiaomi Mi NoteBook</h4>
215 |                 <p>Some quick example of to build the card title</p>
216 |                 <h5>$699</h5>
217 |                 <button class="buy-now-button">BUY NOW &rarr;</button>
218 |               </div>
219 |             </div>
220 |           </div>
221 |         </div>
222 |       </div>
223 |     </div>
224 |   </section>
225 | 
226 |   <section class="category-section">
227 |     <div class="container">
228 |       <div class="container container-catagories">
229 |         <div class="catagories d-flex justify-content-center">
230 |           <div id="catagories-bg">
231 |             <h3 class="categories-border">Categories</h3>
232 |           </div>
233 |         </div>
234 |         <div class="row">
235 |           <div class="col-md-6">
236 |             <div class="row ">
237 |               <div class="col-md-6 d-flex align-items-center justify-content-center">
238 |                 <div class="card card-item category-item">
239 |                   <img src="images/Categories/bag.png" class="card-img-top" alt="...">
240 | 
241 |                   <h6 class="text-center">Bag</h6>
242 | 
243 |                 </div>
244 |               </div>
245 |               <div class="col-md-6">
246 |                 <div class="d-flex justify-content-center mb-4">
247 |                   <div class="card card-item category-item">
248 |                     <img src="images/Categories/perfume.png" class="img-fluid" alt="...">
249 |                     <h6 class="text-center">Beauty</h6>
250 |                   </div>
251 |                 </div>
252 |                 <div class="d-flex justify-content-center">
253 |                   <div class="card card-item category-item">
254 |                     <img src="images/Categories/shoe.png" class="img-fluid" alt="...">
255 | 
256 |                     <h6 class="text-center">Shoe</h6>
257 | 
258 |                   </div>
259 |                 </div>
260 |               </div>
261 |             </div>
262 |           </div>
263 |           <div class="col-md-6 d-flex align-items-center justify-content-center">
264 |             <img src="images/Categories/pale-order.png" class="d-block w-100" alt="..">
265 |           </div>
266 |         </div>
267 |       </div>
268 |   </section>
269 | 
270 |   <footer>
271 |     <p class="text-center"> ©Hot Gadgets Ltd. All rights reserved. </p>
272 |   </footer>
273 | 
274 |   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
275 |     integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
276 |     crossorigin="anonymous"></script>
277 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
278 |     integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
279 |     crossorigin="anonymous"></script>
280 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
281 |     integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
282 |     crossorigin="anonymous"></script>
283 | </body>
284 | 
285 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | .buy-now-button{
 2 |     background-color: black;
 3 |     color: white;
 4 |     border-radius: 8px;
 5 |     padding: 9px 10px;
 6 |     border: none;
 7 |     cursor: pointer;
 8 | }
 9 | 
10 | .card-item {
11 |     border: none;
12 |     box-shadow: 5px 5px 10px lightgray;
13 |     border-radius: 10px;
14 | }
15 | 
16 | .smartphone-section {
17 |     margin-bottom: 50px;
18 | }
19 | 
20 | .laptop-section {
21 |     margin-bottom: 90px;
22 | }
23 | 
24 | .category-section {
25 |     margin-bottom: 80px;
26 | }
27 | 
28 | .title-pad {
29 |     margin-left: 0px;
30 |     margin-right: 0px;
31 |     margin-bottom: 20px;
32 | }
33 | 
34 | .categories-border {
35 |     border-bottom: 10px solid  #FFBB24;
36 |     border-radius: 5px;
37 |     margin-bottom: 20px;
38 | }  
39 | 
40 | .category-item {
41 |     padding:  20px 20px;
42 | }


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