No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Carrito de compras: HTML

21/22
Recursos

El carrito de compras es la secci贸n de la p谩gina que le permitir谩 al usuario ver los productos que agreg贸 porque quiere comprarlos. Como puedes ver en la imagen, es una vista muy similar a secci贸n "mi orden", por lo que utilizaremos el mismo c贸digo.

Solo nos falta elaborar nuestra pantalla del carrito para terminar nuestra p谩gina. Como se mencion贸, es un proceso muy similar a los anteriores y podemos reutilizar el c贸digo de "my orders" .

cart.png

Maquetado b谩sico con HTML de un carrito de compras

Lleg贸 la hora de maquetar esta secci贸n de la plataforma en HTML. Emplea estas l铆neas de c贸digo como gu铆a para verificar que hayas hecho un gran trabajo y recuerda no memorizarlas, para garantizar que hayas aprendido correctamente.

  <aside class="product-detail">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      
      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>
      
      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>

Estilos CSS para un carrito de compras

Los estilos de CSS para el carrito son, pr谩cticamente, los mismos que para la secci贸n que le muestra al usuario su orden de compra.

El CSS sugerido es:

.product-detail {
      width: 360px;
      padding: 24px;
      box-sizing: border-box;
      position: absolute;
      right: 0;
    }
    .title-container {
      display: flex;
    }
    .title-container img {
      transform: rotate(180deg);
      margin-right: 14px;
    }
    .title {
      font-size: var(--lg);
      font-weight: bold;
    }
    .order {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      background-color: var(--text-input-field);
      margin-bottom: 24px;
      border-radius: 8px;
      padding: 0 24px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }
    .shopping-cart {
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      gap: 16px;
      margin-bottom: 24px;
      align-items: center;
    }
    .shopping-cart figure {
      margin: 0;
    }
    .shopping-cart figure img {
      width: 70px;
      height: 70px;
      border-radius: 20px;
      object-fit: cover;
    }
    .shopping-cart p:nth-child(2) {
      color: var(--very-light-pink);
    }
    .shopping-cart p:nth-child(3) {
      font-size: var(--md);
      font-weight: bold;
    }
    .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;
    }
    @media (max-width: 640px) {
      .product-detail {
        width: 100%;
      }
    }


驴Qu茅 es tranform en CSS?

Transform que es una propiedad de CSS que nos permite trasladar, rotar, escalar o sesgar elementos.
Se implementan principalmente para desarrollar animaciones. Para rotar la flechita lo empleamos.

驴Te gustar铆a animar con CSS?



Contribuci贸n creada por: Guadalupe Monge Barale con los aportes de Alan Alberto Dromundo Arias

Aportes 120

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Resultados

Qu茅 tal comunidad!
Fue un curso retador pero me encant贸 el enfoque y el proyecto! Estoy segurx que me ayudar谩 a desarrollar mis proyectos con m谩s creatividad e incluso mi portafolio para el primer trabajo como web developer que espero vendr谩 pronto!
Les comparto los resultados, espero ver los suyos! 脕nimo!

Pd. El dark mode lo tengo activado en brave xd no a帽ad铆 esa funcionalidad aunque se podr铆a 馃憖馃憖馃憖

Buen curso, me hubiera gustado una clase donde junt谩ramos todas las pantallas.

As铆 qued贸 mi carrito de compras:

As铆 se ver铆a con un overflow-y: scroll 馃榿 ideal para cuando el cliente tenga muchos elementos en el carrito 馃枛

En esta clase me enred茅 demasiado, traer c贸digo, subir, bajar鈥 no s茅 si fue porque el editor de c贸digo tiene demasiado zoom.
.
Lo bueno es que al final lo pude resolver y me qued贸 genial.

Resultados del Proyecto

Hola! 馃懢
Les comparto el resultado de la cursada 馃摎, fue un lindo desaf铆o tomar el curso pero realizarlo con las t茅cnicas y herramientas que nos brindan en la Escuela de Desarrollo Web
~

  • Pug 馃Υ
  • Sass 馃鈥嶁檪锔
  • BEM 馃帿
  • Git y GitHub 鉀
  • Molbile first 馃摫
  • Terminal (WSL2) 馃

~
馃儚 Estas son las paginas que desarrollamos: Paginas
馃捈 Y este el repositorio de todo el curso: Repo

隆Hello! 馃枛 Como pudieron ver la maestra reutiliza las clases que ya tenemos estilizadas en otras p谩ginas del sitio, quiero creer que esto lo hace ella por efectos de practicidad y para no demorarnos un poco m谩s re-haciendo los estilos desde cero en cada p谩gina, pero si hacemos esto en un proyecto real, ser谩 un desastre escalar el sitio web.
馃槺 Imag铆nen que modificamos el bot贸n de una de nuestras p谩ginas, al hacer eso tambi茅n se estar谩n afectando todos los otros botones en los que utilizamos esa misma clase.
馃憣 Ahorita que es un proyecto peque帽o no hay ning煤n problema, solo tengan en cuenta eso al estar trabajando con proyectos m谩s grandes, puede evitarles muchos dolores de cabeza 馃憤
Lo que yo sugiero es hacer sus clases 煤nicas para c谩da p谩gina, y claro, podemos basarnos en los estilos que hayamos hecho en otras p谩ginas, simplemente copiando y pegando las propiedades 馃榿

Wooojuuu! Me gust贸 mucho!
Puse lo que hice en github, es tal cual fue en el curso
https://github.com/Dann-Herz/yard-sale
disfrute mucho este curso y aprend铆 muchas cosas

Hola les comparto mis resultado del curso:
Pantallas 馃捇: https://kfiguera.github.io/frontend-practico/
Repositorio 馃捈: https://github.com/kfiguera/frontend-practico

Estefany debe mejorar como profesora鈥

Un curso incre铆ble!.
Muchos critican diciendo cosas como que no son las mejores pr谩cticas. Lo que no entienden es que el curso es para aprender a dise帽ar en CSS. Me encant贸 todo lo que aprend铆: Flex y Grid layout, positioning, display, box model, media queries, estructurar, responsive design, etc. Aprend铆 much铆simo.
Me sirvi贸 bastante hacer primero el dise帽o y despu茅s ver c贸mo lo hace la profesora y as铆 ir compar谩ndome y mejorando.

Estos son mis apuntes de esta clase:

  • Puedes reutilizar la clase 09. - Solo cambiando el producto inicial y volverlo a un contenido 鈥淭OTAL鈥.
    *Tener en cuenta que la imagen tiene de estructura particional de [auto auto 1fr auto].
    *Transform: rotate (180 deg); // para rotar la flecha en otra direcci贸n al costado de 鈥淢y order鈥.
  • box-sizing: border-box; // para ubicar el contenido al borde como en las anteriores clases.

As铆 me qued贸, lo realice antes de las explicaci贸n de la maestra.

Este fue mi resultado 馃槃
Livesite
Repo

La verdad es que se aprecia que Estefany sabe lo que hace y tiene mucha agilidad en su trabajo, pero鈥l curso no me agrad贸 tanto (aunque claro que aprend铆) porque practicamente lo que hago es seguirle los pasos a lo que va haciendo, pocas veces explica el porque de las cosas. No me animo a compartir mis pantallas porque son literalmente las mismas pantallas que ella tiene ya que lo que hice fue seguir su c贸digo casi al 100%. No se, en mi opini贸n, este curso pudo haber sido much铆simo mejor.

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

Yo durante los primeros 3 minutos de clase:
Eh鈥?

Generar un scroll para las shopping-card

.

  • Crea un contenedor para esos elementos 馃摝 y a帽谩dele una clase

.

.

  • A帽ade los siguientes estilos al documento:

.

transform: rotate(180deg); /* rota la imagen seg煤n los grados indicados */

<!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>Product Detail</title>
    <style>
        :root {
            --black: #000000;
            --white: #ffffff;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #acd0b2;
            --primary-button-hover: #5ab865;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }

        html{
            font-size: 62.5%;
        }

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

        .product-detail{
            position: absolute;
            right: 0;
            width: 360px;
            padding-bottom: 24px;
        }

        .title-container{
            display: flex;
            
        }

        .title-container img {
            transform: rotate(180deg);
            margin-right:20px;
        }

        .title {
            font-size: var(--lg);
            font-weight: bold;
        }
    
        .my-order{
            display: grid;
            place-items: center;
            width:100%;
            height:100vh;
        }

        

        .my-order-content{
            display: grid;
            /* grid-template-rows: auto 1fr auto; */
            
        }

        .order {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 16px;
            align-items: center;
            
            padding: 0 24px;
            margin-bottom: 12px;

            background-color: var(--text-input-field);
            border-radius: 8px;
        }

        .order p:nth-child(1) {
            display: flex;
            flex-direction: column;
        }   

        .order p span:nth-child(1) {
            font-size: var(--md);
            font-weight: bold;
        }

        .order p:nth-child(2) {
            text-align: end;
            font-weight: bold;
            font-size: var(--md);
            padding-right: 24px;
        }

        .shopping-cart{
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 16px;

            margin-bottom: 24px;
            align-items: center;
            padding: 0 24px 0 0;
        }

        .shopping-cart figure {
            margin: 0;
        }

        .shopping-cart figure img {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            
            object-fit: cover;

        }

        .shopping-cart p:nth-child(2) {
            font-size: var(--sm);
            color: var(--very-light-pink);
        }

        .shopping-cart p:nth-child(3){
            font-size: var(--md);
            font-weight: bold;
        }

        .primary-button{
            height: 40px;
            width: 100%;
            border: none;
            border-radius: 12px;

            color: var(--white);
            font-size: var(--md);
            font-weight: bold;

            background-color: var(--hospital-green);

            cursor: pointer;
        }

        

        @media(max-width: 640px){
            .product-detail{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <aside class='product-detail'>
        <div class="title-container">
            <img src="./assets/icons/flechita.svg" alt="Back">
            <p class="title">My order</p>

        </div>
        <div class="my-order-content">
            
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
                </figure>
                <p>Bike</p>
                <p>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </div> 
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
                </figure>
                <p>Bike</p>
                <p>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </div> 
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bike">
                </figure>
                <p>Bike</p>
                <p>$120.00</p>
                <img src="./assets/icons/icon_close.png" alt="close">
            </div> 
            <div class="order">
                <p>
                    <span>
                        Total
                    </span>
                </p>
                <p>$560.00</p>
            </div>
            <button class='primary-button '>Checkout</button>
        </div>
        
    </aside>
    
</body>
</html>

Me ha ido super bie, ya anot茅 las nuevas propiedas que no conoc铆a y para aplicarlo en los futuros proyectos 馃槃

Me siento muy emocionado de haber llegado hasta este punto del curso y haber completado todas las vistas y retos de este maravilloso proyecto!

Media Query

No olviden agregar el media query para que en la vista de mobile el titulo y la flechita desaparezca, ya que es mobile solo s visible en la barra de navegaci贸n.
.

 @media (max-width: 640px) {
            .title-container {
                display: none;
            }
        }

Aprend铆 bastante, se nota que la profe sabe mucho.

Pudo haber enunciado qu茅 clases eliminar y qu茅 clases permanecen, as铆 no hay que estar pausando el video para ver que fue lo que borr贸 y que dej贸.

Tambi茅n cuando usaba la imagen, pudo haber cambiado el tama帽o de esta al principio de los videos, as铆 sea solo provisionalmente para entender f谩cilmente qu茅 est谩 pasando en el HTML.

Comparto algunos de mis resultados (mobile) y el github del proyecto
https://github.com/yessikaplata/yard-sale

El objetivo de este proyecto es practicar HTML y CSS para la elaboraci贸n del dise帽o de referencia, por esta raz贸n los estilos se crearon dentro de las p谩ginas HTML de tal manera que los elementos queraran de acuerdo al dise帽o. Para un evolutivo de este proyecto se espera tener hojas de estilos siguiendo metodologias CSS como BEM





xd Ahora s铆 me perd铆 desde el inicio

buena tarde excelente curso aqui dejo mi aporte




![navbar-desktop.PNG]
(https://static.platzi.com/media/user_upload/navbar-desktop-c5fbdfa0-617d-471e-a5a8-3e5611b4c6ac.jpg)

Personalmente le agregue un hover al icono que esta al lado de shopping cart:

.title-container img:hover{
            cursor: pointer;
        }

Listo!

As铆 qued贸. Intent茅 hacerlo todo yo sola antes de que ella lo explicara. Casi lo logro pero me trab茅 cuando no pude agregar padding al contenedor principal. Y ya vi que se resolvi贸 con box-sizing: border-box

Mi aporte! llevadito de la mano, pero lo m谩s importante es obtener el resultado y sorbetodo coger los tips que nos di贸 la instructura! Gracias!

Hola Equipo,

para ser honesto decidi realizar la actividad sin ver el video, solo basandome en lo que ya habiamos hecho en las clases pasadas y con el conocimiento adquirido. Pues bien, este fue el resultado y me siento satisfecho por todo lo aprendido hasta el momento. Hay que continuar fortaleciendo los conocimientos en html y CSS.

Les comparto mi resultado

<!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;
            --dark: #232830;
            --dark-ligth: #5d626a;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .my-order{
            width: 360px;
            height: 100vh;
            display: block;
            place-items: center;
            position: absolute;
            right: 0;
        }
        .my-order-container{
            width: 100%;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }
        .my-order-content{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background: var(--text-input-field);
            border-radius: 10px;
            align-items: center;
            margin-bottom: 24px;
            margin-left: 20px;
            width: 90%;
        }
        .my-order-content p:nth-child(1){
            display: flex;
            flex-direction: column;
            margin: 20px;
        }
        .my-order-content p span:nth-child(1){
            font-weight: bold;
            margin-bottom: 4px;
            font-size: var(--md);
            color: var(--black);
        }
        .my-order-content p span:nth-child(2){
            color: var(--very-light-pink);
        }
        .my-order-content p:nth-child(2){
            margin: 20px;
            font-weight: bold;
            color: var(--dark-ligth);
        }
        .tittle{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
        }
        .tittle figure:nth-child(1){
            margin-left: 12px;
        }
        .tittle figure:nth-child(2){
            display: none;
        }
        .tittle p{
            font-size: var(--md);
            font-weight: bold;
        }
        .shopping-card{
            width: 92%;
            display: flex;
            flex-direction: row;
            justify-content: start;
            align-items: center;
        }
        .shopping-card figure{
            margin: 10px 25px 10px 10px;
        }
        .shopping-card figure img{
            width: 80px;
            height: 80px;
            border-radius: 20px;
            object-fit: cover;
        }
        .parr-shopping{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .parr-shopping p:nth-child(1){
            color: var(--very-light-pink);
            width: 50%;
            font-size: var(--sm);
        }
        .parr-shopping p:nth-child(2){
            font-size: var(--md);
            font-weight: bold;
            color: var(--dark-ligth);
        }
        .parr-shopping img{
            width: 15px;
            height: 15px;
            margin: 17px 10px 10px 10px;
        }
        .separator{
            height: 10vh;
        }
        .primary-button{
            width: 80%;
            background: var(--hospital-green);
            color: var(--white);
            font-weight: bold;
            font-size: var(--lg);
            height: 70px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 0px;
        }
        .checkout{
            display: flex;
            align-items: center;
            justify-content: center;
            
        }
        @media (max-width: 640px){
            .my-order{
                width: 100%;
            }
            .tittle{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
            }
            .tittle p{
                display: block;
            }
            .tittle figure:nth-child(1){
                display: none;
            }
            .tittle figure:nth-child(2){
                display: block;
            }
        }
    </style>
</head>
<body>
    <div class="my-order">
        <div class="my-order-container">
            <div class="tittle">
                <figure>
                    <img src="./icons/Vector.png" alt="atras">
                </figure>
                <figure>
                    <img src="./icons/icon_menu.svg" alt="menu">
                </figure>
                <p>
                Shoping Cart
                </p>
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="">
                </figure>
                <div class="parr-shopping">  
                    <p>
                       Lipstick
                    </p>
                    <p>
                       $120,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>   
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/1279107/pexels-photo-1279107.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Alexa
                    </p>
                    <p>
                        $120,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>  
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/2633986/pexels-photo-2633986.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Make Up
                    </p>
                    <p>
                        $100,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>    
            </div>
            <div class="shopping-card">
                <figure>
                    <img src="https://images.pexels.com/photos/4464481/pexels-photo-4464481.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
                </figure>
                <div class="parr-shopping">
                    <p>
                        Notebook
                    </p>
                    <p>
                        $140,00
                    </p>
                    <img src="./icons/icon_close.png" alt="close">
                </div>  
            </div>
            <div class="separator">
                <p>&nbsp;</p>
            </div>
            <div class="my-order-content">
                <p>
                    <span>Total</span>
                </p>
                <p>
                    $480.00
                </p>
            </div>
            <div class="checkout">
                <button class="primary-button">
                    Checkout
                </button>
            </div>
        </div>
    </div>
</body>
</html> 

Saludos y espero les sirva

Agregue unas cositas.

finally

Pienso que nos falto hacer que nuestra imagen de close nos muestre la opcion de click, yo adicione esto:
.shopping-cart img:hover {
cursor: pointer;
}
ahora con JS podemos programar la opcion de eliminar el producto.

Bueno, hora de pulir toda esta pr谩ctica, gracias.

En vez de position absolute pueden usar grid y su propiedad place-content:end

Hola quisiera hacer este aporte:
A lo largo del curso la profe definio las variables todas las veces, me he dado cuenta que es mejor definirlas globalmente, aqui mi aporte:
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}

驴QUI脡N LLEG脫 HASTA AQU脥? SIENTETE ORGULLOSO DE TI.

Acab茅 la 煤ltima vista鈥spero que en otro curso se profundice el tema de reutilizar clases de diferentes vistas鈥a verdad ah铆 si no se cual ser铆a una buena pr谩ctica.

Dejo un link ar repo de github donde hice el proyecto 馃槂

https://github.com/Twiick/curso-practico-de-frontend-developer

seguimos鈥













Fue un muy buen curso, me gustan mucho los cursos practicos, creo que son la mejor manera de aprender.
.
Yo por mi parte lo que hice fue que despues de seguir cada clase, intente replicar la misma pagina pero esta vez sin mirar el video, por mi mismo, asi me aseguro que si estoy asimilando todo el contenido.

Malas pr谩cticas de la profesora 馃槮
Usa muchos comandos de teclado que rara vez desvela, al eliminar partes de c贸digo lo hace de abajo a arriba ( eso dificulta mucho ver qu茅 cachos de c贸digo hemos de cercenar), va muy r谩pido cuando hace estas operaciones, etc
Usa cosas de sass que no ha mencionado para nada, simplemente lo pone ah铆 y no explica. Lo mismo pasaba cuando se us贸 la etiquet <figure>鈥

El curso es muy interesante, el m茅todo, cuestionable.

Uff, ha sido un camino largo. Pero por fin termin茅. No me arrepiento de nada.

Un Curso muy genial, ayuda a desarrollar muchas habilidades, muchas gracias y a seguir practicando

Y quedo la ultima pantalla!! me gusto el curso! vamos a lo que sigue =D

Lo 煤nico que no me funcion贸 fue el box-sizing: border-box. No se porqu茅, lo dem谩s todo muy bien.

Lo organize a mi manera pero siguiendo los pasos de la profe, fue impresionante asombroso y frustrante pero lo logramos

Me encant贸 este curso, soy un ingeniero de sistemas que decidi贸 tomar una l铆nea de trabajo diferente, como todo los temas de agilidad y la gerencia de proyectos鈥ero decid铆 robustecer mis habilidades con desarrollo de software FrontEnd y ha sido un 茅xito, seguro podr茅 ser mucho mas competitivo en el mundo laboral.

Asi quedo mi shopping cart

mi aporte : D

excelente, hubo un par de clases que se me dificult贸 pero revis茅 y correg铆 y todo quedo bien cuco!

Les comparto mi resultado, hice una hoja de estilo para cada clase.
https://github.com/Josetruyolm/Frontend-Mobile.git

Genial el curso y as铆 me quedo el resultado de la ultima clase

As铆 me quedo:

Buenos d铆as a todos

Comparto el ejercicio completo 馃槃

https://github.com/ginnko2019/yardsale.git

as铆 es como quedo la ultima pantalla.

MUY CONTENTO !!!

con algunos tropiezos pero muchos aprendizajes

para agregar el icono que aparece en el dise帽o podemos usar font awesome, agregar esto en el head:
<link rel=鈥渟tylesheet鈥 href=鈥https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css鈥 integrity=鈥渟ha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==鈥 crossorigin=鈥渁nonymous鈥 referrerpolicy=鈥渘o-referrer鈥 />

y luego en vez de usar una imagen podemos utilizar esto:
<i class=鈥渇as fa-long-arrow-left鈥></i>

espero les ayude, igual cuando se pase este proyecto a react tambi茅n se puede importar font awesome.

Este 煤ltimo ejercicio lo desarrolle de la siguiente forma:

Me perd铆 muchas veces pero lo hice

Puedo decir que he aprendido, porque normalmente cuando s茅 como hacer las cosas, dejo de entender los pasos y la forma de hacer de los profesores, principalmente porque me comienza a parecer casi obvio la forma de hacerlo, sigo mi instinto y descubro que obtengo el mismo resultado. Al menos me pas贸 con esta clase.

Repositorio 馃殌馃殌: https://github.com/ferneynava/Yard-Sale

VISTA DESKTOP

VISTA MOBILE

No hizo hizo la vista movil, solo agreguen:

@media (max-width: 640px){
    .product-detail{
        width: 100%;
    }
}

Lo realice a ojo, sin ver el video usando los conocimientos de los videos anteriores.

<!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="shortcut icon" href="./logos/favicon_bota_fora.svg" type="img">
    <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>Detalle producto</title>
    <style>
         :root{
            --white: #FFFFFF;
            --black: #000000;
            --dark: #232830;
            --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;
             }
        .primary-button{
           background-color: var(--hospital-green);
           border-radius: 8px;
           border: none;
           color: var(--white);
           font-size: var(--md); 
           padding: 12px; 
           width: 100%;
           cursor: pointer;
           font-weight: bold;
           margin-top: 20px;
        }
        .container{
            width: 360px;
            height: 100%;
            margin: 8px;
            box-sizing: border-box;
            position: absolute;
            right: 0;
        }
        .shopping-cart-title{
            display: flex;
            margin-left: 12px;
            
        }
        .shopping-cart-title img:nth-child(1){
            transform: rotate(180deg);
            cursor: pointer;
        }
        .shopping-cart-title img:nth-child(2){
            display: none;
        }
        .title{
            margin-left: 14px;
            font-size: var(--md);
            color: var(--black);
            font-weight: bold;
            
        } 
        .item-added{
            display: grid;
            grid-template-columns: auto 1fr
            auto auto;
            gap: 18px;
            align-items: center;
            
        }
        .item-added > img{
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 16px;
            margin-top: 24px;
        }
                   
        .item-added > img:last-child{
            width: 16px;
            height: 16px;
            margin: 0;
            cursor: pointer;
        } 
        .item-added > p:nth-child(3){
            font-size: var(--md);
            font-weight: bold;
        }
        .item-added > p:nth-child(2){
            font-size: var(--md);
            color: var(--very-light-pink);
        }
        .checkout{
            display: flex;
            flex-direction: column;
            width: 100%;
        }  
        .checkout-content{
            background: var(--text-input-field);
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-content: center;           
            padding: 8px;
            margin-top: 30px;
         }
        .checkout-content p>span{
            display: block;
            
        }   
        .checkout-content p{
            margin: 0;
            align-self: center;
        }
        .checkout p span:not(:last-child),
        .checkout p:last-child{
            font-size: var(--md);
            font-weight: bold;
        }
        .checkout p span:last-child{
            font-size: var(--sm);
            color: var(--very-light-pink);
        }
        @media(max-width: 640px){
            .container{
            width: 100vw;
            padding: 12px;
            }
            .shopping-cart-title{
                padding-top: 4px;
                padding-bottom: 4px;
                border-bottom: 1px solid var(--very-light-pink);
            }
            .shopping-cart-title img:nth-child(1){
            display: none;
        }
        .shopping-cart-title img:nth-child(2){
            display:flex;
            position: absolute;
            cursor: pointer;
            left: 34px;
            top: 14px;
        }
        .title{
            padding-left: 90px;
            margin: 0;
        }
        .item-content{
            margin-left: 18px;
        }
        }
        </style>
    </head>
    <body>
        <aside class="container">
            <div class="shopping-cart-title">
                <img src="./icons/flechita.svg" alt="flecha">
                <img src="./icons/icon_menu.svg" alt="">
                <h1 class="title">Shopping cart</h1>
            </div>
            <div    class="item-content">  
            <div class="item-added">
                <img src="./bike.webp" alt="">
                <p>Bicicleta</p>
                <p>$200.00</p>
                <img src="./icons/icon_close.png" alt="">
            </div>

                <div class="item-added">
                    <img src="./bike.webp" alt="">
                    <p>Bicicleta</p>
                    <p>$200.00</p>
                    <img src="./icons/icon_close.png" alt="">
                </div>

                <div class="item-added">
                    <img src="./bike.webp" alt="">
                    <p>Bicicleta</p>
                    <p>$200.00</p>
                    <img src="./icons/icon_close.png" alt="">
                </div>

                <div class="item-added">
                    <img src="./bike.webp" alt="">
                    <p>Bicicleta</p>
                    <p>$200.00</p>
                    <img src="./icons/icon_close.png" alt="">
                </div>

                <div class="checkout">
                    <div class="checkout-content">
                        <p>
                            <span>09.05.22</span>
                            <span>7 articles</span>
                        </p>
                        <p>$800.00</p>
                    </div>
                    <button class="primary-button">Checkout</button>
                </div>

            </div>
       </aside>
    </body>
</html>

termine esta clase hoy a las 11:48 pm del 3 de mayo 2022, muchas gracias por lo aprendido, voy a seguir con el curso de escuela de java script en su orden, si que en algunas clases me perdia pero me gustaba porque algo me quedaba mal y tenia que estar buscando que fue lo que hize mal, como en esta ultima clase, que no se si la profe se equivoco pero tiene un (div) de mas entonces me causo muchos problemas pero ya porfin pude.

Reci茅n en esta clase me di cuenta que tenia la velocidad en 1.5 ,tuve que prestar mucha atenci贸n para no enredarme o perderme 馃槀

Excelente curso pusimos en practica todo lo del curso anterior me quedaron claro muchos conceptos y formas de empezar a usar html y css lo que queda es practicar y leer mucho para aprender propiedades y etiquetas :3

馃煡 馃煣 馃煥 馃煩 馃煢 馃煪 馃煡 馃煣 馃煥 馃煩 馃煢
YardSale - Proyecto Terminado 馃馃従鈥嶐煉
馃煡 馃煣 馃煥 馃煩 馃煢 馃煪 馃煡 馃煣 馃煥 馃煩 馃煢
.
Fue un gran curso 馃幆, la realizaci贸n del proyecto que fue propuesto me ayudo a cimentar las bases 馃Υy me brindo nuevos conocimientos, fue una gran experiencia!, A continuaci贸n dejo los links a mi repositorio y a la pagina lanzada.
.
鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍

鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍鈻笍

Bueno, a pesar de que muchas veces era confuso con lo de 鈥渉ijitos鈥 鈥渆l padre鈥 y esas cosas pues fue precisamente esa impresici贸n lo que hizo que le pusiera much铆sima m谩s atenci贸n a lo que hac铆a en el c贸digo y a no dar las cosas por sentado. Muchas gracias Teff por el curso

muy buen curso, aqui dejo mi cap. de la clase 鉂わ笍

Yo estoy muy contenta con el proceso y el avance de cada paso del proyecto.

Me fue muy bien. C贸mo al principio qued贸 muy claro que esta forma de maquetar est谩 planificada para un curso posterior de React.Js estoy muy expectante.
A煤n as铆 creo que es una muy buena forma de empezar para los que se inician, y 驴por qu茅 no?. Una forma de repasar para los que tenemos m谩s experiencia. No todo se sabe. Sean humildes, amigos.

Fue un curso muy amable y retador. Pero hacerlo de la manita, realmente sorprende que tanto se puede avanzar reutilizando los poco o muchos trucos que la profe nos ense帽贸.

Aqu铆 mi pantalla.

un peque帽o aporte creo qe hizo falta estilizar la 鈥渪鈥 para qe el cursor se viera destacado
se qe es algo facil pero queria compartirlo como lo hice yo no pude sacar el pantallazo con el cursor encima de la x pero uds entenderan la idea

Mi carrito de compras:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>YARD Sale | Shopping cart</title>
    <style>
        :root {
              --white: #FFFFFF;
              --md: 16px;
              --lg: 20px;
              --very-light-pink: #C7C7C7;
              --text-input-field: #F7F7F7;
              --hospital-green: #ACD9B2;
          }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .carts-container {
            width: 480px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            right: 0;
        }
        .top-container {
            width: 100%;
            display: flex;
            align-items: center;
            margin: 8px 0;
        }
        .arrow {
            margin-left: 32px;
            transform: rotate(180deg);
        }
        .menu {
            display: none;
            margin-left: 20px;
        }
        .title {
            width: 90%;
            font-size: var(--lg);
            padding-left: 32px;
            text-align: left;
        }
        .cart-item{
            width: 90%;
            display: grid;
            grid-template-columns: auto 2fr 1fr auto;
            align-items: center;
            margin: 4px 0;
        }
        .product-img {
            width: 128px;
            object-fit: cover;
        }
        .product-info {
            color: var(--very-light-pink);
        }
        p:not(.product-info) {
            font-size: var(--md);
            font-weight: bold;
        }
        .product-value {
            text-align: center;
        }
        .close-button {
            width: 16px;
        }
        .total-value, .checkout {
            box-sizing: border-box;
            width: 90%;
            height: 64px;
        }
        .total-value { 
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--text-input-field);
            border-radius: 8px;
            margin-top: 64px;
            padding: 0 16px;
        }
        .checkout {
            background: var(--hospital-green);
            border: none;
            border-radius: 8px;
            color: var(--white);
            font-size: var(--md);
            font-weight: bold;
        }
        @media (max-width: 800px) {
            .carts-container {
                width: 100%;
            }
            .top-container {
                border-bottom: solid 1px var(--very-light-pink);
                margin: 4px 0;
            }
            .arrow {
                display: none;
            }
            .menu {
                display: inherit;
            }
            .title {
                font-size: var(--md);
                text-align: center;
                margin: 0;
                padding: 12px 0;
            }
            .cart-item {
                margin: 4px 0;
            }
            .total-value {
                margin-top: 16px;
            }
        }
    </style>
</head>
<body>
    <aside class="carts-container">
        <div class="top-container">
            <img src="/icons/flechita.svg" alt="Menu" class="arrow">
            <img src="/icons/icon_menu.svg" alt="Menu" class="menu">
            <h1 class="title">Shopping cart</h1>
        </div>
        <div class="cart-item">
            <img src="/assets/bike.png" alt="bike" class="product-img">
            <p class="product-info">Ghost Bike</p>
            <p class="product-value">$ 112.00</p>
            <img src="icons/icon_close.png" alt="Close" class="close-button">
        </div>
        <div class="cart-item">
            <img src="/assets/bike.png" alt="bike" class="product-img">
            <p class="product-info">Ghost Bike</p>
            <p class="product-value">$ 112.00</p>
            <img src="icons/icon_close.png" alt="Close" class="close-button">
        </div>
        <div class="cart-item">
            <img src="/assets/bike.png" alt="bike" class="product-img">
            <p class="product-info">Ghost Bike</p>
            <p class="product-value">$ 112.00</p>
            <img src="icons/icon_close.png" alt="Close" class="close-button">
        </div>
        <div class="cart-item">
            <img src="/assets/bike.png" alt="bike" class="product-img">
            <p class="product-info">Ghost Bike</p>
            <p class="product-value">$ 112.00</p>
            <img src="icons/icon_close.png" alt="Close" class="close-button">
        </div>
        <div class="cart-item">
            <img src="/assets/bike.png" alt="bike" class="product-img">
            <p class="product-info">Ghost Bike</p>
            <p class="product-value">$ 112.00</p>
            <img src="icons/icon_close.png" alt="Close" class="close-button">
        </div>
        <p class="total-value">
            <span class="total">Total</span>
            <span class="value">$ 560.00</span>
        </p>
        <button class="checkout">Checkout</button>
    </aside>
</body>
</html>

De verdad que el proceso es largo, complejo, pero cuando se ve el resultado final, se siente como si fuera capaz de cualquier cosa!.. Excelente

![](``

El maquetado me qued贸 pr谩cticamente igual al que se expuso en el curso.
Hubo estilos muy interesantes que no sab铆a c贸mo se aplicaban.

Por 煤ltimo, realic茅 el maquetado y el estilo, desde 0 (trato de no copia c贸digo para repaso y memorizaci贸n) y antes de ver la clase para poner a prueba lo aprendido:

Ahora s铆, a concluir la clase para ver como lo hace la profesora y ver qu茅 m谩s puedo aprender.

Siento que he avanzado con este curso 馃槂 estoy adaptando este proyecto a uno propio.

Gracias Estefany, gracias Platzi.

Gran curso, coincido con Rodrigo鈥 RETADOR 馃槂

Esto fue lo que logre hacer, siento que aprend铆 bastante, me demore pero lo logre.








Buen d铆a:

Pues yo trate de conseguir una flecha similar al del layout y con lo que hemos practicado, creo que logr茅 posicionarla correctamente, les comparto mi resultado.

![](

Y mi c贸digo:

HTML

<!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&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
    <link rel="icon" href="./logos/favicon_yard_sale.svg">
    <title>Yard Sale</title>
    <style>
        /* @media (max-width: 340px) {
            .primary-button {
                width: 100%;
            }

        } */
    </style>
</head>
<body>
    <aside class="product-detail-cart">
        <div class="title-container">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZcy9cB_ONJFq1r5Z4cDuaiHr-FR1PvQxKqw&usqp=CAU" alt="arrow">
            
            <p class="title-shopping-cart">Carrito de compras</p>
        </div>
        
        <div class="my-order-content">
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/2130611/pexels-photo-2130611.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Bicicleta</p>
                <p>$ 3,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/2130611/pexels-photo-2130611.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Bicicleta</p>
                <p>$ 3,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/2130611/pexels-photo-2130611.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Bicicleta</p>
                <p>$ 3,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/6795517/pexels-photo-6795517.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Tostador London</p>
                <p>$ 1,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/6795517/pexels-photo-6795517.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Tostador London</p>
                <p>$ 1,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
            <div class="shopping-cart">
                <figure>
                    <img src="https://images.pexels.com/photos/6795517/pexels-photo-6795517.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="bike">
                </figure>
                <p>Tostador London</p>
                <p>$ 1,200 MXP</p>
                <img src="./icons/icon_close.png" alt="close-icon">
            </div>
        </div>
        <div class="order">
            <p>
                <span>Total </span>
            </p>
            <p>$ 13,200 MXP</p>
        </div>
        <button class="primary-button">
            Pagar
       </button>
    </aside>
</body>
</html>

Y mis estilos:

:root {
    --white: #FFFFFF;
    --black: #000000;            
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --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;
    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;
}

.title-account {
    font-size: var(--lg);
    font-weight: bold;
    margin-bottom: 50px;
    text-align: left;
    justify-self: start;
}
.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;
    width: 100%;
}

.form a {
    text-decoration: none;
    font-size: var(--md);
    text-align: center;
    color: var(--hospital-green);
    cursor: pointer;
    margin-bottom: 54px;
}
.label {
    font-size: var(--sm);
    font-weight: bold;
    margin-bottom: 4px;

}

.label-error {
    font-size: var(--md);
    color: #dd7a7a;
    font-weight: bold;
}

.label-error-p {
    color:#dd7a7a;
    text-align: center;
    font-size: var(--sm);
        
}
.input {
    margin-bottom: 12px;
    background-color: var(--text-input-field);
    border: none;
    border-radius: 8px;
    height: 32px;
    font-size: var(--md);
    padding: 6px
    
}

.error-input {
    margin-bottom: 12px;
    background-color: #fff9f9;
    border: none;
    border-radius: 8px;
    height: 32px;
    font-size: var(--md);
    padding: 6px
    
}
.input-email {
    margin-bottom: 22px;
}

.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-error {
    margin-top: 34px;
    background-color: var(--text-input-field);
    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;
}

.secondary-button {
    margin-top: 50px;
    background-color: var(--white);
    border-radius: 12px;
    border: solid var(--hospital-green);
    color: var(--hospital-green);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
}

.correo-imagen {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background-color: var(--text-input-field);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}

.correo-imagen img {
    width: 80px;
}

.subtitle span {
    font-size: var(--md);
}

.subtitle .resend {
    font-size: var(--md);
    text-decoration: none;
    font-weight: bold;
}

.value {
    color: var(--very-light-pink);
    font-size: var(--md);
    margin: 8px 0 32px 0;
}
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 26px;
    place-content: center;
}
.product-card {
    width: 240px;
}
.product-card img {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
}
.product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}
.product-info figure {
    margin: 0;
}
.product-info figure img{
    width: 35px;
    height: 35px;
    cursor: pointer;
}
.product-info div p:nth-child(1) {
   font-weight: bold;
   font-size: var(--md);
   margin-top: 0;
   margin-bottom: 4px;
}
.product-info div p:nth-child(2) {
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 0;
    color: var(--very-light-pink);
 }
 .desktop-menu {
     width: 100px;
     height: auto;
     border: 1px solid var(--very-light-pink);
     padding: 20px 20px 0 20px;
 }
 .desktop-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 .desktop-menu ul li {
     text-align: end;

 }
.desktop-menu ul li:last-child {
    padding-top: 20px;
    border-top: 1px solid var(--very-light-pink);
}
.desktop-menu ul li:last-child a {
    color: var(--hospital-green);
    font-size: var(--sm);
    text-decoration: none;
}
.desktop-menu ul li a {
    color: var(--black);
    font-size: var(--md);
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
}
.mobile-menu {
    padding: 24px;

}

.mobile-menu p {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
}
.mobile-menu a {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
}
.mobile-menu ul {
    padding: 0;
    margin: 24px 0 0;
    list-style: none;   
}
.mobile-menu ul li{
    margin-bottom: 24px;   
}
.mobile-menu .email {
    font-size: var(--sm);
    /* color: var(--very-light-pink); */
    font-weight: 300;
}
.mobile-menu ul:nth-child(1) {
    border-bottom: 1px solid var(--very-light-pink);
}
.mobile-menu .sign-out {
    color: var(--hospital-green);
    font-size: var(--sm);
}
.mobile-menu ul:nth-child(2) {
    margin-top: 74px;
}.mobile-menu ul:nth-child(3) {
    margin-top: 74px;
}
.mobile-menu ul:last-child li {
    margin: 0;
}
.my-order {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
.my-order-contentainer {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 90%;
    max-width: 300px;
}
.my-order-container .title {
    text-align: left;
}
.my-order-content {
    display: flex;
    flex-direction: column;
}
.order {
    height: 80px;
    background-color: var(--text-input-field);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
}
.order p:nth-child(1) {
    display: flex;
    flex-direction: column;    
}
.order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
    margin-left: 120px;
}
.order p span:nth-child(1) {
    font-size: var(--md);
    font-weight: bold;

}
.order p span:nth-child(2) {
    font-size: var(--sm);
    color: var(--very-light-pink);
}
.shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}
.shopping-cart figure {
    margin: 0;
}
.shopping-cart figure img {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    object-fit: cover;
}
.shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3) {
    font-size: var(--md);
    font-weight: bold;
}
.orders {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;    
}
.orders p:nth-child(1) {
    display: flex;
    flex-direction: column; 
       
}
.orders p:nth-child(2) {
    text-align: end;
    font-weight: bold;
    margin-left: 120px;
}
.orders p span:nth-child(1) {
    font-size: var(--md);
    font-weight: bold;

}
.orders p span:nth-child(2) {
    font-size: var(--sm);
    color: var(--very-light-pink);
}

.my-order-container .title {
    margin-bottom: 50px;
}
.menu {
    display: none;
}
nav {
    display: flex;
    /* width: 100%; */
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid var(--very-light-pink);

}
.navbar-logo {
    width: 100px;
}
.navbar-left {
    display: flex;
    margin-left: 12px;


}
.navbar-left ul{
    display: flex;
    margin-left: 12px;


}
.navbar-left ul li a, .navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
}
.navbar-left ul li a:hover , .navbar-right ul li a:hover {
    text-decoration: none;
    color: var(--hospital-green);
    border: 1px solid var(--hospital-green);
}
.navbar-left ul, .navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
}
.navbar-email {
    color: var(--very-light-pink);
}
.navbar-shopping-cart {
    padding: 10px;
    cursor: pointer;
}

.navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: 16px;
    right: 24px;
    display: flex;
    justify-content: center;
    align-items: center; 
}
.product-detail {
    position: absolute;
    width: 360px;
    padding-bottom: 24px ;
    right: 0;   
}
.product-detail-close {
    position: absolute;
    background-color: var(--text-input-field);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 2;
    padding: 12px;
    margin-top: 18px;
    margin-left: 18px;
}
.product-detail-close img {
    position: absolute;
    top: 12px;
    left: 12px;
}
.product-detail-close:hover {
    cursor: pointer;
}
.product-detail > img:nth-child(2) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 0 20px 20px;
}
.add-to-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-info-detail {
    margin: 24px;

}
.product-info-detail p:nth-child(1) {
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 8px;

}
.product-info-detail p:nth-child(2) {
    color: var(--very-light-pink);
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 36px;

}
.product-info-detail p:nth-child(3) {
    color: var(--very-light-pink);
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 50px;

}
.product-detail-cart {
    position: absolute;
    width: 360px;
    padding: 24px;
    box-sizing: border-box;
    right: 0;   
}
.title-shopping-cart {
    font-size: var(--lg);
    font-weight: bolder;

}
.title-container {
    display: flex;
    margin-bottom: 24px;

}
.title-container img {
    transform: rotate(180deg);
    height: 15px;
    width: 26px;
    align-self: center;
    margin-right: 14px;
    margin-top: 0;
    
}

Mi resultado.
Me gusto mucho este proyecto ya que tengo una idea de como construir un proyecto complejo de maquetaci贸n.

Intente hacerlo sin ver nada del css y me senti tambien que pude lograr un resultado igual muy buen curso.

My shopping cart