¡Bienvenido!
En este tutorial vamos a ver cómo hacer que un login modifique la posición de los elementos dependiendo del tamaño de la pantalla, sin más preámbulos ¡Comencemos!
- HTML
Primero comenzaremos con nuestra estructura de HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<main>
<section class="container">
<figure class="content-logo">
<img class="img-logo" src="./img/c6539229ad5c57c313d95711a1e676db-logo-hamburguesa-comida-r-aacute-pida-by-vexels.webp" alt="logo">
</figure>
<h1>Login</h1>
<p>Sign in to continue</p>
<form action="">
<label for="Username" class="Username-Contanier">
<samp>Name:</samp>
<input class="Username" id="Username" type="text" placeholder="Username" autocomplete="name" required>
</label>
<label for="Password" class="Password-Contanier">
<samp>Password:</samp>
<input class="Password" id="Password" type="password" placeholder="Password" required>
</label>
<input class="enviar" type="submit">
</form>
<div class="links">
<a href="">Forgot Password?</a>
<a href="">Sigup</a>
</div>
</section>
</main>
</body>
</html>
El nuestro navegador nos quedaria algo asi:
- Estilos
Listo, con la estructura terminada, comenzaremos a estilizar nuestro proyecto.
- Primero colocamos el selector general ( * ) y selector html por buenas practicas.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
- Al selector html le vamos a agregar lo siguiente:
html {
font-size: 62.5%;
height: 100%;
width: 100%;
}
- Ahora estilizaremos el resto los selectores y clases:
body {
margin: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url("./img/comida.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container {
width: 310px;
height: 500px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 10px;
}
.content-logo {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 10px;
}
.content-logo .img-logo {
width: 60px;
}
.container h1 {
font-size: 3.5rem;
text-align: center;
padding: 1.5rem;
}
.container p {
font-size: 2rem;
padding: 1.5rem;
text-align: center;
}
samp {
font-size: 1.5rem;
text-align: center;
}
.Username-Contanier{
display: block;
text-align: center;
padding: 10px;
margin: 10px;
}
.Username-Contanier samp {
display: block;
text-align: justify;
}
.Username {
font-size: 2rem;
border-radius: 10px;
text-align: center;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: white;
}
.Username:focus {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.Password-Contanier{
display: block;
text-align: center;
padding: 10px;
margin: 10px;
}
.Password-Contanier samp {
display: block;
text-align: justify;
}
.Password {
font-size: 2rem;
border-radius: 10px;
text-align: center;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
border: none;
color: white;
}
.Password:focus {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
.enviar {
width: 50%;
height: 30px;
border-radius: 10px;;
justify-content: center;
margin: 0 7.6rem;
background-color: rgba(1, 1, 1, 1);
border: none;
color: whitesmoke;
}
.links {
display: flex;
justify-content: space-around;
padding: 10px;
margin: 10px;
}
.links a {
text-decoration: none;
color: white;
font-size: 1.5rem;
margin: 20px;
}
En nuestro navegador quedaria algo asi
- Ahora colocaremos la linea de codigo que nos permitira modificar el estilo dependiendo del tamaño de pantalla del usuario. Ten en cuenta que tienes que crear un nuevo archivo de .css para referenciarlo, lo podemos hace dentro del nuestro archivo principal de .css, pero por buenas practicas se recomienda crear uno nuevo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./pc.css" media="screen and (min-width: 1020px)"> <!-- Esta linea nos permite realizar este cambio en los estilos -->
</head>
- Ahora aplicaremos un pequeño cambio en el nuevo archivo .css para ver si realmente funciona
.container {
position: relative;
left: -50%;
}
.content-logo {
position: absolute;
top: 28%;
left: 100%;
margin: 0 150px;
width: 100px;
}
.content-logo .img-logo {
width: 200px;
}
- Y listo nuestro proyecto se deveria de la siguiente forma:
¡Muchas gracias por leer!
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
