-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
156 lines (151 loc) · 6.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/svg+xml" href="./images/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Js</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<div class="header-section container">
<img class="logo" src="./images/logoShop.png" alt="">
<div>
<img onclick="showCart(this)" class="cart" src="./images/cart.png" alt="">
<p class="count-product">0</p>
</div>
<div class="cart-products" id="products-id">
<p class="close-btn" onclick="closeBtn()">X</p>
<h3>Mi carrito</h3>
<div class="card-items">
<!-- <div class="item">
<img src="./images/products/keyboard-1.jpg" alt="">
<div class="item-content">
<h5>name of product name of product name of product</h5>
<h5 class="cart-price">45.50$</h5>
<h6>Amount: 3</h6>
</div>
<span>X</span>
</div>
<div class="item">
<img src="./images/products/keyboard-1.jpg" alt="">
<div class="item-content">
<h5>name of product name of product name of product</h5>
<h5 class="cart-price">45.50$</h5>
<h6>Amount: 3</h6>
</div>
<span class="delete-product" data-id="">X</span>
</div> -->
</div>
<h2>Total: $<strong class="price-total">0</strong></h2>
</div>
</div>
</header>
<section class="container">
<div class="products">
<div class="carts">
<div>
<img src="./images/products/keyboard-1.jpg" alt="">
<p><span>20</span>$</p>
</div>
<p class="title">Tempest Cataclysm Combo 3 En 1 Gaming Teclado</p>
<a href="" data-id="1" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-2.jpg" alt="">
<p><span>35</span>$</p>
</div>
<p class="title"> Newskill Suiko Ivory Teclado Mecánico Gaming Full RGB</p>
<a href="" class="btn-add-cart" data-id="2">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-3.jpg" alt="">
<p><span>15.50</span>$</p>
</div>
<p class="title"> Aukey KM-G16 Teclado Mecánico Gaming Retroiluminado</p>
<a href="" data-id="3" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-4.jpg" alt="">
<p><span>20.20</span>$</p>
</div>
<p class="title"> Razer Huntsman Elite Teclado Mecánico Gaming RGB</p>
<a href="" data-id="4" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-5.jpg" alt="">
<p><span>19</span>$</p>
</div>
<p class="title"> Trust GXT 856 Torac Teclado Metálico Gaming RGB</p>
<a href="" data-id="5" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-1.jpg" alt="">
<p><span>45</span>$</p>
</div>
<p class="title"> MSI Vigor GK30 Teclado Gaming RGB</p>
<a href="" data-id="6" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-2.jpg" alt="">
<p><span>23.99</span>$</p>
</div>
<p class="title"> Genesis Thor 300 RGB Teclado Mecánico Gaming RGB Switch Rojo</p>
<a href="" data-id="7" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-3.jpg" alt="">
<p><span>50</span>$</p>
</div>
<p class="title"> Mars Gaming MKXTKL Teclado Mecánico Gaming RGB</p>
<a href="" data-id="8" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-4.jpg" alt="">
<p><span>16</span>$</p>
</div>
<p class="title"> Trust GXT 881 Odyss Teclado Gaming Semi-Mecánico RGB</p>
<a href="" data-id="9" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-5.jpg" alt="">
<p><span>17.50</span>$</p>
</div>
<p class="title"> Krom Krusher Teclado Gaming Híbrido RGB + Ratón</p>
<a href="" data-id="10" class="btn-add-cart">add to cart</a>
</div>
<div class="carts">
<div>
<img src="./images/products/keyboard-1.jpg" alt="">
<p><span>45</span>$</p>
</div>
<p class="title"> Corsair K55 RGB PRO XT Teclado Gaming Retroiluminado Negro</p>
<a href="" data-id="11" class="btn-add-cart">add to cart</a>
</div>
</div>
</section>
<footer>
<p class="author">🪐 by <a href="https://github.com/garu2" target="_blank">GaryAT</a></p>
</footer>
<script>
function showCart(x){
document.getElementById("products-id").style.display = "block";
}
function closeBtn(){
document.getElementById("products-id").style.display = "none";
}
</script>
<script src="./custom.js" ></script>
</body>
</html>