forked from Adrien140401/ProjectWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
produits.html
204 lines (179 loc) · 13.8 KB
/
produits.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Better Humanity</title>
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style3.css">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" </head>
<body>
<header>
<div class="betterhumanity"><a href="#">BETTER HUMANITY</a>
<svg width="30" height="36" viewBox="0 0 30 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 17.7564C0 17.3628 0.131696 16.9854 0.366117 16.7071C0.600537 16.4288 0.918479 16.2724 1.25 16.2724H8.75C9.08152 16.2724 9.39946 16.4288 9.63388 16.7071C9.8683 16.9854 10 17.3628 10 17.7564C10 18.15 9.8683 18.5275 9.63388 18.8058C9.39946 19.0841 9.08152 19.2404 8.75 19.2404H1.25C0.918479 19.2404 0.600537 19.0841 0.366117 18.8058C0.131696 18.5275 0 18.15 0 17.7564ZM26.1075 16.4312C26.7306 15.5069 27.1579 14.4187 27.3536 13.2578C27.5494 12.097 27.5078 10.8974 27.2325 9.75952C26.9571 8.62167 26.456 7.57878 25.7711 6.71831C25.0862 5.85783 24.2375 5.20484 23.2962 4.81409C22.3549 4.42335 21.3484 4.30624 20.3611 4.47258C19.3738 4.63892 18.4345 5.08386 17.6219 5.7701C16.8093 6.45634 16.1472 7.36387 15.691 8.4166C15.2348 9.46932 14.9978 10.6366 15 11.8204C15 12.214 15.1317 12.5915 15.3661 12.8698C15.6005 13.1481 15.9185 13.3044 16.25 13.3044C16.5815 13.3044 16.8995 13.1481 17.1339 12.8698C17.3683 12.5915 17.5 12.214 17.5 11.8204C17.5 10.9399 17.7199 10.0792 18.132 9.34703C18.544 8.6149 19.1297 8.04428 19.8149 7.70731C20.5002 7.37035 21.2542 7.28219 21.9816 7.45397C22.709 7.62575 23.3772 8.04976 23.9017 8.67239C24.4261 9.29501 24.7833 10.0883 24.9279 10.9519C25.0726 11.8155 24.9984 12.7106 24.7145 13.5241C24.4307 14.3376 23.9501 15.0329 23.3334 15.5221C22.7167 16.0113 21.9917 16.2724 21.25 16.2724H13.75C13.4185 16.2724 13.1005 16.4288 12.8661 16.7071C12.6317 16.9854 12.5 17.3628 12.5 17.7564C12.5 18.15 12.6317 18.5275 12.8661 18.8058C13.1005 19.0841 13.4185 19.2404 13.75 19.2404H25C25.663 19.2404 26.2989 19.5531 26.7678 20.1097C27.2366 20.6663 27.5 21.4213 27.5 22.2084C27.4888 25.6765 23.3988 26.1381 22.4288 23.1983C22.3184 22.8271 22.0883 22.5232 21.7892 22.3535C21.49 22.1837 21.1464 22.162 20.8337 22.293C20.5211 22.4241 20.2652 22.6972 20.1222 23.0523C19.9792 23.4074 19.9609 23.8155 20.0712 24.1866C22.0187 30.2443 29.94 29.0037 30 22.2084C29.9978 20.8646 29.6116 19.5613 28.9045 18.5119C28.1975 17.4624 27.2114 16.7289 26.1075 16.4312ZM13.75 23.6924H1.25C0.918479 23.6924 0.600537 23.8488 0.366117 24.1271C0.131696 24.4054 0 24.7829 0 25.1764C0 25.57 0.131696 25.9475 0.366117 26.2258C0.600537 26.5041 0.918479 26.6604 1.25 26.6604H13.75C14.413 26.6604 15.0489 26.9731 15.5178 27.5297C15.9866 28.0863 16.25 28.8413 16.25 29.6284C16.2388 33.0965 12.1488 33.5581 11.1788 30.6183C11.1241 30.4345 11.0395 30.2653 10.9297 30.1203C10.82 29.9754 10.6873 29.8575 10.5392 29.7735C10.3911 29.6894 10.2305 29.6408 10.0665 29.6304C9.90259 29.6201 9.73855 29.6481 9.58375 29.713C9.42895 29.7779 9.28644 29.8784 9.16435 30.0087C9.04225 30.1389 8.94297 30.2965 8.87216 30.4723C8.80136 30.6482 8.76042 30.8388 8.75169 31.0335C8.74295 31.2281 8.76659 31.4228 8.82125 31.6066C10.7688 37.6643 18.69 36.4237 18.75 29.6284C18.75 28.0541 18.2232 26.5443 17.2855 25.431C16.3479 24.3178 15.0761 23.6924 13.75 23.6924ZM1.25 11.8204H8.75C10.0761 11.8204 11.3479 11.195 12.2855 10.0818C13.2232 8.9686 13.75 7.45875 13.75 5.88443C13.69 -0.913779 5.76625 -2.14995 3.82125 3.90625C3.71085 4.2774 3.72917 4.68541 3.87216 5.04053C4.01516 5.39564 4.27113 5.66878 4.58375 5.79984C4.89637 5.9309 5.24005 5.90916 5.53917 5.73939C5.83829 5.56963 6.06835 5.26575 6.17875 4.8946C7.15 1.95331 11.2388 2.41632 11.25 5.88443C11.25 6.67159 10.9866 7.42651 10.5178 7.98312C10.0489 8.53973 9.41304 8.85243 8.75 8.85243H1.25C0.918479 8.85243 0.600537 9.00878 0.366117 9.28708C0.131696 9.56538 0 9.94285 0 10.3364C0 10.73 0.131696 11.1075 0.366117 11.3858C0.600537 11.6641 0.918479 11.8204 1.25 11.8204Z"
fill="white" />
</svg>
</div>
<nav>
<ul class="nav-links">
<li><a href="index.html">Acceuil</a></li>
<li><a href="produits.html">Produits</a></li>
<li><a href="login.html">LOGIN</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="cart.html">SHOPPING CART</a></li>
</ul>
</nav>
<svg class="shoppingCart" width="36" height="36" viewBox="0 0 36 36" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.4651 36C12.0835 36 13.3954 34.6881 13.3954 33.0698C13.3954 31.4514 12.0835 30.1395 10.4651 30.1395C8.84682 30.1395 7.53491 31.4514 7.53491 33.0698C7.53491 34.6881 8.84682 36 10.4651 36Z"
fill="white" />
<path
d="M25.535 36C27.1533 36 28.4652 34.6881 28.4652 33.0698C28.4652 31.4514 27.1533 30.1395 25.535 30.1395C23.9166 30.1395 22.6047 31.4514 22.6047 33.0698C22.6047 34.6881 23.9166 36 25.535 36Z"
fill="white" />
<path
d="M29.8532 19.59C29.634 20.3761 29.1587 21.0695 28.5002 21.5638C27.8418 22.058 27.0368 22.3257 26.2089 22.3256H10.9089C10.7853 22.3246 10.6665 22.2783 10.5757 22.1957C10.4849 22.1132 10.4285 22.0003 10.4176 21.8791L9.12375 11.907H15.8713C16.4727 11.907 17.0494 11.6718 17.4746 11.2531C17.8998 10.8344 18.1387 10.2665 18.1387 9.67442C18.1387 9.08231 17.8998 8.51445 17.4746 8.09576C17.0494 7.67708 16.4727 7.44186 15.8713 7.44186H8.54483L8.1488 4.37433C8.00511 3.16938 7.41717 2.0583 6.49656 1.25196C5.57595 0.44561 4.38674 0.000108654 3.15462 0L2.26733 0C1.666 0 1.08929 0.235215 0.664087 0.653901C0.238879 1.07259 0 1.64045 0 2.23256C0 2.82467 0.238879 3.39253 0.664087 3.81122C1.08929 4.2299 1.666 4.46512 2.26733 4.46512H3.15462C3.27821 4.46612 3.397 4.51241 3.48782 4.59496C3.57864 4.67751 3.63498 4.7904 3.64587 4.91163L5.91321 22.4149C6.05659 23.6204 6.6446 24.732 7.56556 25.5387C8.48652 26.3454 9.67629 26.7909 10.9089 26.7907H26.2089C28.0289 26.7896 29.7983 26.2005 31.2455 25.1138C32.6926 24.027 33.7377 22.5027 34.2201 20.7747L34.2443 20.6854C34.3368 20.3545 34.3506 20.0071 34.2845 19.6701C34.2185 19.3331 34.0745 19.0157 33.8636 18.7424C33.6528 18.4691 33.3808 18.2474 33.0688 18.0945C32.7568 17.9415 32.4132 17.8614 32.0646 17.8605C31.5686 17.8604 31.0862 18.0204 30.6914 18.3162C30.2966 18.6119 30.0112 19.0269 29.8789 19.4977L29.8532 19.59Z"
fill="white" />
<path
d="M33.7675 4.46512H31.535V2.23256C31.535 1.64045 31.2998 1.07259 30.8811 0.653901C30.4624 0.235215 29.8945 0 29.3024 0C28.7103 0 28.1424 0.235215 27.7238 0.653901C27.3051 1.07259 27.0699 1.64045 27.0699 2.23256V4.46512H24.8373C24.2452 4.46512 23.6773 4.70033 23.2586 5.11902C22.84 5.5377 22.6047 6.10556 22.6047 6.69767C22.6047 7.28979 22.84 7.85765 23.2586 8.27633C23.6773 8.69502 24.2452 8.93023 24.8373 8.93023H27.0699V11.1628C27.0699 11.7549 27.3051 12.3228 27.7238 12.7414C28.1424 13.1601 28.7103 13.3953 29.3024 13.3953C29.8945 13.3953 30.4624 13.1601 30.8811 12.7414C31.2998 12.3228 31.535 11.7549 31.535 11.1628V8.93023H33.7675C34.3596 8.93023 34.9275 8.69502 35.3462 8.27633C35.7649 7.85765 36.0001 7.28979 36.0001 6.69767C36.0001 6.10556 35.7649 5.5377 35.3462 5.11902C34.9275 4.70033 34.3596 4.46512 33.7675 4.46512Z"
fill="white" />
</svg>
<a href="">PANIER</a>
<a class="contact" href=""><button>Contact</button></a>
</header>
<div class="titleContainer">
<h1>Nos Sneakers</h1>
</div>
<input id="searchbar" onkeyup="search_animal()" type="text" name="search" placeholder="Search products..">
<div class="containerShoes">
<ol id='list'>
<div class="shoe">
<li class="sneakers">TN</li><img class="nd" src="folder.img/shoe2-2/img1.png"><a class="contactShoe"
href="#">
<button class="add-to-cart1" href="#"> Acheter</button>
</a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Rouge</li><img class="nd" src="folder.img/shoe1-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Rouge</li><img class="nd" src="folder.img/shoe1-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Noir</li><img class="nd" src="folder.img/shoe1-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Noir</li><img class="nd" src="folder.img/shoe1-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max 95 orange</li><img class="nd" src="folder.img/shoe2-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max Zoom noir</li><img class="nd" src="folder.img/shoe3-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max Zoom blanc</li><img class="nd" src="folder.img/shoe3-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">TN</li><img class="nd" src="folder.img/shoe2-2/img1.png"><a class="contactShoe"
href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Rouge</li><img class="nd" src="folder.img/shoe1-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Rouge</li><img class="nd" src="folder.img/shoe1-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Noir</li><img class="nd" src="folder.img/shoe1-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Jordan Noir</li><img class="nd" src="folder.img/shoe1-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max 95 orange</li><img class="nd" src="folder.img/shoe2-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max Zoom noir</li><img class="nd" src="folder.img/shoe3-1/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
<div class="shoe">
<li class="sneakers">Air Max Zoom blanc</li><img class="nd" src="folder.img/shoe3-2/img1.png"><a
class="contactShoe" href=""><button>Acheter</button></a>
<h3>29$</h3>
</div>
</ol>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>compagnie</h4>
<ul>
<li><a href="#">à propos</a></li>
<li><a href="#">nos services</a></li>
<li><a href="#">politique privée</a></li>
<li><a href="#">programmes associés</a></li>
</ul>
</div>
<div class="footer-col">
<h4>aide</h4>
<ul>
<li><a href="#">FAQ</a></li>
<li><a href="#">shipping</a></li>
<li><a href="#">retours</a></li>
<li><a href="#">status</a></li>
<li><a href="#">options de paiement</a></li>
</ul>
</div>
<div class="footer-col">
<h4>boutique en ligne</h4>
<ul>
<li><a href="#">nos produits</a></li>
</ul>
</div>
<div class="footer-col">
<h4>réseaux</h4>
<div class="social-links">
<a href="https://fr-fr.facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/login"><i class="fab fa-twitter"></i></a>
<a href="https://www.instagram.com/?hl=fr"><i class="fab fa-instagram"></i></a>
<a href="https://fr.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="/script/app.js"></script>
</body>
</html>