forked from blakpsykozz/dev-gadgets
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
152 lines (152 loc) · 6.99 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Dev Gadgets - Canard jaune pour la revue de code</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="header-content">
<a href="#" class="header-ttl">
<img class="header-logo" src="img/logo-white.png" alt="dev gadgets logo">
<div class="header-txt">
<span>dev</span>
<span>gadgets</span>
</div>
</a>
<a class="cart" href="#">
<img class="cart-img" src="img/cart.png" alt="panier">
<span class="cart-nb">0</span>
</a>
</div>
</header>
<main class="page">
<h1 class="page-ttl">Canard jaune pour la revue de code</h1>
<section class="page-pics">
<div class="pictures">
<button type="button" class="pictures-handler pictures-prev">◀️</button>
<img class="pictures-img" src="img/canard-jaune-1-l.png" alt="canard jaune pour dévloppeur">
<button type="button" class="pictures-handler pictures-next">▶️</button>
<ul class="thumbs">
<li class="thumbs-itm">
<img class="thumbs-img" src="img/canard-jaune-1-s.png" alt="photo canard 1">
</li>
<li class="thumbs-itm">
<img class="thumbs-img" src="img/canard-jaune-2-s.png" alt="photo canard 2">
</li>
<li class="thumbs-itm">
<img class="thumbs-img" src="img/canard-jaune-3-s.png" alt="photo canard 3">
</li>
<li class="thumbs-itm">
<img class="thumbs-img" src="img/canard-jaune-4-s.png" alt="photo canard 4">
</li>
<li class="thumbs-itm">
<img class="thumbs-img" src="img/canard-jaune-5-s.png" alt="photo canard 5">
</li>
</ul>
</div>
<div class="price">
11€95
</div>
<div class="add">
<input class="add-qty" type="text" value="1">
<button class="add-cta" type="button">Ajouter au panier</button>
</div>
</section>
<section class="page-txt page-section">
<p class="product-descr">Ce canard va devenir votre meilleur allié pour le développement de vos projets les plus ambitieux ! Fidèle compagnon qui trônera à côté de vos écrans, vous pourrez lui expliquer les problèmes que vous rencontrez avec votre code : refactoring, bugs, algo complexe, … Ce nouveau collègue discret et joyeux vous aidera à trouver les solutions à toutes vos problématiques !</p>
<div>
<h2 class="product-subttl product-acrd-lnk">Avantages</h2>
<ul class="product-advantages">
<li>Un nouveau compagnon de pair programming</li>
<li>Repoussez les limites de votre code</li>
<li>Un collègue utile, joyeux et discret</li>
<li>Vous suit chez vous en télétravail</li>
<li>Flotte même dans votre baignoire</li>
</ul>
</div>
<div>
<h2 class="product-subttl product-acrd-lnk">Caractéristiques</h2>
<dl class="product-car">
<dt>Dimensions</dt>
<dd>10 cm x 9 cm x 12 cm</dd>
<dt>Matière</dt>
<dd>plastique à la texture douce et agréable</dd>
<dt>Norme</dt>
<dd>Homologué CE, sans phtalate</dd>
<dt>Sécurité</dt>
<dd>Ne convient pas aux enfants de moins de 36 mois</dd>
<dt>Nettoyage</dt>
<dd>à l’eau</dd>
</dl>
</div>
</section>
<section class="similar page-section">
<h2 class="product-subttl">Articles similaires</h2>
<ul class="similar-lst">
<li class="similar-itm">
<a class="similar-lnk" href="#">
<img class="similar-img" src="img/canard-dragon.png" alt="canard dragon">
<h3 class="similar-ttl">Canard Dragon</h3>
<div class="similar-price">19€95</div>
</a>
</li>
<li class="similar-itm">
<a class="similar-lnk" href="#">
<img class="similar-img" src="img/canard-geek.png" alt="canard geek">
<h3 class="similar-ttl">Canard Geek</h3>
<div class="similar-price">19€95</div>
</a>
</li>
<li class="similar-itm">
<a class="similar-lnk" href="#">
<img class="similar-img" src="img/canard-licorne.png" alt="canard licorne">
<h3 class="similar-ttl">Canard Licorne</h3>
<div class="similar-price">19€95</div>
</a>
</li>
<li class="similar-itm">
<a class="similar-lnk" href="#">
<img class="similar-img" src="img/canard-bowie.png" alt="canard David Bowie">
<h3 class="similar-ttl">Ziggy StarDuck</h3>
<div class="similar-price">19€95</div>
</a>
</li>
</ul>
</section>
</main>
<aside class="reinsur">
<ul class="reinsur-lst">
<li class="reinsur-itm">
<img class="reinsur-img" src="img/delivery.png" alt="livraison gratuite">
<h4 class="reinsur-txt">Livraison gratuite</h4>
</li>
<li class="reinsur-itm">
<img class="reinsur-img" src="img/quality.png" alt="satisfait ou remboursé">
<h4 class="reinsur-txt">Satisfait ou remboursé</h4>
</li>
<li class="reinsur-itm">
<img class="reinsur-img" src="img/security.png" alt="sécurité">
<h4 class="reinsur-txt">Paiement 100% sécurisé</h4>
</li>
</ul>
</aside>
<footer class="footer">
<ul class="legal">
<li class="legal-itm">
<a class="legal-lnk" href="#">Mentions légales</a>
</li>
<li class="legal-itm">
<a class="legal-lnk" href="#">Plan du site</a>
</li>
<li class="legal-itm">
<a class="legal-lnk" href="#">Contact</a>
</li>
</ul>
<div class="footer-cp">© 2022 - Dev Gadgets</div>
</footer>
</body>
</html>