-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (108 loc) · 5.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title>Nike Zoom KD 12</title>
<link rel="shortcut icon" type="image/webp" href="./images/nike_logo.webp"/>
<script type="text/javascript">
let image1=new Image()
image1.src="./images/shoes/black.webp"
let image2=new Image()
image2.src="./images/shoes/blue.webp"
let image3=new Image()
image3.src="./images/shoes/green.webp"
let image4=new Image()
image4.src="./images/shoes/orange.webp"
let image5=new Image()
image5.src="./images/shoes/red.webp"
</script>
</head>
<body>
<main>
<div class="product-card">
<div class="product-demonstration">
<div class="product-backgrounds">
<div class="background-gradient gradient-blue"></div>
<div class="background-gradient gradient-red"></div>
<div class="background-gradient gradient-green"></div>
<div class="background-gradient gradient-orange"></div>
<div class="background-gradient gradient-black"></div>
</div>
<div class="logo-share-flex-container">
<a href="https://www.nike.com" target="_blank">
<img src="images/nike_logo.webp" alt="nike logo" width="100px" class="logo-img">
</a>
<div class="share-div theme-color">
<img src="images/share.webp" alt="share icon" width="60px" class="share-img">
</div>
</div>
<div class="nike-background-writing">NIKE</div>
<div class="shoe-img"></div>
</div>
<div class="product-description">
<div class="main-description">
<h2>Nike Zoom KD 12</h2>
<div class="new-icon theme-color">NEW</div>
<p>Men's Basketball Shoes</p>
</div>
<hr>
<div class="detailed-description">
<h3>DESCRIPTION</h3>
<p>
Well-balanced shoes that will work for a wide range of basketball players
</p>
</div>
<hr>
<div class="color-select">
<h3>COLOR</h3>
<input type="radio" name="color-select-radio-btn" class="color-select-radio-btn" id="color-select-radio-btn-blue" checked>
<label for="color-select-radio-btn-blue" class="color-select-label">
<div></div>
</label>
<input type="radio" name="color-select-radio-btn" class="color-select-radio-btn" id="color-select-radio-btn-red">
<label for="color-select-radio-btn-red" class="color-select-label">
<div></div>
</label>
<input type="radio" name="color-select-radio-btn" class="color-select-radio-btn" id="color-select-radio-btn-green">
<label for="color-select-radio-btn-green" class="color-select-label">
<div></div>
</label>
<input type="radio" name="color-select-radio-btn" class="color-select-radio-btn" id="color-select-radio-btn-orange">
<label for="color-select-radio-btn-orange" class="color-select-label">
<div></div>
</label>
<input type="radio" name="color-select-radio-btn" class="color-select-radio-btn" id="color-select-radio-btn-black">
<label for="color-select-radio-btn-black" class="color-select-label">
<div></div>
</label>
</div>
<hr>
<div class="size-select">
<h3>SIZE</h3>
<input type="radio" name="size-select-radio-btn" class="size-select-radio-btn" id="size-select-radio-btn1" checked>
<label for="size-select-radio-btn1" class="size-select-label">7</label>
<input type="radio" name="size-select-radio-btn" class="size-select-radio-btn" id="size-select-radio-btn2">
<label for="size-select-radio-btn2" class="size-select-label">8</label>
<input type="radio" name="size-select-radio-btn" class="size-select-radio-btn" id="size-select-radio-btn3">
<label for="size-select-radio-btn3" class="size-select-label">9</label>
<input type="radio" name="size-select-radio-btn" class="size-select-radio-btn" id="size-select-radio-btn4">
<label for="size-select-radio-btn4" class="size-select-label">10</label>
<input type="radio" name="size-select-radio-btn" class="size-select-radio-btn" id="size-select-radio-btn5">
<label for="size-select-radio-btn5" class="size-select-label">11</label>
</div>
<hr>
<div class="btn-and-price">
<button class="add-to-cart-btn theme-color">
<img src="images/shopping_cart.webp" alt="shopping cart" width="30px">
<p>ADD TO CART</p>
</button>
<p class="price">$189.99</p>
</div>
</div>
</div>
</main>
</body>
</html>