-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (185 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en-us">
<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">
<link rel="stylesheet" href="./styles/reset.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="icon" href="./assets/icons/sneakers.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap" rel="stylesheet">
<title>Fall Limited Edition Sneakers - Sneakers</title>
</head>
<body class="product-page" data-body>
<header class="product-page__header">
<nav class="header__left">
<img class="header__hamburger-menu" src="./assets/icons/icon-menu.svg" alt="Acesso ao menu">
<img class="header__logo" src="./assets/icons/logo.svg" alt="Logotipo da Sneakers">
<ul class="product-page__header--nav">
<li class="menu-item"><a href="#">Collections</a></li>
<li class="menu-item"><a href="#">Men</a></li>
<li class="menu-item"><a href="#">Women</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
<nav class="header__right">
<nav class="header__cart">
<nav class="header__cart--menu">
<button class="open-cart--button" id="cartbutton">
<img class="header__cart-img" id="cartbutton" src="./assets/icons/icon-cart.svg"
alt="Verificar conteúdos do carrinho de compras" title="Abrir carrinho">
<span class="header__cart-count" id="cartbutton">0</span>
</button>
<ul class="header__cart-items" id="cartmenu">
<div class="header__cart-empty">
<span>Your cart is empty</span>
<p>Looks like you have added anything to you cart yet.</p>
</div>
<li class="header__cart-product">
<nav class="cart-product__left">
<a href="./index.html" class="item__name">product</a>
</nav>
<nav class="cart-product__right">
<span class="item__price">price</span>
<span class="item__quantity">quantity</span>
<img class="header__cart-product--delete" id="delete"
src="./assets/icons/icon-delete.svg" alt="Remover item do carrinho"
title="Remover item do carrinho">
</nav>
</li>
<nav class="cart__overview">
<span>Total:</span>
<span class="cart__total--sum">0</span>
</nav>
</ul>
</nav>
</nav>
<nav>
<img class="header__avatar" src="./assets/img/image-avatar.png" alt="Avatar do usuário">
</nav>
</nav>
</header>
<main class="product-page__main">
<div class="product-page__main-gallery">
<div class="main-gallery__container" data-enter>
<img class="main-gallery__demo" src="./assets/img/image-product-1.jpg"
alt="Galeria do produto, um par de sapatos com sola branca sobre um fundo laranja.">
</div>
<div class="main-gallery__container" data-enter hidden>
<img class="main-gallery__demo" src="./assets/img/image-product-2.jpg"
alt="Galeria do produto, um par de sapatos com sola branca sobre um fundo laranja.">
</div>
<div class="main-gallery__container" data-enter hidden>
<img class="main-gallery__demo" src="./assets/img/image-product-3.jpg"
alt="Galeria do produto, um par de sapatos com sola branca sobre um fundo laranja.">
</div>
<div class="main-gallery__container" data-enter hidden>
<img class="main-gallery__demo" src="./assets/img/image-product-4.jpg"
alt="Galeria do produto, um par de sapatos com sola branca sobre um fundo laranja.">
</div>
<div class="main-gallery__row">
<div class="main-gallery__column" data-thumb>
<img src="./assets/img/image-product-1-thumbnail.jpg" alt="Ampliar primeiro item da galeria."
class="hover-shadow">
</div>
<div class="main-gallery__column" data-thumb>
<img src="./assets/img/image-product-2-thumbnail.jpg" alt="Ampliar segundo item da galeria."
class="hover-shadow">
</div>
<div class="main-gallery__column" data-thumb>
<img src="./assets/img/image-product-3-thumbnail.jpg" alt="Ampliar terceiro item da galeria."
class="hover-shadow">
</div>
<div class="main-gallery__column" data-thumb>
<img src="./assets/img/image-product-4-thumbnail.jpg" alt="Ampliar quarto item da galeria."
class="hover-shadow">
</div>
</div>
<div id="modal" class="product-page__main-modal" data-modal>
<button class="close cursor" data-exit>
<img src="./assets/icons/icon-close.svg" alt="Fechar a galeria">
</button>
<div class="main-modal__content">
<div class="main-modal__content-slide slide-alt" data-lightbox>
<img src="./assets/img/image-product-1.jpg"
alt="Primeiro item da galeria ampliado, um par de sapatos com sola branca sobre um fundo laranja.">
</div>
<div class="main-modal__content-slide" data-lightbox>
<img src="./assets/img/image-product-2.jpg"
alt="Segundo item da galeria ampliado, um par de sapatos brancos em cima de uma pedra branca ao lado um pequeno galho sobre um fundo laranja.">
</div>
<div class="main-modal__content-slide" data-lightbox>
<img src="./assets/img/image-product-3.jpg"
alt="Terceiro item da galeria ampliado, um par de sapatos brancos em cima de uma pedra branca sobre um fundo laranja.">
</div>
<div class="main-modal__content-slide" data-lightbox>
<img src="./assets/img/image-product-4.jpg"
alt="Quarto item da galeria ampliado, um par de sapatos em cima de uma pilha de pedras.">
</div>
</div>
<button class="product-page__main-gallery--prev gallery-buttons">
<img src="./assets/icons/icon-previous.svg" alt="Voltar para o item anterior da galeria">
</button>
<button class="product-page__main-gallery--next gallery-buttons">
<img src="./assets/icons/icon-next.svg" alt="Avançar para o próximo item da galeria">
</button>
<div class="main-modal-thumb__container">
<div class="main-gallery__column" data-thumbmodal>
<img src="./assets/img/image-product-1-thumbnail.jpg" alt="Ampliar primeiro item da galeria"
class="demo">
</div>
<div class="main-gallery__column" data-thumbmodal>
<img src="./assets/img/image-product-2-thumbnail.jpg" alt="Ampliar segundo item da galeria"
class="demo">
</div>
<div class="main-gallery__column" data-thumbmodal>
<img src="./assets/img/image-product-3-thumbnail.jpg" alt="Ampliar terceiro item da galeria"
class="demo">
</div>
<div class="main-gallery__column" data-thumbmodal>
<img src="./assets/img/image-product-4-thumbnail.jpg" alt="Ampliar quarto item da galeria"
class="demo">
</div>
</div>
</div>
</div>
</div>
<div class="product-page__main__left-container">
<section class="product-page__main-description">
<h5>Sneaker Company</h5>
<h1 class="product-name">Fall Limited Edition Sneakers</h1>
<p>
These low-profile sneakers are your perfect casual wear companion. Featuring a durable rubber
outer
sole, they'll withstand everything the weather can offer.
</p>
<div class="main-description__price">
<div class="main-description__price-discount">
<h2 class="product-price">125.00</h2>
<h5>50%</h5>
</div>
<div class="main-description__price-old">
<h5>$250.00</h5>
</div>
</div>
</section>
<div class="product-page__cart">
<div class="product-page__cart-counter">
<img class="cart-counter--minus" src="./assets/icons/icon-minus.svg"
alt="Selecionar uma unidade a menos deste produto" title="Remover uma unidade">
<p class="cart-counter__number">0</p>
<img class="cart-counter--plus" src="./assets/icons/icon-plus.svg"
alt="Selecionar uma unidade a mais deste produto" title="Adicionar uma unidade">
</div>
<button class="button"><img src="assets/icons/icon-cart.svg" alt>Add to cart</button>
</div>
</div>
<script src="./js/cart.js"></script>
<script src="./js/lightbox.js"></script>
</main>
<footer></footer>
</body>
</html>