O Futuro do CSS: Layouts Responsivos

O que é um site responsivo

Um site responsivo é como um camaleão. Ele muda e se adapta ao tamanho da tela que você está usando, seja um celular, tablet ou computador. Assim, ele sempre fica bonito e fácil de usar, não importa o aparelho.

Como ele pode ajudar a impulsionar seu negócio

Quando seu site é responsivo, mais pessoas conseguem navegar e comprar nele sem dificuldades. Isso significa que você pode ter mais clientes felizes, que vão querer voltar e comprar mais vezes.

Exemplos de uso

Imagine uma sorveteria online. Com um site responsivo, os clientes podem escolher e pedir seus sorvetes favoritos tanto pelo celular, enquanto estão na praia, quanto pelo computador, em casa.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorveteria Online</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <h1>Bem-vindo à Sorveteria Online!</h1>
</header>
<main>
  <section class="menu">
    <h2>Nossos Sabores</h2>
    <div class="flavors">
      <div class="flavor">Morango</div>
      <div class="flavor">Chocolate</div>
      <div class="flavor">Baunilha</div>
      <div class="flavor">Limão</div>
    </div>
  </section>
</main>
<footer>
  <p>© 2024 Sorveteria Online. Todos os direitos reservados.</p>
</footer>
</body>
</html>

CSS

/* Configurações gerais */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
text-align: center;
}

header {
background-color: #ff6f61;
color: white;
padding: 20px 0;
}

h1 {
margin: 0;
font-size: 2.5em;
}

main {
padding: 20px;
}

.menu h2 {
font-size: 2em;
color: #333;
}

.flavors {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.flavor {
background-color: #fff;
border: 2px solid #ff6f61;
border-radius: 10px;
padding: 10px;
width: 150px;
text-align: center;
font-size: 1.2em;
color: #ff6f61;
}

footer {
background-color: #ff6f61;
color: white;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
}

/* Responsividade */
@media (max-width: 768px) {
.flavors {
  flex-direction: column;
  align-items: center;
}
}

Call to Action para Minhas Redes Sociais

Curtiu a dica? Então siga nossas redes sociais para mais informações e truques que vão ajudar seu negócio a crescer! Estamos esperando por você!

Hashtags

#SiteResponsivo #DicasDeNegócio #SucessoOnline

GITHUB