Estoy haciendo una pagina login y quiero que sea responsive.
Siguiendo un tutorial, a esa persona le queda asi
Peo yo siguiendo los pasos que indica me queda otra cosa totalmente distinta.
Queria saber si me podian ayudar a arreglar esto.
*, *::before, *::after{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
section {
width: 100vw !important;
height: 100vh !important;
padding: 60px !important;
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
}
.contenedor {
background: #fff !important;
width: 100% !important;
height: 100% !important;
position: relative !important;
display: flex !important;
box-shadow: 0 0 15px rgba(0,0,0,.7) !important;
overflow: hidden !important;
}
.contenedor_video {
position: relative !important;
width: 50% !important;
height: 100% !important;
}
.contenedor_video video{
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.contenedor_contenido {
position: relative !important;
display: flex !important;
width: 50% !important;
height: 100% !important;
justify-content: center !important;
align-items: center !important;
flex-direction: column !important;
}
.contenedor_error {
position: absolute !important;
bottom: -60px !important;
left: 0 !important;
background: #fa464f !important;
color: #fff !important;
width: 100% !important;
height: 60px;
text-align: center;
font-size: 1.2em;
transition: all .5s ease;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 5px rgba(0,0,0,.7);
}
.mostrar_error {
bottom: 0 !important;
}
.contenedor_formulario {
width: 50% !important;
}
.contenedor_contenido h2 {
color: #525252 !important;
font-weight: 500 !important;
font-size: 1.6em !important;
text-transform: uppercase !important;
margin-bottom: 20px !important;
border-bottom: 3px solid #082275 !important;
display: inline-block !important;
}
.input{
margin-bottom: 20px;
}
.input span{
font-size: 1em;
display: inline;
font-weight: 300;
letter-spacing: 1px;
}
.input input, .input button{
width: 100%;
padding: 12px 20px;
font-weight: 400;
border: 1px solid rgb(211, 210, 210);
font-size: 1em;
letter-spacing: 1px;
color: #575f63;
background-color: #f5f4f4;
border-radius: 20px;
}
.input button{
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,36,121,1) 36%, rgba(0,212,255,1) 100%);
border: none;
font-weight: 500;
cursor: pointer;
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
#loader {
width: 20px;
height: 20px;
border-radius: 100%;
border-top: 3px solid transparent;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
border-right: 3px solid #fff;
animation: girar .6s linear infinite;
display: none;
}
@keyframes girar{
from{
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media screen and (max-width: 768px){
section{
padding: 10px;
}
.contenedor_video{
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 100%;
}
.contenedor_contenido{
width: 100%;
height: 100%;
z-index: 3;
}
.contenedor_formulario{
width: 100%;
padding: 25px;
background: rgba(255, 255, 255, .9);
}
}
<section>
<div class="contenedor">
<div class="contenedor_contenido">
<div class="contenedor_formulario">
<h2>Iniciar Sesión</h2>
<form id="form_login" action="~/Home/VerificarIdentidad" method="post">
<div class="input">
<span>Usuario:</span>
<input type="text" class="usuario" name="username" required/>
</div>
<div class="input">
<span>Contraseña:</span>
<input type="password" class="contrasenia" name="password" required/>
</div>
<div class="input">
<button type="submit">
<div class="loader" id="loader">
</div>
<span class="titulo_boton">Ingresar</span>
</button>
</div>
</form>
</div>
</div>
<div class="contenedor_video">
<video autoplay loop muted>
<source src="https://www.multiradio.com.ar/wp-content/uploads/2020/01/multiradio_norlog.mp4#t=0,11" type="video/mp4"/>
</video>
</div>
<div class="contenedor_error">
<p>¡Ups! Parece que tus credenciales no son correctas . Inténtalo de nuevo.</p>
</div>
</div>
</section>
El @media
esta al final del archivo css. No creo que haga falta pasarles todo el código pero por las dudas se los dejo asi tambien lo pueden probar