-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
191 lines (191 loc) · 9.03 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
<!DOCTYPE html>
<html lang="pt-BR">
<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>Nails Design</title>
<link rel="stylesheet" href="./assets/css/global.css">
</head>
<body>
<nav id="navbar">
<a class="logo">Nails Design</a>
<ul class="menus desktop">
<li class="menu active"><a href="">Início</a></li>
<li class="menu"><a href="#">Sobre mim</a></li>
<li class="menu"><a href="#">Serviços</a></li>
<li class="menu"><a href="#">Contato</a></li>
<li class="menu"><a href="#">Instagram</a></li>
</ul>
<span class="friesMenu mobile">
<span></span>
<span></span>
<span></span>
</span>
<div class="menuBar mobile">
<ul class="menus">
<li class="menu active"><a href="">Início</a></li>
<li class="menu"><a href="#">Sobre mim</a></li>
<li class="menu"><a href="#">Serviços</a></li>
<li class="menu"><a href="#">Contato</a></li>
<li class="menu"><a href="#">Instagram</a></li>
</ul>
</div>
</nav>
<header id="header">
<div class="content">
<h1 class="title">Sua moda e estilo começa aqui</h1>
<p class="description">A beleza é realmente uma boa dádiva de Deus. Mas para que o bom não o considere um grande bem, Deus o dispensa até ao pavio. A beleza é a promessa de felicidade.</p>
<a class="button" href="#">Agende agora</a>
</div>
<img class="image desktop" src="./assets/img/290646393_442660964037071_4459767212010619936_n.png">
</header>
<main id="content">
<section class="services-resume">
<div class="service">
<div class="icon">
<img src="./assets/img/pedicure.png">
</div>
<span class="text">Mani & Pedi</span>
</div>
<div class="service">
<div class="icon">
<img src="./assets/img/esmalte.png">
</div>
<span class="text">Esmaltação</span>
</div>
<div class="service">
<div class="icon">
<img src="./assets/img/gel.png">
</div>
<span class="text">Unha em gel</span>
</div>
<div class="service">
<div class="icon">
<img src="./assets/img/reparos.png">
</div>
<span class="text">Reparos</span>
</div>
</section>
<section class="featured-services">
<h1 class="title">Serviços em Destaque</h1>
<div class="wrapper">
<div class="service">
<h1 class="service-title">Manicure</h3>
<div class="image">
<img src="./assets/img/Manicure-e-Pedicure.jpg">
</div>
</div>
<div class="service">
<h1 class="service-title">Unha em Gel</h3>
<div class="image">
<img src="./assets/img/Manicure-e-Pedicure.jpg">
</div>
</div>
<div class="service">
<h1 class="service-title">Mani + Pedi</h1>
<div class="image">
<img src="./assets/img/Manicure-e-Pedicure.jpg">
</div>
</div>
</div>
</section>
<section class="row-section">
<img class="image" src="./assets/img/9344199360612906463.png">
<div class="main-content">
<h1 class="title">Obtenha a unha impecável e clara</h1>
<p class="description">As pessoas são como vitrais. Eles brilham e brilham quando o sol está fora, mas quando a escuridão se põe sua verdadeira beleza só é revelada se houver uma luz interior. A beleza é tudo muito bem à primeira vista.</p>
<a href="#" class="button">Agende agora</a>
</div>
</section>
<section class="row-section video-example">
<h1 class="title">Processo de atendimento</h1>
<div class="iframe-container">
<iframe src="https://www.youtube-nocookie.com/embed/K4TOrB7at0Y?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
<section class="customers-reviews">
<h1 class="title">Veja as avaliações</h1>
<div class="wrapper">
<div class="review">
<div class="message">
<p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis accusamus laudantium quas quos.</p>
<span class="arrow">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.000000 360.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,360.000000) scale(0.100000,-0.100000)">
<path d="M91 3559 c115 -55 230 -127 313 -193 143 -115 973 -903 1101 -1046 229 -255 612 -786 1039 -1442 100 -152 186 -285 193 -295 7 -10 -4 18 -23 62 -153 341 -275 725 -324 1022 -107 646 -1 1066 369 1456 217 228 466 377 756 453 l90 23 -1799 1 -1800 0 85 -41z"/>
</g>
</svg>
</span>
</div>
<div class="client">
<img class="image" src="./assets/img/avatar_female.png">
<div class="info">
<span class="name">Eli Laudan</span>
<span class="service">Fibra de vidro</span>
</div>
</div>
</div>
<div class="review">
<div class="message">
<p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis accusamus laudantium quas quos.</p>
<span class="arrow">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.000000 360.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,360.000000) scale(0.100000,-0.100000)">
<path d="M91 3559 c115 -55 230 -127 313 -193 143 -115 973 -903 1101 -1046 229 -255 612 -786 1039 -1442 100 -152 186 -285 193 -295 7 -10 -4 18 -23 62 -153 341 -275 725 -324 1022 -107 646 -1 1066 369 1456 217 228 466 377 756 453 l90 23 -1799 1 -1800 0 85 -41z"/>
</g>
</svg>
</span>
</div>
<div class="client">
<img class="image" src="./assets/img/avatar_female.png">
<div class="info">
<span class="name">Vitae Alias</span>
<span class="service">Banho de gel</span>
</div>
</div>
</div>
</div>
</section>
<section class="row-section contact">
<img class="image" src="./assets/img/support.png">
<div class="main-content">
<h1 class="title">Entre em contato e saiba como podemos ajudar</h1>
<form method="POST" class="form">
<input type="email" placeholder="Digite o seu email" name="email">
<input type="submit" value="Vamos conversar" name="submit">
</form>
</div>
</section>
</main>
<footer id="footer">
<div class="columns">
<div class="column one">
<h4 class="title">Localização</h4>
<ul class="list">
<li>Lorem Ipsum - SA</li>
<li>Dolor Sit Amet Consectetur</li>
</ul>
</div>
<div class="column two">
<h4 class="title">Contato</h4>
<ul class="list">
<li>+00 (00) 0 0000-0000</li>
<li>@lorem_ipsum</li>
</ul>
</div>
<div class="column three">
<a class="logo">Nails Design</a>
</div>
<div class="column four">
<p class="copyright">© Nails Design 2019 - 2021</p>
</div>
<div class="column five terms-policy">
<a href="#">Termos & Serviços</a>
<a href="#">Políticas & Privacidade</a>
</div>
</div>
</footer>
<script type="module" src="./assets/js/global.js"></script>
</body>
</html>