Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

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

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estilización de inputs y footer en la pantalla de login

32/43
Recursos

Aportes 822

Preguntas 56

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Mi aportación

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Muli:ital,[email protected],800;1,900&display=swap" rel="stylesheet">   
</head>
<body>
    <header class="header">
        <img src="img/logo-db.png" alt="Logo Pltazi" class="header__img">
    </header>
    <section class="login">
        <section class="login__container">
            <h2>Regístrate</h2>
            <form class="login__container--form">
                <input type="text" class="input" name="" placeholder="Nombre">
                <input type="text" class="input" name="" placeholder="Correo">
                <input type="text" class="input" placeholder="Contraseña">
                <button class="button">Registrarme</button>
            </form>
            <section class="login__container--social-media">
                <div><img src="./img/google-icon.png" alt="Google">Registrarse con Google</div>
                <div><img src="./img/twitter-icon.png" alt="Twitter">Registrarse con Twitter</div>
            </section>
            <p class="login__button">Ya tienes cuenta? <a href="iniciar-sesion.html"> Inicia sesión.</a></p>
        </section>
    </section>
    <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
body {
    margin: 0;
    font-family: 'Muli', sans-serif;
    background: linear-gradient(180deg, #51e3d4, #00d1ff, #3d6cb9);
}
.header {
    align-items: center;
    background:transparent ;
    color: white;
    display: flex;
    height: 100px;
    justify-content: space-between;
    top: 0px;
    width: 100%;
}
.header__img {
    margin-left: 10px;
    margin-top: 50px;
    width: 200px;
}
.login {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0px 30px;
    min-height: calc(100vh - 200px);
}
.login__container {
    background: url(img/goku.png) center bottom;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    border: 2px solid white;
    color: white;
    padding: 60px 68px 40px;
    min-height: 700px;
    min-width: 300px;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.6),0 2px 10px 0 rgba(0,0,0,0.12);
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.login__container--form {
    display: flex;
    flex-direction: column;
    color: white;
}
.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-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.login__container--social-media > div:hover {
    text-decoration: underline;
}
.login__container--social-media > div >img {
    width: 30px;
    margin-right: 10px;
}
.login__container--register {
    font-size: 14px;
}
.login__container--register a {
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-decoration: none;
}
.login__button {
    font-size: 16px;
    text-decoration: none;
    display: flex;
    justify-content: center;
}
.login__button a {
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px; 
    text-decoration: none;
    justify-content: center;
}
.login__button a:hover {
    text-decoration: underline;
}
.login__container--register a:hover {
    text-decoration: underline;
}
.input {
    background-color: transparent;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    border-bottom: 2px solid white;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0px 20px;
    outline: none;
    height: 50px;
}
::placeholder {
    color: white;
}
.button {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border: none;
    font-family: 'Muli', sans-serif;
    letter-spacing: 1px;
    height: 50px;
    margin: 0px 10px;
}
.button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.footer {
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
    background-color:transparent;
}
.footer a {
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}```

La verdad amo Platzi; amo este curso, amo la didáctica que tienen para enseñar y amo ver que los compañeros sin ningún recelo comparten el código de los desafios para ayudar a otros, porque solo intercambiando dudas y respuestas podemos avanzar. Al inicio estaba muy asustado de entrar en platzi, pero ahora veo que mi miedo era irracional, es genial.

Reto Cumplido:

hice el diseño basándome en Nier Automata jugando con css. Me está gustando el curso ya que css era lo que menos dominaba pero siento mucha mejora.

Mi avance del curso:


Yo realice uno totalmente diferente claro que con lo que hemos aprendimos en el curso

Para el efecto de sombreado puede agregar lo siguiente:

.login__container{
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .5);
}

En lugar de imágenes es más recomendable usar Iconos SVG (vectores) ya que funcionan como fuentes por lo que es mucho mas fácil manipularlos, cambiar tamaño, etc… y es mejor para el rendimiento del sitio.

Vamos bien🚀

como me quedó?

a la clase .input le hace falta agregarle la propiedad color: white para que al escribir las letras también sean blancas

#retoCumplido Gracias por la enseñanza de la Miss, los videos están bástate didácticos y entendibles… Excelente 👍

Reto completado
![](

Después de 4 horas: aquí está 😄

HTML…

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="UX-A-Compatible" content="ie=edge">
    <!-- Font -->
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <!-- Style -->
    <link rel="stylesheet" href="./register-page.css">
    <!-- Title -->
    <title>Registro</title>
  </head>
  <body>
    <header class="header">
      <img class="header__img" src="./logo-platzi.png" alt="Platzi">
    </header>
    <section class="register">
      <section class="register__container">
        <h2>Register</h2>
        <form class="register__container--form">
          <input class="input" type="text" placeholder="Name">
          <input class="input" type="text" placeholder="Mail">
          <input class="input" type="text" placeholder="Password">
          <button class="button">Sign Up</button>
        </form>
        <a href="/">Sign in </a>
      </section>
    </section>
    <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:

body {
  margin: 0;
  font-family: 'Muli', sans-serif;
}
.header {
  align-items: center;
  background-color: #21c08b;
  color: white;
  display: flex;
  height: 100px;
  justify-content: space-between;
  top: 0px;
  width: 100%;
}
.header__img {
  margin-left: 30px;
  width: 200px;
}
.register {
  background: linear-gradient(#21c08b, #ab88ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px 30px;
  min-height: calc(100vh - 200px);
}
.register__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;
}
.register__container--form {
  display: flex;
  flex-direction: column;
}
.register__container a {
  color: white;
  text-decoration: none;
  display: flex;
  justify-content: center;
}
.register__container a:hover {
  text-decoration: underline;
}
.input {
  background-color: transparent;
  color: white;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-bottom: 2px solid white;
  font-family: 'Muli', sans-serif;
  margin: 20px;
  padding: 0px 20px;
  outline: none;
  height: 50px;
}
::placeholder {
  color: white;
}
.button {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 25px;
  color: white;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Muli', sans-serif;
  height: 50px;
  letter-spacing: 1px;
  margin: 10px 0px;
}
.footer {
  background-color: #ab88ff;
  display: flex;
  align-items: center;
  height: 100px;
  width: 100%;
}
.footer a {
  color: white;
  cursor: pointer;
  font-size: 14px;
  padding-left: 30px;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

Les comparto mi codigo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./assets/css/registro.css">
    <title>Document</title>
</head>
<body>
    <header class="header">
    <a href="#"><img class="header__img" src="./assets/images/logo-platzi-video-BW2.png" alt="imagen logo de platzi video"></a>
    </header>
    <section class="register">
        <section class="register__container">
            <h2>Registro</h2>
            <form class="register__container--form">
                <input class="input" type="text" placeholder="Nombre">
                <input class="input" type="email" placeholder="Email">
                <input class="input" type="password" placeholder="Contraseña">
                <div class="register__container--tyc">
                    <label class="article__laben--tyc">Acepto terminos y condiciones
                        <input type="checkbox" checked>
                    </label>
                </div>
                <button class="button">Registrarse</button>
            </form>
        </section>
    </section>
    <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

body {
    margin: 0;
    font-family: 'Muli', sans-serif;
    background-image: url("../images/background_image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.header {
    -webkit-box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    -moz-box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    background-image: linear-gradient(500deg, #0a0a0a 0%, #ff0000 74%);
    align-items: center;
    color: white;
    display: flex;
    height: 100px;
    top: 0px;
    width: 100%;
}

.header__img {
    margin-left: 30px;
    width: 200px;
}

.register {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 30px;
    min-height: calc(100vh - 200px);
}

.register__container {
    background-color: rgba(255, 13, 13, 0.246);
    -webkit-box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    -moz-box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    box-shadow: 0px 0px 20px 4px rgba(255,3,3,1);
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 250px;
    width: 300px;
}

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

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

::placeholder {
    color: white;
}

.button {
    background-color: rgba(0, 0, 0, 0.733);
    border: none;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: sans-serif;
    height: 50px;
    letter-spacing: 1[x];
    margin: 10px 0px;
}

.button:hover {
    text-decoration: underline;
}

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

.footer a {
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
}

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

Personalmente creo que en esta parte en lugar de utilizar height es mejor ampliar el padding en top y bottom del input

Página de registro done!

Listo!
(

PAGINA DE LOGIN

Pagina de REGISTRO

Reto Registrate

Como le hicieron para esa sombrita para el reto?

this is my register form:

Terminada!

Inicio De Sesion

Registro

Y así me quedo:

Este es el login:

El código esta en mi GitHub: https://github.com/adonyssantos/platzi-video

Reto hecho, para agregar esa pequeña sombra use box-shadow dentro de login__container {box-shadow: -1px -8px 30px 10px rgba(0,0,0,0.5); }
luego jugué con los pixels.

Actualmente existe una variante de BEM, le dicen ABEM y esta seria una adaptación con Atomic Design el cual consiste en la siguiente nomenclatura.
Donde se introduce el concepto de Atomos, Moléculas y Organismos.
*BEM
block-name__element-name–modifier-name
*ABEM
[a/m/o]-blockName__elementName -modifierName

https://css-tricks.com/abem-useful-adaptation-bem/
Anexo una documentación.

Por ahora quedó asi, medio desviado pero no importa!

Creo que voy Bien 😄

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="13.1 styles.css">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <title>Registro</title>
</head>
<body>
    <header class="header">
        <img class="header__img" src="logo-platzi-video-BW2.png" alt="Logo de Platzi-Video">
    </header>
    <section class="register">
        <section class="register__container">
            <h2>Registrate</h2>
            <form class="register__container--form">
                <input class="input" type="text" placeholder="Nombre">
                <input class="input" type="text" placeholder="Correo">
                <input class="input" type="password" placeholder="Contraseña">
                <button class="button">Registrarse</button>
                <div class="register__container--login"> 
                    <a href="/">Inicia sesi&oacute;n</a>
                </div>
            </form>
    </section>
    <footer class="footer">
        <a href="/">T&eacute;rminos de uso</a>
        <a href="/">Declaraci&oacute;n de privacidad</a>
        <a href="/">Centro de ayuda</a>
    </footer>
</body>
</html>

css:

body {
    margin: 0;
    font-family: 'Muli', sans-serif;
}
header{
    background-color: #9313b9;
    width: 100%;
    height: 80px;
}
header img{
    width: 200px;
    margin-top: 10px;
    margin-left: 15px;
}
.register{
    background: linear-gradient(#9313b9,#2178c0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 20px;
    min-height: calc(100vh - 200px);
}
.register__container{
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 550px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.register__container--form{
    display: flex;
    flex-direction: column;
}
.register__container--login{
    color: white;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    align-items: flex-end;
}
.register__container--login a{
    color: white;
    font-size: 14px;
    text-decoration: none;
}
.register__container--login a:hover{
    text-decoration: underline;
}
.input{
    background-color: transparent;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-bottom: 2px solid white;
    font-family: 'Muli', sans-serif;
    margin-bottom: 20px;
    padding: 0px 20px;
    outline: none;
    height: 50px;
}
::placeholder{
    color: white;
}
.button{
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Muli', sans-serif;
    height: 50px;
    letter-spacing: 1px;
    margin: 10px 0px;
}
.footer{
    margin: 0;
    background-color: rgba(33, 120, 192, 0.1);
    display: flex;
    align-items: center;
    height: 100px;
    width: 100%;
}
.footer a{
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding-left: 30px;
    text-decoration: none;
    font-family: 'Muli', sans-serif;
}
.footer a:hover{
    text-decoration: underline;
}

A los que nos gusta League of Legends!

Mi solución al reto:
registro.html

registro.css

Reto Listo.

Ejercicio terminado

Bueno asi quedo mi Login 😄 de Kakaroto

![](
![](

saludos . no seria mejor organizar las clases en forma descendente . lo digo por que esta colocando la clase de los input y el botón de últimos estando estos de primeros en la estructura HTML

Por si alguien la quiere agregar en el ejemplo original la tenía pero a la profe creo que se le olvidó la sombra alrededor a la caja del container, la propiedad es box-shadow

.login__container{
    box-shadow:-1px 0px 20px 3px rgb(0 0 0 / 94%);
}

Comparto el Reto

Inicio de sesión:

Registro:

Aquí esta el mío 😄


=)

Les muestro mi resultado.

Como recomendación, traten de escribir todo el código desde cero, no peguen y copien. Así se irán acostumbrando y será mejor.

mi humilde avance ❤️

Seguro que se ha comentado, pero supongo que por optimizar, si aplicamos al body font-family, color y font-size, quitaríamos muchas reglas repetidas.

body {
    color: white;
    font-family: 'Mulish', sans-serif;
    font-size: 14;
}

Un saludo y gracias.

Cuando el CSS ya esta creciendo mucho, pienso que es bueno utilizar los shorthand, así puedes comenzar ahorrar lineas de código.

Por ejemplo:

font:  bold 16px 'Multi', sans-serif;

😃 I love platzi 😃

Basicamente fue reutilizar el mismo código.

Houseflix! 😁

Puede escucharse como que no importa, pero me parece que estas declaraciones

align-items: space-around;
flex-direction: column;

deben de escribirse al revés, sobre todo para los que no estamos familiarizados aun con flexbox, ya que flex-direction:column influye en la declaración de align-items: space-around

flex-direction: column;
align-items: space-around;

avances hasta el momento

Veo unos trabajos muy bien elaborados. Por aquí el mío, un poco sencillo pero con mucha dedicación.

Les comparto mis humildes aportes xd

adjunto el codigo:

<!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="registro.css">
    <link href="https://fonts.googleapis.com/css?family=Muli&display=swap" rel="stylesheet">
    <title>Registro</title>
</head>
<body>
    <header class="header">
        <img class="header__img" src="./assets/logo-platzi-video-BW2.png" alt="logo">
    </header>
    <section class="register">
        <section class="register__container">
            <h2>Regístrate</h2>
            <form class="register__container--form">
                <input class="input" type="text" placeholder="Nombre">
                <input class="input" type="text" placeholder="Correo">
                <input class="input" type="password" placeholder="Contraseña">
                <button class="button">Registrarme</button>
            </form>
            <P class="register__container--p"><a href="#">Iniciar sesión</a></P>
        </section>
    </section>
    <footer class="footer">
        <a href="#">Términos de uso</a>
        <a href="#">Declaración de privacidad</a>
        <a href="#">Centro de ayuda</a>
    </footer>
    </footer>   
</body>
</html>
body {
    margin: 0px;
    font-family: 'Muli', sans-serif;
}
.header {
    width: 100%;
    height: 100px;
    background-color: #21c08b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0px;
}
.header img {
    width: 200px;
    margin-left: 30px;
}
.register {
    background: linear-gradient(#21c08b, #ab88ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0, 30px;
    min-height: calc(100vh - 200px);
}
.register__container {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 600px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 300px;
}
.register__container--form {
    display: flex;
    flex-direction: column;
}
.input {
    background-color: transparent;
    font-size: 16px;
    font-family: 'Muli', sans-serif;
    color: white;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 2px solid white;
    margin-bottom: 20px;
    padding: 0 20px;
    outline: none;
    height: 50px;
}
::placeholder {
    color: white;
}
.button {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 25px;
    color: white;
    cursor: pointer;
    font-family: 'Multi', sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 50px;
    margin: 10px 0px;
    letter-spacing: 1px;
}
.register__container--p {
    display: flex;
    justify-content: center;
}
.register__container--p a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}
.register__container--p a:hover {
    text-decoration: underline;
}
.footer {
    background-color:#ab88ff;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
}
.footer a {
    text-decoration: none;
    font-size: 14px;
    color: white;
    cursor: pointer;
    padding-left: 30px;
}
.footer a:hover {
    text-decoration: underline;
}

Como cuesta CSS 😄 pero se logró!

Inicio de Sesion

Registro

![](

Para ser principiante, siento que logré resolver el reto relativamente rápido 😃

Para no repetir código en los <a> pueden hacer esto:

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Hola a todos, me gustaría compartirles una fuente para obtener iconos que pueden utilizar para sus Footer https://icon-icons.com

Asi quedo mi diseño:

<HTML> 
<header class="header">
        <img class="header__logo" src="/src/images/Logo.svg" alt="logo">
    </header>
    <section class="login">
        <div class="login__title">
            <h2>Bienvenido,</h2>
            <p>Inicia sesión para continuar</p>
        </div>
        <div class="login__form">
            <form action="">
                <label class="form__label" for="email">Correo electronico</label>
                <input class="form__input" type="email" name="email">
                <label class="form__label" for="password">Contraseña</label>
                <input class="form__input" type="password" name="email">
                <input class="submit form__input" type="submit" value="Iniciar Sesión">
                <div class="login__option--login">
                    <div class="option__checkbox-container">
                        <input class="form__checkbox" type="checkbox" name="remember" id="remember">
                        <label for="remember">Recuerdame</label>
                    </div>
                    <a class="option__forgot-password" href="#">Olvide mi contraseña</a>
                </div>
                <div class="login__withGoogle">
                    <img src="./src/images/search.svg" alt="google-icon">
                    <a href="#">Inicia sesión con Google</a>
                </div>
            </form>
        </div>
    </section>
<CSS> 
*::after,
*::before,
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: rgb(34, 40, 49);
    color: rgba(238, 238, 238, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
   
}

/* HEADER SECTION */
.header {
    display: flex;
    padding-top: 40px;
    width: 80%;
    margin: 0 auto;
}
.header__logo {
    width: 109px;
    height: 47px;
}

/* LOGIN SECTION */

.login {
    width: 564px;
    height: 516px;
    border-radius: 30px;
    background-color: rgba(19, 48, 54, 1);
    filter: drop-shadow(0px 0px 3px #EEEEEE);
    margin-top: 8%;
    display: flex;
    flex-direction: column;
}
.login__title {
    width: 60%;
    align-self: center;
    margin-top: 10%;
}
.login__title h2 {
    font-size: 30px;
}
.login__title p {
    font-size: 25px;
}
.login__form {
    margin-top: 5%;
    align-self: center;
    width: 60%;
}
form {
    display: flex;
    flex-direction: column;
}
.form__label {
    font-size: 15px;
    margin-bottom: 5%;
    margin-left: 2%;
    color:rgba(196, 196, 196, 1);
}
.form__input {
    width: 100%;
    height: 39px;
    background: rgba(21, 77, 85, 1);
    border-radius: 30px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-bottom: 10px;
    padding: 10px 20px;
    color: #C4C4C4;
    outline: none;
}
.submit {
    padding: 0;
    font-size: 1.2rem;
    font-weight: 700;
    background: #C4C4C4;
    color: #154D55;
    cursor: pointer;
    margin-top: 20px;
}
.login__option--login {
    display: flex;
    justify-content: space-evenly;
    margin: 10px 0;
    color: #00ADB5;
}
.form__checkbox {
    outline: none;
    border: none;
}
.form__checkbox:focus {
    outline: none;
    border: none;
}
.login__withGoogle {
    width: 60%;
    display: flex;
    justify-content: space-between;
    margin: 30px auto;
}
.login__withGoogle img {
    width: 16px;
    height: 16px;
}
a {
    text-decoration: none;
    color: #00ADB5;
}

**

😄

Estos son mis resultados hasta el momento 😃

¿muchas cosas serian más facil con css grid? ¿cuando usar css grid o flexbox?

Reto completado

No sé por que siento que mi codigo esta super roto, pero funciona.

<body{
    margin: 0px;
    font-family: ‘Muli’, sans-serif;
}
header{
    background-color: #21c08b;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    width: 100%;
    top: 0px;
}
.header__img{
    width: 200px;
    margin-left: 30px;
}
.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);
}
.login__container{
    background-color: rgba(255, 255, 255, 0.1); 
    border: solid 2px white;
    border-radius: 40px;
    color: white;
    padding: 60px 68px 40px;
    min-height: 700px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
.login__container--form{
    display: flex;
    flex-direction: column;
    
}
.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 80px;
    font-size: 16px;
    outline: none;
    height: 50px;
    letter-spacing: 2.5px;
    
}
.input:hover{
    text-decoration: underline;
    color: white;
}
::placeholder{
    color: white;
}
.button__register{
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: ‘Muli’, sans-serif;
    height: 50px;
    letter-spacing: 1.5px;
    margin: 10px 0px;

}
.button__iniciar-sesión{
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 30px;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: ‘Muli’, sans-serif;
    height: 50px;
    letter-spacing: 1.5px;
    margin: 10px 0px;
}>