*, *::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: rgba(255, 255, 255, 0.659) !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: absolute !important;
width: 100vh100% !important;
height: 100vw100% !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: 100% !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: 90% !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: #f5f4f489;
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;
}
}
*, *::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: rgba(255, 255, 255, 0.659) !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: absolute !important;
width: 100vh !important;
height: 100vw !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: 100% !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: 90% !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: #f5f4f489;
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;
}
}
*, *::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: rgba(255, 255, 255, 0.659) !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: absolute !important;
width: 100% !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: 100% !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: 90% !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: #f5f4f489;
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;
}
}
Te paso el codigo fíjate si es lo que te sirve, pero falta mas información en la pregunta, no se entiende que es lo que queres, que queres que cambie en los estilos al bajar la resolucion?
en el css tenés escrito !important en todas las reglas y eso no es buena practica, solo tenés que usarlo en casos puntuales donde queres que si o si se aplique cierta regla.
Esto ejecuta lo que esperabas, pero falta mas información. Solo le hice unos retoques.
<!DOCTYPE html>
<html lang="es">
<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">
<link rel="stylesheet" href="estilos.css">
<title>Document</title>
</head>
<body>
<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>
<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_error">
<p>¡Ups! Parece que tus credenciales no son correctas . Inténtalo de nuevo.</p>
</div>
</div>
</section>
</body>
</html>
CSS:
*, *::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: rgba(255, 255, 255, 0.659) !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: absolute !important;
width: 100vh !important;
height: 100vw !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: 100% !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: 90% !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: #f5f4f489;
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;
}
}
default