-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (225 loc) · 11.7 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
<!DOCTYPE html>
<html lang="fr">
<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="./style/home.css">
<link rel="stylesheet" href="./style/base.css">
<link rel="icon" href="./images/counter-strike-global-offensive-cs-go-logo.png">
<title>CS NOW</title>
</head>
<body>
<!-- Haut de la page (marquee + navbar + logos + search + hamburger menu) -->
<div class="marquee-container" id="promotion">
<!--Cette marquee permet de faire defiler une fausse promotion (programmee en css dans base.css)-->
<p class="marquee">Black Friday : profitez d'offres jusqu'à -70 % (sauf pour Antonin, Kai Tano et Alexandre Cuvelier) avec le code : "NSI70"</p>
</div>
<header class="header"> <!--Header de la page (regroupe le haut de la page en general)-->
<div class="logo">
<a href="index.html"><img src="./images/counter-strike-global-offensive-cs-go-logo.png" alt="main-logo" class="nav-logo"></a>
</div>
<div class="search"> <!-- contient la searchbar et la loupe dans un boutton -->
<input type="search" name="search-bar" placeholder="Rechercher un skin" id="search" onchange="searchbar()">
<div class="loupe">
<button><img src="./images/icons/loupe.png" alt="loupe"></button>
<div class="tooltip-loupe"><b>Rechercher</b></div> <!--Tooltip pour quand on hover le boutton il y ait une description-->
</div>
</div>
<div class="navbar"> <!-- contient les bouttons de la navbar -->
<div class="color-button"> <!-- contient le boutton pour changer la couleur du site -->
<img src="./images/icons/mode-sombre.png" alt="mode-sombre">
<div class="tooltip-mode-sombre"><b>Mode sombre</b></div> <!--Tooltip pour quand on hover le boutton il y ait une description-->
</div>
<div class="panier">
<a href="vide.html" id="cart"><img src="./images/icons/shopping-cart.png" alt="cart"></a> <!-- lien vers la page panier -->
<div class="tooltip-panier"><b>Panier</b></div>
</div>
<div class="hamburger"> <!-- contient le boutton pour ouvrir le menu hamburger -->
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</header>
<!-- Menu Hamburger, ce menu contient de multiples "cartes" qui menent vers d'autres pages du site-->
<div class="menu">
<h1>Fusils</h1> <!-- contient les cartes des fusils -->
<div class="fusils armes">
<div class="m4a4 card"> <!-- contient une carte avec une image et un titre -->
<a href="vide.html"> <!-- lien vers la page du fusil -->
<h3>M4A4</h3> <!-- titre de la carte -->
<img src="./images/base-weapons/m4a4.png" alt="m4a4"> <!-- image de la carte -->
</a>
</div>
<div class="m4a1-s card">
<a href="vide.html">
<h3>M4A1-S</h3>
<img src="./images/base-weapons/m4a1-s.png" alt="m4a1-s">
</a>
</div>
<div class="ak-47 card">
<a href="vide.html">
<h3>AK-47</h3>
<img src="./images/base-weapons/ak-47.png" alt="ak-47">
</a>
</div>
<div class="AWP card">
<a href="vide.html">
<h3>AWP</h3>
<img src="./images/base-weapons/AWP.png" alt="awp">
</a>
</div>
</div>
<h1>Pistolets</h1>
<div class="pistolets armes">
<div class="usp-s card">
<a href="vide.html">
<h3>USP-S</h3>
<img src="./images/base-weapons/usp-s.png" alt="usp-s">
</a>
</div>
<div class="glock-18 card">
<a href="vide.html">
<h3>Glock-18</h3>
<img src="./images/base-weapons/glock-18.png" alt="glock-18">
</a>
</div>
<div class="p250 card">
<a href="vide.html">
<h3>P250</h3>
<img src="./images/base-weapons/p250.png" alt="p250">
</a>
</div>
<div class="desert-eagle card">
<a href="vide.html">
<h3>Desert Eagle</h3>
<img src="./images/base-weapons/desert-eagle.png" alt="desert-eagle">
</a>
</div>
</div>
<h1>Couteaux</h1>
<div class="pistolets armes">
<div class="karambit card">
<a href="vide.html">
<h3>★ Karambit</h3>
<img src="./images/base-weapons/karambit.png" alt="karambit">
</a>
</div>
<div class="butterfly card">
<a href="vide.html">
<h3>★ Butterfly</h3>
<img src="./images/base-weapons/butterfly.png" alt="butterfly">
</a>
</div>
<div class="bayonnette-m9 card">
<a href="vide.html">
<h3>★ Bayonnette M9</h3>
<img src="./images/base-weapons/bayonnette-m9.png" alt="bayonnette-m9">
</a>
</div>
<div class="shadow-daggers card">
<a href="vide.html">
<h3>★ Shadow Daggers</h3>
<img src="./images/base-weapons/shadow-daggers.png" alt="shadow-daggers">
</a>
</div>
</div>
</div>
<!-- Contenu de la page (disparait si le hamburger menu est actif) -->
<div class="container">
<div class="scroll-up"> <!-- Boutton pour remonter en haut de la page -->
<a href="index.html#promotion"><img src="./images/icons/arrow-up.png" alt="scroll-up"></a>
</div>
<div class="banner"> <!--Banniere de la homepage-->
<a href="index.html#meilleures-ventes">Découvrez nos offres</a> <!--relie vers meilleures ventes, contient des cartes-->
<img src="./images/banniere.png" alt="banniere">
</div>
<div class="slider">
<div class="img-slider"> <!--Carrousel d'image-->
<img src="./images/collection_lore.png" alt="lore" class="active">
<img src="./images/collection_asiimov.png" alt="asiimov">
<img src="./images/collection_neonoir.png" alt="neo-noir">
<img src="./images/collection_gamma.png" alt="gamma-doppler">
<img src="./images/collection_fade.png" alt="fade">
</div>
<div class="slider-button"> <!-- Carrousel d'images -->
<div class="button-left"><img src="./images/icons/arrow-left.png" alt="fleche-gauche"></div> <!-- bouton pour aller à l'image précédente -->
<div class="button-right"><img src="./images/icons/arrow-right.png" alt="fleche-droite"></div> <!-- bouton pour aller à l'image suivante -->
</div>
</div>
<div class="meilleures-ventes" id="meilleures-ventes"> <!--Meilleures ventes-->
<h2>Meilleures Ventes</h2> <!--Sous-Titre-->
<div class="img-mv"> <!--Images des meilleures ventes-->
<div class="card mv-card"> <!--Carte de la meilleure vente-->
<a href="vide.html"> <!--Lien vers la page de la meilleure vente-->
<h3>USP-S | Kill-Confirmed</h3> <!--Titre de la meilleure vente-->
<img src="./images/skins/usp-s/kill_confirmed.png" alt="USPS_K_C"> <!--Image de la meilleure vente-->
</a>
</div>
<div class="card mv-card">
<a href="vide.html">
<h3>Desert-Eagle | Blaze</h3>
<img src="./images/skins/desert-eagle/blaze.png" alt="Blaze">
</a>
</div>
<div class="card mv-card">
<a href="vide.html">
<h3>AWP | Hyper-Beast</h3>
<img src="./images/skins/awp/hyper-beast.png" alt="AWP-HB">
</a>
</div>
<div class="card mv-card">
<a href="vide.html">
<h3>AK-47 | Neon Rider</h3>
<img src="./images/skins/ak-47/neon-rider.png" alt="AK47-NR">
</a>
</div>
<div class="card mv-card">
<a href="vide.html">
<h3>Glock-18 | Vogue</h3>
<img src="./images/skins/glock-18/vogue.png" alt="AK47-NR">
</a>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="top-footer"> <!-- Contient la partie haute du footer -->
<div class="link-block"> <!-- Contient les liens vers les pages -->
<a href="index.html">Page d'accueil</a> <!-- lien vers la page d'acceuil-->
<a href="glossaire.html">Glossaire</a> <!-- lien vers la page du glossaire-->
<a href="ressources.html">Ressources</a> <!-- lien vers la page des ressources-->
<a href="contact.html">Contact</a> <!-- lien vers la page de contact-->
</div>
</div>
<div class="bottom-footer"> <!-- Contient la partie basse du footer -->
<div class="footer-info"> <!-- Contient les informations de la page -->
<p id="copyright">© Copyright 2023 - CS_NOW Tous Droits Réservés</p> <!-- Contient le copyright -->
<div class="regroup"> <!-- Contient les logos de paiement et les réseaux sociaux -->
<a href="https://www.visa.fr/" target="_blank"><img src="./images/icons/credit-card.png" alt="visa-logo" id="payments-logo"></a> <!-- Logo de visa -->
<p><strong>|</strong></p>
<div class="socials">
<a href="mailto:[email protected]"><img src="./images/icons/email.png" alt="mail" class="footer-icons"></a> <!-- Logo de mail -->
<a href="https://instagram.com" target="_blank"><img src="./images/icons/instagram.png" alt="instagram" class="footer-icons"></a> <!-- Logo d'instagram -->
<a href="https://twitter.com" target="_blank"><img src="./images/icons/twitter.png" alt="twitter" class="footer-icons"></a> <!-- Logo de twitter -->
<a href="https://facebook.com" target="_blank"><img src="./images/icons/facebook.png" alt="facebook" class="footer-icons"></a> <!-- Logo de facebook -->
</div>
</div>
</div>
</div>
</footer>
<!-- Popups -->
<div id="welcome-popup" class="hidden"> <!-- Popup d'accueil -->
<p id="welcome-user">Erreur chargement popup d'accueil</p> <!-- Affiche une erreur si le js ne passe pas -->
<span id="welcome-close">X</span> <!-- Bouton pour fermer le popup -->
</div>
<div id="cookie-popup" class="hidden"> <!-- Popup de cookies -->
<div class="cookie-flex"> <!-- Contient le texte et le bouton pour accepter les cookies -->
<p>En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies</p> <!-- Texte -->
<span id="cookie-accept">Accepter</span> <!-- Bouton pour accepter les cookies -->
</div>
</div>
<script src="index.js"></script> <!-- Script js -->
</body>