Como hacer un Login Responsive.
Hola, tengo un codigo de un login y un register que estoy haciendo como proyecto para iniciar sesion o para registrarse, pero me gustaria hacerlo responsive y que quede adaptable para computadoras, tablets y celulares. El problema es que no se como hacerlo, ya que quizas hay que cambiar parte del codigo, modificar o agregar. Agradecería mucho la ayuda.
Así se ve en movil:
Me gustaría que en esta versión, la imagen desapareciera y solo quedara el login para ingresar el email y contraseña.
Código HTML:
<body> <section class="container"> <div class="content"> <div class="text">Bienvenido</div> <div class="text">de nuevo!</div> </div> <div class="content-form"> <div class="form-box login"> <form class="formulario"> <h3>Iniciar Sesion</h3> <div class="input-box"> <input type="email" name="email" id="email" class="entradas" placeholder="Email"> </div> <div class="input-box"> <input type="password" name="password" id="password" class="entradas" placeholder="Contraseña"> </div> <div class="checkbox"> <input type="checkbox" name="checkbox" id="checkbox"> <label for="checkbox">Recordarme</label> </div> <input type="submit" class="btn" value="Iniciar Sesion"> <p class="texto">¿No tenes una cuenta? Crea una <a href="registro.html">aquí</a>.</p> </form> </div> </div>
Código CSS:
*{ justify-content: center; align-items: center; padding: 0; margin: 0; font-family: 'DM Sans', sans-serif ; text-decoration: none; } :root{ --box-color: #e98b60; } body{ background-color:#e0e0e0 ; background-attachment: fixed; display: flex; } .container{ width: 1100px; height: 600px; border-radius: 5px; padding: 40px; position: absolute; top: 15%; background: url('img.jpeg') no-repeat; background-size: cover; background-position: center; box-shadow: 2px 2px 20px #0000006e; } .container .content{ /* position: absolute; */ top: 0; left: 0; width: 58%; height: 100%; color: white; font-size: 60px; font-weight: 600; margin-top: 80px; flex-direction: column; display: flex; align-items: flex-start; } .container .content-form{ position: absolute; top: 0; right: 0; width: calc(100% - 58%); height: 100%; background-color: #ffffff; border-radius: 0 5px 5px 0; } .content-form .form-box{ display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .form-box h3{ font-size: 2.5rem; text-align: center; margin-bottom: 10px; } .form-box .input-box{ position: relative; width: 19rem; height: 50px; border-radius: 5px; border: 1px solid #acacac; margin-bottom: 10px; padding: 0 0 0 25px; } .input-box input{ height: 100%; width: 100%; border: none; outline: none; background: transparent; font-size: 15px; color: black; } .btn{ width: 100%; height: 45px; background-color: var(--box-color); color: #ffffff; border: none; outline: none; border-radius: 4px; font-size: 16px; margin-top: 15px; cursor: pointer; transition: 0.3s; } p{ text-align: center; margin-top: 5px; } a{ color: var(--box-color); } .checkbox{ margin-top: 12px; outline: none; text-decoration: none; }