dos divs no me quedan del mismo tamaño al achicar la pantalla
Publicado por federica (2 intervenciones) el 17/08/2021 12:00:34
<!DOCTYPE html>
<html lang="en">
<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 | eFactura</title>
<link rel="stylesheet" type="text/css" href="style/estilo-login.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<section id="caja-principal">
<div id="contenedor01">
<div class="row">
<div class="col-74">
<p><strong>Facturar</strong><br>nunca fue <br><strong>más fácil</strong></p>
</div>
</div>
</div>
<div class="contenedor02">
<form action="/action_page.php">
<div class="row">
<div class="col-75">
<img class="logo" src="img/logo-sin-fondo.png" alt="Logo">
<p class="texto01"> <strong>Identificación de usuario</strong></p>
</div>
</div>
<div class="row">
<div class="col-75">
<input type="text" id="usuario" name="Usuario" placeholder="Usuario">
</div>
</div>
<div class="row">
<div class="col-75">
<input type="text" id="clave" name="Clave" placeholder="Clave">
</div>
</div>
<label>
<input class="check-box" type="checkbox" checked="checked" name="sameadr"> Recordar usuario
</label>
<div class="row">
<div class="col-76">
<input type="aceptar" value="Aceptar">
</div>
</div>
</form>
</div>
</section>
</body>
</html>
_______________________________css_______________________________________
*{
box-sizing: border-box; /*que el padding no sume*/
font-family: 'Montserrat', sans-serif;
}
html{
background: url(../img/fondo-pantalla.jpg) no-repeat center center fixed; /*para que no se repita, centrada sobre el eje vertica, centrada sobre el eje horizontal*/
background-size: cover; /* que cubra todo el espacio*/
background-attachment: fixed;
}
#caja-principal{
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.texto01{
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 1.8vh;
color: #009FE3;
width: 90%;
margin: 5%;
}
input[type=text], select, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 30px;
resize: vertical;
outline: none;
}
label {
display: inline-block;
width: 60%;
margin: 0% 20% 0% 10%;
font-size: 1.6vh;
}
input[type=aceptar] {
width: 100%;
background: #2E3132;
border: 1.5px solid #2E3132;
color: white;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
text-align: center;
}
input[type=aceptar]:hover {
opacity:1;
border: 1.5px solid rgb(0,160,226);
color: #009FE3;
}
#contenedor01 {
margin:0% 0% 0% 25%;
width: 50vw;
height: 60vh;
background: url(../img/manos02.jpg) no-repeat;
background-size: cover;
border-top: 8px solid #009FE3;
border-radius: 0px 0px 0px 80px;
padding:2.5% 0px 0px 2.5%;
color: #ffffff;
font-size: 6vh;
}
.contenedor02 {
margin:0% 25% 0% 0%;
background-color: #ffffff;
width: 50vw;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.col-25 {
float: left;
width: 25%;
}
.col-75 {
width: 80%;
margin: 0% 10% 0% 10%;
}
.col-76 {
width: 80%;
margin: 0% 10% 0% 10%;
padding-top: 35%;
}
.logo{
width:60%;
margin: 5% 20% 0% 20%;
}
/* ___________Caja check box__________ */
.check-box{
outline: none;
flex-direction: row;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
margin-bottom: 20px;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) { .body{
width: 50%;
margin-top: 500px;
}
}
Valora esta pregunta
0
