├── icons
    ├── Logo.png
    ├── free.png
    ├── icon-1.png
    ├── xmld.png
    ├── support.png
    ├── Group 33102.png
    └── shopping-cart 1.png
├── images
    ├── daco.png
    ├── packo.png
    ├── formal1.png
    ├── formal2.png
    ├── formal3.png
    ├── pngegg 1.png
    └── banner-shoes.png
├── css
    └── style.css
└── index.html


/icons/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/Logo.png


--------------------------------------------------------------------------------
/icons/free.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/free.png


--------------------------------------------------------------------------------
/icons/icon-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/icon-1.png


--------------------------------------------------------------------------------
/icons/xmld.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/xmld.png


--------------------------------------------------------------------------------
/images/daco.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/daco.png


--------------------------------------------------------------------------------
/images/packo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/packo.png


--------------------------------------------------------------------------------
/icons/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/support.png


--------------------------------------------------------------------------------
/images/formal1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/formal1.png


--------------------------------------------------------------------------------
/images/formal2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/formal2.png


--------------------------------------------------------------------------------
/images/formal3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/formal3.png


--------------------------------------------------------------------------------
/icons/Group 33102.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/Group 33102.png


--------------------------------------------------------------------------------
/images/pngegg 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/pngegg 1.png


--------------------------------------------------------------------------------
/images/banner-shoes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/images/banner-shoes.png


--------------------------------------------------------------------------------
/icons/shopping-cart 1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuhamedHabib/nike-fashion/main/icons/shopping-cart 1.png


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: 'Roboto', sans-serif;
 3 |     background-color: #faf9f9;
 4 | }
 5 | .menu img{
 6 |     width: 35%;
 7 | }
 8 | .nav-menu li{
 9 |     margin-left: 15px;
10 | }
11 | .top-banner{
12 |     background-color: #FFF9F4;
13 | }
14 | .banner{
15 |     background-color: #FFF9F4;
16 |     padding: 50px;
17 |     margin-top: -65px;
18 |     padding-top: 200px;
19 | }
20 | .casual-shoes img{
21 |     background-color: #F1F1F1;
22 |     border-radius: 20px;
23 | }
24 | .card{
25 |     border: none;
26 |     box-shadow: 9px 12px 20px lightgrey;
27 |     border-radius: 15px;
28 | }
29 | .supporting{
30 |     margin-top: 85px;
31 | }
32 | .nike-btn{
33 |     background-image: linear-gradient(180deg, #3D4FF3 0%, #3543BC 100%);
34 |     color: white;
35 | }
36 | .nike-btn:hover{
37 |     color: white;
38 | }
39 | .font li{
40 |     font-size: 30px;
41 |     margin-right: 25px;
42 | }


--------------------------------------------------------------------------------
/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>Nike Fashion</title>
  9 |     <link rel="shortcut icon" href="icons/icon-1.png" type="image/x-icon">
 10 |     <!-- Google Font  -->
 11 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 12 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 13 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
 14 |     <!-- Font Awoseme -->
 15 |     <script src="https://kit.fontawesome.com/9bbc3d5946.js" crossorigin="anonymous"></script>
 16 |     <!-- Bootstrap -->
 17 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
 18 |     <!-- Custom Css -->
 19 |     <link rel="stylesheet" href="css/style.css">
 20 | </head>
 21 | 
 22 | <body>
 23 |     <header>
 24 |         <!-- Nav Menu Section -->
 25 |         <section>
 26 |             <nav class="navbar navbar-expand-lg fixed-top top-banner">
 27 |                 <div class="container">
 28 |                     <a class="navbar-brand" href="#">
 29 |                         <img style="width: 300px;" src="icons/Logo.png" alt="">
 30 |                     </a>
 31 |                     <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
 32 |                         data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 33 |                         aria-expanded="false" aria-label="Toggle navigation">
 34 |                         <span class="navbar-toggler-icon"></span>
 35 |                     </button>
 36 |                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
 37 |                         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 38 |                             <!-- Middle Space -->
 39 |                         </ul>
 40 |                         <div class="d-flex nav-menu">
 41 |                             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
 42 |                                 <li class="nav-item">
 43 |                                     <a class="nav-link active" aria-current="page" href="#">Home</a>
 44 |                                 </li>
 45 |                                 <li class="nav-item">
 46 |                                     <a class="nav-link" href="#product">Product</a>
 47 |                                 </li>
 48 |                                 <li class="nav-item">
 49 |                                     <a class="nav-link" href="#about">About Us</a>
 50 |                                 </li>
 51 |                                 <li class="nav-item">
 52 |                                     <a class="nav-link" href="#contact">Contact Us</a>
 53 |                                 </li>
 54 |                             </ul>
 55 |                         </div>
 56 |                     </div>
 57 |                 </div>
 58 |             </nav>
 59 |         </section>
 60 |         <!-- banner Section Slider -->
 61 |         <section class="banner mb-5">
 62 |             <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
 63 |                 <div class="carousel-inner">
 64 |                     <div class="carousel-item active">
 65 |                         <div class="row">
 66 |                             <div class="col-md-6">
 67 |                                 <img class="img-fluid w-75" src="images/banner-shoes.png" alt="">
 68 |                             </div>
 69 |                             <div class="col-md-6 m-auto">
 70 |                                 <h1 class="fw-bold display-4"><span style="color:#FA804C">NIKE
 71 |                                         REACT</span><br> NFINITY RUN 1</h1>
 72 |                                 <p>Everybody is different, which is why we offer styles for every body. One of the many
 73 |                                     reasons you
 74 |                                     can shop with peace of mind.</p>
 75 |                                 <a class="btn nike-btn px-3 py-2" href=""><i class="fa-solid fa-cart-shopping me-2"></i>
 76 |                                     BUY
 77 |                                     NOW</a>
 78 |                             </div>
 79 |                         </div>
 80 |                     </div>
 81 |                     <div class="carousel-item">
 82 |                         <div class="row">
 83 |                             <div class="col-md-6">
 84 |                                 <img class="img-fluid w-75" src="images/daco.png" alt="">
 85 |                             </div>
 86 |                             <div class="col-md-6 m-auto">
 87 |                                 <h1 class="fw-bold display-4"><span style="color:#FA804C">NIKE
 88 |                                         REACT</span><br> NFINITY RUN 2</h1>
 89 |                                 <p>Everybody is different, which is why we offer styles for every body. One of the many
 90 |                                     reasons you
 91 |                                     can shop with peace of mind.</p>
 92 |                                 <a class="btn nike-btn px-3 py-2" href=""><i class="fa-solid fa-cart-shopping me-2"></i>
 93 |                                     BUY
 94 |                                     NOW</a>
 95 |                             </div>
 96 |                         </div>
 97 |                     </div>
 98 |                     <div class="carousel-item">
 99 |                         <div class="row">
100 |                             <div class="col-md-6 ">
101 |                                 <img class="img-fluid w-75" src="images/packo.png" alt="">
102 |                             </div>
103 |                             <div class="col-md-6 m-auto">
104 |                                 <h1 class="fw-bold display-4"><span style="color:#FA804C">NIKE
105 |                                         REACT</span><br> NFINITY RUN 3</h1>
106 |                                 <p>Everybody is different, which is why we offer styles for every body. One of the many
107 |                                     reasons you
108 |                                     can shop with peace of mind.</p>
109 |                                 <a class="btn nike-btn px-3 py-2" href=""><i class="fa-solid fa-cart-shopping me-2"></i>
110 |                                     BUY
111 |                                     NOW</a>
112 |                             </div>
113 |                         </div>
114 |                     </div>
115 |                 </div>
116 |             </div>
117 |         </section>
118 |     </header>
119 |     <main>
120 |         <!-- CASUAL SHOES -->
121 |         <section id="product" class="container mb-5">
122 |             <div class="casual-shoes">
123 |                 <h1 class="fw-bold py-3">CASUAL SHOES</h1>
124 |                 <div class="row">
125 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
126 |                         <div class="card">
127 |                             <div class="card-body">
128 |                                 <img class="img-fluid" src="images/packo.png" alt="">
129 |                                 <h5 class="card-title fw-bold mt-4">Nike Shoe</h5>
130 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
131 |                                     content.</p>
132 |                                 <div class="d-flex justify-content-between">
133 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
134 |                                     <button class="btn nike-btn px-3 py-2"><i
135 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
136 |                                 </div>
137 |                             </div>
138 |                         </div>
139 |                     </div>
140 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
141 |                         <div class="card">
142 |                             <div class="card-body">
143 |                                 <img class="img-fluid" src="images/daco.png" alt="">
144 |                                 <h5 class="card-title fw-bold mt-4">Sneakers Skate Shoe </h5>
145 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
146 |                                     content.</p>
147 |                                 <div class="d-flex justify-content-between">
148 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
149 |                                     <button class="btn nike-btn px-3 py-2"><i
150 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
151 |                                 </div>
152 |                             </div>
153 |                         </div>
154 |                     </div>
155 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
156 |                         <div class="card">
157 |                             <div class="card-body">
158 |                                 <img class="img-fluid" src="images/pngegg 1.png" alt="">
159 |                                 <h5 class="card-title fw-bold mt-4">Sneakers Basketball shoe</h5>
160 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
161 |                                     content.</p>
162 |                                 <div class="d-flex justify-content-between">
163 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
164 |                                     <button class="btn nike-btn px-3 py-2"><i
165 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
166 |                                 </div>
167 |                             </div>
168 |                         </div>
169 |                     </div>
170 |                 </div>
171 |             </div>
172 |         </section>
173 |         <!-- Formal shoes -->
174 |         <section class="container mb-5">
175 |             <div class="formal-shoes">
176 |                 <h1 class="fw-bold py-3">FORMAL SHOES</h1>
177 |                 <div class="row">
178 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
179 |                         <div class="card">
180 |                             <div class="card-body">
181 |                                 <img class="img-fluid" src="images/formal1.png" alt="">
182 |                                 <h5 class="card-title fw-bold mt-4">Prestige High-Cut Leather</h5>
183 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
184 |                                     content.</p>
185 |                                 <div class="d-flex justify-content-between">
186 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
187 |                                     <button class="btn nike-btn px-3 py-2"><i
188 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
189 |                                 </div>
190 |                             </div>
191 |                         </div>
192 |                     </div>
193 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
194 |                         <div class="card">
195 |                             <div class="card-body">
196 |                                 <img class="img-fluid" src="images/formal2.png" alt="">
197 |                                 <h5 class="card-title fw-bold mt-4">Slip-On Formal Shoe</h5>
198 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
199 |                                     content.</p>
200 |                                 <div class="d-flex justify-content-between">
201 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
202 |                                     <button class="btn nike-btn px-3 py-2"><i
203 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
204 |                                 </div>
205 |                             </div>
206 |                         </div>
207 |                     </div>
208 |                     <div class="col-md-6 col-lg-4 col-sm-12 mb-sm-3">
209 |                         <div class="card">
210 |                             <div class="card-body">
211 |                                 <img class="img-fluid" src="images/formal3.png" alt="">
212 |                                 <h5 class="card-title fw-bold mt-4">Slip-On Formal Shoe</h5>
213 |                                 <p class="card-text">With supporting text below as a natural lead-in to additional
214 |                                     content.</p>
215 |                                 <div class="d-flex justify-content-between">
216 |                                     <h3 class="fw-bold" style="color:#FA804C">$255</h3>
217 |                                     <button class="btn nike-btn px-3 py-2"><i
218 |                                             class="fa-solid fa-cart-shopping me-2"></i> BUY NOW</button>
219 |                                 </div>
220 |                             </div>
221 |                         </div>
222 |                     </div>
223 |                 </div>
224 |             </div>
225 |         </section>
226 |         <!-- Support Section  -->
227 |         <section id="about" class="container mb-5 supporting">
228 |             <div class="row d-sm-flex lex-column-reverse">
229 |                 <div class="col-lg-5 col-md-6 col-sm-12 d-sm-flex flex-sm-column-reverse">
230 |                     <div class="container">
231 |                         <div class="row g-2">
232 |                             <div class="col-12 d-flex align-items-center"
233 |                                 style="box-shadow: 0px 0px 30px lightgrey; padding: 10px; border-radius: 10px; cursor: pointer;">
234 |                                 <img class="img-fluid w-25 me-3" src="icons/icon-1.png" alt="">
235 |                                 <div class="flex-column">
236 |                                     <h5 class="fw-bold">Find the Perfect Fit</h5>
237 |                                     <p><small>Everybody is different, which is why we offer styles for every
238 |                                             body</small></p>
239 |                                 </div>
240 |                             </div>
241 |                             <div class="col-12 d-flex align-items-center"
242 |                                 style="box-shadow: 0px 0px 30px lightgrey; padding: 10px; border-radius: 10px; cursor: pointer;">
243 |                                 <img class="img-fluid w-25 me-3" src="icons/free.png" alt="">
244 |                                 <div class="flex-column">
245 |                                     <h5 class="fw-bold">Free Exchanges</h5>
246 |                                     <p><small>One of the many reasons you can shop with peace of mind.</small></p>
247 |                                 </div>
248 |                             </div>
249 |                             <div class="col-12 d-flex align-items-center"
250 |                                 style="box-shadow: 0px 0px 30px lightgrey; padding: 10px; border-radius: 10px; cursor: pointer;">
251 |                                 <img class="img-fluid w-25 me-3" src="icons/support.png" alt="">
252 |                                 <div class="flex-column">
253 |                                     <h5 class="fw-bold">Contact Our Seller</h5>
254 |                                     <p><small>They are here to help you. That's literally what we pay them for.</small>
255 |                                     </p>
256 |                                 </div>
257 |                             </div>
258 |                         </div>
259 |                     </div>
260 |                 </div>
261 |                 <div class="col-lg-7 col-md-6 col-sm-12">
262 |                     <img class="img-fluid" src="icons/xmld.png" alt="">
263 |                 </div>
264 |             </div>
265 |         </section>
266 |     </main>
267 |     <footer id="contact" class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top container">
268 |         <div class="col-md-4 d-flex align-items-center">
269 |             <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
270 |                 <svg class="bi" width="30" height="24">
271 |                     <use xlink:href="#bootstrap"></use>
272 |                 </svg>
273 |             </a>
274 |             <span class="mb-3 mb-md-0 text-muted">© 2022 Nike Fashion, Inc</span>
275 |         </div>
276 | 
277 |         <ul class="nav col-md-4 justify-content-end list-unstyled d-flex font">
278 |             <li class="ms-3"><a class="text-muted" href="#"><i class="fa-brands fa-twitter"></i></a></li>
279 |             <li class="ms-3"><a class="text-muted" href="#"><i class="fa-brands fa-facebook"></i></a></li>
280 |             <li class="ms-3"><a class="text-muted" href="#"><i class="fa-brands fa-github"></i></a></li>
281 |         </ul>
282 |     </footer>
283 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
284 | </body>
285 | 
286 | </html>


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