You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
14 Hrs
46 Min
2 Seg

Mis órdenes

17/22
Resources

We will create the "my orders" screen . This will allow the user to see all the orders he/she has placed. As you can see in the image, it is similar to the "my order" view , so we will reuse code.

myorders.png

HTML to display the purchase orders

The orders section contains the date, total quantity of items and total amount of money for each order requested by the user. Remember that at this moment we are just laying out, then with JavaScript we will make the data dynamic.

The structure is as follows:

<div class="my-order"> <div class="my-order-container"> <h1 class="title">Myorders</h1> <div class="my-order-content"> <div class="order"> <p> <span>03.25.21</span> <span>6articles</span> </p> <p>$560.00</p> <img src="./icons/flechita.svg" alt="arrow"> </div> </div></div> </div> </div> </div>.

CSS styles for creating ordered order lists

Since the orders view is very similar to the "my order" section, we will implement the same styles.

Our final CSS looks like this:

.my-order { width: 100%; height: 100vh; display: grid; place-items: center; } .title { font-size: var(--lg); margin-bottom: 40px; } .my-order-container { display: grid; grid-template-rows: auto 1frauto; width: 300px; } .my-order-content { display: flex; flex-direction: column; } .order { display: grid; grid-template-columns: auto 1frauto; gap: 16px; align-items: center; margin-bottom: 12px; } .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 span:nth-child(2) { font-size: var(--sm); color: var(--very-light-pink); } . order p:nth-child(2) { text-align: end; font-weight: bold; }

Am I really learning?

To answer the question we must be clear that we learn when we create.

This is so, since building allows us to:

  • Understand more deeply
  • Discover new ideas
  • Imagine new ways to apply what we have learned
  • Develop and strengthen skills
  • Enter a state of flow.

So, are you looking fordifferent ways to do the code proposed by the teacher? Are you working on projects of your own that you are passionate about? If the answers were yes, congratulations, you are really learning!

In case you are looking to improve in some aspect, or discover more suggestions to boost your learning; review this class from the online learning strategies course.


Contributed by: Guadalupe Monge Barale with contributions from Andres Sanchez.

Contributions 190

Questions 12

Sort by:

Want to see more contributions, questions and answers from the community?

Hola!, les comparto mi avance… Lo estoy haciendo con tonos de color dark:

Les compartos mis avances

¡Por fin puedo decir que estoy aprendiendo a maquetar y a agregar diseños con CSS!

Aunque por momentos me confundo un poco, las últimas 4 clases yo he realizado las maquetaciones y estilos por mi cuenta, y luego veo la clase para ver si hay formas diferentes o mejores a lo que yo hice en la práctica.

Esta es mi diseño de la pantalla de My Orders:

Mis ordenes de gatitos 🐈

Un consejo para el icono de la fechita:

En lugar de usar una etiqueta <p> usen una <span> así por automático se les posicionara al lado derecho

Lo que voy a mostrar a continuación lo hice porque al expandir la pantalla no era nada responsive y quedaba un espacio muy grande, lo solucioné agregándole la siguiente línea de código a la clase:

.my-orders-container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 90%;
    max-width: 300px;
}

My orders en mobile

My orders en desktop

Va avanzando :3

Hola, aquí mi ejercicio. Lo hice con mi propio código parecido al de la prof pero sin mirar la explicación), No se si sea el código ideal o semántico.
Se ve simple, pero no es tan fácil como parece, pero si se aprende mucho practicando.
.
.

.
HTML
.

CSS
.

Escucho correcciones.
.
Hay una cosa que no pude hacer y es hacer notar la negrilla al span de la fecha. Le puse el atributo font-weigth: bold pero no se nota casi

La verdad me va bastante bien, un problema que note es que a veces duplica las clases y les da otros estilos, esto creo que va a dar problemas a la hora de ver el proyecto porque re-define los diseños (por ejemplo con la clase “order” ), yo voy cambiando el nombre de las clases en cuanto veo eso.

empece a hacerle estos cambias ya que no me gusta como queda de la otra forma y ahora voy a empezar a cambiar todo a modo dark para ir probando cosas nuevas y poner en practica todo lo visto hasta ahora

Decidí ponerle un borde sombreado, un color de fondo a la flechita, y ponerle el cursor de tipo pointer, y que ponerle un :hover para que cambie de color cuando se pase el cursor por encima. Espero les guste!.

En Windows: Crtl + Shift + K → Elimina la línea de código

Es tan bonito que todo vaya funcionando correctamente 🥺
🌐 Les comparto mi código subido a GitHub: https://github.com/iJCode1/frontend_practico_platzi
.
Vista Desktop:


.
Vista Móvil:

desde que empese este curso practico se me estan quitando las ganas de aprender en platzi poco a poco… :"( . No se rindan por mas que no aprendan en este curso.

Poco a poco, estas repeticiones haciendo el código desde cero para aprenderlo mejor.

Una parte los estilos y la estructura

This is my result.

esta quedando delicioso,CHEF!!!
😛

Así vamos

Esto le puede competer mas al equipo de diseño, pero por accesibilidad , si la flechita es un elemento interactivo en el que el usuario debe hacer link, es recomendable que sea mas grande y bastante visible.
soy un flexbox lover, es muhco mas sencillo de usar, y no tan complejo como grid, para situaciones mas normales en las que la maqueta sea solo de alinear y no haya que hacer un layout tan complejo. entonces, considerando que desde la clase pasada ya el contenido de .my-order-content que es el que replicamos varias veces para simular las ordenes que haya tenido el usuario, lo alinee usando flex, en este caso al agregar la flecha solo tenia que darle un margen auto hacia la izquierda para que ocupe todo ese espacio y se alinea hacia la derecha, y para separarlo de la flecha use margin-righ: 12px notese que por defecto la direccion de flex es row, entonces no hay que hacer flex-direction column ![](https://static.platzi.com/media/user_upload/image-7160d055-47e0-4f1c-8b90-cc98bfabe4d5.jpg) ahora, en este caso el precio lo alineamos a la derecha, como dije, usando margin left auto y para separarlo del otro lado hacemos lo mismo con margin-right y la distancia que deseemos, pero en caso de querer alinearlo a la izquierda solo derebiamos cambiar los margenes y funcionaria igual. ![](https://static.platzi.com/media/user_upload/image-25ae48bd-8efd-4556-8ac1-6f03cfc1f092.jpg) disclaimer: noten que el selector tiene es .my-order-content > p:nth-child(2). esto es para decir que solo queremos seleccionar un hijo directo demy order content que sea un parrafo, por que si no especificamos que sea un hijo directo estariamos seleccionando tambien todos los parrafos dentro de my order content que a su vez sean un segundo hijo, en este caso el parrafo que dice 6 articles ;)

Avances:

En respuesta a la profe sobre como voy, podria decir que … Nada puede malir sal 😃

Mi avance…!

Hasta ahora el curso va excelente, estoy recordando varias cosas que habia olvidado en CSS y aprendiendo a usar flex box y css grid que me seran muy utiles 👍

Seguimos…

Yo le quité el border-bottom del final y creo que queda un poquitititito mas parecido.
Hasta el momento genial todo lo que se ha logrado gracias a la profe.

Excelente clase, Seguir aprendiendo y practicando con proyectos.

Excellent class

Eh!

Esta es mi shopping card

<article class="shopping-card">
            <figure>
              <source
                srcset="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=480&w=480"
                media="(max-width:  480px)"
              />
              <source
                srcset="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=640&w=640"
                media="(max-width: 640px)"
              />
              <img
                src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                alt="bike"
                class="product-img"
                loading="lazy"
              />
            </figure>
            <p>Bike</p>
            <p>$30,00</p>
          </article>

yo lo hice un poquito diferente, pero sale igual

Asi deje el html

<div class="my-order-content">
  <div class="order">
    <p>
      <span>03.25.21</span>
      <span>6 articles</span>
    </p>
    <p>
      <span>$560.00</span>
      <a src="./clase9-shopping-cart.html">
        <img src="./icons/flechita.svg" alt="arrow" />
      </a>
    </p>
  </div>
</div>

Y en el css solo agregue esto

.order p:nth-child(2) a {
  margin-left: 20px;
}
Hola , comparto hasta el momento mi avance . ![](https://static.platzi.com/media/user_upload/image-fd620af0-838e-4d48-90f4-856fe7b7af71.jpg)
![](https://static.platzi.com/media/user_upload/image-89726d0c-bf9a-4770-a9ef-5b40c1b06eb6.jpg)asi voy
Hola. Anterior a este curso, realicé el curso de git y github, he realizado todo el proyecto igual a lo que se ha hecho en clase, a diferencia de los retos que se han presentado en algunas clases. La implementación de git en el proyecto me ha ayudado a llevar un registro por clase por medio de commits. ![](https://static.platzi.com/media/user_upload/image-a32605d2-5aee-4a06-a56f-0a5f229e86a3.jpg) Cuando termine el curso espero subir a github para lo puedan ver y hacer un fork para los próximos cursos de la ruta.
pues así va la cosa, estamos en el futuro!!💚😎👇👇![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20%2867%29-18b8c23e-5e7f-4737-a712-0c4e3df6ce72.jpg)
![](https://static.platzi.com/media/user_upload/image-96d5bcf0-715f-41cb-8d39-cac97ec7e197.jpg)![](https://static.platzi.com/media/user_upload/image-fa2c3b5e-b966-4550-803b-58b865597db8.jpg)
Me encanta como en tan poco tiempo voy agregando valor a mis conocimientos, implementando el conocimiento adquirido en mis gestiones diarias.
Dejo por aqui lo que hice en esta clase ![](https://static.platzi.com/media/user_upload/image-01aa49de-847d-4e36-ad46-b018e8a793e4.jpg) Creo que es innecesario "6 articulos" y hace falta el nombre del articulo y una visualizacion sobre lo que se compro o asi lo veo yo
Mi progreso :) ![](https://static.platzi.com/media/user_upload/image-379b597d-531c-4a02-846c-67964d4ad110.jpg)![]()
Les comparto mis avances. Gracias ![](https://static.platzi.com/media/user_upload/image-6866078b-ece9-4d46-844e-fccfa4e56fa8.jpg)
Yo añadí un archivo CSS que resetea el los estilo, y que añade el modo oscuro dependiente de como este en el sistema operativo. ```js @charset "UTF-8"; :root { /* colores primarios */ --color-primario : #181818; --color-secundario : #f0f0f0; --very-light-pink: #c7c7c7; --text-input-field: #f7f7f7; --hospital-green: #acd9b2; /* medidas de los textos usados en el proyecto */ --sm: 14px; /*small*/ --md: 16px; /*medium*/ --lg: 18px; /*longer*/ } /* Las adaptaciones al modo oscuro */ @media (prefers-color-scheme: dark) { :root { --color-primario : #f0f0f0; --color-secundario : #181818; --text-input-field: #363636; } } /* Opcional */ /* Configuraciones si un usuario activa el modo de alto constraste */ @media (prefers-contrast: high) { :root { --color-primario : black; --color-secundario : white; } } /* Opcional */ /* Desactivamos los animations en el caso de que el usuario haya configurado el modo sin animations*/ /* @media (prefers-reduced-motion: reduce) { Aquí en vez de pones el * de vemos pornes el selector especifico * { animation: none; transition: none; } } */ /* Reseteamos los margin y paddings de todas las etiquetas */ *{ font-family: "Quicksand", sans-serif; margin: 0; padding: 0; border: 0; box-sizing: border-box; vertical-align: baseline; } /* Evitamos problemas con las imagenes */ img, picture, video, iframe, figure { max-width: 100%; width: 100%; display: block; /* opcional object-fit: cover;*/ /* opcional object-position: center center; */ } /* Reseteamos los enlaces para funcionar como cajas... */ a { display: block; } /* ... excepto los que se encuentran en párardos */ p a { display: inline; } /* Quitamos los punto de los
  • */ li { list-style-type: none; } /* Configuramos anclas suaves */ html { scroll-behavior: smooth; } /* Desactivamos estilos por defectos de las pricipales etiquetas de texto */ h1, h2, h3, h4, h5, h6, p, span, a, strong, blockquote, i, b, u, em { font-size: 1em; font-weight: inherit; font-style: inherit; text-decoration: none; color: inherit; } /* Evitamos problemas con los pseudo-elementos de quotes */ blockquote::before, blockquote:after, q::before q::after { content: ''; content: none; } /* Configuramos el texto que seleccionamos */ ::selection { background-color: var(--color-primario); color: var(--color-secundario); } /* Nivelamos problemas de tipografías y colocación de formularios */ form, input, textarea, select, button, label { font-family: inherit; font-size: inherit; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; background-color: transparent; color: inherit; display: block; /* opcional */ /* -webkit-appearance: none; -moz-appearance: none; appearance: none; */ } /* Reteamos las tablas */ table, tr, td { border-collapse: collapse; border-spacing: 0; } /* Evitamos problemas con los SVG */ svg { width: 100%; display: block; fill: currentColor; } /* Configuramos la tipografía para la web */ body { min-height: 100vh; font-size: 100%; font-family: var(--Tipo-principal); color: var(--color-primario); background-color: var(--color-secundario); /* opcional esto puede variar line-height: 1.4em; */ /* opciona hyphens: auto;*/ /* opcional */ -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; /* opcional */ font-smooth: always; /* opcional */ -webkit-font-smoothing: antialiased; /* opcional */ -moz-osx-font-smoothing: grayscale; } ```@charset "UTF-8"; Lo agrego al HTML de la siguiente manera: ```js <link rel="stylesheet" href="Style/ResetCSS.css"> ```\<link rel="stylesheet" href="Style/ResetCSS.css">
  • <https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcDlyMm1kMHkwdWkxMGRxbWxmZ290d3BjdGFpOWZmZ3B1bDA5M2sycSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eeyombPukDw4lbaAN1/source.gif>
    \
    \\
    \

    \via GIPHY\\

    Hola! este es mi avance ![](https://static.platzi.com/media/user_upload/clase1-72f1670b-fc98-4444-96b1-63dd1f32b133.jpg)![](https://static.platzi.com/media/user_upload/clase2-58619943-c582-4f8b-8477-38c8af9796c6.jpg)![](https://static.platzi.com/media/user_upload/clase3-cb03eb16-2eac-4f89-88bf-d435d62de1f4.jpg)![](https://static.platzi.com/media/user_upload/clase4-1b56ec77-868a-4f59-8f76-b80021cd0b78.jpg)![](https://static.platzi.com/media/user_upload/clase5-9bedd2aa-c87b-4c7d-93f7-86365f54c1a8.jpg)![](https://static.platzi.com/media/user_upload/clase6-a4166d45-0dcd-4565-8dee-4a6d0715bbe0.jpg)![](https://static.platzi.com/media/user_upload/clase7-d30249d4-748b-4eb4-9a93-d1a7ccfd55b2.jpg)![](https://static.platzi.com/media/user_upload/clase8-b85a9ce5-02da-4b81-b4b8-724e7996c077.jpg)![](https://static.platzi.com/media/user_upload/clase9-1f7bbdb9-adc1-46da-bd54-d959ca499009.jpg) <https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExcDlyMm1kMHkwdWkxMGRxbWxmZ290d3BjdGFpOWZmZ3B1bDA5M2sycSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/eeyombPukDw4lbaAN1/source.gif>

    mis ordenes

    .my-order-container:

    .order{grid-template-columns: …} y dos alternativas:

    Alt.: 1 => 1fr auto auto;

    Alt.: 2 => auto 1fr auto;


    ![](https://static.platzi.com/media/user_upload/image-099240c8-a227-404d-94a3-5d89b40ffe68.jpg) asi quedo mi pantalla
    ![](https://static.platzi.com/media/user_upload/image-d86d1759-8cae-4897-a247-9ec74d7b0ece.jpg) ![](https://static.platzi.com/media/user_upload/image-4cfce2c1-cb30-4f53-a24e-9f1800002a51.jpg)
    Mi avance de My orders ![](https://static.platzi.com/media/user_upload/image-7131b279-29ac-41f8-9411-2f7464e13771.jpg)

    Hola a todos. Aquí comparto mis avances:

    <!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:wght@300;500;700&display=swap"
          rel="stylesheet"
        />
        <title>Yard Sale</title>
        <style>
          :root {
            --sm: 1.6rem;
            --md: 1.8rem;
            --lg: 2rem;
            --very-light-pink: #c7c7c7;
            --white: #ffffff;
            --text-input-field: #f7f7f7;
            --black: #000000;
            --hospital-green: #acd9b2;
            --dark: #232830;
          }
    
          * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
          }
    
          html {
            font-size: 62.5%;
          }
    
          body {
            font-family: "Quicksand", sans-serif;
          }
    
          .main-container {
            display: grid;
            justify-items: center;
            width: 100%;
            height: 100vh;
          }
    
          .my-order {
            padding: 16px;
            width: inherit;
            max-width: 500px;
          }
    
          .my-order__title {
            display: none;
            margin-bottom: 48px;
            font-size: var(--lg);
          }
    
          .my-order__content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 28px;
            font-size: var(--sm);
            font-weight: bold;
            color: var(--black);
          }
    
          .my-order__info {
            display: flex;
            flex-direction: column;
          }
    
          .my-order__article-number {
            font-size: 1.4rem;
            font-weight: 400;
            color: var(--very-light-pink);
          }
    
          .my-order__pricearrow-container {
            display: flex;
            gap: 24px;
          }
    
          @media (min-width: 640px) {
            .main-container {
              align-items: center;
            }
    
            .my-order__title {
              display: block;
            }
          }
        </style>
      </head>
      <body>
        <main class="main-container">
          <div class="my-order">
            <h1 class="my-order__title">My orders</h1>
            <div class="my-order__content">
              <p class="my-order__info">
                04.25.2024
                <span class="my-order__article-number">6 articles</span>
              </p>
              <div class="my-order__pricearrow-container">
                <p>$ 120.00</p>
                <figure>
                  <img
                    src="./assets/icons/flechita.svg"
                    alt="arrow to access the product"
                  />
                </figure>
              </div>
            </div>
            <div class="my-order__content">
              <p class="my-order__info">
                04.25.2024
                <span class="my-order__article-number">6 articles</span>
              </p>
              <div class="my-order__pricearrow-container">
                <p>$ 120.00</p>
                <figure>
                  <img
                    src="./assets/icons/flechita.svg"
                    alt="arrow to access the product"
                  />
                </figure>
              </div>
            </div>
            <div class="my-order__content">
              <p class="my-order__info">
                04.25.2024
                <span class="my-order__article-number">6 articles</span>
              </p>
              <div class="my-order__pricearrow-container">
                <p>$ 120.00</p>
                <figure>
                  <img
                    src="./assets/icons/flechita.svg"
                    alt="arrow to access the product"
                  />
                </figure>
              </div>
            </div>
            <div class="my-order__content">
              <p class="my-order__info">
                04.25.2024
                <span class="my-order__article-number">6 articles</span>
              </p>
              <div class="my-order__pricearrow-container">
                <p>$ 120.00</p>
                <figure>
                  <img
                    src="./assets/icons/flechita.svg"
                    alt="arrow to access the product"
                  />
                </figure>
              </div>
            </div>
            <div class="my-order__content">
              <p class="my-order__info">
                04.25.2024
                <span class="my-order__article-number">6 articles</span>
              </p>
              <div class="my-order__pricearrow-container">
                <p>$ 120.00</p>
                <figure>
                  <img
                    src="./assets/icons/flechita.svg"
                    alt="arrow to access the product"
                  />
                </figure>
              </div>
            </div>
          </div>
        </main>
      </body>
    </html>
    
    
    Hola, les comparto mi avance de esta clase. ![](https://static.platzi.com/media/user_upload/image-04bb2a37-3ab1-4276-8d2d-a61f9ffec734.jpg)

    Esta cool


    Asi va la Cosa!!!

    ![](

    Muchas gracias profe…

    para colocar la misma informacion de un archivo de texto (clase9.html) en otro archivo de texto(clase10.html) basta con escribir este comando en la línea de comandos o terminal:

    cat clase9.html > clase10.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <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=Montserrat+Alternates:wght@300&family=Quicksand:wght@300;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: 0px;
                font-family: 'Quicksand', sans-serif; 
            }
            .firts-container {
                width: 100%;
                height: 100vh;
                display: grid;
                place-items: center;
            }
            .title {
                font-size: var(--lg);
            }
            .second-container {
                display: grid;
                grid-template-rows: auto 1fr auto;
                width: 300px;
            }
            .order {
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 16px;
                align-items: center;
                }
            .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 span:nth-child(2) {
                font-size: var(--sm);
                color: var(--very-light-pink);
                }
            .order p:nth-child(2) {
                text-align: end;
                font-weight: bold;
            }
    </style>
    </head>
    <body>
        <div class="firts-container">
            <div class="second-container">
                <h1 class="title">My order</h1>
                <div class="order-container">
                    <div class="order">
                        <p>
                            <span>04.25.2021</span>
                            <span>6 articles</span>
                        </p>
                        <p>
                            <span>$560.00</span>
                            <img src="./icons/flechita.svg" alt="arrow">
                        </p>            
                    </div>
                </div>
                <div class="order-container">
                    <div class="order">
                        <p>
                            <span>04.25.2021</span>
                            <span>6 articles</span>
                        </p>
                        <p>
                            <span>$560.00</span>
                            <img src="./icons/flechita.svg" alt="arrow">
                        </p>            
                    </div>
                </div>
                <div class="order-container">
                    <div class="order">
                        <p>
                            <span>04.25.2021</span>
                            <span>6 articles</span>
                        </p>
                        <p>
                            <span>$560.00</span>
                            <img src="./icons/flechita.svg" alt="arrow">
                        </p>            
                    </div>
                </div>
                <div class="order-container">
                    <div class="order">
                        <p>
                            <span>04.25.2021</span>
                            <span>6 articles</span>
                        </p>
                        <p>
                            <span>$560.00</span>
                            <img src="./icons/flechita.svg" alt="arrow">
                        </p>            
                    </div>
                </div>
                <div class="order-container">
                    <div class="order">
                        <p>
                            <span>04.25.2021</span>
                            <span>6 articles</span>
                        </p>
                        <p>
                            <span>$560.00</span>
                            <img src="./icons/flechita.svg" alt="arrow">
                        </p>            
                    </div>
                </div>
            </div>
        </div>    
    </body>
    </html>
    

    Asi quedo:

    ¿No creen que la columna que tiene los precios debería estar un poquito más centrado de forma vertical en la card?

    HTML:

    .
    CSS:

    .
    RESULTADO:

    Por el momento todo bien, saludos.

    Vamos bien hasta el momento, encantado con el curso 😁


    hasta ahora voy asi, me encanta estoy entendiendo y aprendiendo 😃

    😭

    Mi aporte

    Lo puse en modo oscuro cambiando el body

    body {
                margin: 0;
                font-family: 'Quicksand', sans-serif;
                background: var(--dark);
                color: var(--white);
            }
    

    A la próxima aprendo a poner un botoncito que cambie esos estilos.

    Siempre acostumbro a realizar la práctica antes de ver la clase, así que en este al ver el diseño, se parecía mucho al anterior…entonces copie y pegue lo anterior y salió en menos de 5minutos. Ya veo que el mito de reutilizar code no es mito y es una total realidad.

    seguimos

    Aunque es genial copiar y pegar, y es algo que se hace constantemente para agilizar. En etapas tan básicas del aprendizaje es mejor proponerte a ti mismo hacerlo paso a paso, aunque sea tedioso.
    Pierde todo el tiempo del mundo en pensar como lo haces y en automatizar el proceso.
    Muy recomendable perder tiempo en aprenderte los atajos de teclado de tu editor para ir más rápido antes que copiar y pegar.
    Por ejemplo, ¿sabías que en CSS en Visual Studio si pones “m” seguida de “0” -----> m0 -----> y le das al enter se completa por si solo margin:0px; pues así hay mil atajos.

    En vez de copiar y pegar, aprende como ser más rápido.

    Lo quise hacer sin modificar el HTML y quedo así:

    <code> 
    .my-order-content p:last-child{
             position: relative;
            }
            .my-order-content p:last-child::after{
             content: ">";
             position: absolute;
             inset-inline-end: 0;
             transform: translateX(20px);
             color: var(--very-light-pink);
            }
    

    sufri demaciado haciendo todo esto con colores blancos, me mato la vista y no puedo seguir mucho la clase ya que no entiendo el porque de lo que hace.

    Comparto lo que hice hasta ahora. Espero seguir mejorando, es la primera vez que toco algo de HTML y CSS.







    Me quedo con esto que vi en la sección de recursos

    Mi progreso!!..

    no pos profe esta bien épico el curso ya entiendo

    La verdad un curso espectacular, me esta encantando. Les comparto como voy en mi pantalla de vsc.

    .

    Ademas les dejo el repo del proyecto donde estoy subiendo todoas los apuntes y las practicas de esta fabulosa ruta.

    https://github.com/Bloki2319/Proyectos.git

    PD. Ya estoy buscando trabajo, a penas consiga mi primer trabajo publicare la fecha en el repo para dejar constancia de la efectividad de Platzi 😉

    En mi caso, siento que el diseño es más fiel a la solicitud sin margin-bottom. En mi caso lo comenté y obtuve lo siguiente:

    que finooooo como tan rápido pudo estilizar algo

    Proyecto orientado a bienes raices.

    Hasta el momento va todo bien. He aprovechado para desarrollar en paralelo la copia de una página de internet de una empresa de audio. Así va hasta el momento

    Por acá dejo el código en caso de que les sea util. o quieran hecharle una ojeada:

    <style>
        :root{
                --white: #FFFFFF;
                --black: #000000;
                --very-light-pink: #C7C7C7;
                --text-input-field: #f7f7f7;
                --hospital-green: #ACD9B2;
                --red-selected: CC310F;
                --sm: 16px;
                --md: 24px;
                --lg: 28px;
    
        }
        body{
                margin: 0;
                padding: 0;
                margin-top: 0;
                font-family: 'Nunito Sans', sans-serif;
                font-family: 'Quicksand', sans-serif;
                font-family: 'Roboto', sans-serif;
            }
        .h1, 
        .h2, 
        .p{ margin: 0;}
        .products-navigation{
            width: 100%;
            height: 80px;
            background-color: var(--black);
    
        }
        .options-container{
            color: var(--white);
            display: flex;
            flex-direction: row;
            /* flex-wrap: nowrap; */
            justify-content: space-around;
            list-style: none;
            align-items: center;
            margin: 0;
            padding-top: 25px;
        }
    
        .options-container a{
            color: var(--white);
            text-decoration: none;
        }
        .bose-page{
            display: flex;
            flex-direction: row;
        }
        .promotion-product{
            display: flex;
            align-items: space-between;
        }
        .promotion-product{
            width: 100%;
            height: 60%;
        }
        .main-image{
            width: 60%;
            height: 100%;
            object-fit: cover;
        }
        .first-section aside{
            display: flex;
            
        }
        .first-section.h1{
            margin: 0;
            padding: 0;
        }
        .shop-deals{
            width: 100%;
            height: 100%;
            background-color: red;
            margin: 0;
        }
    
        .shop-deals h1{
            padding: 0;
            margin: 0;
        }
        .shop-deals{
            width: 40%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-family: 'Nunito Sans', sans-serif;
        }
        .shop-deals h1{
            border-bottom: 2px solid var(--very-light-pink);
            border-top: 2px solid var(--very-light-pink);
            font-style: italic;
            font-weight: bold;
            margin: 24px;
        }
        .shop-deals h2{
            font-weight: bold;
            font-size: var(--md);
            font-family: ;
        }
        .shop-deals button{
            background-color: var(--white);
            border-radius: 20px;
            border: none;
            cursor: pointer;
            width: 40%;
            height: 10%;
            font-weight: bold;
            font-size: var(--sm);
        }
        .shop-deals a{
            color: var(--black);
            font-size: 10px;
            margin-bottom: 24px;
            margin-top: 24px;
            font-weight: bold;
        }
        .benefits-buying-direct{
            display: flex;
            justify-content: space-evenly;
            width: 100%;
            height: 100px;
            background-color: var(--black);
            color: var(--white);
            align-items: center;
            font-family: 'Nunito Sans', sans-serif;
        }
        .benefits-buying-direct img{
            width: 50px;
            height: 50px;
        }
        .benefits-buying-direct h3{
            white-space:nowrap;
            font-weight: bold;
        }
        .benefits-buying-direct a{
            color: var(--white);
        }
    </style>
    <body>
        <nav class="products-navigation">
            <ul class="options-container">
                <li class="Deals">
                    <a href="/">HOLIDAY DEALS</a>
                </li>
                <li>
                    <a href="/">GIFT HUB</a>
                </li>
                <li>
                    <a href="/">FEATURED</a>
                </li>
                <li>
                    <a href="/">HEADPHONES</a>
                </li>
                <li>
                    <a href="/">EARBUDS</a>
                </li>
                <li>
                    <a href="/">SPEAKERS</a>
                </li>
                <li>
                    <a href="/">AUDIO SUNGLASSES</a>
                </li>
                <li>
                    <a href="/">SLEEP</a>
                </li>
            </ul>
        </nav>
        <main class="bose-page">
            <div class="first-section">
                <div class="first-section promotion-product">
                    <img src="./imagenes/cq5dam.web.1920.1920.jpeg" alt="bose buds" class="main-image">
                    <aside class="first-section shop-deals">
                        <h1>SAVE UP TO 40%</h1>
                        <h2> Hits of adrenaline</h2>
                        <p>Great for those who keep it moving - holidays or not.</p>
                        <button class="Shop-deals-button"> SHOP ALL DEALS</button>
                        <a href="/" class="shop-sport-earbuds-link">SHOP BOSE SPORT EARBUDS</a>
                    </aside>
                </div>
                <div class="benefits-buying-direct">
                    <h3>WHY BUY DIRECT FROM <br> BOSE</h3>
                    <img src="./logos/cq5dam.web.320.320.png" alt="Truck">
                    <p>FREE 2-day <br> shipping*</p>
                    <img src="./logos/cq5dam.web.320.320 (1).png" alt="Calendar">
                    <p>90-day risk-free <br> trial</p>
                    <img src="./logos/cq5dam.web.320.320 (2).png" alt="Coins falling in a hand">
                    <p>Price match promise</p>
                    <a href="/" class="">*Learn more</a>
                </div>    
            </div>
        </main>
    </body>
    </html>