-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (194 loc) · 11 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- conexão com o styleguide do bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- conexão com o styleguide padrão -->
<link rel="stylesheet" href="./css/style.css">
<!-- inserção do favicon -->
<link rel="shortcut icon" href="./img/svg/favicon.svg" type="image/x-icon">
<title>Coxinha - O melhor do Brasil</title>
</head>
<body>
<!-- Início do menu -->
<nav class="header-bg">
<div class="menu container">
<a href="index.html"><img class="logo" src="./img/svg/logo.svg" alt="logo"></a>
<ul class="menu-link">
<li><a href="#momentos">QUANDO COMER?</a></li>
<li><a href="#depoimento">DEPOIMENTO</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a class="btn btn-dark btn-outline-dark" href="https://www.ifood.com.br/busca?q=Coxinha&tab=1">PEDIR AGORA</a></li>
</ul>
<div class="hamburguer-nav">
<img src="./img/svg/hamburguer-menu.svg" alt="">
</div>
</div>
</nav>
<!-- fim do menu -->
<!-- Início do conteúdo principal -->
<main>
<div class="intro-bg">
<div class="intro container">
<h1>“Gostosa, nutritiva e deliciosa”</h1>
<span>A chave da felicidade está na coxinha</span>
<div class="intro-img-center">
<img src="./img/coxinha-intro-center.png" alt="foto de coxinha" width="250" height="300">
</div> <!--intro-img-center-->
</div><!--intro container-->
<img class="coxinha-left" src="./img/coxinha-intro-left.png" alt="foto de coxinha desfocada" width="250" height="520">
<img class="coxinha-right" src="./img/coxinha-intro-right.png" alt="foto de coxinha desfocada" width="250" height="520">
</div>
</main>
<!-- Fim do conteúdo principal -->
<!-- Início seção da página (momentos) -->
<section class="momento container" id="momentos">
<h2>Perfeito em qualquer momento do dia</h2>
<div class="momento-itens momento-trabalho js-scroll">
<div class="momento-trabalho-info">
<h3>Depois do Trabalho</h3>
<p>Bateu a fome depois de um longo dia de trabalho? A coxinha é a solução para seus problemas.</p>
</div> <!--momento-trabalho-info-->
<div class="momento-trabalho-img">
<img src="./img/momento-trabalho.jpg" alt="foto de coxinha">
</div> <!--momento-trabalho-img-->
</div> <!--momento-trabalho-->
<div class="momento-itens momento-happy js-scroll">
<div class="momento-happy-info">
<h3>No happy Hour</h3>
<p>Nada melhor que uma coxinha acompanhada de uma cerveja para bater papo depois de um longo dia de trabalho.</p>
</div> <!--momento-happy-info-->
<div class="momento-happy-img">
<img src="./img/momento-happy.jpg" alt="foto de coxinha">
</div> <!--momento-happy-img-->
</div> <!--momento-happy-->
<div class="momento-itens momento-aniv js-scroll">
<div class="momento-aniv-info">
<h3>Nos aniversários</h3>
<p>Aniversário sem coxinha não é aniversário, não é mesmo? <br>
Uma coxinha, acompanhada de um refrigerante, hmmmm.</p>
</div> <!--momento-aniv-info-->
<div class="momento-aniv-img">
<img src="./img/momento-aniv.jpg" alt="foto de coxinha">
</div> <!--momento-aniv-img-->
</div> <!--momento-aniv-->
</section> <!--momento container-->
<!-- Fim da seção da página (momentos) -->
<!--Início da seção de depoimentos feito com BOOTSTRAP-->
<section class="container-fluid" id="depoimento">
<div class="row text-dark contato-boot">
<div class="col-lg-7 p-0">
<div id="carouselCidades" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselCidades" data-slide-to="0" class="active"></li>
<li data-target="#carouselCidades" data-slide-to="1"></li>
<li data-target="#carouselCidades" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="./img/depo1.jpg" width="600" height="500" alt="California">
<div class="carousel-caption">
<h3 class="display-4">Rodrigo Antunes</h3>
<p>"Nunca comi algo tão bom!!!"</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/depo2.png" width="600" height="500" alt="Paris">
<div class="carousel-caption">
<h3 class="display-4">Jeferson Andrade</h3>
<p>"Só queria a receita 😞"</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="./img/depo3.png" width="600" height="500" alt="Dublin">
<div class="carousel-caption">
<h3 class="display-4">Camila Souza</h3>
<p>"Estou viciada! 🤩🤩🤩"</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselCidades" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselCidades" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
</div>
<div class="col-lg-5 p-4 align-self-center">
<h2 class="display-6 mb-5">A melhor Coxinha do Brasil!!</h2>
<p class="lead text-dark">Quer saber mais? Mande uma mensagem abaixo que entraremos em contato</p>
<form>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Sua mensagem" aria-label="Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn" type="button" id="button-addon2">Quero saber mais</button>
</div>
</div>
</form>
</div>
</div>
</section>
<!--Fim da seção de depoimentos feito com BOOTSTRAP-->
<!-- Início da seção da página (FAQ - perguntas frequentes) -->
<section class="faq-bg js-scroll" id="faq">
<div class="faq container">
<h2>Perguntas Frequentes</h2>
<dl>
<dt>Posso comer a qualquer hora?</dt>
<dd>
Pode sim, inclusive pode muita gente come de café de manhã, alguns de almoço e até mesmo na janta.
</dd>
<dt>É realmente nutritiva?</dt>
<dd>
A coxinha leva todos os macros necessários (carboidrato, proteína e gordura) para o ser humano viver bem. A coxinha é feito de batata ou farinha de trigo, frango desfiado e mergulhado em óleo. <br>
Lembrando que ela é nutritiva, agora se é saudável...
</dd>
<dt>Exite uma opção vegana?</dt>
<dd>
Sim! Existe a opção com shimeji em vez de frango
</dd>
</dl>
</div>
</section> <!--faq-bg js-scroll-->
<!-- Início da seção da página (FAQ - perguntas frequentes) -->
<!-- Início do footer (rodapé) -->
<footer class="footer-bg">
<div class="footer container">
<img class="logo" src="./img/svg/logo.svg" alt="logo" width="200" height="55">
<div class="footer-contato">
<h1>CONTATO</h1>
<div class="footer-contato-img">
<a href="https://google.com"><img src="./img/svg/whats-footer.svg" alt=""></a>
<a href="https://www.linkedin.com/in/kevinmakotos"><img src="./img/svg/insta-footer.svg" alt=""></a>
<a href="https://linkedin.com/in/kevinmakotos"><img src="./img/svg/linkedin-footer.svg" alt=""></a>
</div>
</div>
<div class="footer-pag">
<h1>MAPA DO SITE</h1>
<ul>
<li><a href="privacidade.html">Termos e Condições</a></li>
<li><a href="#momentos">Quando Comer?</a></li>
<li><a href="#depoimento">Depoimento</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="https://www.ifood.com.br/busca?q=Coxinha&tab=1">PEDIR AGORA</a></li>
<li><a href="https://dribbble.com/shots/15089921-Potato-landing-Page">INSPIRAÇÃO</a></li>
</ul>
</div>
<span>Coxinha © Alguns direitos reservados </span>
</div>
</footer>
<!-- Fim do footer (rodapé) -->
<!-- Script js para Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Fim do Script js para Bootstrap -->
<!-- conexão com o JavaScript -->
<script type="module" src="./js/script.js"></script>
</body>
</html>