Olá, Fernando! Como vai?
Seja muito bem-vindo ao fórum! Parabéns por realizar a entrega do projeto Cafe da Silva. O texto escolhido para a introdução ficou excelente, transmitindo perfeitamente aquela atmosfera acolhedora, aconchegante e convidativa que uma boa cafeteria deve ter.
O desafio de criar um layout sem scroll (rolagem) é um dos momentos mais importantes no aprendizado de CSS. Ele exige que o desenvolvedor mude a forma de pensar o design: em vez de deixar a página crescer livremente para baixo, nós precisamos transformá-la em uma "caixa fechada" que se adapta perfeitamente ao tamanho exato da tela do usuário (seja um monitor grande ou a tela de um notebook).
Para te ajudar a consolidar essa estrutura e garantir que o seu layout fique fixo, sem criar aquelas barras de rolagem indesejadas, preparei um guia visual de como os elementos devem se comportar e o código estrutural para o seu projeto.
A Anatomia de um Layout Sem Scroll
Para travar a tela e distribuir o seu texto do Cafe da Silva de forma elegante, nós usamos o Flexbox direcionado como uma coluna. O segredo está em dizer para o navegador que o corpo da página (body) tem exatamente a altura da janela de visualização do usuário:
Estrutura HTML sugerida para o seu texto:
Para que o CSS funcione perfeitamente, o ideal é envelopar o seu conteúdo em tags semânticas estruturadas:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Cafe da Silva</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="cabecalho">
<h1>Cafe da Silva</h1>
</header>
<main class="conteudo-principal">
<p class="texto-introducao">
Bem-vindo ao Cafe da Silva, onde o aroma do café fresco e o sabor autêntico se encontram para criar uma experiência única. Nosso café é cuidadosamente selecionado e torrado para garantir a melhor qualidade em cada xícara. Venha desfrutar de um ambiente acolhedor e relaxante enquanto saboreia nossas deliciosas bebidas e acompanhamentos. Esperamos vê-lo em breve no Cafe da Silva!
</p>
</main>
<footer class="rodape">
<p class="frase-efeito">Luzes quentes, cheiro de café fresco e um ambiente tranquilo para transformar pequenos momentos em boas lembranças.</p>
</footer>
</body>
</html>
O Segredo do CSS para Eliminar a Rolagem:
Crie o seu arquivo style.css aplicando as regras abaixo. Preste especial atenção nas propriedades height: 100vh; e overflow: hidden;, elas são as grandes responsáveis por "zerar" o scroll:
/* Limpa as margens padrão do navegador */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* Força o body a ter exatamente a altura da tela do usuário */
height: 100vh;
/* Garante que se algo passar do limite, o navegador não crie barras de rolagem */
overflow: hidden;
/* Configura o Flexbox na vertical */
display: flex;
flex-direction: column;
font-family: 'Arial', sans-serif;
background-color: #f4f1ea; /* Tom de fundo pastel aconchegante */
color: #332211; /* Tom de marrom escuro para leitura */
}
.cabecalho {
padding: 20px;
text-align: center;
background-color: #3c2f2f; /* Marrom café */
color: #fff;
}
.conteudo-principal {
/* Faz essa parte central ocupar todo o espaço restante da tela */
flex: 1;
/* Centraliza o texto verticalmente e horizontalmente na tela */
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
}
.texto-introducao {
max-width: 600px;
font-size: 1.2rem;
line-height: 1.6;
text-align: center;
}
.rodape {
padding: 20px;
background-color: #e6dfd3;
text-align: center;
font-style: italic;
border-top: 1px solid #d3c7b3;
}
Por que essa combinação funciona?
100vh (Viewport Height): Diz ao CSS que a altura da caixa do site deve ser exatamente igual a 100% da altura da tela que está renderizando a página.flex: 1 no Main: Diz para a seção de conteúdo expandir e empurrar o rodapé lá para a última linha da tela, distribuindo os textos de forma harmoniosa.
Você deu um passo excelente organizando a cópia do seu site. Colocando essa estrutura CSS em prática, a sua página do Cafe da Silva vai parecer um aplicativo moderno em tela cheia!
Continue com esse foco e ótima continuação nos estudos de Flexbox!
Espero que possa ter lhe ajudado!
