-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
266 lines (263 loc) · 11.9 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!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, initial-scale=1.0">
<title>Nike. Just Do It. Nike.com</title>
<link rel="shortcut icon" href="https://www.nike.com/android-icon-192x192.png">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div class="header-container animate__animated">
<div class="header-logo">
<svg width="60px" heigth="60px" viewBox="0 0 69 32">
<path d="M 68.56 4 L 18.4 25.36 Q 12.16 28 7.92 28 q -4.8 0 -6.96 -3.36 q -1.36 -2.16 -0.8 -5.48 t 2.96 -7.08 q
2 -3.04 6.56 -8 q -1.6 2.56 -2.24 5.28 q -1.2 5.12 2.16 7.52 Q 11.2 18 14 18 q 2.24 0 5.04 -0.72 Z"></path>
</svg>
</div>
<div class="wrap-header-links">
<p class="header-links">New & Featured</p>
<p class="header-links">Men</p>
<p class="header-links">Women</p>
<p class="header-links">Kids</p>
<p class="header-links">Sale</p>
<p class="header-links">Back to School</p>
</div>
<div class="header-search-bar">
<img id="searchIcon" class="search-bar-icons" src="./images/icons/search.svg" alt="search">
<input type="search" placeholder="Search" id="searchBar">
<img class="search-bar-icons" src="./images/icons/heart.svg" alt="heart">
<img class="search-bar-icons" src="./images/icons/bag.svg" alt="bag">
<img class="search-bar-icons" src="./images/icons/list.svg" alt="list">
</div>
</div>
<div class="banner-wrap">
<div class="banner-header-container">
<div class="carousel" data-flickity='{ "autoPlay": 5000 }'>
<div class="carousel-cell"><span>NEW MARKDOWNS: UP TO 40% OFF</span>
<a href="#">Shop All Sale Items</a>
</div>
<div class="carousel-cell"><span>FREE SHIPPING + RETURNS, FREE MEMBERSHIP</span>
<a href="#">Join Now</a>
</div>
</div>
</div>
</div>
<div class="sneakers-container">
<div class="sneakers-images-container">
<img class="sneakers-images" src="./images/sneakers/left-right-1.webp" alt="left-right-1">
<img class="sneakers-images" src="./images/sneakers/bottom-2.webp" alt="bottom-2">
<img class="sneakers-images" src="./images/sneakers/right-left-3.webp" alt="right-left-3">
<img class="sneakers-images" src="./images/sneakers/bottom-top-4.webp" alt="bottom-top-4">
<img class="sneakers-images" src="./images/sneakers/preview-5.webp" alt="preview-5">
<img class="sneakers-images" src="./images/sneakers/back-6.webp" alt="back-6">
<img class="sneakers-images" src="./images/sneakers/scale-front-7.webp" alt="scale-front-7">
<img class="sneakers-images" src="./images/sneakers/scale-end-8.webp" alt="scale-end-8">
<img class="sneakers-images" src="./images/sneakers/bag-9.webp" alt="bag">
<img class="sneakers-images" src="./images/sneakers/end-10.webp" alt="end-10">
</div>
<div class="sneakers-text">
<h1>Nike Air Zoom Alphafly NEXT% 2</h1>
<p>Men's Road Racing Shoes</p>
<span id="priceSnk">$275</span>
<div class="label-sizes">
<p>Select Size</p>
<p>Size Guide</p>
</div>
<div class="sneakers-sizes">
<span class="sizes-items">6</span>
<span class="sizes-items">6.5</span>
<span class="sizes-items">7</span>
<span class="sizes-items">7.5</span>
<span class="sizes-items">8</span>
<span class="sizes-items">8.5</span>
<span class="sizes-items">9</span>
<span class="sizes-items">9.5</span>
<span class="sizes-items">10</span>
<span class="sizes-items">10.5</span>
<span class="sizes-items">11</span>
<span class="sizes-items">11.5</span>
<span class="sizes-items">12</span>
<span class="sizes-items">12.5</span>
<span class="sizes-items">13</span>
<span class="sizes-items">14</span>
<span class="sizes-items">15</span>
</div>
<div class="buy-buttons">
<div class="buy-text">
<p>4 interest-free payments of $68.75 with<br><span id="klarna-logo">Klarna.</span> <span
id="klarna-learn-more">Learn more</span></p>
</div>
<button class="btn-add">Add to Bag</button>
<button class="btn-fav">Favorite<img class="btn-fav-icon" src="./images/icons/heart-lighter.svg"
alt="heart"></button>
</div>
<div class="shipping">
<p>Shipping*</p>
<p>To get accurate shipping information <span class="shipping-links">Edit Location</span></p>
<p>Free Pickup</p>
<p><span class="shipping-links">Find a store</span></p>
<p>*Faster Shipping options may be available</p>
</div>
<div class="description">
<p class="description-text">Once you take a few strides in the Nike Air Zoom Alphafly NEXT% 2, you'll never look
at your favorite pair of
old racing shoes the same way again. These rocket ships are made to help shave precious time off your personal
records without surrendering the foundation you need to go the full distance. A thick, lightweight support
system marries the 2 worlds of comfort and speed in holy running matrimony. Enjoy the greatest energy return
of all our racing shoes while you chase your personal bests and leave the competition in the dust.</p>
<div class="description-snk-id">
<ul>
<li>Shown: Mint Foam/Volt/Coconut Milk/Cave Purple</li>
<li>Style: DV9422-300</li>
</ul>
</div>
<p class="description-snk-details">View Product Details</p>
<div class="description-footer">
<div class="description-footer__first">
<p>Free Shipping & Returns</p>
<img src="./images/icons/caret-down-fill.svg" alt="arrow-down">
</div>
<div class="footer-first-visible-block hider">
<p>Free standard shipping and free 60-day returns for Nike Members. <span>Learn more.</span> <span>Return
policy exclusions
apply.</span></p>
<p>Pick-up available at select Nike Stores.</p>
</div>
<div class="description-footer__second">
<p>Reviews (0)</p>
<div>
<img src="./images/icons/star-fill.svg" alt="star-fill">
<img src="./images/icons/star-fill.svg" alt="star-fill">
<img src="./images/icons/star-fill.svg" alt="star-fill">
<img src="./images/icons/star-fill.svg" alt="star-fill">
<img src="./images/icons/star-fill.svg" alt="star-fill">
<img style="padding-left: 10px;" src="./images/icons/caret-down-fill.svg" alt="arrow-down">
</div>
</div>
<div class="description-footer__chat">
<img src="./images/icons/chat-left-dots.svg" alt="chat-left-dots">
<p>Need help?</p>
<p>Chat now</p>
</div>
</div>
</div>
</div>
</div>
<div class="product-section">
<h3>Your Race-Day Time Machine</h3>
<p>Imagine a shoe so fast it could save you time on both sides of the finish line. The Nike Air Zoom Alphafly
NEXT% 2 is designed to help you clock your fastest long-distance race times, and with incredible impact
protection, bounce right back. This update to our pinnacle marathon shoe reflects feedback we heard from many
passionate runners, including Olympian Eliud Kipchoge.</p>
<img src="./images/runner/kipchoge-2.jpg" alt="kipchoge">
<h3>Enliven Your Stride</h3>
<p>Two forefoot Zoom Air pods have been optimized to absorb even more impact from the ground thanks to a supporting
layer of our lightest and most responsive foam - Nike ZoomX. Combined with a resilient thin-web outsole, this
improvement ensures better heel-to-toe transitions and durable traction where you need it. A slightly wider heel
ensures stability when rounding corners.</p>
<img src="./images/runner/kipchoge-3.jpg" alt="kipchoge">
<h4>“Everyone wants to recover fast and to improve their time, so I think any serious person with a goal should try
the Alphafly 2.”</h4>
<p>- Eliud Kipchoge<br> Olympian, world record-holder, marathon</p>
<img src="./images/runner/kipchoge-4.webp" alt="kipchoge">
</div>
<div class="extra-sneakers-container">
<div class="extra-sneakers-text">
<p>You Might Also Like</p>
<img id="repeatIcon" src="./images/icons/arrow-repeat.svg" alt="arrow-repeat">
</div>
<div class="extra-sneakers">
<div class="extra-block">
<img id="changeImg-1" src="./images/extra_sneakers/sneaker-1.webp" alt="sneaker-1">
<div class="extra-block-text">
<h4>Nike Air Zoom Alphafly NEXT% Flyknit</h4>
<h4>Men's Road Racing Shoes</h4>
<h4>$275.00</h4>
</div>
</div>
<div class="extra-block">
<img id="changeImg-2" src="./images/extra_sneakers/sneaker-2.webp" alt="sneaker-2">
<div class="extra-block-text">
<h4>Nike Air Zoom Alphafly NEXT% Flyknit</h4>
<h4>Men's Road Racing Shoes</h4>
<h4>$174.97</h4>
<h4>$275.00</h4>
</div>
</div>
<div class="extra-block">
<img id="changeImg-3" src="./images/extra_sneakers/sneaker-3.webp" alt="sneaker-3">
<div class="extra-block-text">
<h4>Nike Air Zoom Alphafly NEXT% Flyknit</h4>
<h4>Men's Road Racing Shoes</h4>
<h4>$275.00</h4>
</div>
</div>
<div class="extra-block">
<img id="changeImg-4" src="./images/extra_sneakers/sneaker-4.webp" alt="sneaker-4">
<div class="extra-block-text">
<h4>Nike Zoom Fly 5</h4>
<h4>Men's Road Racing Shoes</h4>
<h4>$160.00</h4>
</div>
</div>
</div>
</div>
<div class="footer-container">
<div class="footer-links-container">
<div class="footer-links">
<p>GIFT CARDS</p>
<p>PROMOTIONS</p>
<p>FIND A STORE</p>
<p>SIGN UP FOR EMAIL</p>
<p>BACOME A MEMBER</p>
<p>NIKE JOURNAL</p>
<p>SEND US FEEDBACK</p>
</div>
<div class="footer-links">
<p>GET HELP</p>
<p class="links-color">Order Status</p>
<p class="links-color">Shipping and Delivery</p>
<p class="links-color">Returns</p>
<p class="links-color">Payment Options</p>
<p class="links-color">Gift Card Balance</p>
<p class="links-color">Contact Us</p>
</div>
<div class="footer-links">
<p>ABOUT NIKE</p>
<p class="links-color">News</p>
<p class="links-color">Careers</p>
<p class="links-color">Investors</p>
<p class="links-color">Purpose</p>
<p class="links-color">Sustainability</p>
</div>
<div class="footer-social">
<img src="./images/icons/twitter.svg" alt="twitter">
<img src="./images/icons/facebook.svg" alt="facebook">
<img src="./images/icons/youtube.svg" alt="youtube">
<img src="./images/icons/instagram.svg" alt="instagram">
</div>
</div>
<div class="footer-adresses">
<div class="footer-adresses-geo">
<img src="./images/icons/geo-alt-fill.svg" alt="geo-alt-fill">
<p>United States</p>
<p>© 2022 Nike, Inc. All Rights Reserved</p>
</div>
<div class="footer-adresses__links">
<p>Guides</p>
<p>Terms of Sale</p>
<p>Terms of Use</p>
<p>Nike Privacy Policy</p>
<p>CA Supply Chains Act</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script src="./script.js"></script>
</body>
</html>