Maquetación de la pantalla de login: Estilización con CSS

Yo estoy haciendo un proyecto personal, mi login se ve así (PD: Ignoren la imagen xD es una mientras hago los diseños finales xD):

Si estoy usando bien el git, el archivo version pokemon xd, lo estoy subiendo ah github

En VSCode hay una extension llamada HTML to CSS autocompletion, sirve mucho para no estar copiando y pegando las clases, ya que te da un autocompletado de clases en tu archivo CSS:
https://marketplace.visualstudio.com/items?itemName=solnurkarim.html-to-css-autocompletion

El mio es asi! Del 1 al 10 cuanto le dan?

No entiendo porque no separo el css desde un comienzo 😕

Hice un clon de la pagina de inicio de sesion de facebook ! y monte un pequeño script para grabe las contraseñas y aparezcan en consola (super tonto). Lo importante es aplicar lo aprendido .

Este es mi resultado, jugando un poquito con css. Estilo Nier Automata

¡Qué buena clase!

yo estoy aplicándolo a un proyecto personal. Un buscador de gatitos JAJAJA

Buenas comparto como va quedando mi inicio de sesión

un saludo

Never Give Up
BpM

Espero que a alguien le pueda servir, tiene algunas modificaciones.

Repositorio: https://github.com/tafnesj/Platzi-video
Deploy: https://tafnesj.github.io/Platzi-video/

Estaria bueno que , como en todos los cursos de Platzi , a este tmb en el tab “Archivos y enlaces” suban lo que se hizo cada clase , incluyendo la imagenes . Perdi mucho tiempo buscando las imagenes de twittter y google

Esta pagina sirve para hacer los gradientes, ayuda mucho en cuanto a la dirección que queremos que vaya, los colores,etc.
https://mycolor.space/gradient

SI el padding era arriba abajo xq coloco
0px 30px
si el primero se refiere a ARRIBA Y ABAJO
osea debio ser asi
30px 0px

Quería mostrarles mi landing page.

Me siento orgulloso de ella

Para generar ese efecto de vidrio en el login les recomiendo la página de glassmorphism te facilita mucho la creación de este efecto que yo personalmente uso mucho. 😁
.

![](

No entendí muy bien la propiedad min-heigth:calc(100vh-200px);
Alguien me podría explicar por favor

Me esta sirviendo bastante la documentacion de css tricks sobre flexbox para entender este curso

😃

Utilicé íconos distintos a los proporcionados en la clase, estos tienen una resolución nativa de 800x800 px aproximadamente. Por lo tanto tuve que modificar sus atributos en el archivo CSS de la siguiente forma:

.login__container--social-media > div img {
	width: 32px;
}

Una de las recomendaciones en el Curso de Adobe XD es utilizar proporciones que sean múltiplos de 8 en elementos gráficos.

Avance:

Así me quedo la tarea del registro xd se ve pequeño porq esta al 60% para q se vea todo uu

Codigo css

    margin: 0px;
    padding: 0px;
}
body{
    background-color: #0c041d;
    font-family: 'Muli', sans-serif;

    
}
.header{
    width: 100%;
    height: 80px;
    background: linear-gradient(black,#0c041d);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header__img{
    width: 200px;
    height: 80px;
    
    margin-left: 10px;
}
/*INICIO DEL REGISTER*/
.registrer{
    background: linear-gradient(#0c041d,black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 30px;
    min-height: calc(100vh - 200px);
}
.registrer_container{
    background-color:rgba(255, 255, 255,0.1) ;
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 700px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.registrer h2{
    display: flex;
    font-size: 40px;
    
}

.registrer__container--form{
    display: flex;
    flex-direction: column;
}

.registrer__container--form label{
    font-size: 14px;
}

.input{
    background-color: transparent;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 2px solid white;
    font-family: 'Muli', sans-serif;
    margin-bottom: 20px;
    padding: 0px 20px;
    outline: none;
    height: 50px;
}
::placeholder{
    color: white;
    font-size: 14px;
}

.button{
    border: transparent;
    background-color: rgba(225, 225, 225, 0.1);
    color: white;
    font-family: 'Muli', sans-serif;
    cursor: pointer;
    border-radius: 25px;
    font-size: 16px;
    letter-spacing: 1px;
    height: 50px;
}

.button:hover{
    transform: scale(1.1);
    transition: 400ms all;
}


.registrer__container--social-media > div{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

.registrer__container--social-media>div>img{
    width: 30px;
    margin-right: 10px;
}






.footer{
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
    background: black;

}
.footer a{
    color: white;
    cursor: pointer;
    font-family: 'Muli', sans-serif;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
}
.footer a:hover{
    text-decoration: underline;
}

Excelente clase!! Definitivamente una de las mejores maestras en platzi.

La propiedad flex-direction: column; en .login no tiene ninguna utilidad puesto que el único hijo de .login es .login__container

Mucho mas fácil tener el html y css separados.

Por si alguien no es muy bueno eligiendo colores para los degradados, aquí os dejo un recurso.

ui gradients

Como una buena práctica es recomendable colocar las propiedades de nuestra clase de manera alfabética.

Así se va viendo:)

Debio empezar desde el inicio la parte de separar los estilos con la parte del contenido 😦

Cuando se está aprendiendo, es mejor tener el css y el html en un mismo archivo, para entenderlos más fácil. Pero lo mejor es tenerlos separado desde un principio al iniciar cualquier proyecto.

Esta clase me gustó harto. El uso del Flex fue buenísimo aunque me tocará practicar más con Frog jaja

considero que el color, tamaño y tipo de fuente podemos colocar los valores por defecto en

* {
    color: #FFFFFF;
    font-family: 'Muli', sans-serif;
}

/* o tambien puede ser aqui */
body {
    background-color: #272822;
    color: #FFFFFF;
    font-family: 'Muli', sans-serif;
}

eso nos ayuda con algunos estilos muy básico pero el tamaño del css seria más corto

Excelente clase y lo que se aprendió es muy util:
Degredado de color: background:l linear-gradient ( color1 , color2);
efecto de iluminacion: background-color: rgba (255,255,255,0.1);

Me gustan mas los colores oscuros pero creo que debo de cambiarlo, por accidente los estilos de los labels anteriores se agregaron a este

Listo

He realizado un diseño diferente al del curso

Listo ✔

Hay algunos cambios en el código porque intenté replicar el diseño antes de ver la clase y luego si lo terminé al 100%.

HTML

<!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">
    <link rel="stylesheet" href="./mobile-Styles.css">
    <title>Document</title>
</head>

<body>
    <header class="header">
        <img class="header__img" src="./images/logo-platzi-video-BW2.png" alt="logo de platzi vídeo">
    </header>
    <main>
        <section class="section-login">
            <div class="login">
                <h2 class="login-title">Iniciar sesión</h2>
                <form class="login-form" action="">
                    <input class="input-text" type="text" name="email" id="email" placeholder="Correo">
                    <input class="input-text" type="password" name="password" id="password" placeholder="Contraseña">
                    <button class="button">Iniciar sesión</button>
                    <div class="login__remain-forget">
                        <label class="checkbox" for="remain">
                            <input type="checkbox" name="remain" id="remain">
                            <span>Recuérdame</span>
                        </label>
                        <a href="/">Olvidé mi Contraseña</a>
                    </div>
                </form>
                <section class="login__social-media">
                    <div class="social-media">
                        <img class="icon" src="https://icon-library.com/images/google-g-icon/google-g-icon-9.jpg"
                            alt="google">
                        <span>Inicia Sesión con Google</span>
                    </div>
                    <div class="social-media">
                        <img class="icon"
                            src="https://secureservercdn.net/192.169.221.188/7d7.5b1.myftpupload.com/wp-content/uploads/2014/10/Twitter_logo_white.png?time=1597441252"
                            img class="icon" src="" alt="twitter">
                        <span>Inicia Sesión con Twitter</span>
                    </div>
                </section>
                <p>No tienes ninguna cuenta <a href="/">Regístrate</a></p>
            </div>
        </section>
    </main>
    <footer class="footer">
        <a href="/">Términos de uso</a>
        <a href="/">Declaración de privacidad</a>
        <a href="/">Centro de ayuda</a>
    </footer>
</body>

</html>

CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --purple: #5E1DFC;
    --violet: #ab88ff;
    --purple-light: #8f57fd;
    --green: #21C08B;
    --yellow: #e6af2e;
}

html{
    font-size: 62.5%;
    font-family: 'Mulish', sans-serif;
    color: white;
    background: var(--green);
}

main{
    background: linear-gradient(var(--green), var(--violet));
}

.header{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

img{
    max-width: 100%;
}

h2{
    font-size: 20px;
}

a{
    color: aliceblue;
    text-decoration: none;
    font-weight: bold;
}

a:hover{
    text-decoration: underline;
}

.header__img{
    width: 200px;
    margin-top: 8px;
    margin-left: 10px;
}

.section-login{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 150px);
}

.login{
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 1px 4px 27px 0px rgba(0,0,0,0.54);
    border-radius: 40px;
    border: 3px solid white;
    padding: 20px;
    width: 400px;
    height: 600px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.login-form{
    margin: -50px 0px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.login__remain-forget{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icon{
    width: 15px;
}

.input-text{
    background: none;
    border: none;
    padding: 15px;
    color: white;
    
    border-bottom: 3px solid white;
    outline:none
}


.input-text::placeholder{
    color: white;
}

.button{
    border-radius: 30px;
    border: none;
    padding: 12px 15px;
    
    color: white;
    background: rgba(255,255,255,0.3);
}

.login__social-media{
    display: flex;
    height: 100px;
    flex-direction: column;
    justify-content: space-evenly;
}
.footer{
    background: var(--violet);
    display: flex;
}

.social-media{
    display: flex;
    align-items: center;
}

.social-media span{
    margin-inline-start: 5px;
}

.checkbox{
    display: flex;
    align-items: center;
}

.checkbox span{
    margin-inline-start: 5px;
}

.footer *{
    padding: 13px;
    margin-inline: 10px;
    font-size: 12px;
}

Combinador hijo / child >

• Este selector de combinación de elementos hijo se representa con el símbolo (mayor que) >

• Permite seleccionar solos aquellos elementos que son hijos directos de selector que indiquemos.

Clase Platzi Combinadores: Hijo y Descendiente

Flexbox Layout: Provee una manera más eficiente de diseñar, distribuye la cantidad de espacio entre items in un contenedor, incluso cuando el tamaño es desconocido o dinamico. Un contenedor flex expande los items para llenar el espacio disponible o encojerlos para evitar overflow.

Align-items: define el compotamiento por defecto de como los items flex son dispuestos a lo largo del eje transversal.

display: flex;
align-items: center

Para no colocar tantas veces color: white; en el CSS, lo puedes poner una sola vez en el body y ya se le aplica a todo el documento.

De esta manera optimizamos un poco el código del CSS.

Soy súper rookie en esto del front end (y en la programación en general) siendo el segundo curso que tomó me gustaría que explicaran detalle a detalle de donde salen las líneas de código que ya tienen precargadas <link href> Perdón pero voy lento y me esta agradando el curso solo que siento que van un poco rápido.

.login{
    background: linear-gradient(#0B9ED9, #F25CA2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 30px;
    min-height: calc(100vh - 200px);
}
.login__container{
    background-color: rgba(255,255,255,255,0.1);
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 700px;
    width: 300px;
}
.login__container--form{
    display: flex;
    flex-direction: column;
}
.login__container--form label{
    font-size: 14px;
}
.login__container--remember-me{
    color: white;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.login__container--remember-me a{
    color: white;
    font-size: 14px;
    text-decoration: none;
}
.login__container--remember-me a:hover{
    text-decoration: underline;
}
.login__container--social-media > div{
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}```

Coloque todo el codigo junto y al usar bem si que todo es mas fácil sobre todo con los --modify porque puedo cambiar los colores facilmente

     body {
        margin: 0px;
        font-family: 'Muli', sans-serif;
        background-color: #2ED4F5;
           }
    .header {
        align-items: center;
        background-color: #2ED4F5;
        color: white;
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
   .header__img {
       width: 200px;
      
       margin-left: 30px;       
    }
    .login {
        background: linear-gradient(#90D776, #76D7BD);
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 0px 30px;
        min-height: calc(100vh - 200px);

    }
    .login__container {
        background-color: rgba(6, 67, 199, 0.1);
        border: 2px solid white;
        border-radius: 40px;
        color: white;
        padding: 60px 68px 40px;
        min-height: 700px;
        width: 300px;
    }
    .login__container--form {
        display: flex;
        flex-direction: column;
    }
    .login__container--form label{
        font-size: 14px;
    }
    .login__container--remenber-me {
        color: white;
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }
    .login__container--remenber-me a {
        color: white;
        font-size: 14px;
        text-decoration: none;
    }
    .login__container--remenber-me a:hover {
        text-decoration: underline;
    }
    .login__container--social-media >div {
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 10px;
    }```

No se me extiende el fondo transparente del login solo me llega hasta recuerdame, como hago?

Cada vez más emocionado! Antes era ~como chino todo el CSS

Va quedando muy cool

https://github.com/AngieGarcia1989/Frontend_developer/commit/00341972d060a8e00ea04e35fff0b1e2c340fc6b super chevere

Una apreciación personal sin ánimo de crítica(Me interesa saber las distintas opiniones al respecto así que comenten): Está bien que uno puede pausar el vídeo para ir haciendo cada paso del proceso; sin embargo, me parece que igual va demasiado rápido en explicaciones que me parecen clave. Ejemplo: cuando dijo lo de align-items y Justify content en el archivo Styles.css líneas 22 y 23. En mi opinión dijo muy de afán para que servía cada uno.
PD: En general el curso va súper, sólo he notado esto que acabo de opinar a través de todo el curso.
Happy coding a todos!

Sobre el la unidad de medida vh

• 100vh, se podria traducir a 100% del viewport height (altura de la ventana), tambien existe el vw (viewport width) (ancho de la ventana)

Excelente forma de explicar cuando dices, ya tenemos el borde blanco, ahora nos falta un padding y redondear el borde.

Me gustaría que comentaras un poco más de esas operaciones matemáticas permitidas en css, como el calc().

Entonces
login__container--social-media > div{}
es lo mismo que
login__container--social-media div{}
???

Asi quedo 😃

Yo estoy siguiendo todos los videos, aunque derrepente me pierdo porque en unos se estaba haciendo una cosa y luego en otro otra xp

Hay algún curso donde enseñen a utilizar preprocesadores CSS?

El simbolo > nos ayuda a colocar como objetivo a los hijos directos en un elemento en particular.
Por ejemplo en la clase tenemos, ahi solo agarra a los div que vienen del padre .login__container–social-media

.login__container--social-media > div {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}

No entendi mucho para que sirve el min-height
alguien que me ayude

Acá dejo mi tarea de mi pantalla de login ya estilizada con los media query.
Clic acá y mira lo cool que quedó 😃

Qué cambio tan impresionante. A seguir.

Hecho

¡Este es mi login de mi proyecto personal!

Este es mi trabajo. ahi vamos

Así va quedando esto

Hola Profe!

Muy bueno el curso! tendrás los archivos en XD, PSD o AI voy haciendo contigo pero me gusta ir experimentando otras formas.

Gracias!

Voy obteniendo soltura con flex.
Me imagino como tiene que quedar alineado, y vienen a la mente las distintas propiedades para el contenedor flex

Atajo de teclado: Ya que veo que este archivo tiene más comentarios en el código.
Para que tengan que hacer todos los símbolos del comentario en Visual Studio code: Seleccionan lo que quieren comentar y le dan CTRL+K+C.
Para “Descomentar” CTRL+K+U

View Height se refiere al tamaño de visualizacion del contenido de forma vertical, de ahi height que es altura. Lo mismo con vw (view weight) pero de forma horizontal.

tenia la duda de porque no se veía igual mi diseño al de la profesora, pero quite comente esto y ahora se ve igual:

.login__container{
    background-color: rgba(255,255,255,0.1);
    border:2px solid white;
    border-radius:40px;
    color:white;
    padding:60px 68px 40px;
    min-height:700px;
    /*width:300px;*/
}

practicando ando…
he aquí mi login… ya casi

Aqui un pequeño tip, si quieren central elementos simplemente se lo hace de la siguiente manera usando grid

/* display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; */

  display: grid;
  place-items: center;

En el curso de Programación Básica nos enseñan que el CSS debe estar en un archivo aparte y no en el HTML. Sin embargo en este curso no hacen eso hasta la clase #31.

Pienso que si nos quieren enseñar buenas prácticas deberían aplicar esas buenas prácticas desde el inicio de todos los cursos, no hacerlo a mitad del curso porque puede generar confusión en los estudiantes.

Segun Freddy en el curso basico de programcacion, el Css va en un archivo diferente desde el principio, aqui en la clase 31 lo separa asi no mas y a mi no me queda, no se donde esta el error. 😢

asi vamos hasta el momento!

<!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">
    <link rel="stylesheet" href="./src/assets/styles/registro.css">
    <title>Registro</title>
</head>

<body>
    <header>
        <header class="header">
            <img class="header__img" src="./src/assets/static/logo-platzi-video-BW2.png" alt="">
        </header>
    </header>


    <div class="register__container">
        <form class="register__container--form">
            <h2>Resgístrate</h2>
            <input type="text" class="input" placeholder="Nombre">
            <input type="email" class="input" placeholder="Correo">
            <input type="password" class="input" placeholder="Contraseña">
            <button class="button">Registrarme</button>
            <div class="singIng__container">
                <a href="">Iniciar sesión</a>
            </div>
        </form>


    </div>

    <footer class="footer">
        <div class="footer__link"><a href="">Terminos de uso</a></div>
        <div class="footer__link"><a href="">Declaración de privacidad</a></div>
        <div class="footer__link"><a href="">Centro de ayuda</a></div>
    </footer>
</body>

</html> 


body {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Mulish', sans-serif;
    background-repeat: round;
}

header {
    width: 100%;
    height: 100px;
    background: #21C08B;
    display: flex;
    justify-content: space-between;
}

.header__img {
    width: 200px;
    height: 60px;
    margin: 10px 0px 0px 8px;
}

.register__container {
    background: linear-gradient(#21C08B, #AB88FF);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.register__container--form {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    border: 1px solid white;
    border-radius: 20px;
    padding: 30px 40px;
    background: rgb(93, 155, 246);
    background: linear-gradient(0deg, rgba(93, 155, 246, 0.1) 10%, rgba(49, 250, 76, 0.1) 100%);
    margin-bottom: 20px;
}

.register__container--form h2 {
    color: white;
    font-size: 20px;
}

.input {
    margin: 2px 0px;
    padding: 10px 20px;
    border-top: 0px;
    border-left: 0px;
    border-bottom: 1px solid white;
    border-right: 0px;
    outline: none;
    border-radius: 10px;
    background-color: transparent;
    height: 50px;
    color: white;
}

::placeholder {
    color: white;
}

.singIng__container {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
}

.singIng__container a {
    text-decoration: none;
    color: white;
    font-size: 12px;
}

.button {
    background: transparent;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px solid white;
    margin-top: 10px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.footer {
    font-size: 14px;
    display: flex;
    flex-direction: row;
    height: 319px;
    width: 100%;
    background: #AB88FF;
}

.footer div:first-child {
    margin-left: 12px;
}

.footer div {
    display: flex;
    flex-direction: column;
    padding-top: 280px;
    margin-bottom: 0px;
    margin-top: 0px;
}

.footer a {
    color: white;
    font-size: 12px;
    margin-right: 10px;
    text-decoration: none;
}

![](

Me gusta el efecto traslucido y desvanecido de la aplicación

Buen aporte Gracias

Me esta quedando muy lindo.

Ahi vamos

https://codepen.io/dashboard/

Asi va quedando al principio se me dificultaba el acomodo pero con la practica va desarrollando la logica de como fucniona la maquetacion con CSS

Hola a todos!
Creo que se requiere una revisión del curso. He estado revisando más fuentes sobre el tema de BEM y creo que en los ejemplos no se está haciendo uso correcto de la nomenclatura; lo comento para los casos:

• .login_container–form

• .login_container–rememberme

• etc.

el – hace referencia a cambios de estado de los elementos, los famosos modificadores y creo que en los ejemplos no se están empleando bien, los están usando para otros elementos dentro de la anidación de los mismos.

Les comparto algunas fuentes donde lo explican de forma sencilla:

• https://css-tricks.com/bem-101/

• https://9elements.com/bem-cheat-sheet/

• https://www.smashingmagazine.com/2018/06/bem-for-beginners/

el curso esta muy interesante y me enseño muchas cosas nuevas sobre css, pero considero que esta algo desordenado en la forma en que enseña su contenido, puede llegar a confundir

Mi código 😄

HTML

<!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">
    <link rel="stylesheet" href="styles/login_style.css">
    <link rel="stylesheet" href="styles/style.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
        <div class="header__image-div">
            <figure class="image-container image-container--header-image">
                <img class="header__image" src="images/logo-platzi-video-BW2.png" alt="logo">
            </figure>
        </div>
    </header>
    <main class="login">
        <section class="login__container">
            <form class="login__form">
                <h1 class="login__main-title">Inicia sesión</h1>
                <input class="login__input--email login__input" type="email" id="email" autocomplete="email" placeholder="Correo">
                <input class="login__input--password login__input" type="password" id="password" autocomplete="current-password" placeholder="Contraseña">
                <input class="login__button" type="button" value="Iniciar sesión">
                <div class="login__remember-me">
                    <label class="login__label--recuerdame" for="checkbox">
                        <input class="login__checkbox" type="checkbox" id="checkbox">
                        <span class="login__remember-me-text">Recuérdame</span>
                    </label>
                    <a class="login__forgot-passw" href="#">Olvidé mi contraseña</a>
                </div>
            </form>
            <section class="login__social-med-login">
                <figure class="image-container image-container--login ">
                    <img class="login__image login__image--twitter" src="images/twitter_icon.png" alt="">
                    <a href="#">Iniciar sesión con Twitter</a>
                </figure>
                <figure class="image-container image-container--login">
                    <img class="login__image login__image--google" src="images/google_icon.png" alt="">
                    <a href="#">Iniciar sesión con Google</a>
                </figure>
            </section>
            <p class="login__text--noaccount">¿No tienes ninguna cuenta? <a class="login__link login__link--register" href=""> Regístrate</a></p>
        </section>
    </main>
    <footer class="footer">
        <ul class="footer__list-container">
            <li><a class="footer__link" href="#">Términos de Uso</a></li>
            <li><a class="footer__link" href="#">Declaración de Privacidad</a></li>
            <li><a class="footer__link" href="#">Centro de Ayuda</a></li>
        </ul>
    </footer>
</body>
</html>

css

.login {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 5rem;
}

.login * {
  color: white;
}

.login__container {
  background-color: rgba(255, 255, 255, 0.1);
  border: white 0.1rem solid;
  border-radius: 3rem;
  box-shadow: 0 0 5rem 0.2rem rgba(0, 0, 0, 0.2);
  padding: 5rem;
}

.login__form {
  display: flex;
  flex-direction: column;
}
.login__main-title {
  font-size: 2.2rem;
  margin-bottom: 5rem;
}

.login__input {
  background-color: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 0.2rem solid white;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 3rem;
  padding: 1rem;
}

.login__input::placeholder {
  color: white;
  font-weight: 100;
}

.login__input:focus {
  outline: none;
}

.login__button {
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 3rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 2rem;
  margin-top: 2rem;
  padding: 1.2rem 6rem;
}

.login__button:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.login__button:active {
  background-color: rgba(255, 255, 255, 0.5);
}

.login a {
  font-weight: 800;
}

.login a:hover {
  text-decoration: underline;
}

.login__remember-me {
  align-items: center;
  display: flex;
  font-size: 1.23rem;
  justify-content: space-between;
  margin-bottom: 7rem;
}

.login__image {
  margin-right: 1rem;
  width: 2.4rem;
}

.image-container--login {
  font-size: 1.4rem;
  margin-bottom: 2rem;
}

.login__label--recuerdame {
  align-items: center;
  display: flex;
}

.login__checkbox {
  margin-right: 0.6rem;
}

.login__text--noaccount {
  font-size: 1.3rem;
  margin-top: 5rem;
}

Hola, buenas tardes, aquí mi login 😉

me enredé un poquito fue con los form … no sabía sí estaba bien acompañarlo con action…

a si me quedo

Me gusta los recursos que nos presentan en cada curso y clase, son brutales.

Aquí esta la clase con los colores
.login {
background: linear-gradient(#21C08B, #AB88FF);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0px 30px;
min-height: calc(100vh - 200px);
}

Colores

![](