forked from nayannelbatista/3994-sass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
265 lines (243 loc) · 10.3 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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!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">
<link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
<title>Serenatto</title>
<link
href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="container">
<a class="navbar-brand" href="#">
<img src="./assets/logo-maior.png" alt="Logo da cafeteria Serenatto">
</a>
<button class="navbar-toggler" aria-label="Menu" id="menu-toggle">
<span class="hamburger-icon"></span>
</button>
<div class="navbar-menu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#servicos">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#produtos">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="dark-mode-switch">
<input type="checkbox" id="darkModeToggle">
<label for="darkModeToggle" class="toggle-switch">
<span class="slider"></span>
<span class="toggle-text">Modo noturno</span>
</label>
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
<aside class="sidebar">
<button class="sidebar-close" aria-label="Close sidebar">×</button>
<a class="sidebar-brand" href="#">
<img src="./assets/logo-mobile.png" alt="Logo da cafeteria Serenatto">
</a>
<ul class="sidebar-nav">
<li class="nav-item">
<a class="nav-link" href="#servicos">Serviços</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#produtos">Produtos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contato">Contato</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<div class="dark-mode-switch">
<input type="checkbox" id="darkModeToggleSidebar">
<label for="darkModeToggleSidebar" class="toggle-switch">
<span class="slider"></span>
<span class="toggle-text">Modo noturno</span>
</label>
</div>
</a>
</li>
</ul>
</aside>
</header>
<main>
<section class="banner banner-1">
<div class="banner-content-container">
<div class="banner-content">
<img src="./assets/logo-nav.png" alt="">
<h2>Sua pausa <br> para <span>desfrutar <br> a vida.</span></h2>
<p>Boas-vindas ao & <strong>Bistrô Serenatto!</strong>
<br>Um ambiente aconchegante e acolhedor <br> para apreciar um bom café.
</div>
</div>
</section>
<section class="services" id="servicos">
<h2>Nossos Serviços</h2>
<div class="services-container">
<article class="card">
<img src="./assets/cafe-e-bistro.png" alt="Balcão de padaria tradicional com alimentos diversos">
<div class="card-body">
<h5>Café & Bistrô</h5>
<p>Nosso bistrô oferece uma ampla variedade de cafés, smoothies, deliciosos salgados e sobremesas. Uma
excelente opção para quem busca um lugar tranquilo e aconchegante.</p>
</div>
</article>
<article class="card">
<img src="./assets/buffet.png" alt="Mesa de buffet com alimentos diversos">
<div class="card-body">
<h5>Buffet</h5>
<p>Buffet e catering personalizado para eventos, produções e celebrações. Com um menu variado e adaptável às
preferências do cliente, atendimento atencioso e profissional.</p>
</div>
</article>
<article class="card">
<img src="./assets/delivery.png" alt="Caixa aberta armazenando comidas diversas">
<div class="card-body">
<h5>Delivery</h5>
<p>Para quem deseja desfrutar no conforto de casa, oferecemos delivery dos produtos. Com o mesmo cardápio
variado de sempre, sem perder nosso sabor e padrão de qualidade.</p>
</div>
</article>
</div>
</section>
<section class="banner banner-2">
<h2>Portas abertas para todos os públicos.</h2>
<p>Nosso espaço é aconchegante, pet friendly, preparado para receber crianças e pessoas com deficiência.
Também oferecemos ambiente de coworking!</p>
</section>
<section class="products" id="produtos">
<h2>Nossos produtos</h2>
<div class="products-container">
<div class="product-card" data-modal="modal-1">
<img src="./assets/cafe-tradicional.png" alt="Café preto">
<h3>Cafés Tradicionais</h3>
</div>
<div class="product-card" data-modal="modal-2">
<img src="./assets/cafe-especial.png" alt="Café expresso">
<h3>Cafés Especiais</h3>
</div>
<div class="product-card">
<img src="./assets/smoothies.png" alt="Vitaminas variadas">
<h3>Smoothies e Vitaminas</h3>
</div>
<div class="product-card">
<img src="./assets/paes.png" alt="Pães variados">
<h3>Pães e Focaccias</h3>
</div>
<div class="product-card">
<img src="./assets/bolo.png" alt="Bolo de morango">
<h3>Doces</h3>
</div>
<div class="product-card">
<img src="./assets/quiche.png" alt="Torta salgada">
<h3>Salgados</h3>
</div>
</div>
</section>
<section class="">
<img src="../../assets/cafe-graos.png" alt="Grãos de café">
</section>
<section class="contact">
<div class="contact-container">
<h3>Entre em contato!</h3>
<form id="contato">
<div class="form-group">
<label for="nome">Nome</label>
<input type="text" id="nome" placeholder="Nome">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="telefone">Telefone</label>
<input type="text" id="telefone" placeholder="Telefone">
</div>
<div class="form-group">
<label for="contato-preferencia">Preferência de contato:</label>
<select id="contato-preferencia">
<option selected disabled>Escolha uma opção</option>
<option value="1">WhatsApp</option>
<option value="2">Email</option>
<option value="3">Ligação</option>
</select>
</div>
<button type="submit" class="btn">Enviar</button>
</form>
</div>
</section>
<footer>
<div class="footer-content">
<p>© 2023 © Desenvolvido por Alura | Projeto fictício sem fins comerciais.</p>
<div class="footer-image-container">
<img src="./assets/whats.png" alt="Ícone do whatsapp">
<img src="./assets/insta.png" alt="Ícone do instagram">
<img src="./assets/twitter.png" alt="Ícone do twitter">
</div>
</div>
</footer>
</main>
<!-- Modal 1 -->
<div id="modal-backdrop-1" class="modal-backdrop"></div>
<dialog id="modal-1" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Cafés tradicionais</h2>
<button type="button" class="close-button" aria-label="Close">×</button>
</div>
<div class="modal-body">
<img src="./assets/cafe-tradicional.png" class="modal-image" alt="Xícara de café preto">
<p>O café Serenatto é conhecido por seus blends tradicionais e saborosos, que agradam aos amantes da bebida.
Nossos grãos são cuidadosamente selecionados e torrados para produzir um aroma rico e sabor equilibrado.</p>
<p>Entre os cafés mais tradicionais da casa, destaca-se o "Café Serenatto", um blend exclusivo de grãos com
notas de chocolate e caramelo. Outra opção popular é o "Café Italiano", um café expresso encorpado e intenso.
Já o "Café Cappuccino" é uma escolha clássica para quem prefere uma bebida cremosa e suave.</p>
</div>
<div class="modal-footer">
<button type="button" class="close-button">Fechar janela</button>
</div>
</div>
</dialog>
<!-- Modal 2 -->
<div id="modal-backdrop-2" class="modal-backdrop"></div>
<dialog id="modal-2" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">Cafés especiais</h2>
<button type="button" class="close-button" aria-label="Close">×</button>
</div>
<div class="modal-body">
<img src="./assets/cafe-especial.png" class="modal-image" alt="Xícara de café expresso">
<p>Somos conhecidos também por nossos cafés especiais, que são cuidadosamente preparados com grãos selecionados
de alta qualidade e técnicas de preparo precisas.</p>
<p>Entre as opções de cafés especiais do Café & Bistrô Serenatto, destacamos o café aeropress, que é preparado
com uma técnica de imersão e pressão, resultando em uma bebida de sabor intenso e aroma acentuado. Outra opção
popular é o café Hario V60, que é preparado com um filtro de papel em formato de cone e resulta em uma bebida
limpa e suave, ressaltando as notas sensoriais dos grãos. Além disso, oferecemos uma variedade de bebidas
geladas, como o café gelado, que é preparado com grãos torrados escuros e servido com gelo e leite, resultando
em uma bebida refrescante e saborosa.</p>
</div>
<div class="modal-footer">
<button type="button" class="close-button">Fechar janela</button>
</div>
</div>
</dialog>
<script type="module" src="/main.js"></script>
</body>
</html>