-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (117 loc) · 6.04 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
<!DOCTYPE html>
<html lang="pt-br">
<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">
<meta name="description" content="Aqui na Weartake você encontra roupas, calçados, bolsas, relógios e muito mais em moda feminina e masculina pelos melhores preços. Compre online hoje mesmo!">
<!-- Toastify Style -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<!-- Fonts Google -->
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Icons Google -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@48,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<!-- Stytes -->
<link rel="stylesheet" href="src/styles/global.css">
<link rel="stylesheet" href="src/styles/components/load.css">
<link rel="stylesheet" href="src/styles/components/fonts.css">
<link rel="stylesheet" href="src/styles/components/inputs.css">
<link rel="stylesheet" href="src/styles/components/buttons.css">
<link rel="stylesheet" href="src/styles/components/header.css">
<link rel="stylesheet" href="src/styles/components/menu.css">
<link rel="stylesheet" href="src/styles/components/footer.css">
<link rel="stylesheet" href="src/styles/components/card.css">
<link rel="stylesheet" href="src/styles/index.css">
<link rel="stylesheet" href="src/styles/components/cart.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Weartake - Maior loja de modas do Brasil</title>
</head>
<body>
<header class="header">
<div class="container">
<h2>
<a href="index.html"><img src="src/assets/logo.svg" alt=""></a>
</h2>
<div class="menu-cart-search">
<div class="search-desktop input-group__container">
<input type="text" name="search" class="input__search" placeholder="Pesquisar Produto">
<button class="btn__search" id="btnSearchDesktop"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<div class="cart" id="btnOpenCart">
<span class="cont__products text-3 font-weight-500">0</span>
<span class="material-symbols-sharp">shopping_cart</span>
</div>
<div class="menu__hamb">
</div>
<nav class="menu__container">
<ul class="menu">
<li class="btn__filter button-effect" id="all">Todos</li>
<li class="btn__filter button-effect" id="jewelery">Jóias</li>
<li class="btn__filter button-effect" id="mensClothing">Homens</li>
<li class="btn__filter button-effect" id="womensClothing">Mulheres</li>
<li class="btn__filter button-effect" id="electronics">Eletrônicos</li>
</ul>
<div class="search-mobile input-group__container">
<input type="text" name="search" class="input__search" placeholder="Pesquisar produto...">
<button class="btn__search" id="btnSearchMobile"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
</nav>
</div>
</div>
</header>
<main class="main__container container">
<section class="products__container">
<ul class="products__list">
</ul>
</section>
<section class="modal-cart__container modal__cart--hidden">
<div class="modal__cart">
<div class="cart__title-close">
<h3 class="title-3 font-weight-700">Carrinho de Compras</h3>
<span id="btnCloseCart" class="material-symbols-outlined">close</span>
</div>
<div>
<div class="cart__products modal">
<div class="cart__message ">
<span class="title-2 font-weight-700">Carrinho vazio</span>
<span class="text-2">adicione itens</span>
</div>
<ul class="cart__list">
</ul>
</div>
</div>
<div class="resume modal__cart--hidden">
<div class="quantity">
<span>Quantidade:</span>
<span id="spanQuantity">0</span>
</div>
<div class="total">
<span>Total:</span>
<span id="spanPrice">0.00</span>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="icons__container">
<a href="https://github.com/steinerstt" target="_blank" rel="external"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/steinerstt" target="_blank" rel="external"><i class="fa-brands fa-linkedin"></i></a>
</div>
<p class="text-3">© <em>Steiner</em></p>
</footer>
<div class="modal__load">
<div class="circle">
</div>
</div>
<!-- Toastify Script -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<!-- Fontawesome Script -->
<script src="https://kit.fontawesome.com/b76011de49.js" crossorigin="anonymous"></script>
<!-- Script-->
<script type="module" src="src/scripts/index.js"></script>
</body>
</html>