-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
241 lines (233 loc) · 9.86 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./img/scissors-bold.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=Lato:wght@300;400;700;900&family=Playfair+Display:wght@700&family=Poppins:wght@700&display=swap"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@phosphor-icons/[email protected]/src/bold/style.css" />
<meta name="language" content="fr" />
<meta name="description"
content="est un salon de beauté axé sur les soins esthétiques masculins. Vous pouvez y obtenir des coupes de cheveux, des rasages, des soins capillaires, des soins de la peau, des soins des ongles et des séances de peinture." />
<meta name="keywords" content="Barbe, Moustache, Barbe Moustache, BarbeEtMoustache, cheveux" />
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://barbe-et-moustache.vercel.app/" />
<meta property="og:title" content="Barbe et moustache" />
<meta property="og:description"
content="est un salon de beauté axé sur les soins esthétiques masculins. Vous pouvez y obtenir des coupes de cheveux, des rasages, des soins capillaires, des soins de la peau, des soins des ongles et des séances de peinture." />
<meta property="og:image" content="./img/picture_3.jpg" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://barbe-et-moustache.vercel.app/" />
<meta property="twitter:title" content="Barbe et moustache" />
<meta property="twitter:description"
content="est un salon de beauté axé sur les soins esthétiques masculins. Vous pouvez y obtenir des coupes de cheveux, des rasages, des soins capillaires, des soins de la peau, des soins des ongles et des séances de peinture." />
<meta property="twitter:image" content="./img/picture_3.jpg" />
<title>Barbe et moustache</title>
</head>
<body>
<header id="header" class="header">
<nav class="header-nav">
<h1>
<a title="logo" href="#" class="header-nav-logo">Barbe<span>Et</span>Moustache.</a>
</h1>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos </a></li>
<li><a href="#service">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<img class="menu-hamburger" src="./img/list.svg" alt="menu hamburguer" title="menu hamburguer" />
<img class="menu-close" src="./img/x.svg" alt="close" title="fechar" />
<menu class="sidebar">
<a title="logo" href="#">Barbe<span>Et</span>Moustache.</a>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos </a></li>
<li><a href="#service">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</menu>
</header>
<main>
<section id="home">
<article class="container">
<picture class="image">
<img src="./img/picture_1.jpg" alt="homem coranto cabelo" />
</picture>
<aside class="text">
<h2 class="title">Santé naturelle pour</br>
vos cheveux,votre barbe </br>
et votre peau</h2>
<p class="paragraph">
Un barbier exclusif à Marseille, spécialisé dans les soins naturels
</p>
<a class="botao" href="#contact">Réserver un rendez-vous</a>
</aside>
</article>
</section>
<section class="enable-animation">
<div class="marquee">
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
</div>
</section>
<section id="about" class="container">
<article class="text">
<header>
<h2 class="title">À propos de nous</h2>
</header>
<section>
<p class="paragraph">
Chez BarbeEtMoustache, notre dévouement envers l'art de la barbe et de la moustache est inégalé. Guidés par
une passion profonde, notre équipe de barbiers chevronnés et d'experts en soins capillaires s'engage à
sublimer chaque aspect de ces attributs masculins iconiques.
</p>
<p class="paragraph">
Chaque homme porte sa barbe d'une manière unique,
et c'est pourquoi nous offrons une approche personnalisée, allant des coupes soignées aux styles plus
audacieux, en veillant toujours à réaliser la vision de nos clients.
</p>
<p class="paragraph">
Nous sommes votre partenaire dévoué pour magnifier votre style facial, offrant à la fois des soins de
qualité
supérieure et une communauté où vous pouvez vous épanouir en exprimant fièrement votre individualité.
</p>
</section>
</article>
<picture class="image img-2">
<img src="./img/picture_3.jpg" alt="" />
</picture>
</section>
<section class="enable-animation reverse">
<div class="marquee">
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
</div>
</section>
<section id="service" class="container">
<article>
<aside class="text">
<h2 class="title">Services</h2>
<p class="paragraph">
Avec plus de 10 ans sur le marché, <strong>Barbe<span>Et</span>Moustache</strong> a déjà conquit des clients
de pays grâce à des traitements
exclusifs et totalement naturels.
</p>
</aside>
<menu class="cards">
<div class="card">
<img src="./img/hair-cutting.png" alt="">
<h2>Thérapie capillaire</h2>
<p>Étude des cheveux, du cuir chevelu et des poils pour traiter et maintenir leur santé.</p>
</div>
<div class="card">
<img src="./img/tesoura-e-pente.png" alt="">
<h2>Coupes</h2>
<p> Coupes de cheveux modernes et classiques, coloration et pose de perruques.</p>
</div>
<div class="card">
<img src="./img/shampoo-para-animais-de-estimacao.png" alt="">
<h2>Traitement</h2>
<p>Traitement de renforcement capillaire contre le froid pour la barbe et traitement de la chute des
cheveux.
</p>
</div>
</menu>
</article>
</section>
<section class="enable-animation">
<div class="marquee">
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
<ul class="marquee__content">
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
<li>10% OFF SUR LA PREMIER TRAITEMENT </li>
<li>BARBE ET MOUSTACHE </li>
</ul>
</div>
</section>
<picture style="height: 300px; background-image: url('./img/picture_2.jpg');
background-position: center ;
background-size: cover;
background-repeat: no-repeat;
background-color: brown;" class="banner container">
</picture>
<section id="contact">
<article id="contact" class="container">
<aside class="text">
<h2 class="title">Contactez-nous</h2>
<p class="paragraph">Entrez en contact avec BarbeEtMoustache, nous voulons dissiper vos doutes, entendre vos
critiques et
suggestions.</p>
<a class="botao" href="https://api.whatsapp.com/send/?phone=+33939391489 text&app_absent=0">Entrez en
contact</a>
</aside>
<adress class="adress paragraph">
<p>(93) 939 1489</p>
<p>Nº83 Rue Saint-Sébastien, Marseille, France</p>
<p>[email protected]</p>
</adress>
</article>
</section>
</main>
<footer>
<article class="container">
<aside class="copy">
<a href="#home">Barbe<span>Et</span>Moustache.</a>
<p>©2021 BarbeEtMoustache </p>
<p>Todos os direitos reservados.</p>
<p> Feito por ✄
<a href="https://github.com/cleitonBarros" target="_blank" rel="noreferrer">
Cleiton Barros
</a>
</p>
</aside>
<adress class="social">
<a href="https://instagram.com" target="_blank">
<img src="./img/instagram-logo.svg" alt="">
</a>
<a href="https://facebook.com" target="_blank">
<img src="./img/facebook-logo.svg" alt="">
</a>
<a href="https://youtube.com.br" target="_blank">
<img src="./img/youtube-logo.svg" alt="">
</a>
</adress>
</article>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="./script/main.js"></script>
</body>
</html>