├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── Thumbs.db
    │   ├── logo.svg
    │   ├── product-1.png
    │   ├── product-2.png
    │   ├── product-3.png
    │   ├── product-4.png
    │   └── profile.png
    └── js
    │   └── script.js
├── index.html
├── index.txt
├── readme-images
    └── desktop.png
└── style-guide.md


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/nike)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/nike?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/nike?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/0O3yFSEujrw?style=social)](https://youtu.be/0O3yFSEujrw)
 8 | 
 9 |   <br />
10 |   <br />
11 | 
12 |   <h2 align="center">Nike - Product Detail Website</h2>
13 | 
14 |   Nike is a fully responsive product detail page, <br />Responsive for all devices, build using HTML, CSS, and JavaScript.
15 | 
16 |   <a href="https://codewithsadee.github.io/nike/"><strong>➥ Live Demo</strong></a>
17 | 
18 | </div>
19 | 
20 | <br />
21 | 
22 | ### Demo Screeshots
23 | 
24 | ![Nike Desktop Demo](./readme-images/desktop.png "Desktop Demo")
25 | 
26 | ### Prerequisites
27 | 
28 | Before you begin, ensure you have met the following requirements:
29 | 
30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
31 | 
32 | ### Run Locally
33 | 
34 | To run **Nike** locally, run this command on your git bash:
35 | 
36 | Linux and macOS:
37 | 
38 | ```bash
39 | sudo git clone https://github.com/codewithsadee/nike.git
40 | ```
41 | 
42 | Windows:
43 | 
44 | ```bash
45 | git clone https://github.com/codewithsadee/nike.git
46 | ```
47 | 
48 | ### Contact
49 | 
50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
51 | 
52 | ### License
53 | 
54 | This project is **free to use** and does not contains any license.
55 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #style.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | /*-----------------------------------*\
 14 |   #CUSTOM PROPERTY
 15 | \*-----------------------------------*/
 16 | 
 17 | :root {
 18 | 
 19 |   /**
 20 |    * colors
 21 |    */
 22 | 
 23 |   --cadet-blue-crayola: hsl(220, 14%, 75%);
 24 |   --dark-electric-blue: hsl(217, 9%, 45%);
 25 |   --shamrock-green: hsl(146, 51%, 41%);
 26 |   --sea-green_10: hsla(146, 75%, 30%, 0.1);
 27 |   --eerie-black: hsl(218, 12%, 13%);
 28 |   --ghost-white: hsl(230, 60%, 98%);
 29 |   --sea-green: hsl(146, 75%, 30%);
 30 |   --honeydew: hsl(146, 74%, 94%);
 31 |   --white: hsl(0, 0%, 100%);
 32 |   --black: hsl(0, 0%, 0%);
 33 | 
 34 |   /**
 35 |    * typography
 36 |    */
 37 | 
 38 |   --ff-kumbh-sans: 'Kumbh Sans', sans-serif;
 39 | 
 40 |   --fs-1: 2.8rem;
 41 |   --fs-2: 1.8rem;
 42 |   --fs-3: 1.5rem;
 43 |   --fs-4: 1.2rem;
 44 | 
 45 |   --fw-500: 500;
 46 |   --fw-700: 700;
 47 | 
 48 |   /**
 49 |    * box-shadow
 50 |    */
 51 | 
 52 |   --shadow-1: 0 2px 3px hsla(0, 0%, 0%, 0.2);
 53 |   --shadow-2: 0 10px 30px -10px var(--sea-green);
 54 | 
 55 |   /**
 56 |    * border radius
 57 |    */
 58 | 
 59 |   --radius-circle: 50%;
 60 |   --radius-15: 15px;
 61 |   --radius-12: 12px;
 62 |   --radius-10: 10px;
 63 |   --radius-6: 6px;
 64 | 
 65 |   /**
 66 |    * transition
 67 |    */
 68 | 
 69 |   --transition-1: 0.25s ease;
 70 |   --transition-2: 0.5s ease;
 71 |   --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
 72 | 
 73 | }
 74 | 
 75 | 
 76 | 
 77 | 
 78 | 
 79 | /*-----------------------------------*\
 80 |   #RESET
 81 | \*-----------------------------------*/
 82 | 
 83 | *,
 84 | *::before,
 85 | *::after {
 86 |   margin: 0;
 87 |   padding: 0;
 88 |   box-sizing: border-box;
 89 | }
 90 | 
 91 | li { list-style: none; }
 92 | 
 93 | a,
 94 | img,
 95 | span,
 96 | button,
 97 | ion-icon { display: block; }
 98 | 
 99 | a {
100 |   color: inherit;
101 |   text-decoration: none;
102 | }
103 | 
104 | img { height: auto; }
105 | 
106 | button {
107 |   background: none;
108 |   border: none;
109 |   font: inherit;
110 |   cursor: pointer;
111 | }
112 | 
113 | ion-icon {
114 |   pointer-events: none;
115 |   --ionicon-stroke-width: 40px;
116 | }
117 | 
118 | html {
119 |   font-family: var(--ff-kumbh-sans);
120 |   font-size: 10px;
121 |   scroll-behavior: smooth;
122 | }
123 | 
124 | body {
125 |   background-color: var(--white);
126 |   color: var(--dark-electric-blue);
127 |   font-size: 1.6rem;
128 | }
129 | 
130 | 
131 | 
132 | 
133 | 
134 | /*-----------------------------------*\
135 |   #REUSED STYLE
136 | \*-----------------------------------*/
137 | 
138 | .container { padding-inline: 15px; }
139 | 
140 | .img-cover {
141 |   width: 100%;
142 |   height: 100%;
143 |   object-fit: cover;
144 | }
145 | 
146 | 
147 | 
148 | 
149 | 
150 | /*-----------------------------------*\
151 |   #HEADER
152 | \*-----------------------------------*/
153 | 
154 | .header {
155 |   position: relative;
156 |   padding-block: 20px;
157 |   box-shadow: var(--shadow-1);
158 |   z-index: 1;
159 | }
160 | 
161 | .header .container {
162 |   display: flex;
163 |   align-items: center;
164 |   gap: 10px;
165 | }
166 | 
167 | .nav-open-btn,
168 | .header-action-btn {
169 |   font-size: 25px;
170 |   color: var(--dark-electric-blue);
171 |   transition: var(--transition-1);
172 | }
173 | 
174 | :is(.nav-open-btn, .header-action-btn):is(:hover, :focus) { color: var(--eerie-black); }
175 | 
176 | .header-action {
177 |   display: flex;
178 |   align-items: center;
179 |   gap: 20px;
180 |   margin-inline-start: auto;
181 | }
182 | 
183 | .profile-btn .img { width: 30px; }
184 | 
185 | .navbar {
186 |   position: fixed;
187 |   top: 0;
188 |   left: -250px;
189 |   background-color: var(--white);
190 |   height: 100vh;
191 |   max-width: 250px;
192 |   width: 100%;
193 |   padding: 20px;
194 |   z-index: 2;
195 |   transition: 0.25s var(--cubic-out);
196 |   visibility: hidden;
197 | }
198 | 
199 | .navbar.active {
200 |   visibility: visible;
201 |   transform: translateX(250px);
202 |   transition-duration: 0.5s;
203 | }
204 | 
205 | .nav-close-btn {
206 |   color: var(--dark-electric-blue);
207 |   font-size: 22px;
208 |   margin-block-end: 50px;
209 | }
210 | 
211 | .nav-close-btn ion-icon { --ionicon-stroke-width: 70px; }
212 | 
213 | .navbar-link {
214 |   font-size: var(--fs-2);
215 |   color: var(--eerie-black);
216 |   font-weight: var(--fw-700);
217 |   padding-block-end: 22px;
218 | }
219 | 
220 | .overlay {
221 |   position: fixed;
222 |   top: 0;
223 |   left: 0;
224 |   width: 100%;
225 |   height: 100vh;
226 |   background-color: var(--black);
227 |   transition: var(--transition-1);
228 |   z-index: 1;
229 |   opacity: 0;
230 |   pointer-events: none;
231 | }
232 | 
233 | .overlay.active {
234 |   opacity: 0.75;
235 |   pointer-events: all;
236 | }
237 | 
238 | 
239 | 
240 | 
241 | 
242 | /*-----------------------------------*\
243 |   #MAIN CONTENT
244 | \*-----------------------------------*/
245 | 
246 | .product-slides {
247 |   position: relative;
248 |   margin-inline: -15px;
249 |   overflow: hidden;
250 | }
251 | 
252 | .slider-banner {
253 |   display: flex;
254 |   transition: var(--transition-2);
255 | }
256 | 
257 | .product-banner {
258 |   min-width: 100%;
259 |   max-height: 300px;
260 | }
261 | 
262 | .slide-btn {
263 |   position: absolute;
264 |   top: 50%;
265 |   transform: translateY(-50%);
266 |   background-color: var(--white);
267 |   color: var(--eerie-black);
268 |   padding: 12px;
269 |   border-radius: var(--radius-circle);
270 | }
271 | 
272 | .slide-btn.prev { left: 15px; }
273 | 
274 | .slide-btn.next { right: 15px; }
275 | 
276 | .slide-btn.disabled {
277 |   color: var(--dark-electric-blue);
278 |   opacity: 0.8;
279 |   pointer-events: none;
280 | }
281 | 
282 | .product-content {
283 |   padding-block: 24px 50px;
284 |   padding-inline: 8px;
285 | }
286 | 
287 | .product-content .product-subtitle {
288 |   color: var(--sea-green);
289 |   font-size: var(--fs-4);
290 |   font-weight: var(--fw-700);
291 |   text-transform: uppercase;
292 |   letter-spacing: 1px;
293 | }
294 | 
295 | .product-content .product-title {
296 |   color: var(--eerie-black);
297 |   font-size: var(--fs-1);
298 |   line-height: 1.1;
299 |   margin-block: 12px 18px;
300 | }
301 | 
302 | .product-content .product-text {
303 |   font-size: var(--fs-3);
304 |   line-height: 1.7;
305 | }
306 | 
307 | .product-content .wrapper {
308 |   display: flex;
309 |   align-items: center;
310 |   gap: 15px;
311 |   margin-block: 30px 25px;
312 | }
313 | 
314 | .product-content .price {
315 |   color: var(--eerie-black);
316 |   font-size: var(--fs-1);
317 |   font-weight: var(--fw-700);
318 | }
319 | 
320 | .product-content .badge {
321 |   background-color: var(--sea-green_10);
322 |   color: var(--sea-green);
323 |   font-weight: var(--fw-700);
324 |   padding: 4px 10px;
325 |   border-radius: var(--radius-6);
326 | }
327 | 
328 | .product-content .del {
329 |   color: var(--cadet-blue-crayola);
330 |   font-weight: var(--fw-500);
331 |   margin-inline-start: auto;
332 | }
333 | 
334 | .counter-wrapper {
335 |   display: flex;
336 |   justify-content: space-between;
337 |   align-items: center;
338 |   background-color: var(--ghost-white);
339 |   border-radius: var(--radius-10);
340 |   margin-block-end: 15px;
341 | }
342 | 
343 | .counter-btn {
344 |   color: var(--sea-green);
345 |   font-size: 18px;
346 |   padding: 19px;
347 |   transition: var(--transition-1);
348 | }
349 | 
350 | .counter-btn ion-icon { --ionicon-stroke-width: 80px; }
351 | 
352 | .counter-btn:is(:hover, :focus) { color: var(--shamrock-green); }
353 | 
354 | .counter-wrapper .span {
355 |   color: var(--eerie-black);
356 |   font-weight: var(--fw-700);
357 | }
358 | 
359 | .cart-btn {
360 |   display: flex;
361 |   align-items: center;
362 |   justify-content: center;
363 |   gap: 15px;
364 |   width: 100%;
365 |   background-color: var(--sea-green);
366 |   color: var(--white);
367 |   font-weight: var(--fw-500);
368 |   padding: 18px;
369 |   border-radius: var(--radius-10);
370 |   box-shadow: var(--shadow-2);
371 |   transition: var(--transition-1);
372 | }
373 | 
374 | .cart-btn ion-icon { --ionicon-stroke-width: 50px; }
375 | 
376 | .cart-btn:is(:hover, :focus) { background-color: var(--shamrock-green); }
377 | 
378 | 
379 | 
380 | 
381 | 
382 | /*-----------------------------------*\
383 |   #MEDIA QUERIES
384 | \*-----------------------------------*/
385 | 
386 | /**
387 |  * responsive for larger than 768px screen
388 |  */
389 | 
390 | @media (min-width: 768px) {
391 | 
392 |   /**
393 |    * REUSED STYLE
394 |    */
395 | 
396 |   .container {
397 |     max-width: 400px;
398 |     margin-inline: auto;
399 |   }
400 | 
401 | 
402 | 
403 |   /**
404 |    * HEADER
405 |    */
406 | 
407 |   .header .container { max-width: 720px; }
408 | 
409 | 
410 |   
411 |   /**
412 |    * PRODUCT
413 |    */
414 | 
415 |   .product { margin-block-start: 45px; }
416 | 
417 |   .product .container {
418 |     display: grid;
419 |     gap: 20px;
420 |   }
421 | 
422 |   .product-slides { border-radius: var(--radius-15); }
423 | 
424 |   .product-banner { max-height: unset; }
425 | 
426 | }
427 | 
428 | 
429 | 
430 | 
431 | 
432 | /**
433 |  * responsive for larger than 992px screen
434 |  */
435 | 
436 | @media (min-width: 992px) {
437 | 
438 |   /**
439 |    * CUSTOM PROPERTY
440 |    */
441 | 
442 |   :root {
443 | 
444 |     /**
445 |      * typography
446 |      */
447 | 
448 |     --fs-2: 1.4rem;
449 |     --fs-4: 1.3rem;
450 | 
451 |   }
452 | 
453 | 
454 | 
455 |   /**
456 |    * REUSED STYLE
457 |    */
458 | 
459 |   .container { max-width: 950px; }
460 | 
461 | 
462 | 
463 |   /**
464 |    * HEADER
465 |    */
466 | 
467 |   .header {
468 |     padding-block: 25px;
469 |     box-shadow: none;
470 |   }
471 | 
472 |   .header .container {
473 |     max-width: 950px;
474 |     gap: 60px;
475 |   }
476 | 
477 |   .nav-open-btn,
478 |   .nav-close-btn { display: none; }
479 | 
480 |   .navbar {
481 |     all: unset;
482 |     display: block;
483 |   }
484 | 
485 |   .navbar-list {
486 |     display: flex;
487 |     gap: 30px;
488 |   }
489 | 
490 |   .navbar-link {
491 |     padding-block-end: 0;
492 |     color: var(--dark-electric-blue);
493 |     font-weight: var(--fw-500);
494 |     transition: var(--transition-1);
495 |   }
496 | 
497 |   .navbar-link:is(:hover, :focus) { color: var(--eerie-black); }
498 | 
499 |   .profile-btn .img { width: 50px; }
500 | 
501 | 
502 | 
503 |   /**
504 |    * PRODUCT
505 |    */
506 | 
507 |   .product { margin-block: 75px 100px; }
508 | 
509 |   .product .container {
510 |     grid-template-columns: 1fr 1fr;
511 |     align-items: center;
512 |     gap: 90px;
513 |   }
514 | 
515 |   .product-slides { margin-inline: 0; }
516 | 
517 |   .product-content { padding: 0; }
518 | 
519 |   .product-title { --fs-1: 4.5rem; }
520 | 
521 |   .btn-group {
522 |     display: grid;
523 |     grid-template-columns: 0.5fr 1fr;
524 |     align-items: center;
525 |     gap: 15px;
526 |   }
527 | 
528 |   .counter-wrapper { margin-block-end: 0; }
529 | 
530 | }


--------------------------------------------------------------------------------
/assets/images/Thumbs.db:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/Thumbs.db


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="77" height="20" viewBox="0 0 77 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_14_31)">
 3 | <path d="M3.3125 19H1.15625V1.75H4.94092L20.7534 16.8438V1.75H22.9097V19H20.0347L3.3125 3.54688V19ZM27.9234 1.75H30.0796V19H27.9234V1.75ZM51.254 1.75H54.4884L42.2696 10.1953L54.8478 19H51.6134L40.1134 11.0938H37.2384V19H35.0821V1.75H37.2384V9.29688H40.1134L51.254 1.75ZM58.4128 19V1.75H75.6628V3.54688H60.569V9.29688H74.944V11.0938H60.569V17.2031H75.6628V19H58.4128Z" fill="black"/>
 4 | <path d="M3.3125 19V20H4.3125V19H3.3125ZM1.15625 19H0.15625V20H1.15625V19ZM1.15625 1.75V0.75H0.15625V1.75H1.15625ZM4.94092 1.75L5.63139 1.02664L5.34158 0.75H4.94092V1.75ZM20.7534 16.8438L20.0629 17.5671L21.7534 19.1807V16.8438H20.7534ZM20.7534 1.75V0.75H19.7534V1.75H20.7534ZM22.9097 1.75H23.9097V0.75H22.9097V1.75ZM22.9097 19V20H23.9097V19H22.9097ZM20.0347 19L19.356 19.7344L19.6434 20H20.0347V19ZM3.3125 3.54688L3.99119 2.81245L2.3125 1.26116L2.3125 3.54688H3.3125ZM3.3125 18H1.15625V20H3.3125V18ZM2.15625 19V1.75H0.15625V19H2.15625ZM1.15625 2.75H4.94092V0.75H1.15625V2.75ZM4.25044 2.47336L20.0629 17.5671L21.4439 16.1204L5.63139 1.02664L4.25044 2.47336ZM21.7534 16.8438V1.75H19.7534V16.8438H21.7534ZM20.7534 2.75H22.9097V0.75H20.7534V2.75ZM21.9097 1.75V19H23.9097V1.75H21.9097ZM22.9097 18H20.0347V20H22.9097V18ZM20.7134 18.2656L3.99119 2.81245L2.63381 4.2813L19.356 19.7344L20.7134 18.2656ZM2.3125 3.54688V19H4.3125V3.54688H2.3125ZM27.9234 1.75V0.75H26.9234V1.75H27.9234ZM30.0796 1.75H31.0796V0.75H30.0796V1.75ZM30.0796 19V20H31.0796V19H30.0796ZM27.9234 19H26.9234V20H27.9234V19ZM27.9234 2.75H30.0796V0.75H27.9234V2.75ZM29.0796 1.75V19H31.0796V1.75H29.0796ZM30.0796 18H27.9234V20H30.0796V18ZM28.9234 19V1.75H26.9234V19H28.9234ZM51.254 1.75V0.75H50.9472L50.6932 0.922081L51.254 1.75ZM54.4884 1.75L55.057 2.57263L57.694 0.75H54.4884V1.75ZM42.2696 10.1953L41.7011 9.37269L40.5184 10.1901L41.6962 11.0145L42.2696 10.1953ZM54.8478 19V20H58.0201L55.4212 18.1808L54.8478 19ZM51.6134 19L51.0469 19.824L51.3028 20H51.6134V19ZM40.1134 11.0938L40.6799 10.2697L40.424 10.0938H40.1134V11.0938ZM37.2384 11.0938V10.0938H36.2384V11.0938H37.2384ZM37.2384 19V20H38.2384V19H37.2384ZM35.0821 19H34.0821V20H35.0821V19ZM35.0821 1.75V0.75H34.0821V1.75H35.0821ZM37.2384 1.75H38.2384V0.75H37.2384V1.75ZM37.2384 9.29688H36.2384V10.2969H37.2384V9.29688ZM40.1134 9.29688V10.2969H40.4202L40.6742 10.1248L40.1134 9.29688ZM51.254 2.75H54.4884V0.75H51.254V2.75ZM53.9198 0.927373L41.7011 9.37269L42.8382 11.0179L55.057 2.57263L53.9198 0.927373ZM41.6962 11.0145L54.2743 19.8192L55.4212 18.1808L42.8431 9.37608L41.6962 11.0145ZM54.8478 18H51.6134V20H54.8478V18ZM52.1799 18.176L40.6799 10.2697L39.5469 11.9178L51.0469 19.824L52.1799 18.176ZM40.1134 10.0938H37.2384V12.0938H40.1134V10.0938ZM36.2384 11.0938V19H38.2384V11.0938H36.2384ZM37.2384 18H35.0821V20H37.2384V18ZM36.0821 19V1.75H34.0821V19H36.0821ZM35.0821 2.75H37.2384V0.75H35.0821V2.75ZM36.2384 1.75V9.29688H38.2384V1.75H36.2384ZM37.2384 10.2969H40.1134V8.29688H37.2384V10.2969ZM40.6742 10.1248L51.8149 2.57792L50.6932 0.922081L39.5526 8.46896L40.6742 10.1248ZM58.4128 19H57.4128V20H58.4128V19ZM58.4128 1.75V0.75H57.4128V1.75H58.4128ZM75.6628 1.75H76.6628V0.75H75.6628V1.75ZM75.6628 3.54688V4.54688H76.6628V3.54688H75.6628ZM60.569 3.54688V2.54688H59.569V3.54688H60.569ZM60.569 9.29688H59.569V10.2969H60.569V9.29688ZM74.944 9.29688H75.944V8.29688H74.944V9.29688ZM74.944 11.0938V12.0938H75.944V11.0938H74.944ZM60.569 11.0938V10.0938H59.569V11.0938H60.569ZM60.569 17.2031H59.569V18.2031H60.569V17.2031ZM75.6628 17.2031H76.6628V16.2031H75.6628V17.2031ZM75.6628 19V20H76.6628V19H75.6628ZM59.4128 19V1.75H57.4128V19H59.4128ZM58.4128 2.75H75.6628V0.75H58.4128V2.75ZM74.6628 1.75V3.54688H76.6628V1.75H74.6628ZM75.6628 2.54688H60.569V4.54688H75.6628V2.54688ZM59.569 3.54688V9.29688H61.569V3.54688H59.569ZM60.569 10.2969H74.944V8.29688H60.569V10.2969ZM73.944 9.29688V11.0938H75.944V9.29688H73.944ZM74.944 10.0938H60.569V12.0938H74.944V10.0938ZM59.569 11.0938V17.2031H61.569V11.0938H59.569ZM60.569 18.2031H75.6628V16.2031H60.569V18.2031ZM74.6628 17.2031V19H76.6628V17.2031H74.6628ZM75.6628 18H58.4128V20H75.6628V18Z" fill="black"/>
 5 | </g>
 6 | <defs>
 7 | <clipPath id="clip0_14_31">
 8 | <rect width="77" height="20" fill="white"/>
 9 | </clipPath>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/assets/images/product-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/product-1.png


--------------------------------------------------------------------------------
/assets/images/product-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/product-2.png


--------------------------------------------------------------------------------
/assets/images/product-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/product-3.png


--------------------------------------------------------------------------------
/assets/images/product-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/product-4.png


--------------------------------------------------------------------------------
/assets/images/profile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/assets/images/profile.png


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | 
  4 | 
  5 | /**
  6 |  * add event on element
  7 |  */
  8 | 
  9 | const addEventOnElem = function (elem, type, callback) {
 10 |   if (elem.length > 1) {
 11 |     for (let i = 0; i < elem.length; i++) {
 12 |       elem[i].addEventListener(type, callback);
 13 |     }
 14 |   } else {
 15 |     elem.addEventListener(type, callback);
 16 |   }
 17 | }
 18 | 
 19 | 
 20 | 
 21 | /**
 22 |  * navbar toggle
 23 |  */
 24 | 
 25 | const navbar = document.querySelector("[data-navbar]");
 26 | const navToggler = document.querySelectorAll("[data-nav-toggler]");
 27 | const overlay = document.querySelector("[data-overlay]");
 28 | 
 29 | const toggleNav = function () {
 30 |   navbar.classList.toggle("active");
 31 |   overlay.classList.toggle("active");
 32 | }
 33 | 
 34 | addEventOnElem(navToggler, "click", toggleNav);
 35 | 
 36 | 
 37 | 
 38 | /**
 39 |  * slider funtionality
 40 |  */
 41 | 
 42 | const slider = document.querySelector("[data-slider]");
 43 | const nextBtn = document.querySelector("[data-next]");
 44 | const prevBtn = document.querySelector("[data-prev]");
 45 | 
 46 | // set the slider default position
 47 | let sliderPos = 0;
 48 | 
 49 | // set the number of total slider items
 50 | const totalSliderItems = 4;
 51 | 
 52 | // make next slide btn workable
 53 | const slideToNext = function () {
 54 | 
 55 |   sliderPos++;
 56 |   slider.style.transform = `translateX(-${sliderPos}00%)`;
 57 | 
 58 |   sliderEnd();
 59 | 
 60 | }
 61 | 
 62 | addEventOnElem(nextBtn, "click", slideToNext);
 63 | 
 64 | // make prev slide btn workable
 65 | const slideToPrev = function () {
 66 | 
 67 |   sliderPos--;
 68 |   slider.style.transform = `translateX(-${sliderPos}00%)`;
 69 | 
 70 |   sliderEnd();
 71 | 
 72 | }
 73 | 
 74 | addEventOnElem(prevBtn, "click", slideToPrev);
 75 | 
 76 | 
 77 | 
 78 | // check when slider is end then what should slider btn do
 79 | function sliderEnd() {
 80 |   if (sliderPos >= totalSliderItems - 1) {
 81 |     nextBtn.classList.add("disabled");
 82 |   } else {
 83 |     nextBtn.classList.remove("disabled");
 84 |   }
 85 | 
 86 |   if (sliderPos <= 0) {
 87 |     prevBtn.classList.add("disabled");
 88 |   } else {
 89 |     prevBtn.classList.remove("disabled");
 90 |   }
 91 | }
 92 | 
 93 | sliderEnd();
 94 | 
 95 | 
 96 | 
 97 | /**
 98 |  * product quantity functionality
 99 |  */
100 | 
101 | const totalPriceElem = document.querySelector("[data-total-price]");
102 | const qtyElem = document.querySelector("[data-qty]");
103 | const qtyMinusBtn = document.querySelector("[data-qty-minus]");
104 | const qtyPlusBtn = document.querySelector("[data-qty-plus]");
105 | 
106 | // set the product default quantity
107 | let qty = 1;
108 | 
109 | // set the product default price
110 | let productPrice = 125;
111 | 
112 | // set the initial total price
113 | let totalPrice = 125;
114 | 
115 | const increaseProductQty = function () {
116 |   qty++;
117 |   totalPrice = qty * productPrice;
118 | 
119 |   qtyElem.textContent = qty;
120 |   totalPriceElem.textContent = `$${totalPrice}.00`;
121 | }
122 | 
123 | addEventOnElem(qtyPlusBtn, "click", increaseProductQty);
124 | 
125 | const decreaseProductQty = function () {
126 |   if (qty > 1) qty--;
127 |   totalPrice = qty * productPrice;
128 | 
129 |   qtyElem.textContent = qty;
130 |   totalPriceElem.textContent = `$${totalPrice}.00`;
131 | }
132 | 
133 | addEventOnElem(qtyMinusBtn, "click", decreaseProductQty);


--------------------------------------------------------------------------------
/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>Product detail page</title>
  9 | 
 10 |   <!-- 
 11 |     - custom css link
 12 |   -->
 13 |   <link rel="stylesheet" href="./assets/css/style.css">
 14 | 
 15 |   <!-- 
 16 |     - google font link
 17 |   -->
 18 |   <link rel="preconnect" href="https://fonts.googleapis.com">
 19 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 20 |   <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;700&display=swap" rel="stylesheet">
 21 | 
 22 | </head>
 23 | 
 24 | <body>
 25 | 
 26 |   <!-- 
 27 |     - #HEADER
 28 |   -->
 29 | 
 30 |   <header class="header">
 31 |     <div class="container">
 32 | 
 33 |       <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
 34 |         <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 35 |       </button>
 36 | 
 37 |       <a href="#" class="logo">
 38 |         <img src="./assets/images/logo.svg" width="77" height="20" alt="Nike home">
 39 |       </a>
 40 | 
 41 |       <nav class="navbar" data-navbar>
 42 | 
 43 |         <button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
 44 |           <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
 45 |         </button>
 46 | 
 47 |         <ul class="navbar-list">
 48 | 
 49 |           <li>
 50 |             <a href="#" class="navbar-link">Collection</a>
 51 |           </li>
 52 | 
 53 |           <li>
 54 |             <a href="#" class="navbar-link">Men</a>
 55 |           </li>
 56 | 
 57 |           <li>
 58 |             <a href="#" class="navbar-link">Women</a>
 59 |           </li>
 60 | 
 61 |           <li>
 62 |             <a href="#" class="navbar-link">About</a>
 63 |           </li>
 64 | 
 65 |           <li>
 66 |             <a href="#" class="navbar-link">Contact</a>
 67 |           </li>
 68 | 
 69 |         </ul>
 70 | 
 71 |       </nav>
 72 | 
 73 |       <div class="header-action">
 74 | 
 75 |         <button class="header-action-btn" aria-label="add to cart">
 76 |           <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
 77 |         </button>
 78 | 
 79 |         <button class="profile-btn" aria-label="profile">
 80 |           <img src="./assets/images/profile.png" width="100" height="100" alt="profile" class="img">
 81 |         </button>
 82 | 
 83 |       </div>
 84 | 
 85 |       <div class="overlay" data-overlay data-nav-toggler></div>
 86 | 
 87 |     </div>
 88 |   </header>
 89 | 
 90 | 
 91 | 
 92 | 
 93 | 
 94 |   <main>
 95 |     <article>
 96 | 
 97 |       <!-- 
 98 |         - #PRODUCT
 99 |       -->
100 | 
101 |       <section class="section product" aria-label="product">
102 |         <div class="container">
103 | 
104 |           <div class="product-slides">
105 | 
106 |             <div class="slider-banner" data-slider>
107 |               <figure class="product-banner">
108 |                 <img src="./assets/images/product-1.png" width="600" height="600" loading="lazy" alt="Nike Sneaker"
109 |                   class="img-cover">
110 |               </figure>
111 | 
112 |               <figure class="product-banner">
113 |                 <img src="./assets/images/product-2.png" width="600" height="600" loading="lazy" alt="Nike Sneaker"
114 |                   class="img-cover">
115 |               </figure>
116 | 
117 |               <figure class="product-banner">
118 |                 <img src="./assets/images/product-3.png" width="600" height="600" loading="lazy" alt="Nike Sneaker"
119 |                   class="img-cover">
120 |               </figure>
121 | 
122 |               <figure class="product-banner">
123 |                 <img src="./assets/images/product-4.png" width="600" height="600" loading="lazy" alt="Nike Sneaker"
124 |                   class="img-cover">
125 |               </figure>
126 |             </div>
127 | 
128 |             <button class="slide-btn prev" aria-label="Previous image" data-prev>
129 |               <ion-icon name="chevron-back" aria-hidden="true"></ion-icon>
130 |             </button>
131 | 
132 |             <button class="slide-btn next" aria-label="Next image" data-next>
133 |               <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>
134 |             </button>
135 | 
136 |           </div>
137 | 
138 |           <div class="product-content">
139 | 
140 |             <p class="product-subtitle">Nike Company</p>
141 | 
142 |             <h1 class="h1 product-title">Fall Limited Edition Sneakers</h1>
143 | 
144 |             <p class="product-text">
145 |               These low-profile sneakers are your perfect casual wear companion. Featuring a
146 |               durable rubber outer sole, they’ll withstand everything the weather can offer.
147 |             </p>
148 | 
149 |             <div class="wrapper">
150 | 
151 |               <span class="price" data-total-price>$125.00</span>
152 | 
153 |               <span class="badge">50%</span>
154 | 
155 |               <del class="del">$250.00</del>
156 | 
157 |             </div>
158 | 
159 |             <div class="btn-group">
160 | 
161 |               <div class="counter-wrapper">
162 | 
163 |                 <button class="counter-btn" data-qty-minus>
164 |                   <ion-icon name="remove-outline"></ion-icon>
165 |                 </button>
166 | 
167 |                 <span class="span" data-qty>1</span>
168 | 
169 |                 <button class="counter-btn" data-qty-plus>
170 |                   <ion-icon name="add-outline"></ion-icon>
171 |                 </button>
172 | 
173 |               </div>
174 | 
175 |               <button class="cart-btn">
176 |                 <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
177 | 
178 |                 <span class="span">Add to cart</span>
179 |               </button>
180 | 
181 |             </div>
182 | 
183 |           </div>
184 | 
185 |         </div>
186 |       </section>
187 | 
188 |     </article>
189 |   </main>
190 | 
191 | 
192 | 
193 | 
194 | 
195 |   <!-- 
196 |     - custom js link
197 |   -->
198 |   <script src="./assets/js/script.js"></script>
199 | 
200 |   <!-- 
201 |     - ionicon link
202 |   -->
203 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
204 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
205 | 
206 | </body>
207 | 
208 | </html>


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
 1 | Product detail page
 2 | 
 3 | 
 4 | 
 5 | #---------- HEADER ----------#
 6 | 
 7 | aria-labe = open menu
 8 | <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
 9 | 
10 | alt = Nike home
11 | 
12 | aria-label = close menu
13 | <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
14 | 
15 | Collection
16 | Men
17 | Women
18 | About
19 | Contact
20 | 
21 | aria-label = add to cart
22 | <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
23 | 
24 | aria-label = profile
25 | 
26 | 
27 | 
28 | #---------- PRODUCT DETAIL AREA ----------#
29 | 
30 | alt = Nike Sneaker
31 | 
32 | aria-label = Previous image
33 | <ion-icon name="chevron-back" aria-hidden="true"></ion-icon>
34 | 
35 | aria-label = Next image
36 | <ion-icon name="chevron-forward" aria-hidden="true"></ion-icon>
37 | 
38 | Nike Company
39 | 
40 | Fall Limited Edition Sneakers
41 | 
42 | These low-profile sneakers are your perfect casual wear companion. Featuring a 
43 | durable rubber outer sole, they’ll withstand everything the weather can offer.
44 | 
45 | $125.00
46 | 50%
47 | $250.00
48 | 
49 | <ion-icon name="remove-outline"></ion-icon>
50 | 1
51 | <ion-icon name="add-outline"></ion-icon>
52 | 
53 | <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
54 | Add to cart


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nike/6b48e365a26f9524b2f7e167d39a6fcb452b6d16/readme-images/desktop.png


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Essential Stuff
 2 | 
 3 | ## Html import links
 4 | 
 5 | Google font
 6 | 
 7 | ``` html
 8 | <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;700&display=swap" rel="stylesheet">
11 | ```
12 | 
13 | Ionicon
14 | 
15 | ``` html
16 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
17 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
18 | ```
19 | 
20 | ---
21 | 
22 | ## Colors
23 | 
24 | ``` css
25 | --cadet-blue-crayola: hsl(220, 14%, 75%);
26 | --dark-electric-blue: hsl(217, 9%, 45%);
27 | --shamrock-green: hsl(146, 51%, 41%);
28 | --sea-green_10: hsla(146, 75%, 30%, 0.1);
29 | --eerie-black: hsl(218, 12%, 13%);
30 | --ghost-white: hsl(230, 60%, 98%);
31 | --sea-green: hsl(146, 75%, 30%);
32 | --honeydew: hsl(146, 74%, 94%);
33 | --white: hsl(0, 0%, 100%);
34 | --black: hsl(0, 0%, 0%);
35 | ```
36 | 
37 | ## Typography
38 | 
39 | ``` css
40 | --ff-kumbh-sans: 'Kumbh Sans', sans-serif;
41 | 
42 | --fs-1: 2.8rem;
43 | --fs-2: 1.8rem;
44 | --fs-3: 1.5rem;
45 | --fs-4: 1.2rem;
46 | 
47 | --fw-500: 500;
48 | --fw-700: 700;
49 | ```
50 | 
51 | ## Shadow
52 | 
53 | ``` css
54 | --shadow-1: 0 2px 3px hsla(0, 0%, 0%, 0.2);
55 | --shadow-2: 0 10px 30px -10px var(--sea-green);
56 | ```
57 | 
58 | ## Border Radius
59 | 
60 | ``` css
61 | --radius-circle: 50%;
62 | --radius-15: 15px;
63 | --radius-12: 12px;
64 | --radius-10: 10px;
65 | --radius-6: 6px;
66 | ```
67 | 
68 | ## Transition
69 | 
70 | ``` css
71 | --transition-1: 0.25s ease;
72 | --transition-2: 0.5s ease;
73 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
74 | ```
75 | 


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