No tienes acceso a esta clase

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

Mis órdenes

17/22
Recursos

Aportes 99

Preguntas 8

Ordenar por:

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

Como cuandop eres bueno y la regla del Copiar y Pegar no aplica en ti

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

Les compartos mis avances

Mis ordenes de gatitos 🐈

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

¡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:

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

Va avanzando :3

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.

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:

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

Así vamos

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

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.

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 👍

This is my result.

Seguimos…

esta quedando delicioso,CHEF!!!
😛

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.

Una parte los estilos y la estructura

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;
}




Asi voy, me encanta lo que he logrado!!

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

¡Logrado!

Así vamos!!!

La verdad me siento super entusiasmado al estar aprendiendo nuevas herramientas. CSS me parece excelente y la profesora aun mas!

file:///C:/Users/kb287/OneDrive/Desktop/frontend-developer-1/clase10.html

Mi avance 😃

Avanzando…

¡Intenté hacerlo por mi cuenta, de a poco se van viendo los resultados!

casi golpeo el monitor…
excelente cada una de las pantallas va saliendo perfecta

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

Todos los ejercicios trato de llegar al mismo resultado escribiendo un poco diferente el código, aunque sea solamente un elemento.

<!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">
    <title>Document</title>
    <style>
        :root {
            --white: #ffffff;
            --black: #000000;
            --very-light-pink: #c7c7c7;
            --text-input-field: #f7f7f7;
            --hospital-green: #acd9b2;
            --sm: 1.4rem;
            --md: 1.6rem;
            --lg: 1.8rem;
        }
        * {
            /* box-sizing: border-box; */
            margin: 0;
            padding: 0;
        }
        html {
            font-size: 62.5%;
        }
        body{
            font-family: 'Quicksand', sans-serif;
            font-size: var(--md);
        }
        .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 1fr auto;
            width: 300px;
        }
        .my-order-content {
            display: flex;
            flex-direction: column;
        }
        .order {
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 16px;
          align-items: center;
          border-radius: 10px;
          padding: 10px 24px;
        }
        .order p > span {
          display: flex;
          flex-direction: column;
          margin-bottom: 10px;
        }
        .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>
  <main>
        <div class="my-order">
            <div class="my-order-container">
                <h1 class="title">My orders</h1>
        
                <div class="my-order-content">
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                    <div class="order">
                    <p>
                        <span>03.25.21</span>
                        <span>6 articles</span>
                    </p>
                    <p>$560.00</p>
                    <img src="./icons/flechita.svg" alt="">
                    </div>
                </div>
          </div>
    </main>
</body>
</html>

Es muy agradable ver los resultados de cada clase.

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.

Vamos full motivados

Me recuerdan el link del jueguito! CSS hay cosas que me confunden!

Avanzando, poco a poco pero con entusiasmo.

Hasta ahora bien aprendiendo cada vez mas de css. de esta manera voy de momento dodo bien como el pibe.

Estoy aprendiendo mucho

Así vamos…

Se ve bien hermoso como va quedando, la verdad creí que me romperia la cabeza con css, pero practicando lo estoy entendiendo muchisimo.

En lugar de modificar el

grid-template-columns

opte simplemente por encapsular la imagen dentro de un span, muy similar a como hicimos con la fecha y articulos:

  <div class="order">
            <p>
              <span>04.25.21</span>
              <span>6 articles</span>
            </p>
            <p>
              <span> $560.00 </span>
              <span>
                <img src="../icons/flechita.svg" alt="arrow" />
              </span>
            </p>
          </div>

Así va.

Comparto mi experiencia.

Mientras hacía el diseño revisando lo que nos mostraron en figma pude notar que en desktop está el espacio más separado que en mobile entre fecha producto y precio y también cuando se cambia a mobile todo el contenedor se mueve hacia la parte superior y deja de estar en el centro.

Acá las imagenes y cómo lo hice

Esta vendría siendo nuestra vista en desktop


Y esta nuestra vista en mobile.

Comparto el código:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles_mobile.css" type="text/css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&family=Rowdies:[email protected]&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="my-order">
        <div class="my-orders-container">
            <h1 class="title-order">My orders</h1>
            <div class="orders">
                <p>
                    <span>04.25.2021</span>
                    <span>6 articles</span>
                </p>
                <p>$120,00</p>
                <figure>
                    <a href="/">
                        <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow">
                    </a>
                </figure>
            </div>
            <div class="orders">
                <p>
                    <span>02.20.2021</span>
                    <span>6 articles</span>
                </p>
                <p>$120,00</p>
                <figure>
                    <a href="/">
                        <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow">
                    </a>
                </figure>
            </div>
            <div class="orders">
                <p>
                    <span>02.10.2021</span>
                    <span>6 articles</span>
                </p>
                <p>$120,00</p>
                <figure>
                    <a href="/">
                        <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow">
                    </a>
                </figure>
            </div>
            <div class="orders">
                <p>
                    <span>01.09.2021</span>
                    <span>6 articles</span>
                </p>
                <p>$120,00</p>
                <figure>
                    <a href="/">
                        <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow">
                    </a>
                </figure>
            </div>
            <div class="orders">
                <p>
                    <span>01.08.2021</span>
                    <span>6 articles</span>
                </p>
                <p>$120,00</p>
                <figure>
                    <a href="/">
                        <img src="./Platzi_YardSale_Icons/flechita.svg" alt="arrow">
                    </a>
                </figure>
            </div>

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

CSS

.my-orders-container{
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 450px;
}

.orders {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
}

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

.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);
}

.orders p:nth-child(2) {
    text-align: end;
    font-weight: bold;
}

.orders figure {
    margin: 0px;
}

@media (max-width: 640px) {
.my-orders-container {
        width: 300px;
        position: absolute;
        top: 50px;
    }
    .title-order {
        display: none;
    }
}

Así quedó el mío:

Código:

<!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 | My orders</title>
        <style>
            :root {
                  --very-light-pink: #C7C7C7;
              }
            body {
                margin: 0;
                font-family: 'Quicksand', sans-serif;
            }
            .main-container {
                width: 100%;
                height: 100vh;
                display: grid;
                place-items: center;
            }
            .title {
                padding: 0 0 8px 16px;
            }
            .item-container {
                display: flex;
                align-items: center;
                width: 480px;
            }
            .item-detail {
                display: flex;
                width: 50%;
                height: 64px;
                justify-content: left;
                text-align: center;
                padding-left: 16px;
            }
            span:first-child {
                display: block;
            }
            span:last-child {
                color: var(--very-light-pink);
            }
            .item-value {
                display: flex;
                width: 50%;
                justify-content: right;
                padding-right: 16px;
            }
            .item-value p {
                padding-right: 24px;
            }
            .bold {
                font-weight: bold;
            }
        </style>
    </head>
<body>
    <div class="main-container">
        <div class="order-container">
            <h1 class="title">My orders</h1>
            <div class="item-container">
                <div class="item-detail">
                    <p>
                        <span class="bold">04.25.2021</span>
                        <span>6 articles</span>
                    </p>
                </div>
                <div class="item-value">
                    <p class="bold">$ 120.00</p>
                    <img src="./icons/flechita.svg" alt="">
                </div>
            </div>
            <div class="item-container">
                <div class="item-detail">
                    <p>
                        <span class="bold">02.20.2021</span>
                        <span>6 articles</span>
                    </p>
                </div>
                <div class="item-value">
                    <p class="bold">$ 120.00</p>
                    <img src="./icons/flechita.svg" alt="">
                </div>
            </div>
            <div class="item-container">
                <div class="item-detail">
                    <p>
                        <span class="bold">02.10.2021</span>
                        <span>6 articles</span>
                    </p>
                </div>
                <div class="item-value">
                    <p class="bold">$ 120.00</p>
                    <img src="./icons/flechita.svg" alt="">
                </div>
            </div>
            <div class="item-container">
                <div class="item-detail">
                    <p>
                        <span class="bold">01.09.2021</span>
                        <span>6 articles</span>
                    </p>
                </div>
                <div class="item-value">
                    <p class="bold">$ 120.00</p>
                    <img src="./icons/flechita.svg" alt="">
                </div>
            </div>
            <div class="item-container">
                <div class="item-detail">
                    <p>
                        <span class="bold">01.08.2021</span>
                        <span>6 articles</span>
                    </p>
                </div>
                <div class="item-value">
                    <p class="bold">$ 120.00</p>
                    <img src="./icons/flechita.svg" alt="">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Así voy 😃

Hasta ahora estoy usando una sola hoja de estilos para todo el proyecto, aún sin conflictos. Pero siento que no está organizado de la mejor forma. Acá dejo como resolví para reutilizar el codigo de order para esta pantalla.

Increíble curso, vamos por todo, a terminarlo!

Así vamos.

Si va saliendo

Les comparto mis estilos. Agregué la configuración para que desde el cel se oculte el título y, además, haya menos espacio (a lo ancho) que en la versión destock.

    <style media="screen">
      :root {
        --white: #FFFFFF;
        --black: #000000;
        --very-light-pink: #C7C7C7;
        --text-input-field: #F7F7F7;
        --hospital-green: #ACD9B2;
        --sm: 12px;
        --md: 16px;
        --lg: 20px;
      }
      body {
        margin: 0;
        font-family: 'Quicksand', sans-serif;
      }
      .my-orders {
        width: 100%;
        height: 100vh;
        display: grid;
        place-items: center;
      }
      .my-orders-container {
        width: 400px;
        display: grid;
        grid-template-rows: auto 1fr auto;
      }
      .title {
        font-size: var(--lg);
        font-weight: bold;
        margin-bottom: 35px;
      }
      .my-orders-information{
        display: flex;
        justify-content: space-between;
      }
      .my-orders-information p:nth-child(1) {
        display: flex;
        flex-direction: column;
      }
      .my-orders-information p span:nth-child(1) {
        font-weight: bold;
      }
      .my-orders-information p span:nth-child(2) {
        color: var(--very-light-pink);
        font-size: var(--sm);
      }
      .my-orders-information figure p {
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .my-orders-information figure {
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
      }
      .my-orders-information figure img {
        margin: 0 0 0 20px;
      }
      @media (max-width: 640px) {
        .title {
          display: none;
        }
        .my-orders-container {
          width: 300px;
        }
      }

Una preguntica. No he podido bajar mis elementos, no sé qué está pasando. I’m blunded.

Dejo las imágenes de todo.

En muchos cursos de youtube especifican en grid y flex

Teff! hasta el momento empiezo a intuír muy facilmente cuales son los siguientes pasos a seguir para la elaboración de los componentes que estamos haciendo, creo que poco a poco entiendo la lógica del front end y aquí está mi aporte 😄

Para los que quisieran resaltar la tarjeta de la orden cuando pasen el mouse sobre ella agregar este código

.order {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px;
  margin-bottom: 12px;
}
.order:hover {
  background-color: var(--text-input-field);
  border-radius: 8px;
}

no quise copiar y pegar pero eso fue todo un reto porque es cuando uno se da cuenta que no sabe como mover las cajas y si las mueve no sabe específicamente que se necesita para lograr lo ya se había hecho .

Hola, les comparto mi avance

Asi me quedó!

Vamos bien con el curso. Es muy bueno en realidad.

Siguiendo los pasos de la profe! ahí va tomando forma! 💚

Me tome el reto de hacer esta página antes de veer la clase, y todo me quedo igual, lo unico que no hice fue la flecha, ya que pense que se hacia directamente en CSS de alguna manera.

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

Hola!! Les comparto mi pantalla de la clase anterior

Me está sirviendo muchísimo este curso, en cada clase, después de verla, me voy a mi código a tratar de hacer la pantalla por mí mismo y si lo necesito, me regreso a ver la parte específica del vídeo para ver cómo le hizo la Profe. Excelente y divertido hasta el momento!!! Felicidades

<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”>
<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=Quicksand:[email protected];500;700&display=swap” rel=“stylesheet”>

<style>
:root{/root es para guardar las variables en css/

   --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;
}
.container-myOrder{
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.tittle{
font-size: var(–lg);
margin-bottom: 40px;
}
.container-card{
display: grid;
grid-template-rows: auto 1fr auto ;/auto es para q tome la medida por defecto que tiene el contenido/
width: 300px;
}
.card{
display: flex;
flex-direction: column;
}
.card1{
display: grid;
grid-template-columns: auto 1fr auto;
gap: 16px;
align-items: center;

   margin-bottom: 10px;

}
.card1 p:nth-child(1){
display: flex;
flex-direction: column;
}
.card1 p:nth-child(2){
text-align: end;
font-weight: bold;
}
.card1 p span:nth-child(1){
font-weight: bold;
font-size: var(–md);
}
.card1 p span:nth-child(2){

 font-size: var(--sm);
 color: var(--very-light-pink);

}

</style>
</head>
<body>
<div class=“container-myOrder”>
<div class=“container-card”>
<h1 class=“tittle”>My Orders</h1>
<div class=“card”>
<div class=“card1”>
<p>
<span>04.25,2021</span>
<span>6 articles</span>
</p>

            <p>$560,00</p>
            <img src="./Icons/flechita.svg" alt="">
        </div>
        <div class="card1">
            <p>
                <span>04.25,2021</span>
                <span>6 articles</span>
            </p>

            <p>$560,00</p>
            <img src="./Icons/flechita.svg" alt="">
        </div>
        <div class="card1">
            <p>
                <span>04.25,2021</span>
                <span>6 articles</span>
            </p>

            <p>$560,00</p>
            <img src="./Icons/flechita.svg" alt="">
        </div>
        <div class="card1">
            <p>
                <span>04.25,2021</span>
                <span>6 articles</span>
            </p>

            <p>$560,00</p>
            <img src="./Icons/flechita.svg" alt="">
        </div>

     
    </div>
    </div>
</div>

</body>
</html>

![](

¿soy yo o se me cambió la fuente?

Como he hecho varias cosas diferentes, solo agregue la flecha y sha, todo se acomodo perfecto

Nadie:
La factura del men que compro cosas del catalogo del avión

Excelente

Vamos avanzando poco a poco.

Hasta el momento todo excelente!

Comparto mis resultados:

![](

🤩

CODIGO HTML:

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

CODIGO CSS:

: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;
            margin: 0;
        }
        .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 1fr auto;
            width: 300px;
        }

        .my-order-content {
            display: flex;
            flex-direction: column;
        }
        .order {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 16px;
            align-items: center;
            margin-bottom: 12px;
        }
        .order p:nth-child(1) {
            display: flex;
            flex-direction: column;
        }
        .order p:nth-child(2) {
            text-align: end;
            font-weight: bold;
        }

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

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

Para esta clase puedes aprovechar el código de la clase 09 y sólo variar el primer order content.

Seguimos aprendiendo en cada clase.

mi resultado:

Pensaria que la imagen de la flecha deberia estar encapsulada en una etiqueta Achore para redireccionarnos a la informacion completa de la orden .