-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsoins-peau.html
160 lines (152 loc) · 7.59 KB
/
soins-peau.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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#000000">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChouSbox - Soins de la Peau 🧴</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cursor cursor--large"></div>
<div class="cursor cursor--small"></div>
<nav class="navigation">
<div class="toggleMenu" aria-label="Toggle Menu"></div>
<ul>
<li><a href="index.html" data-text="Accueil">Accueil</a></li>
<li><a href="informatique.html" data-text="Informatique">Informatique</a></li>
<li><a href="hygiene.html" data-text="Hygiène">Hygiène</a></li>
<li><a href="ressources.html" data-text="Ressources">Ressources</a></li>
</ul>
</nav>
<section class="welcome-section">
<h1 class="glowing-text">Soins de la Peau</h1>
<p class="typing-text">Les essentiels pour une hygiène optimale</p>
</section>
<div class="content-container">
<article class="info-section product-section">
<h2>🛁 La Douche Parfaite</h2>
<div class="product-card">
<div class="product-header">
<img src="https://imgs.search.brave.com/IF7gA2Z3wgUxrtQgjYLi5KMG1pmK3lRRKDLgEtXsyiY/rs:fit:860:0:0:0/g:ce/aHR0cDovL2Fzc2V0/cy5zdGlja3BuZy5j/b20vdGh1bWJzLzVl/Y2UzNDMyOGVhNDQ5/MDAwNGQ2NmRmZS5w/bmc" alt="Gel Douche Sanex" class="product-image">
<h3>Gel Douche Sanex</h3>
<span class="price">~3€</span>
</div>
<div class="product-details">
<h4>Pourquoi le choisir ?</h4>
<ul>
<li>✓ Respecte le pH naturel</li>
<li>✓ Sans savon agressif</li>
<li>✓ Protège le microbiome</li>
<li>✓ Idéal pour peaux sensibles</li>
</ul>
<div class="usage-tips">
<p>💡 Conseil : Utiliser de l'eau tiède</p>
</div>
</div>
</div>
<div class="product-card">
<div class="product-header">
<img src="https://www.jeancoutu.com/catalogue-images/182655/viewer/0/cerave-nettoyant-hydratant-pour-peau-normale-a-seche-355-ml.png" alt="CeraVe Nettoyant Moussant" class="product-image">
<h3>CeraVe Nettoyant Visage</h3>
<span class="price">~12€</span>
</div>
<div class="product-details">
<h4>Pourquoi le choisir ?</h4>
<ul>
<li>✓ Avec céramides essentiels</li>
<li>✓ Non-comédogène</li>
<li>✓ Hydratant et doux</li>
<li>✓ Recommandé par les dermatologues</li>
</ul>
</div>
</div>
<div class="product-card">
<div class="product-header">
<img src="https://i.ibb.co/MnK4X9S/51-RB-u-X4-DJL-AC-UL320-removebg-preview.png" alt="CeraVe Réparateur" class="product-image">
<h3>CeraVe Réparateur</h3>
<span class="price">~15€</span>
</div>
<div class="product-details">
<h4>Pourquoi le choisir ?</h4>
<ul>
<li>✓ Restaure la barrière cutanée</li>
<li>✓ Hydratation 24h</li>
<li>✓ Avec céramides et acide hyaluronique</li>
<li>✓ Non-comédogène</li>
</ul>
</div>
</div>
</article>
</article>
<article class="info-section essential-section">
<h2>💪 Les Indispensables</h2>
<div class="product-grid">
<div class="product-card">
<div class="product-header">
<img src="https://e-cosmetorium.com/cdn/shop/products/senitive_500x.jpg?v=1561638771" alt="Etiaxil" class="product-image">
<h3>Etiaxil Anti-transpirant</h3>
<span class="price">~10€</span>
</div>
<div class="product-details">
<ul>
<li>✓ Efficace 48-72h</li>
<li>✓ Application après la douche</li>
<li>⚠️ Sur peau sèche</li>
<li>⚠️ PAS après epilation</li>
</ul>
</div>
</div>
<div class="product-card">
<div class="product-header">
<img src="https://yuka.io/wp-content/uploads/sunscreen-1.png" alt="Crème Solaire" class="product-image">
<h3>Crème Solaire SPF50+</h3>
<div class="importance-tag">INDISPENSABLE</div>
</div>
<div class="product-details">
<ul>
<li>✓ Protection UVA/UVB</li>
<li>✓ Tous les jours</li>
<li>✓ Anti-vieillissement</li>
<li>⚠️ Renouveler/2h</li>
</ul>
</div>
</div>
</div>
</article>
<article class="info-section warning-section">
<h2>⚠️ Mythes et Réalités</h2>
<div class="myth-grid">
<div class="myth-card">
<div class="myth">❌ "Le savon de Marseille est meilleur"</div>
<div class="reality">✓ Trop agressif, déséquilibre le pH</div>
</div>
<div class="myth-card">
<div class="myth">❌ "Plus ça mousse, mieux ça lave"</div>
<div class="reality">✓ La mousse n'est pas un indicateur d'efficacité, au contraire</div>
</div>
<div class="myth-card">
<div class="myth">❌ "Pas besoin de crème solaire en hiver"</div>
<div class="reality">✓ Les UV traversent les nuages</div>
</div>
<div class="myth-card">
<div class="myth">❌ "Se laver avec ses mains est sale"</div>
<div class="reality">✓ Aucune étude ne prouve que c'est moins hygiénique. Par contre, un djampe propre et lavé après chaque usage peut enlever la peau morte</div>
</div>
</div>
</article>
</div>
<div class="theme-switch">
<input type="checkbox" id="theme-toggle">
<label for="theme-toggle" class="theme-label">
<i class="moon">🌙</i>
<i class="sun">☀️</i>
</label>
</div>
<script src="script.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
</body>
</html>