index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAFÉ</title>
<link rel="stylesheet" href="./style.css">
</head>
<header></header>
<body>
<section class="cafe">
<div class="container">
<div class="cafe-imagem">
<img src="./cafe.png" alt="Café">
</div>
<h1 class="cafe-titulo">Café Creme & Aroma</h1>
<p class="cafe-paragrafo">Um espaço criado para quem aprecia o sabor, o aroma e a delicadeza de um bom café.
Aqui, cada xícara é preparada com carinho, em um ambiente acolhedor e cheio de charme.
Sinta o aroma, aproveite o momento e desfrute da experiência.</p>
<div class="cafe-links">
<a class="cafe-links-pedido" href="https://facapedido.com.br">Faça seu pedido</a>
<a class="cafe-links-pedido" href="https://cardapio.com.br">Veja nosso cardápio</a>
</div>
<div class="cafe-links">
<h2 class="cafe-apresentacao">
Siga-nos nas redes sociais:
</h2>
<a class="cafe-links-pedido" href="https://www.instagram.com">Instagram</a>
<a class="cafe-links-pedido" href="https://www.facebook.com">Facebook</a>
<a class="cafe-links-pedido" href="https://whatsapp.com">WhatsApp</a>
</div>
</div>
</section>
<footer>
<p>Endereço: Rua da cafeína, 123. Araçatuba - SP</p>
<p>Telefone: (18) 1234-5678</p>
<p>Horário de funcionamento: Segunda a sexta-feira, 8h às 17h.</p>
<p>Sábados, 9h às 14h. Domingos, fechado.</p>
<p>© 2026 Café Creme & Aroma. Todos os direitos reservados.</p>
</footer>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
background: #f1ca8f;
color: #422102;
line-height: 1.6;
}
.container{
max-width: 900px;
margin: 0 auto;
padding: 1.5rem;
text-align: center;
}
.cafe {
padding: 3rem 1rem;
}
.cafe-imagem img {
width: 220px;
margin: 0 auto 1.5rem;
display: block;
}
.cafe-titulo {
font-size: 2.4rem;
margin-bottom: 1rem;
color: #422102;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.cafe-paragrafo {
max-width: 650px;
margin: 0 auto 2rem;
color: #5a2d03;
font-size: 1rem;
}
.cafe-links {
margin-bottom: 2rem;
}
.cafe-links:hover {
transform: scale(1.05);
transition: 0.2s ease;}
.cafe-links-pedido {
display: inline-block;
margin: 0.4rem;
padding: 0.7rem 1.6rem;
background-color: #f1bc6b;
color: #422102;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: 0.2s ease;
}
.cafe-links-pedido:hover {
background-color: #3b2405;
color: #dad4ce;
}
.cafe-apresentacao {
font-size: 1.2rem;
margin-bottom: 1rem;
color: #5a2d03;
}
footer {
background: #422102;
color: #f1ca8f;
padding: 2rem 1rem;
margin-top: 2rem;
}
footer p {
margin-bottom: 0.4rem 0;
font-size: 0.9rem;
text-align: center;
}
