Article image

T

Thallya16/06/2024 17:14
Share

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

    Share
    Comments (0)