-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
200 lines (188 loc) · 7.68 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
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Goutte de Café</title>
<link rel="stylesheet" href="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=DM+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<!-- Cabeçalho -->
<header id="header">
<nav class="container">
<a class="logo" href="#"><em>Goutte de<span>Café</em></span></a>
<div class="menu">
<ul class="grid">
<li><a class="title" href="#home"><strong>Início</a></li></strong>
<li><a class="title" href="#about"><strong>Sobre</a></li></strong>
<li><a class="title" href="#services"><strong>Serviços</a></li></strong>
<li><a class="title" href="#contact"><strong>Contato</a></li></strong>
</ul>
</div>
<div class="toggle icon-menu"></div>
<div class="toggle icon-close"></div>
</nav>
</header>
<!-- Todas as páginas -->
<main>
<!-- Primeira página -->
<section class="section" id="home">
<div class="container grid">
<div class="image">
<img
src="https://images.unsplash.com/photo-1476137703175-54466acd5ad4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1173&q=80"
alt="Imagem de uma livraria"
/>
</div>
<div class="text">
<h1><em>
Se quer ter uma experiência diferente de tudo que já viveu, venha
nos visitar!</em>
</h1>
<p class="subtitle">
Temos histórias que farão você esquecer da realidade! Servimos um
café delicioso com acompanhamentos que deixarão sua leitura ainda
mais prazerosa.
</p>
<a class="button" href=""><u>Viva essa experiência!</a></u>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Segunda página -->
<section class="section" id="about">
<div class="container grid">
<div class="image">
<img
src="https://images.unsplash.com/photo-1593173945705-d6451ed5909a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=358&q=80"
alt="Ambiente de leitura"
/>
</div>
<div class="text">
<h2 class="title"><em>Sobre Nós</em></h2>
<p class="subtitle">
Somos uma empresa fundada com o objetivo de proporcionar
experiências literárias para os mais diversos tipos de pessoas.
</p>
<br />
<p class="subtitle">
Com mais de 10 anos no mercado, buscamos sempre a satisfação dos
nossos clientes. Por isso, além de diversos temas de livros,
contamos com um ambiente sofisticado e aconchegante onde nossos
clientes podem ler tranquilamente, tomando um café, ou de repente
até tirar um cochilo.
</p>
<br />
<p class="subtitle">Venha nos conhecer e se apaixone!</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Terceira página -->
<section class="section" id="services">
<div class="container grid">
<header>
<h2 class="title"><em>Serviços</em></h2>
<p class="justify-text subtitle">
Nosso principal objetivo é a sua segurança e a sua satisfação,
então nesse momento de pandemia, estamos realizando agendamentos
para que você nos visite e tenha uma experiência ainda melhor.
</p>
</header>
<div class="cards grid">
<div class="card">
<i class="icon-cafe"></i>
<h3 class="title"><em>Café Quentinho</em></h3>
<p class="subtitle">
Servimos diversos tipos de cafés. Todos com receitas elaboradas para proporcionar um sentimento extraordinário!
</p>
</div>
<div class="cards grid">
<div class="card">
<i class="icon-torta"></i>
<h3 class="title"><em>Quitutes Deliciosos</em></h3>
<p class="subtitle">
Temos quitutes deliciosos, que saem do
forno três vezes ao dia, para que você possa se deciliar.
</p>
</div>
<div class="card">
<i class="icon-livro"></i>
<h3 class="title"><em>Temas Literários Diversificados</em></h3>
<p class="subtitle">
Buscamos diversificar e atualizar o nosso acervo literário
pensando sempre em proporcionar novas experiências.
</p>
</div>
<div class="card">
<i class="icon-carrinho"></i>
<h3 class="title"><em>Sebo e Livros Novos</em></h3>
<p class="subtitle">
Disponibilizamos a opção de compra de livros novos e usados. Opção ideal
pra quem gosta de colecionar.
</p>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- Quarta página -->
<section class="section" id="contact">
<div class="container grid">
<div class="text">
<h2 class="title">Vem falar com a gente!</h2>
<p class="subtitle">
Vamos adorar agendar um horário para te receber da melhor forma possível.
</p>
<div class="align_button">
<a
class="button"
href="https://api.whatsapp.com/send?phone=5511012345678&text=Olá! Quero mais informações sobre as pizzas!!"
target="_blank"
><i class="icon-whatsapp"></i>Clica aqui :)
</a>
</div>
</div>
<div class="link">
<ul class="grid">
<li><i class="icon-phone"></i>(11) 3333-0000</li>
<li><i class="icon-map-pin"></i>Av. Paulista,00, Bela Vista, São Paulo - SP</li>
<li><i class="icon-mail"></i>gouttedecafe@yahoo.com</li>
</ul>
</div>
</div>
</section>
</main>
<div class="divider"></div>
<!-- Rodapé -->
<footer class="section">
<div class="container grid">
<div class="brand">
<a class="logo logo-alt" href="#home"><em>Goutte <span> deCafé</em></span></a>
<p>©2021 Goutte deCafé</p>
<p>Todos os direitos reservados.</p>
</div>
<div class="social">
<a href="https://instagram.com" target="_blank"
><i class="icon-instagram"></i
></a>
<a href="https://facebook.com" target="_blank"
><i class="icon-facebook"></i
></a>
<a href="https://youtube.com" target="_blank"
><i class="icon-youtube"></i
></a>
</div>
</div>
</footer>
<script src="main.js"></script>
</body>
</html>