Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Crear nueva contraseña: CSS

6/22
Recursos

Aportes 121

Preguntas 59

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

display: grid;
place-items: center;
existen.

Yo:

Una recomendación que dejó Diego De Granda en el Curso de Responsive Design: Maquetación Mobile First, es escribir los estilos ordenados según su propósito de la siguiente forma:

  1. Posicionamiento
  2. Box Model
  3. Tipografía
  4. Visuales
  5. Otros
    Y cada categoría se separa con un espacio, de forma que resulta mas legible. Por ejemplo:
display: grid;
  place-items: center;

  width: 100%;
  height: 100vh;

font-size: 1rem;

¡Si en el Subtitle cambian el color del texto a black queda un poco más legible! 😄

Les recomiendo mucho que personalicen los proyectos de los cursos (No tienen que poner los mismos colores o textos de la clase) así refuerzan un poco más lo aprendido.

En el video anterior, en la parte de recursos explican la razón por la cual no están utilizando 2 archivos, uno para html y el otro para css. Acotando que en efecto la manera realizada no es la mas profesional. Hay que ser mas visual y no solo hacer la critica destructiva. Igual aconsejo a los principiantes como yo, para que no se queden solo con lo que muestra el video, en recursos siempre hay información importante y blogs que puedan ayudar ha ampliar mas sobre el tema tratado.

What do you think about neon colors?

Amo cuando me queda igualito que a la prof 🤩

Y yo toda mi vida con mi:
display: flex;
justifiy-content: center;
align-items: center

CSS DE LA CLASE:

:root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
    body {
      margin: 0;
      font-family: 'Quicksand', sans-serif;
    }
    .login {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .form-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
      justify-items: center;
    }
    .logo {
      width: 150px;
      margin-bottom: 48px;
      justify-self: center;
      display: none;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 12px;
      text-align: center;
    }
    .subtitle {
      color: var(--very-light-pink);
      font-size: var(--md);
      font-weight: 300;
      margin-top: 0;
      margin-bottom: 32px;
      text-align: center;
    }
    .email-image {
      width: 132px;
      height: 132px;
      border-radius: 50%;
      background-color: var(--text-input-field);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 24px;
    }
    .email-image img {
      width: 80px;
    }
    .resend {
      font-size: var(--sm);
    }
    .resend span {
      color: var(--very-light-pink);
    }
    .resend a {
      color: var(--hospital-green);
      text-decoration: none;
    }
    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .login-button {
      margin-top: 14px;
      margin-bottom: 30px;
    }
    @media (max-width: 640px) {
      .logo {
        display: block;
      }
    }

que tal les parece mi diseño bandamax?

Este es mi aporte a la clase, me gusta mucho el tema de usar imágenes svg para darle vida a los fondos se mis paginas web o que funcionen como un elemento visual o arte corporativo.

Les comparto unas cuantas ideas de mis proyectos profesionales(acepto criticas :3), para que podamos crecer juntos

Login en arckSpace:

Estas lindas imagenes adaptativas igualmente pueden usarse para decorar su layout

Link de donde encontrar imagenes svg adaptables free : https://undraw.co/illustrations

colores y fuentes extraídas de figma

:root {
  --white: #ffffff;
  --black: #000000;
  --very-light-pink: #797979;
  --text-input-field: #f7f7f7;
  --hospital-green: #acd9b2;
  --font-base: 'Quicksand', sans-serif;
  --headline-1: 700 14px/18px var(--font-base);
  --headline-2: 300 16px/22px var(--font-base);
  --headline-3: 700 18px/22px var(--font-base);
  --shadow: 0px 2px 4px rgba(0, 0, 0, 0.046805);
}

font

  • font - CSS una manera abreviada de trabajar las propiedades de fuente
p {
  font: var(--headline-1);
}

h1 {
  font: var(--headline-3);
}

😃

En el curso anterior enseñó Flexbox y en éste dijo que íbamos a aplicar lo aprendido y en lugar de usar Flexbox lo hace con Grid, del cual lo único que vimos fue el nombre además de no usar BEM ni HTML semántico. Volveré a este curso cuando sepa Grid porque sino sería como conseguir los pacientes y después estudiar medicina.

¿Porque no utilizar un archivo style.css? enserio esto puede ocasionar malas practicas en aquellos que solo ven este curso

Es mucho mejor usar la extensión Live Server en vez de recargar manualmente

Me paso que no se centraba de manera vertical al usar display:grid;
place-items: center; me di cuenta que estaba usando porcentaje y no vw y vh, al que le pase como yo, solo tiene que cambiar las unidades.

Les comparto mi propuesta a la práctica

Les dejo el html con buenas practicas y trabajado con metodologia BEM para escribir las Clases

<!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">
    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Recover Passoword</title>
    <!-- style mobile firts -->
    <link rel="stylesheet" href="./style_default_mobile.css">
    <!-- media querys -->
    <link media="screen and (min-width: 600px)" rel="stylesheet" href="./style_tablet.css">
    <link media="screen and (min-width: 1080px)" rel="stylesheet" href="./style_desktop.css">
</head>

<body>
    <main>
        <!-- Crear Nueva Contraseña -->
        <section>
            <div class="newPassword">
                <div class="newPassword__container">
                    <!-- img -->
                    <img src="../logos/logo_yard_sale.svg" alt="logo" class="newPassword__logo">
                    <!-- Titulo y descripcion -->
                    <h1 class="newPassword__title">Create a new password</h1>
                    <p class="newPassword__subtitle">Enter a new password for you account</p>
                    <!-- formulario -->
                    <form action="#" class="form">
                        <label for="password" class="form__label">Password</label>
                        <input type="password" id="password" placeholder="Enter you new password"
                            class="input form_input--password">

                        <label for="confirmPassword" class="form__label">Confirm Password</label>
                        <input type="password" id="confirmPassword" placeholder="Confirm  password"
                            class="input form_input--confirmPassword">

                        <input type="submit" value="Confirm" class="form__button newPassword__button">
                    </form>
                </div>
            </div>
        </section>
    </main>
</body>

</html>

aqui tambien esta el CSS

:root {
  --white: #ffffff;
  --black: #000000;
  --very-light-pink: #c7c7c7;
  --text-input-field: #f7f7f7;
  --hospital-green: #acd9b2;
  --sm: 1.4rem;
  --md: 1.6rem;
  --lg: 1.8rem;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "Quicksand", sans-serif;
}
.newPassword {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}
.newPassword__container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 30rem;
}
.newPassword__logo {
  width: 15rem;
  margin-bottom: 4.8rem;
  justify-self: center;
  /* display: none; */
}
.newPassword__title {
  font-size: var(--lg);
  margin-bottom: 1.2rem;
  text-align: center;
}
.newPassword__subtitle {
  color: var(--very-light-pink);
  font-size: var(--md);
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 3.2rem;
}
.form{
    display: flex;
    flex-direction: column;
}
.form__label {
  font-size: var(--sm);
  font-weight: bold;
  margin-bottom: 0.4rem;
}
.input {
    background-color: var(--text-input-field);
    border: none;
    border-radius: 0.8rem;
    height: 3rem;
    font-size: var(--md);
    padding: 0.6rem;
    margin-bottom: 1.2rem;
}
.form__button{
    background-color: var(--hospital-green);
    border-radius: 0.8rem;
    border: none;
    color: var(--white);
    font-size: var(--md);
    font-weight: bold;
    width:100%;
    height: 5rem;
    cursor: pointer;
}

Los otros archivos de css lo unico que contienen es un Display:none; para quitar el logo dependiendo la media query.

Definitivamente toca ver el curso de CSS Grid, esta potente ❤️

Los cursos deberían hacerse en base al diseño en figma.

Holaa, me gustaria hacer un aporte, en el boton que tenemos con la clase “.primary-button” no toma la fuente de “Quicksand”, en su lugar usa su fuente por defecto que es Arial.

Investigué un poco y encontré que los inputs no heredan las fuentes, asi que debemos definirlas en cada uno:

Como aporte adicional, tambien debemos realizar lo mismo con los inputs de las contraseñas para que asi todos tengan nuestra fuente principal 😃

A la clase .input pueden agregar la propiedad outline: none; para quitar ese borde negro interior a la caja cuando vamos a ingresar datos o password.

.input{
outline: none;
}

😄

Ver la página web desde tu teléfono
Me di cuenta de una manera de revisar como va quedando tu página web incluso desde tu teléfono (para apreciar realmente lo responsive) usando la extensión de VSC llamada “Live Server”.
De una manera sencilla.
Aquí los pasos:

  1. Tener instalado el Live Server y usarlo para abrir tu archivo HTML. Lo que hace esta extensión es abrir un servidor con referencia a tu propia computadora.

  2. Ya abierto tu archivo, debes fijarte en qué puerto se te está abriendo tu página web. En mi caso es en la “5500”.

  3. Lo que vamos a hacer es ingresar a ese servidor desde el teléfono. Para esto necesitamos saber cuál es nuestra dirección IP.
    3.1. Abrir la terminal e ingresar el siguiente comando : ipconfig (En mi caso es la 192.168.1.5)

    Eso es todo, ahora vamos a nuestro teléfono.

  4. Como ya sabemos la dirección IP de nuestra computadora, vamos a ingresar a esta por medio de nuestro teléfono: nuestraDireccionIP:elPuerto , en mi caso: 192.168.1.5:5500

  5. Ahora ya solo buscamos nuestro archivo HTML y listo.


    Además, como estamos usando el Live Server, todos los cambios que haces en tu código, se reflejarán automáticamente tanto en la computadora como en tu teléfono.
    Espero haberlos ayudado. 😃

La profe en el minuto 10 al subtitulo le hace 2 veces margin, yo use un shortcut de margin que con una sola propiedad y 3 valores hace eso:

  .subtitle {
            margin: 0 auto 32px;
        }

algunas propiedades como margin soportan varias valores a la vez para funcionar como shortcut. Cuando le pasas 4 parametros, estos se aplican en sentido de agujas del reloj, siendo estas arriba(top), derecha(right), abajo(bottom), left(izquierda) :

 .subtitle {
           margin: 10px 5px 15px 20px
        }

Ahora si le pasas 3 valores como hice en mi anterior ejemplo se lo aplicas arriba(top), laterales(right and left) y abajo(bottom).

 .subtitle {
           margin: 10px 15px 20px
        }

Le puedes pasar 2 valores, los cuales se aplicarán a la arriba y abajo(top and bottom), mientras que el segundo se applicara a la derecha e izquierda(right and left)

 .subtitle {
           margin: 10px  20px
        }

Mientras que si le pasas un parametro o valor, esto se aplicará a todos los lados

 .subtitle {
           margin: 10px 
        }

Súper, me encantó la simplicidad, a la vez les comento que uso una herramienta que se llama Responsively, me ayuda un montón al momento cuando estoy realizando mis tareas del curso, así voy viendo en tiempo real como va quedando (usando go live de Visual Code también

![](

Aún estoy aprendiendo soy medio bruta. =(

Revisen bien donde ponen los div :v jajajajaj

Lo intente primero para luego ver su solución y creo que obtuvimos resultados similares. solo que yo no había ocupado Grid 😦
Soy team Flexbox xD

Con los anteriores cursos que he tomado de esta escuela siento que estoy haciendo todo muy desordenado repitiendo estilos en cada documento. Debería quedar claro desde las primeras clases que lo mejor es usar hojas de estilo globales y que las personas que tienen menos experiencia no empiecen a dejar código repetido por todas partes. pls

realmente no explica casi nada… solo expone

En el subtítulo el color #C7C7C7 debería ser reemplazado por ejemplo por #767676 y el color hospital-green por #45834d por cuestiones de accesibilidad para ser aceptado por WCAG 2.0.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

https://www.youtube.com/watch?v=edEG0CoM5gw&ab_channel=KikoPalomares
Si quieres aprender lo basico del grid, aqui te dejo esto.

En VSCode existe una extensión que se llama live server la cual te permite ver los cambios que vas haciendo en tiempo real para no tener que recargar la página tantas veces 😁

Es increíble el trabajo que ahorra el usar figma, ya que con eso podemos hacer una copia exacta de la pagina que se necesite.

No soy experto pero ¿Que no se debió comenzar por el maquetado del mobile?

Diablos señorita, ajjajaja espectacular para centrar

la clase numero 6 es demasiado densa y la profesora no hace enfasis en nada, va como un cohete, esa no es la idea de un curso online para los que apenas estamos empezando.

Aqui mi aporte 😄

La verdad me decidí por cambiar la paleta de colores de proyecto y hacerlo modo oscuro jaja, no quiero quedar sin ojos en el proceso xd

Hay algo que no entiendo: En todos los cursos hasta ahora de CSS nos habian dicho muchas veces que hoy en dia el mobile first era un estandar y nos incitaban constantemente a desarrollar con el; sin embargo, en este curso no estamos aplicando la metodologia mobile first.
Que es lo correcto entonces?

Que paso con retaxmaster o como sea jaja

¿Te gusto el centrado con display: grid?

Sabias que hay un curso de la misma profesora donde se profundiza el tema?(Curso Profesional de CSS Grid Layout) Ir al Curso , y para facilitarte las cosas te dejo la clase donde habla del tema de alineamiento con CSS.
Mi ejemplo:
Aqui hay otra forma, en el siguiente Link. ¡Quiero saber más!

Ahora si, sigamos con el curso!

Observación:
el segundo input debería ser Re-enter password.

Que linda comunidad que es esta!! 😄

Aqui comparto el diseño que realicé, relamente solo cambié el input agregandole algunas propiedades e implementando el box-shadow de Diego que me encantó ese valor:

.input {
    border: none;
    border-radius: 8px;
    height: 30px;
    margin: 10px 0;
    font-size: var(--md);
    padding: 6px;
    background-color: var(--text-input-field);
    box-shadow: 0px 4px 8px rgba(89, 74, 30, 0.16);
    outline: 1px solid;
    outline-color: var(--hospital-green);
}

Asi me quedo 😁

Para los que llegan y se preguntan porqué los estilos se están haciendo de esta forma y no en un .css aparte, no se preocupen, todo tiene una razón de ser, mas adelante lo sabrán.

Comparto mi resultado:

Esta es mi versión del código que en vez de grid usa flex y en vez de escalar de desktop a celular escala de celular a desktop. Si quieren pueden darle un vistazo de como lo hice yo 😃



para los que no encuentren las imagenes entren aqui y les descargara el repositorio de la clase, porfavor díganme si saben donde se descargaban

Mi avance 😃 :

display: none; /*para que no aparezca por defecto*/

cursor: pointer; /*cuando el cursor pasa por el botón, cambia la flecha por una mano*/

Al usar Grid en lugar de Flex (display: grid;), se usa una sola propiedad (place-items: center;) en lugar de dos propiedades para centrar tanto vertical como horizontalmente.

Por alguna extraña razón que todavía desconozco no me funcionó el media-query como colocó la profe para que la img se borre a partir de los 640px, pero yo le hize de esta forma

@media (min-width: 640px){ 
.form-container{  //contenedor principal donde el margin (17.9rem) es la sumatoria de los margenes de el logo y la dimensión de el logo en si mismo (las dimensiones tienen que adaptarla a c/u para que no se note la diferencia)
      margin-top: 17.9rem;
  }
 .form-container .imagen{
      display: none; //eliminamos el logo con este display
            }

Comparto mis apuntes de clases:

Que interesante, aun que llevo varios años trabajando de maquetador, en aprendido cosas nuevas aquí, como dice Freddy: nunca dejes de aprender…

**El código de la clase**
<!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="preconnect" href="https://fonts.googleapis.com">
 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">

    <title>Document</title>
    <style>
        :root {                              
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
            --sm: 14px; 
            --md: 16px;
            --lg: 18px;
        }    
        body {
            margin: 0;
            font-family: 'Quicksand'
            sans-serif;
        }
        .login {        
            width: 100%;
            height: 100vh;
            display: grid; 
            place-items: center; 
        }
        .form-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            width: 300px;
        }
        .logo {
            width: 150px;
            margin-bottom: 48px;
            justify-self: center;
            display: none; 
        }
        .title {
            font-size: var(--lg);
            margin-bottom: 12px;
            text-align: center;
        }
        .subtitle {
            color: var(--very-light-pink);
            font-size: var(--md);
            font-weight: 0;
            margin-top: 0;
            margin-bottom: 32px;
            text-align: center; 
        }
        .form { 
            display: flex;
            flex-direction: column;
        }
        .label {
            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
        }
        .input {
            background-color: var(--text-input-field);
            border: none;
            border-radius: 8px;
            height: 30px;
            font-size: var(--md);
            padding: 6px;
            margin-bottom: 12px;
        }
        .primary-button {
            background-color: var (--hospital-green);
            border-radius: 8px;
            border: none;
            color: var (--white);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;
        }
        .login-button {
            margin-top: 14px;
            margin-bottom: 30px;
        }
        @media (max-width: 640px) {
            .logo {
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="login">                           
        <div class="form-container">               
            <img src="./logos/Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo" class="logo">  

            <h1 class="title">Create a new password</h1>                  
            <p class="subtitle">Enter a new password for you account</p>  

            <form action="/" class="form">   
                <label for="password" class="label">Password</label>  
                <input type="password" id="password" placeholder="*********" class="input input-password"> 

                <label for="new-password" class="label">Password</label>
                <input type="password" id="new-password" placeholder="*********" class="input input-password">

                <input type="submit" value="Confirm" class="primary-button login-button"> 
            </form>
        </div>
    </div>
</body>
</html>

¡Brutaaaal! ❤️

Me gustó mucho esta clase!! 😃

Fue genial el paso a paso para construir el diseño en Mobile y en Desktop. Funciona!!!

Me gustó como quedó, pero puede quedar mejor. Excelente.

Les quiero compartir una forma, que he visto en muchos proyectos, para organizar las propiedades en CSS. Otro método que he conocido es organizar las propiedades en orden alfabético, ambas me parecen adecuadas.

Vamos al pie de la letra

:root {
–crema-rosado: #F7DAD9;
–beige-medio:#F4DFD0;
–beige-frio:#DAD0C2;
–dulce-de-leche:#CDBBA7;
–gris-claro:#eff1f5;
–black:#000000;
–white:#ffffff;
–font-min:12px;
–font-mid:15px;
–font-max:24px;

}

  • {
    margin: 0;
    box-sizing: border-box;
    }
    body {
    font-family: ‘Catamaran’, sans-serif;
    font-family: ‘EB Garamond’, serif;

}
.login {
width: 100%;
height: 100vh;
display: grid;
place-items: center;

}
.login-contenedor {
width: 300px;
min-height: 350px;
display: flex;
flex-direction: column;

}
.logo {
display: none;
}
.login-contenedor h1 {
font-size: var(–font-max);
margin-bottom: 15px;
text-align: center;
}
.subtitle {
font-size: var(–font-mid);
color: var(–dulce-de-leche);
margin-bottom: 30px;

}
.form {
height: 200px;
display: flex;
flex-direction: column;

}
,label {
font-size: var(–font-mid);
font-weight: 300;
padding-left: 5px;
}
.input {
height: 32px;
border: none;
border-radius: 10px;
padding-left: 8px;
background-color: var(–gris-claro);
margin-bottom: 10px;
outline: none;

}
.primary-button{
height: 45px;
background-color: var(–crema-rosado);
border: none;
border-radius: 8px;
color: var(–white);
font-weight: bold;
font-size: 15px;
margin-top: 10px;
cursor: pointer;
}
@media (max-width: 640px){
.logo {
display: block;
width: 95px;
margin:5px auto;
}

}

<!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-shop/proyecto_shop.css">
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Catamaran:[email protected]&family=EB+Garamond:ital,[email protected],500&display=swap” rel=“stylesheet”>

<title>Shop Online</title>

</head>
<body>
<div class=“login”>
<div class=“login-contenedor”>
<img src="…/iconos-img/logo-conexa.png" alt="" class=“logo”>
<h1>¡Bienvenidos!</h1>
<p class=“subtitle”>Ingresar una contraseña nueva</p>

        <form action="/" class="form">
            <label for="password" class="label">Contraseña</label>
            <input type="password" id="password" placeholder="**********" class="input input-password">
            <label for="new-password" class="label">Nueva Contraseña</label>
            <input type="password" id="new-password" placeholder="**********" class="input input-new-password">

            <input type="submit" value="Confirmar" class="primary-button login-submit">
        </form>

    </div>
</div>

</body>
</html>

Corríjanme si estoy mal pero veo muchos comentarios sobre lo de lo de
display: grid;
grid-template-rows: auto 1fr auto ;
que les salen 4 particiones como aquí

pero no se si estoy bien corríjanme si me equivoco, pero esto sale ya que dentro del contenedor padre : .form-container
existen 4 elementos hijos el img, h1, p y la etiqueta form como se ve aquí

esta desfragmentación que se hace x4 es por ese motivo hay 4 elementos hijos dentro del elemento padre y ocasiona ese x4 que vemos pueden ensayar agregando o quitando elementos hijo y lo notaran que si agregan mas elementos hijos se aumentaran la cantidad de cuadros grid y si quitan también se quitan cuadros grid.

Estoy amando este curso
Así quedo mi pantalla en mobile

.
Y asi se ve en desktop

.
En desktop me faltan un par de detalles pero estoy muy feliz de haber sido capaz de hacer esto antes de ver como lo hacia la profe

Mi trabajo!!! 😃

Wow, Estefany lo hace ver muy facil :0

Estoy tan emocionado, Se ve muy bonitooooooo.
Me gusta como vamos hasta el momento.

Yo anotando para tener en un lugar muy accequible todos esos tips para centrar😅, también quedé como 😳 con
display: grid; y place-items: center;
Espectacular clase

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>

 :root {
      --white: #FFFFFF;
      --black: #000000;
      --very-light-pink: #C7C7C7;
      --text-input-field: #F7F7F7;
      --hospital-green: #ACD9B2;
      --sm: 14px;
      --md: 16px;
      --lg: 18px;
    }
        body{
            margin: 0;
        }

        .login{
             width:100%;
             height:100vh;
             display: grid;
             place-items: center;

        }
        .form-container{
          display:grid;
          grid-template-rows:auto 1fr 
          auto;
          width:300;

        }
        .logo{

         width: 150px;
         margin-bottom: 48px;
         justify-self: center;

        }
        .title{
        font-size:var(--lg);
        margin-bottom: 12px;
        text-align: center;

        }
        .subtitle{

            color:var(--very-light-pink);
            font-size:var(--md);
            font-weight: 300;
            margin-top: 0;
            margin-bottom:32px;
            text-align: center;
        }
        .form{

            display:flex;
            flex-direction: column;
        }
        .label{

            font-size: var(--sm);
            font-weight: bold;
            margin-bottom: 4px;
            
        }
        .input{
            background-color:var(--text-input-field) ;
            border: none;
            border-radius: 8px;
            height: 30px;
            font-size: var(--md);
            padding: 6px;
            margin-bottom: 12px;
        }
        .primary-button{

            background-color: var(--hospital-green);
            border-radius: 8px;
            border: none;
            color:var(--white);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight: bold;
            height: 50px;

        }
        .login-button{
            margin-top: 14px;
            margin-bottom: 30px;

        }

        @media(max-width:640px){
            .logo{
                display: block;
            }

        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form-container">
            <img src="./icons/casco.png" alt="logo" class="logo">
            <h1 class="title" >Create a new Password</h1>
            <p class="subtitle"> Enter a new password for your account</p>
        
    <form action="/" class="form">
    <label for="password" class="label">Password</label>
    <input type="password" id="password" placeholder="********" class="input input-password">
    <label for="new-password" class="label">Re-Enter Password</label>
    <input type="password" id="new-password" placeholder="********" class="input input-password">
    <input type="submit" value="Confirm" class="primary-button login-button">
</form>
</div>
</div>
</body>
</html>

CSS

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once (i.e. the aling-items and justify-items properties) in a relevant layout system such as Grid  or Flexbox. If the second value is not set, the first value is also used for it.

place-items: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

The CSS `justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.

justify-self: center;

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self

Esta muy clarito mi diseño… 😅

Seguimos Practicando. muy buen comando el de grid.

Ole profe con usted aprendi el amor y el odio.

  • Odio como haces parecer los estilos tan faciles, mientras yo pauso y pauso el video
    perooo…
  • Amo q me desafie y rete mi aprendisaje jajajajaj

Compañeros hay móviles con tamaños de 320px, para que lo tengan en cuenta!

la profe va a mil por hora me dan ganas como de arrancarme la cabeza

<input type=“password”> Los elementos <input> de tipo “password” proporcionan una forma para que el usuario ingrese una contraseña de forma segura.

Con mis ajustes de color, HTML semántico y BEM

Y acá el código:

<!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="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link
      href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&family=Roboto:[email protected];700&display=swap" rel="stylesheet"
   >
   <link rel="stylesheet" href="./style.css">
   <title>Create Password</title>
</head>
<body>
   <main class="main">
      <section class="login">
         <img src="./assets/logos/logo_yard_sale_light.svg" alt="Logo" class="login__logo">
         <h1 class="login__title">Create a new password</h1>
         <p class="login__subtitle">Enter a new password for your account</p>

         <form action="/" class="login__form">
            <label for="password" class="login__form--label">Password</label>
            <input
               type="password" id="password" placeholder="********"
               class="login__form--input login__form--input-password"
            >
            <label for="new-password" class="login__form--label">Re-enter password</label>
            <input
               type="password" id="new-password" placeholder="********"
               class="login__form--input login__form--input-password"
            >
            <input type="submit" value="Confirm" class="login__btn login__btn--primary">
         </form>
      </section>
   </main>
</body>
</html>

Mis estilos:

:root {
   --primary: #781D42;
   --secondary: #A3423C;
   --extra1: #F0D290;
   --extra2: #DE834D;
   --dark: #50192d;
   --light: #d5b2bb;
   --grey-dark: #333;
   --grey: #797979;
   --grey-light: #f0f0f0;
   --white: #fff;
   --black: #000;
   --sm: 1.4rem;
   --md: 1.6rem;
   --lg: 1.8rem;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   font-family: 'Quicksand', sans-serif;
   font-size: 62.5%;
   /*font-family: 'Roboto', sans-serif;*/
}
body {
   background-color: var(--primary);
}
.main {
   width: 100%;
   height: 100vh;
   display: grid;
   place-items: center;
}
.login {
   display: grid;
   grid-template-rows: auto 1fr auto;
   width: 93.75%;
   min-width: 300px;
   max-width: 350px;
}
.login__logo {
   width: 150px;
   margin-bottom: 74px;
   justify-self: center;
}
.login__title {
   font-size: var(--lg);
   font-weight: bold;
   line-height: 2.25rem;
   text-align: center;
   color: var(--extra1);
   margin-bottom: 0.8rem;
}
.login__subtitle {
   font-size: var(--lg);
   font-weight: 400;
   line-height: 2.25rem;
   text-align: center;
   color: var(--light);
   margin-bottom: 4.2rem;
}
.login__form {
   padding: 0 2rem;
}
.login__form--label {
   display: block;
   font-size: small;
   font-weight: bold;
   line-height: 1.75rem;
   color: var(--white);
   margin-bottom: 0.6rem;
}
.login__form--input {
   width: 100%;
   height: 4.2rem;
   margin-bottom: 2.4rem;
   padding: 1rem 0.8rem;
   font-size: var(--md);
   font-weight: 400;
   line-height: 2rem;
   color: var(--grey-dark);
   border: 1px solid var(--grey-light);
   border-radius: 10px;
   background-color: var(--white);
}
.login__btn {
   width: 100%;
   height: 5.9rem;
   margin-top: 1.1rem;
   font-size: var(--lg);
   font-weight: bold;
   line-height: 2.25rem;
   border: none;
   border-radius: 10px;
   text-align: center;
}
.login__btn--primary {
   background: var(--extra1);
   color: var(--secondary);
}

No me quería centrar todo el contenido, me estaba quedando a un lado, después de revisar todo el archivo css, no había nada malo, luego abrí el enlace lo mire con el inspector y me di cuenta que había cerrado mal el div de la class login. Así me quedo. Le hice unos cambios al fondo y al color de la letra en el subtitle.

13:20 Me rompio :0000000000!!

este es el segundo curso que tomo con la profe estefany, son cursos divertidos y siento que aprendo mucho

Desktop

Mobile

<!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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="Style.css">   
    <title>Yard Sale</title>
</head>
<body>
    <nav>

        <div class="navbar-left">

            <img src="/assets/Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo_yard_sale" class="navbar-logo">

            <ul>
                <li>
                    <a href="#">All</a>
                </li>

                <li>
                    <a href="#">Clothes</a>
                </li>

                <li>
                    <a href="#">Electronics</a>
                </li>

                <li>
                    <a href="#">Furniture</a>
                </li>

                <li>
                    <a href="#">Toys</a>
                </li>

                <li>
                    <a href="#">Others</a>
                </li>
            </ul>
        </div>

        <div class="navbar-right">
            <ul>
                <li class="navbar-sign">Sign in</li>
                <li class="navbar-shopping-cart">
                    <img src="/assets/Platzi_YardSale_Icons/icon_shopping_cart.svg" alt="icon_shopping_cart">
                    <div></div>
                </li>
            </ul>
        </div>
    </nav>
    <div class="login">
        <div class="form-container">

            <figure class="logo-container">
                <img class="logo" src="/assets/Platzi_YardSale_Logos/logo_yard_sale.svg" alt="logo_yard_sale">
            </figure>

            <h1 class="title">Create a new password</h1>
            <p class="subtitle">Enter a new password for your account</p>

            <form class="form">

                <label for="input-password-1">Password</label>
                <input type="password" id="input-password-1" placeholder="********" class="input input-password"> 

                <label for="input-password-2">Re-enter password</label>
                <input type="password" id="input-password-2" placeholder="********" class="input input-password"> 

                <input type="submit" value="Confirm new password" class="primary-button login-button">
                
            </form>
        </div>
    </div>
</body>
</html>
:root{
    --white: #FFFFFF;
    --black: #000000;
    --dark: #232830;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 1.4rem;
    --md: 1.6rem;
    --lg: 1.8rem;
}

html {
    font-size: 62.5%;
}

body{
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
}

.responsive-icon-menu {
    display: none;
}

nav {
    display: flex;
    border-bottom: 1px solid var(--hospital-green);
    width: 100%;
    justify-content: space-between;
}

.navbar-logo {
    width: 15rem;
    margin-left: 4rem;
}

.navbar-left {
    display: flex;
}

.navbar-left ul {
    margin-left: 4rem;
}

.navbar-left ul li a ,
.navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: .8rem;
    border-radius: 1rem;
    font-size: var(--md);
}

.navbar-left ul li a:hover ,
.navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
}

.navbar-sign {
    color: var(--hospital-green);
    font-size: var(--md);
    margin-right: 4rem;
}

.navbar-shopping-cart {
    position: relative;
    margin: 0 2rem 0 0;
}

.navbar-shopping-cart div {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--hospital-green);
    position: absolute;
    right: 0;
    top: 0;
}

.navbar-left ul , 
.navbar-right ul {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.login {
    width: 100%;
    height: 90vh;
    display: grid;
    place-content: center;
}

.form-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 30rem;
}

.logo-container {
    justify-self: center;
}

.logo {
    width: 15rem;
    margin-bottom: .8rem;
    display: none;
}

.title {
    font-size: var(--lg);
    margin-bottom: 1.2rem;
    text-align: center;
}

.subtitle {
    font-size: var(--sm);
    text-align: center;
    color: var(--very-light-pink);
    margin-bottom: 3.2rem;
}

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

label {
    font-size: var(--md);
    font-weight: bold;
    margin-bottom: .8rem;
}

.input {
    background-color: var(--text-input-field);
    border: none;
    border-radius: 2.4rem;
    border-radius: .8rem;
    height: 3rem;
    padding: .8rem;
    font-size: var(--md);
    margin-bottom: 1.8rem;
}

.primary-button {
    background-color: var(--hospital-green);
    border: none;
    border-radius: 1rem;
    height: 5rem;
    color: var(--white);
    padding: 1.2rem;
    font-size: var(--lg);
    cursor: pointer;
    margin-top: 2rem;
}

@media (max-width: 640px) {

    .logo {
        display: block;
    }

    nav {
        display: none;
    }
}

Los logos e iconos se encuentran en el repo del curso Aquí

Solo hay que descargar el repo en .zip o clonarlo y después copiar y pegar las carpetas logo e icons en la carpeta donde están trabajando… Listo!!

Tuve problema con el ICONO, coloque todo tal cual aparecía en la clase pero no funcionaba, así que revisando los comentarios de Google Devs, había un error en la parte de “Clases” que se repetían para los “labels” de “password” y en mi caso “User”, así que la solución para que el logo funcione con el @media es cambiar las clases.

Adjunto el 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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./desktop.css">

    <title>Yard Sale</title>

</head>
<body>
    <div class="login">
        <div class="form-container">
            <img src="./logos/logo_yard_sale.svg" alt="Logotipo de la empresa." class="logo">

            <h1 class="title">Create a new password</h1>

            <p class="subtitle">Enter a new password for you new account</p>

            <form action="/" class="form">
                <label for="newUser" class="label">User</label>
                <input type="user" name="User" id="newUser" class="input input-user">
            </form>

            <form action="/" class="form">
                <label for="newPassword" class="label">Password</label>
                <input type="password" name="Password" id="newPassword" placeholder="********" class="input input-password">

                <input type="submit" value="Confirm" class="primary-button login-button">
            </form>
        </div>
    </div>
</body>
</html>

CSS

html {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
* {
    font-size: 1.6rem 62.5%;
}
:root {
    --white: #FFF;
    --black: #000;
    --very-light-pink: #C7C7C7C7;
    --text-input-field: #F7F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
}
body {
    font-family: 'Quicksand', sans-serif;
}
.login {
    width: 100%;
    height: 100vh;
    display: grid;
    place-items: center;
}
.form-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 300px;
}
.logo {
    width: 150px;
    margin-bottom: 48px;
    justify-self: center;
    display: none;
}
.title {
    font-size: var(--lg);
    margin-bottom: 12px;
    text-align: center;
}
.subtitle {
    color: var(--very-light-pink);
    font-size: var(--md);
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 32px;
    text-align: center;
}
form {
    display: flex;
    flex-direction: column;
}
label {
    font-size: var(--sm);
    font-weight: bold;
    margin-top: 16px;
}
.input {
    background-color: var(--text-input-field);
    border: none;
    border-radius: 8px;
    height: 30px;
    font-size: var(--md);
    padding: 8px;
}
.primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
}
.login-button {
    margin-top: 16px;
    margin-bottom: 16px;
}
@media (max-width: 640px) {
    .logo {
        display: block;
    }
}

Nota: El codigo HTML esta en otro archivo separado del CSS.

😁

Esos trucos del display grid no lo sabía… van para la chistera

Aporte en Mobile

Creo que a Teff se le pasó agregarle la fuente el botón. Sólo es agregando font-family a la siguiente clase:

.login-button {
    margin-top: 14px;
    margin-bottom: 30px;
    font-family: 'Quicksand', sans-serif;
}

Genial esto para centrar por todos lados
<style>
body{
margin: 0;
}
.login{
width: 100%;
height: 100vh;
display: grid;
place-items: center;

    }
</style>

Ojo para todas las personas que recargaron la página y no se mostraron los cambios tengan cuidado con las clases que le asignan en la clase anteror a esta la maestra puso algunas clases a ciertos componentes pero en esta se le ocurrio cambiarlos como si nada sin decir nada y si no te diste cuenta es probable que por eso no se reflejan los cambios por que tienes una clase en el html y otra en el css por lo que no coinciden y no se le aplican los cambios!!! ojo 😕👁️👀

Primera pantalla ready!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap"
    rel="stylesheet"
  >
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen 1</title>
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
  <main class="login">
    <section class="login-content">
      <img
        src="assets/logos/logo_yard_sale.svg"
        alt="logo"
        class="login_content-logo"
      >
      <h1 class="login_content-title">
        Create a new password
      </h1>
      <p class="login_content-subtitle">
        Enter a new password for your account
      </p>

      <form class="login_content-form">
        <label
          for="password"
          class="login_content-label login_content-password"
        >
          Password
        </label>
        <input
          id="password"
          type="password"
          name="password"
          placeholder="**************"
          class="login_content-input login_content_password-input"
        >

        <label
          for="re-enter-password"
          class="login_content-label login_content-re-enter-password"
        >
          Re-enter password
        </label>
        <input
          id="re-enter-password"
          type="password"
          name="re-enter-password"
          placeholder="**************"
          class="login_content-input login_content_re-enter-password-input"
        >

        <input
          type="submit"
          value="Confirm"
          class="primary-button login_content-primary-button"
        >
      </form>
    </section>
  </main>
</body>
</html>

CSS:

:root {
  --white: #FFFFFF;
  --black: #000000;
  --dark: #232830;
  --veri-ligth-pink: #C7C7C7;
 --text-input-field: #F7F7F7;
 --hospital-green: #ACD9B2;
 --sm: 0.875rem;
 --md: 1rem;
 --lg: 1.125rem;
}

body {
  box-sizing: border-box;

  margin: 0;
  padding: 0;

  font-family: 'Quicksand', sans-serif;
}

.login {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100vh;
  padding: 0 0.5rem;
}

.login-content {
  display: grid;
  grid-template-rows: auto 1fr  auto;

  width: 18.75rem;
}

.login_content-logo {
  display: none;

  justify-self: center;

  width: 9.3rem;
  margin-bottom: 3rem;
}

.login_content-title {
  font-size: var(--lg);
  margin-bottom: 0.75rem;
  text-align: center;
}

.login_content-subtitle {
  margin-top: 0;
  margin-bottom: 2rem;

  font-size: var(--md);
  font-weight: 300;
  color: var(--veri-ligth-pink);
  text-align: center;
}

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


.login_content-label {
  margin-bottom: 0.25rem;

  font-size: var(--sm);
  font-weight: bold;
}

.login_content-input {
  height: 2rem;
  padding: 0.375rem;
  border: none;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;

  font-size: var(--md);
  background-color: var(--text-input-field);
}

.login_content_password-input {
  margin-bottom: 1rem;
}

.login_content_re-enter-password-input {
  margin-bottom: 2rem;
}

.primary-button {
  width: 100%;
  height: 3.125rem;
  border: none;
  border-radius: 0.5rem;

  font-size: var(--md);
  font-weight: bold;
  color: var(--white);
  cursor: pointer;
  background-color: var(--hospital-green);
}

@media screen and (max-width: 600px) {
  .login_content-logo {
    display: block;
  }
}

Así sabes que lógica usan los media queries (max vs min):
@media (max-width:640px): si la pantalla es menor o igual a 640px, entonces aplica estas reglas.

@media (min-width:640px): si es mayor que o igual a 640px entonces aplica estas reglas.

cambié algunos colores porque con mi monitor no los distinguia.
Cuando me llegue la Platzi-Card lo priemro que haré será cambiar a monitores 4k. Nunca pares de gastar/invertir en
aprender ❤️

Note que en este curso se utilizan los estilos dentro del mismo documento HTML, mi recomendación es que si ya conocen como vincular hojas de estilo (CSS3) al documento empiecen desde ya a dar estilos de esa manera, ya que no es buena práctica hacerlo así.

Pero tampoco está mal, este es un video introductorio y, por tanto, no quieren saturarlos de información tan rápido.

ERES RE CRACK, Felicidades.