Capítulo 26 Aula 02 – Versão mobile first da tela de login

Home › Fóruns › Desenvolvimento Web 2020 (HTML5+CSS3) › Capítulo 26 Aula 02 – Versão mobile first da tela de login

Visualizando 4 respostas da discussão
  • Autor
    Posts
    • 28 de julho de 2022 às 19:55 #98474
      Claudineia Barbosa dos Santos
      Participante

      Boa noite, estou montando o site conforme o Guanabara está ensinando, só as cores e a imagem que eu mudei. Mas seguindo passo a passo, a imagem não aparece de jeito nenhum no meu site, que é colocada no css. Alguém poderia me ajudar?

    • 8 de agosto de 2022 às 18:45 #98997
      Tutora Jessica
      Moderador

      Olá, Boa noite.
      Nos envie seu código para poder analisar 🖖

      • 9 de agosto de 2022 às 17:55 #99066
        Claudineia Barbosa dos Santos
        Participante

        <!DOCTYPE html>
        <html lang=”pt-br”>
        <head>
        <meta charset=”UTF-8″>
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
        <title>Login</title>
        <link rel=”stylesheet” href=”estilos/style.css”>
        <link rel=”shortcut icon” href=”Dtafalonso-Yosemite-Flat-Contacts.ico” type=”image/x-icon”>
        <link rel=”stylesheet” href=”estilos/media-query.css”>
        </head>
        <body>
        <main>
        <section id=”login”>
        <div id=”imagem”>

        </div>
        <div id=”formulario”>
        <h1>Login</h1>
        <p>Sejam bem-vindos(as)! Façam o login para o acesso da sua conta para atualização dos dados.</p>
        <form action=”login.php” method=”post”>

        </form>
        </div>
        </section>
        </main>
        </body>
        </html>

    • 9 de agosto de 2022 às 17:56 #99067
      Claudineia Barbosa dos Santos
      Participante

      @charset “UTF-8”;

      @media screen and (min-width: 768px) and (max-width: 992px) {
      selection#login {
      width: 90vw;
      }
      }

      section#login > div#imagem{
      float: left;
      width: 30%;
      height: 100%;
      }

      section#login > div#formulario{
      float: right;
      width: 70%;
      }

    • 9 de agosto de 2022 às 17:56 #99068
      Claudineia Barbosa dos Santos
      Participante

      @charset “UTF-8”;

      *{
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      padding: 0px;
      margin: 0px;
      box-sizing: border-box;
      }

      body, html{
      background-color: #8C5637;
      height: 100vh;
      width: 100vw;

      }

      main{
      height: 100vh;
      width: 100vw;
      position: relative;
      }

      section#login{
      background-color: white;
      width: 250px;
      height: 500px;
      overflow: hidden;
      border-radius: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.732);
      }

      section#login > div#imagem{
      background-color: #8C5637 url(../imagem/marrom.jpg) no-repeat ;
      background-size: cover;
      background-position: left bottom;
      height: 200px;
      display: block;
      }

      section#login > div#formulario{
      padding: 10px;
      display: block;
      }

    • 10 de agosto de 2022 às 09:50 #99117
      Tutora Jessica
      Moderador

      Olá Claudinéia,
      Tente substituindo o background-color, por somente background.

  • Autor
    Posts
Visualizando 4 respostas da discussão
  • Você deve fazer login para responder a este tópico.