-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
152 lines (120 loc) · 8.89 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Meu Café</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/cabecalho.css">
<link rel="stylesheet" href="css/principal.css">
<link rel="stylesheet" href="css/sobre.css">
<link rel="stylesheet" href="css/cardapio.css">
<link rel="stylesheet" href="css/localizacao.css">
<link rel="stylesheet" href="css/segredo.css">
<link rel="stylesheet" href="css/contato.css">
<link rel="stylesheet" href="css/rodape.css">
</head>
<body>
<header class="cabecalho">
<div class="cabecalho-conteudo">
<h1><img src="imagens/logo.png" alt="Logo do Meu Café" class="cabecalho-logo"></h1>
<nav class="cabecalho-menu">
<ul class="cabecalho-lista">
<li class="cabecalho-item"><a href="#sobre" class="cabecalho-link">sobre</a></li>
<li class="cabecalho-item"><a href="#cardapio" class="cabecalho-link">cardápio</a></li>
<li class="cabecalho-item"><a href="#localizacao" class="cabecalho-link">localização</a></li>
<li class="cabecalho-item"><a href="#segredo" class="cabecalho-link">segredo</a></li>
<li class="cabecalho-item"><a href="#contato" class="cabecalho-link">contato</a></li>
</ul>
</nav>
</div>
</header>
<main class="conteudo-principal">
<img src="imagens/banner.png" alt="Banner com texto em branco" class="conteudo-banner">
<section class="conteudo-sobre" id="sobre">
<h2 class="sobre-titulo">Meu Café</h2>
<p class="sobre-texto">Está cansado daquele mesmo pó de café vendido em qualquer supermecado? Nós também! Por isso criamos o “Meu Café”, que é simplesmente a melhor cafeteria!</p>
<p class="sobre-texto">Nós servimos o nosso público com um ambiênte personalizado, com um cheirinho delicioso de café, que pode ser sentido a quilômetros de distância.</p>
<p class="sobre-texto">Um atendimento Impecável, onde vocês, nossos clientes não irão esperar muito e nem receber café frio e sem graça.</p>
<p class="sobre-texto">E, por último e mais importante, temos o café em si, com um belo acomapanhante salgado ou doce. Possuímos o mais personalizado e delcioso café. Você irá tomar e se viciar!</p>
<img src="imagens/sobre.jpg" alt="Foto de uma cafeteria" class="sobre-imagem">
</section>
<section class="conteudo-cardapio" id="cardapio">
<h2 class="cardapio-titulo">Cardápio</h2>
<p class="cardapio-texto">Aproveite e conheça o nosso incrível cardápio!
</p>
<ul class="cardapio-lista">
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe-shake</h3>
<img src="imagens/coffe-shake.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Um delicioso milk-shake de café com chantily, chocolate e leite.</p>
</li>
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe Ice</h3>
<img src="imagens/coffe-ice.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Café feito com sorvete de creme, chcocolate amargo e leite.</p>
</li>
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe Monk</h3>
<img src="imagens/coffe-monk.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Um incrível pó de Café fortissimo com chantily por cima.</p>
</li>
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe Cookie</h3>
<img src="imagens/coffe-cookie.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Incrível café feito com chocolate, leite e biscoito batido.</p>
</li>
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe Mirna</h3>
<img src="imagens/coffe-mirna.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Café feito com biscoitos, chocolate, leite e chantily.</p>
</li>
<li class="cardapio-opcao">
<h3 class="cardapio-nome">Coffe Palace</h3>
<img src="imagens/coffe-palace.jpg" alt="Imagem do Coffe-shake" class="cardapio-imagem">
<p class="cardapio-descricao">Uma excelente mistura de café com leite, chatily e paçoca.</p>
</li>
</ul>
</section>
<section class="conteudo-localizacao" id="localizacao">
<h2 class="localizacao-titulo">Sejam bem-vindos!</h2>
<p class="localizacao-texto">E que tal nos visitar? Depois de ter lido sobre nós e se delicado com os olhos neste lindo cardápio, com certeza bateu a vontade nos conhecer. Então, seja bem-vindo.</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1837.2415802985324!2d-43.24068725364118!3d-22.932426614948973!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x997e1b4bfbdacd%3A0x4a4d38d7dbf91618!2sTijuca%2C%20Rio%20de%20Janeiro%20-%20State%20of%20Rio%20de%20Janeiro!5e0!3m2!1sen!2sbr!4v1656195456088!5m2!1sen!2sbr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="localizacao-mapa"></iframe>
</section>
<section class="conteudo-segredo" id="segredo">
<h2 class="segredo-titulo">Nosso Segredo</h2>
<p class="segredo-texto">Para fazer café e cappucino como nós é até que simples, mas é um simples que muita gente não faz e tentam ser como nós. Não basta só fazer o café, tem que servir da melhor forma, com a melhor bebida e um ótimo ambiênte. </p>
<p class="segredo-texto">Abaixo, temos um vídeo demonstrando e explicando como funciona essa tal “formula”, se é que existe uma.</p>
<iframe width="100%" height="450" src="https://www.youtube.com/embed/-cXWeytpBUY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="segredo-video"></iframe>
</section>
<section class="conteudo-contato" id="contato">
<form class="conteudo-formulario">
<legend class="formulario-titulo">Contato</legend>
<label class="formulario-texto" for="nome">Nome</label>
<input class="formulario-entrada" type="text" id="nome" required>
<img src="imagens/contato.jpg" alt="Imagem de um café formando a frase Good Morning" class="formulario-imagem">
<label class="formulario-texto" for="email">E-mail</label>
<input class="formulario-entrada" type="email" id="email" required>
<label class="formulario-texto" for="assunto">Assunto</label>
<input class="formulario-entrada" type="text" id="assunto" required>
<label class="formulario-texto" for="mensagem">Mensagem</label>
<textarea id="mensagem" class="formulario-mensagem" cols="30" rows="10" required></textarea>
<input class="formulario-botao" type="submit" value="Enviar Mensagem">
</form>
</section>
<footer class="conteudo-rodape">
<div class="rodape-redes-sociais">
<a href="https://github.com/LucasDevRJ" target="_blank">
<img src="imagens/github.png" alt="Logo do GitHub" class="rede-social-logo">
</a>
<a href="https://www.linkedin.com/in/lucas-pereira-de-lima-programador/" target="_blank">
<img src="imagens/linkedin.png" alt="Logo do Linkedin" class="rede-social-logo">
</a>
<a href="mailto: lucaspereiradelima2020@gmail.com" target="_blank">
<img src="imagens/gmail.png" alt="Logo do Gmail" class="rede-social-logo">
</a>
</div>
</footer>
</main>
</body>
</html>