├── app.js
├── img
    ├── black.png
    ├── blue.png
    ├── green.png
    ├── logo.png
    ├── orange.png
    └── red.png
├── index.html
└── style.css


/app.js:
--------------------------------------------------------------------------------
 1 | const sizes = document.querySelectorAll('.size');
 2 | const colors = document.querySelectorAll('.color');
 3 | const shoes = document.querySelectorAll('.shoe');
 4 | const gradients = document.querySelectorAll('.gradient');
 5 | const shoeBg = document.querySelector('.shoeBackground');
 6 | 
 7 | let prevColor = "blue";
 8 | let animationEnd = true;
 9 | 
10 | function changeSize(){
11 |     sizes.forEach(size => size.classList.remove('active'));
12 |     this.classList.add('active');
13 | }
14 | 
15 | function changeColor(){
16 |     if(!animationEnd) return;
17 |     let primary = this.getAttribute('primary');
18 |     let color = this.getAttribute('color');
19 |     let shoe = document.querySelector(`.shoe[color="${color}"]`);
20 |     let gradient = document.querySelector(`.gradient[color="${color}"]`);
21 |     let prevGradient = document.querySelector(`.gradient[color="${prevColor}"]`);
22 | 
23 |     if(color == prevColor) return;
24 | 
25 |     colors.forEach(c => c.classList.remove('active'));
26 |     this.classList.add('active');
27 | 
28 |     document.documentElement.style.setProperty('--primary', primary);
29 |     
30 |     shoes.forEach(s => s.classList.remove('show'));
31 |     shoe.classList.add('show');
32 | 
33 |     gradients.forEach(g => g.classList.remove('first', 'second'));
34 |     gradient.classList.add('first');
35 |     prevGradient.classList.add('second');
36 | 
37 |     prevColor = color;
38 |     animationEnd = false;
39 | 
40 |     gradient.addEventListener('animationend', () => {
41 |         animationEnd = true;
42 |     })
43 | }
44 | 
45 | sizes.forEach(size => size.addEventListener('click', changeSize));
46 | colors.forEach(c => c.addEventListener('click', changeColor));
47 | 
48 | let x = window.matchMedia("(max-width: 1000px)");
49 | 
50 | function changeHeight(){
51 |     if(x.matches){
52 |         let shoeHeight = shoes[0].offsetHeight;
53 |         shoeBg.style.height = `${shoeHeight * 0.9}px`;
54 |     }
55 |     else{
56 |         shoeBg.style.height = "475px";
57 |     }
58 | }
59 | 
60 | changeHeight();
61 | 
62 | window.addEventListener('resize', changeHeight);


--------------------------------------------------------------------------------
/img/black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/black.png


--------------------------------------------------------------------------------
/img/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/blue.png


--------------------------------------------------------------------------------
/img/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/green.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/logo.png


--------------------------------------------------------------------------------
/img/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/orange.png


--------------------------------------------------------------------------------
/img/red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sefyudem/Product-Card-Using-HTML-CSS/a37f6826c865321a2f6df41702c4fda08b8a59d1/img/red.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <script src="https://kit.fontawesome.com/a81368914c.js"></script>
 9 |     <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap" rel="stylesheet">
10 |     <title>Product Card</title>
11 | </head>
12 | <body>
13 |     <div class="container">
14 |         <div class="card">
15 |             <div class="shoeBackground">
16 |                 <div class="gradients">
17 |                     <div class="gradient second" color="blue"></div>
18 |                     <div class="gradient" color="red"></div>
19 |                     <div class="gradient" color="green"></div>
20 |                     <div class="gradient" color="orange"></div>
21 |                     <div class="gradient" color="black"></div>
22 |                 </div>
23 |                 <h1 class="nike">nike</h1>
24 |                 <img src="img/logo.png" alt="" class="logo">
25 |                 <a href="#" class="share"><i class="fas fa-share-alt"></i></a>
26 | 
27 |                 <img src="img/blue.png" alt="" class="shoe show" color="blue">
28 |                 <img src="img/red.png" alt="" class="shoe" color="red">
29 |                 <img src="img/green.png" alt="" class="shoe" color="green">
30 |                 <img src="img/orange.png" alt="" class="shoe" color="orange">
31 |                 <img src="img/black.png" alt="" class="shoe" color="black">
32 | 
33 |             </div>
34 |             <div class="info">
35 |                 <div class="shoeName">
36 |                     <div>
37 |                         <h1 class="big">Nike Zoom KD 12</h1>
38 |                         <span class="new">new</span>
39 |                     </div>
40 |                     <h3 class="small">Men's running shoes</h3>
41 |                 </div>
42 |                 <div class="description">
43 |                     <h3 class="title">Product Info</h3>
44 |                     <p class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
45 |                 </div>
46 |                 <div class="color-container">
47 |                     <h3 class="title">Color</h3>
48 |                     <div class="colors">
49 |                         <span class="color active" primary="#2175f5" color="blue"></span>
50 |                         <span class="color" primary="#f84848" color="red"></span>
51 |                         <span class="color" primary="#29b864" color="green"></span>
52 |                         <span class="color" primary="#ff5521" color="orange"></span>
53 |                         <span class="color" primary="#444" color="black"></span>
54 |                     </div>
55 |                 </div>
56 |                 <div class="size-container">
57 |                     <h3 class="title">size</h3>
58 |                     <div class="sizes">
59 |                         <span class="size">7</span>
60 |                         <span class="size">8</span>
61 |                         <span class="size active">9</span>
62 |                         <span class="size">10</span>
63 |                         <span class="size">11</span>
64 |                     </div>
65 |                 </div>
66 |                 <div class="buy-price">
67 |                     <a href="#" class="buy"><i class="fas fa-shopping-cart"></i>Add to card</a>
68 |                     <div class="price">
69 |                         <i class="fas fa-dollar-sign"></i>
70 |                         <h1>189.99</h1>
71 |                     </div>
72 |                 </div>
73 |             </div>
74 |         </div>
75 |     </div>
76 |     <script src="app.js"></script>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 |     --primary: #2175f5;
  3 | }
  4 | 
  5 | *{
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     box-sizing: border-box;
  9 |     font-family: 'Poppins', sans-serif;
 10 | }
 11 | 
 12 | body{
 13 |     background-color: #efefef;
 14 | }
 15 | 
 16 | .container{
 17 |     min-height: 100vh;
 18 |     display: flex;
 19 |     justify-content: center;
 20 |     align-items: center;
 21 |     padding: 40px;
 22 |     overflow: hidden;
 23 | }
 24 | 
 25 | .card{
 26 |     display: flex;
 27 |     justify-content: center;
 28 |     align-items: center;
 29 |     width: 860px;
 30 | }
 31 | 
 32 | .shoeBackground{
 33 |     position: relative;
 34 |     width: 50%;
 35 |     height: 475px;
 36 |     box-shadow: -15px 0 35px rgba(0, 0, 0, 0.1),
 37 |     0 -15px 35px rgba(0, 0, 0, 0.1),
 38 |     0 15px 35px rgba(0, 0, 0, 0.1);
 39 |     transition: .5s;
 40 | }
 41 | 
 42 | .gradients{
 43 |     position: absolute;
 44 |     width: 100%;
 45 |     height: 100%;
 46 |     left: 0;
 47 |     top: 0;
 48 | }
 49 | 
 50 | .gradient{
 51 |     position: absolute;
 52 |     width: 100%;
 53 |     height: 100%;
 54 |     left: 0;
 55 |     top: 0;
 56 |     z-index: -2;
 57 | }
 58 | 
 59 | .first{
 60 |     z-index: 0;
 61 |     animation: 1s width ease;
 62 | }
 63 | 
 64 | @keyframes width{
 65 |     from{
 66 |         width: 0%;
 67 |     }
 68 |     to{
 69 |         width: 100%;
 70 |     }
 71 | }
 72 | 
 73 | .second{
 74 |     z-index: -1;
 75 | }
 76 | 
 77 | .gradient[color="blue"]{
 78 |     background-image: linear-gradient(45deg, #0136af, #22abfa);
 79 | }
 80 | 
 81 | .gradient[color="red"]{
 82 |     background-image: linear-gradient(45deg, #d62926, #ee625f);
 83 | }
 84 | 
 85 | .gradient[color="green"]{
 86 |     background-image: linear-gradient(45deg, #11998e, #1ce669);
 87 | }
 88 | 
 89 | .gradient[color="orange"]{
 90 |     background-image: linear-gradient(45deg, #fc4a1a, #f7b733);
 91 | }
 92 | 
 93 | .gradient[color="black"]{
 94 |     background-image: linear-gradient(45deg, #111, #666);
 95 | }
 96 | 
 97 | .logo{
 98 |     position: absolute;
 99 |     width: 100px;
100 |     left: 20px;
101 |     top: 20px;
102 | }
103 | 
104 | .share{
105 |     position: absolute;
106 |     top: 15px;
107 |     right: 15px;
108 |     background-color: #fff;
109 |     width: 50px;
110 |     height: 50px;
111 |     border-radius: 50%;
112 |     text-align: center;
113 |     font-size: 1.3rem;
114 |     text-decoration: none;
115 |     color: var(--primary);
116 |     transition: .5s;
117 | }
118 | 
119 | .share:hover{
120 |     transform: scale(1.1);
121 | }
122 | 
123 | .share i{
124 |     line-height: 50px;
125 | }
126 | 
127 | .nike{
128 |     position: absolute;
129 |     top: 85px;
130 |     left: 15px;
131 |     font-size: 11rem;
132 |     text-transform: uppercase;
133 |     line-height: .9;
134 |     color: #fff;
135 |     opacity: .1;
136 | }
137 | 
138 | .shoe{
139 |     position: absolute;
140 |     width: 140%;
141 |     opacity: 0;
142 |     bottom: 0;
143 |     right: 0;
144 |     transform: rotate(-20deg);
145 |     transition: .5s;
146 | }
147 | 
148 | .shoe.show{
149 |     opacity: 1;
150 | }
151 | 
152 | .info{
153 |     width: 50%;
154 |     background-color: #fff;
155 |     z-index: 1;
156 |     padding: 35px 40px;
157 |     box-shadow: 15px 0 35px rgba(0, 0, 0, 0.1),
158 |     0 -15px 35px rgba(0, 0, 0, 0.1),
159 |     0 15px 35px rgba(0, 0, 0, 0.1);
160 | }
161 | 
162 | .shoeName{
163 |     padding: 0 0 10px 0;
164 | }
165 | 
166 | .shoeName div{
167 |     display: flex;
168 |     align-items: center;
169 | }
170 | 
171 | .shoeName div .big{
172 |     margin-right: 10px;
173 |     font-size: 2rem;
174 |     color: #333;
175 |     line-height: 1;
176 | }
177 | 
178 | .shoeName div .new{
179 |     background-color: var(--primary);
180 |     text-transform: uppercase;
181 |     color: #fff;
182 |     padding: 3px 10px;
183 |     border-radius: 5px;
184 |     transition: .5s;
185 | }
186 | 
187 | .shoeName .small{
188 |     font-weight: 500;
189 |     color: #444;
190 |     margin-top: 3px;
191 |     text-transform: capitalize;
192 | }
193 | 
194 | .shoeName, .description, .color-container, .size-container{
195 |     border-bottom: 1px solid #dadada;
196 | }
197 | 
198 | .description{
199 |     padding: 10px 0;
200 | }
201 | 
202 | .title{
203 |     color: #3a3a3a;
204 |     font-weight: 600;
205 |     font-size: 1.2rem;
206 |     text-transform: uppercase;
207 | }
208 | 
209 | .text{
210 |     color: #555;
211 |     font-size: 17px;
212 | }
213 | 
214 | .color-container{
215 |     padding: 10px 0;
216 | }
217 | 
218 | .colors{
219 |     padding: 8px 0;
220 |     display: flex;
221 |     align-items: center;
222 | }
223 | 
224 | .color{
225 |     width: 25px;
226 |     height: 25px;
227 |     border-radius: 50%;
228 |     margin: 0 10px;
229 |     border: 5px solid;
230 |     cursor: pointer;
231 |     transition: .5s;
232 | }
233 | 
234 | .color[color="blue"]{
235 |     background-color: #2175f5;
236 |     border-color: #2175f5;
237 | }
238 | 
239 | .color[color="red"]{
240 |     background-color: #f84848;
241 |     border-color: #f84848;
242 | }
243 | 
244 | .color[color="green"]{
245 |     background-color: #29b864;
246 |     border-color: #29b864;
247 | }
248 | 
249 | .color[color="orange"]{
250 |     background-color: #ff5521;
251 |     border-color: #ff5521;
252 | }
253 | 
254 | .color[color="black"]{
255 |     background-color: #444;
256 |     border-color: #444;
257 | }
258 | 
259 | .color.active{
260 |     border-color: #fff;
261 |     box-shadow: 0 0 10px .5px rgba(0, 0, 0, 0.2);
262 |     transform: scale(1.1);
263 | }
264 | 
265 | .size-container{
266 |     padding: 10px 0;
267 |     margin-bottom: 10px;
268 | }
269 | 
270 | .sizes{
271 |     padding: 8px 0;
272 |     display: flex;
273 |     align-items: center;
274 | }
275 | 
276 | .size{
277 |     width: 40px;
278 |     height: 40px;
279 |     border-radius: 6px;
280 |     background-color: #eee;
281 |     margin: 0 10px;
282 |     text-align: center;
283 |     line-height: 40px;
284 |     font-size: 1.1rem;
285 |     font-weight: 500;
286 |     cursor: pointer;
287 |     transition: .3s;
288 | }
289 | 
290 | .size.active{
291 |     background-color: var(--primary);
292 |     color: #fff;
293 |     transition: .5s;
294 | }
295 | 
296 | .buy-price{
297 |     padding-top: 15px;
298 |     display: flex;
299 |     justify-content: space-between;
300 |     align-items: center;
301 | }
302 | 
303 | .price{
304 |     color: #333;
305 |     display: flex;
306 |     align-items: flex-start;
307 | }
308 | 
309 | .price h1{
310 |     font-size: 2.1rem;
311 |     font-weight: 600;
312 |     line-height: 1;
313 | }
314 | 
315 | .price i{
316 |     font-size: 1.4rem;
317 |     margin-right: 1px;
318 | }
319 | 
320 | .buy{
321 |     padding: .7rem 1rem;
322 |     background-color: var(--primary);
323 |     text-decoration: none;
324 |     color: #fff;
325 |     text-transform: uppercase;
326 |     letter-spacing: 1px;
327 |     font-weight: 500;
328 |     font-size: 1.1rem;
329 |     transition: .5s;
330 | }
331 | 
332 | .buy:hover{
333 |     transform: scale(1.1);
334 | }
335 | 
336 | .buy i{
337 |     margin-right: 2px;
338 | }
339 | 
340 | @media (max-width: 1070px){
341 |     .shoe{
342 |         width: 135%;
343 |     }
344 | }
345 | 
346 | @media (max-width: 1000px){
347 |     .card{
348 |         flex-direction: column;
349 |         width: 100%;
350 |         box-shadow: 0 0 35px 1px rgba(0, 0, 0, 0.2);
351 |     }
352 |     
353 |     .card > div{
354 |         width: 100%;
355 |         box-shadow: none;
356 |     }
357 | 
358 |     .shoe{
359 |         width: 100%;
360 |         transform: rotate(-5deg) translateY(-50%);
361 |         top: 55%;
362 |         right: 2%;
363 |     }
364 | 
365 |     .nike{
366 |         top: 20%;
367 |         left: 5%;
368 |     }
369 | }
370 | 
371 | @media (max-width: 600px){
372 |     .share{
373 |         width: 40px;
374 |         height: 40px;
375 |     }
376 | 
377 |     .share i {
378 |         font-size: 1rem;
379 |         line-height: 40px;
380 |     }
381 | 
382 |     .logo{
383 |         width: 70px;
384 |     }
385 | }
386 | 
387 | @media (max-width: 490px){
388 |     .nike{
389 |         font-size: 7rem;
390 |     }
391 | 
392 |     .shoeName div .big{
393 |         font-size: 1.3rem;
394 |     }
395 | 
396 |     .small{
397 |         font-size: 1rem;
398 |     }
399 | 
400 |     .new{
401 |         padding: 2px 6px;
402 |         font-size: .9rem;
403 |     }
404 | 
405 |     .title{
406 |         font-size: .9rem;
407 |     }
408 | 
409 |     .text{
410 |         font-size: .8rem;
411 |     }
412 | 
413 |     .buy{
414 |         padding: .5rem .8rem;
415 |         font-size: .8rem;
416 |     }
417 | 
418 |     .price h1{
419 |         font-size: 1.5rem;
420 |     }
421 | 
422 |     .price i{
423 |         font-size: .9rem;
424 |     }
425 | 
426 |     .size{
427 |         width: 30px;
428 |         height: 30px;
429 |         margin: 0 8px;
430 |         font-size: .9rem;
431 |         line-height: 30px;
432 |     }
433 | 
434 |     .color{
435 |         margin: 0 6px;
436 |         width: 0 20px;
437 |         width: 20px;
438 |         height: 20px;
439 |         border-width: 4px;
440 |     }
441 | 
442 |     .share{
443 |         width: 35px;
444 |         height: 35px;
445 |         top: 10px;
446 |         right: 10px;
447 |     }
448 | 
449 |     .share i{
450 |         font-size: .8rem;
451 |         line-height: 35px;
452 |     }
453 | 
454 |     .logo{
455 |         width: 60px;
456 |         top: 10px;
457 |         left: 10px;
458 |     }
459 | 
460 |     .info{
461 |         padding: 20px;
462 |     }
463 | }
464 | 
465 | @media (max-width: 400px){
466 |     .buy i{
467 |         display: none;
468 |     }
469 | 
470 |     .container{
471 |         padding: 20px;
472 |     }
473 | }


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