joaovictorandr
-
Posts
1 -
Cadastrado em
-
Última visita
-
CSS Não estou conseguindo utilizar text align: start
joaovictorandr postou um tópico em Web e banco de dados
Estou tentando fazer a tela de login da netflix, queria saber como utilizar na class:titulo, o text-align: start, em vez de ter que usar padding-right. <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Login Netflix</title> </head> <body> <section class="tela__login"> <div class="login"> <div class="titulo"> <p>Entrar</p> </div> <form> <input class="container__login" type="text" name="nome" placeholder="Email ou número de telefone"> <input class="container__login" type="password" name="senha" placeholder="Senha"> <input class="container__botao__entrar" type="submit" value="Entrar"> </form> <p class="lembre">Lembre-se de mim<a href="#" class="link">Precisa de ajuda?</a></p> <p class="novo">Novo por aqui?<a href="#" class="link__l">Assine agora</a></p> <p class="esta">Esta página é protegida pelo Google reCAPTCHA para garantir que você não é um robô.<a href="#" class="link__link">Saiba mais</a></p> </div> </section> </body> </html> :root{ --branco-principal: #FFFFFF; --vermelho-principal: #E50914; --cinza-escuro: #333333; --cinza-claro: #8C8C8C; } * { margin: 0; padding: 0; } body{ /* background: url(img/fun2.png); */ background-size: cover; background-position: center; background-attachment: fixed; } .tela__login { display: flex; justify-content: center; align-items: center; height: 100vh; } .login { display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.9); border-radius: 3px; width: 355px; height: 550px; padding: 35px; } .titulo{ color: var(--branco-principal); font-size: 30px; padding-right: 227px; margin-bottom: 20px; } .login form{ display: flex; width: 85%; flex-direction: column; } .container__botao__entrar{ color: var(--branco-principal); background-color: var(--vermelho-principal); border: none; cursor: pointer; border-radius: 8px; margin-top: 20px; padding-left: 10px; outline: none; border: none; height: 45px; } .container__login{ border-radius: 8px; margin-top: 10px; padding-left: 10px; outline: none; margin-top: 10px; border: none; height: 45px; background-color: var(--cinza-escuro); } .input::placeholder{ color: white; } .lembre{ color: var(--cinza-claro); font-size: 14px; display: flex; gap: 95px; margin-top: 10px; } .link { text-decoration: none; color: var(--cinza-claro); } .link__link{ text-decoration: none; } .novo{ color: var(--cinza-claro); margin-top: 80px; display: flex; gap: 5px; justify-content: start; } .esta{ color: var(--cinza-claro); } .link__l{ text-decoration: none; color: var(--branco-principal); }
Sobre o Clube do Hardware
No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais
Direitos autorais
Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais
