-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (158 loc) · 5.51 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<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=Sora:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<title>Dev Barber - Sua Barbearia!</title>
</head>
<body>
<div class="bg-home">
<header>
<nav class="header-content container">
<div class="header-icons" data-aos="fade-down">
<a href="#">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<a href="#">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<a href="#">
<i class="fa-brands fa-tiktok fa-2x"></i>
</a>
</div>
<div class="header-logo" data-aos="fade-down">
<img
data-aos="flip-down"
src="assets/logo.svg"
alt="Logo da Barbearia"
/>
</div>
<div>
<a class="header-button" href="#">Agendar horário</a>
</div>
</nav>
<main class="hero container">
<h1>ESTILO É UM REFLEXO DA SUA ATITUDE E SUA PERSONALIDADE.</h1>
<p>Horário de funcionamento: 09:00 as 19:00</p>
<a
href="https://api.whatsapp.com/send?phone=5524999999999&text=Quero%20fazer%20um%20agendamento!"
class="button-contact"
target="_blank"
>Agendar horário</a
>
</main>
</header>
</div>
<section class="about">
<div class="container about-content">
<div>
<img src="assets/images.svg" alt="Imagens sobre a Barbearia" />
</div>
<div class="about-description">
<h2>Sobre</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut
eligendi neque minima a beatae suscipit quam at voluptatum
molestias, hic ipsa necessitatibus totam accusantium ex magni ipsam
in provident fugiat.
</p>
<p>
Horário de funcionamento: <strong>09:00</strong> as
<strong>19:00</strong>
</p>
</div>
</div>
</section>
<section class="services">
<div class="services-content container">
<h2>Serviços</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
veritatis blanditiis accusamus accusantium eligendi facere, numquam
pariatur temporibus sit consectetur magni quis iure, voluptatibus
impedit. Saepe quod accusamus pariatur obcaecati.
</p>
</div>
<section class="haircuts">
<div class="haircut">
<img src="assets/corte1.png" alt="Corte normal" />
<div class="haircut-info">
<strong>Corte normal</strong>
<button>R$45,00</button>
</div>
</div>
<div class="haircut">
<img src="assets/corte2.png" alt="Barba completa" />
<div class="haircut-info">
<strong>Barba completa</strong>
<button>R$35,00</button>
</div>
</div>
<div class="haircut">
<img src="assets/corte3.png" alt="Corte e Barba" />
<div class="haircut-info">
<strong>Corte e Barba</strong>
<button>R$80,00</button>
</div>
</div>
</section>
</section>
<div class="services">
<h2>Venha conhecer</h2>
</div>
<iframe
width="100%"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3672.8917200668607!2d-44.239442039561304!3d-22.991008882444998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9c45cc8fa5703b%3A0xc02d86663f7cded1!2sBarbearia%20Vip!5e0!3m2!1spt-BR!2sbr!4v1689362217975!5m2!1spt-BR!2sbr"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
<footer class="footer">
<div class="footer-icons">
<a href="#">
<i class="fa-brands fa-instagram fa-2x"></i>
</a>
<a href="#">
<i class="fa-brands fa-facebook fa-2x"></i>
</a>
<a href="#">
<i class="fa-brands fa-tiktok fa-2x"></i>
</a>
</div>
<div>
<img src="assets/logo.svg" alt="Logo da Barbearia" />
</div>
<p>Copyright 2023 | DevBarbearia - Todos os direitos reservados</p>
</footer>
<a
href="https://api.whatsapp.com/send?phone=5524999999999&text=Quero%20fazer%20um%20agendamento!"
class="btn-whatsapp"
target="_blank"
data-aos="zoom-in-up"
data-aos-delay="350"
>
<img src="assets/whatssapp.svg" alt="Botão do WhatsApp" />
<span class="tooltip-text">Agende seu horário</span>
</a>
<script src="script.js"></script>
</body>
</html>