No tienes acceso a esta clase

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

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

2D
1H
39M
59S

Mis 贸rdenes

17/22
Recursos

Realizaremos la pantalla my orders. Esta le permitir谩 al usuario ver todas las 贸rdenes de pedidos que efectu贸. Como puedes ver en la imagen, es similar a la vista 鈥渕y order鈥, por lo que reutilizaremos c贸digo.

myorders.png

HTML para mostrar las 贸rdenes de compra

La secci贸n de 贸rdenes contiene la fecha, cantidad total de art铆culos y monto total de dinero de cada orden solicitada por el usuario. Recuerda que en este momento solo estamos maquetando, luego con JavaScript conseguiremos que los datos sean din谩micos.

La estructura es la siguiente:

<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="arrow">
        </div> 
        
      </div>
    </div>
  </div>

Estilos CSS para crear listas de 贸rdenes pedidas

Como la vista de 贸rdenes es muy similar a la secci贸n 鈥mi orden鈥, implementaremos los mismos estilos.

Nuestro CSS final se ve as铆:

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

驴Estoy realmente aprendiendo?

Para responder a la pregunta debemos tener en claro que aprendemos cuando creamos.

Esto es as铆, ya que construir nos permite:

  • Entender de forma m谩s profunda
  • Descubrir nuevas ideas
  • Imaginar nuevas formas de aplicar lo aprendido
  • Desarrollar y fortalecer habilidades
  • Entrar en un estado de flujo.

Entonces, 驴buscas maneras diferentes de hacer el c贸digo propuesto por la profesora? 驴Trabajas en proyectos propios que te apasionen? Si las respuestas fueron afirmativas, felicidades. 隆Est谩s realmente aprendiendo!

En caso de que busques mejorar en alg煤n aspecto, o descubrir m谩s sugerencias para impulsar tu aprendizaje; repasa esta clase del curso de estrategias para aprender en l铆nea


Contribuci贸n creada por: Guadalupe Monge Barale con los aportes de Andres Sanchez

Aportes 166

Preguntas 11

Ordenar por:

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

o inicia sesi贸n.

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

Les compartos mis avances

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

隆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 鈥渙rder鈥 ), 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

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:

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!.

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

En Windows: Crtl + Shift + K 鈫 Elimina la l铆nea de c贸digo

Una parte los estilos y la estructura

This is my result.

esta quedando delicioso,CHEF!!!
馃槢

As铆 vamos

En respuesta a la profe sobre como voy, podria decir que 鈥 Nada puede malir sal 馃槂

Mi avance鈥!

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 馃憤

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

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鈥ntonces 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 鈥渕鈥 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>

茅sta lecci{on la hice solo considerando el texto de la descripci贸n. Si pude hacerlo 馃槂 ahora lo har茅 conforme al video para ver las diferencias.

Me encanta dise帽ar desde cero interfaces graficas con CSS!!

Mi componente por ahora 馃槂

Note que solo pienso en soluciones con Display Flex, que no estan mal pero es mas 鈥渟encillo鈥 con grid
.
Ni modos a repasar display grid

Has ahora asi va quedando estoy muy contendo con las clases

Realmente voy a la par, y realmente eres muy buena, pero porfa las pr贸ximas clases trata de no cambiar c贸digo tan repentino ya que los que no sabemos no tenemos claro comandos y por ende tiende uno a perderse y mas aun si no estamos en MAC, realmente haces buen trabajo

Para tener un background solo en los elementos impares y que se diferencie un poquito mejor una orden de otra 馃槑

A帽adir esto 馃

.my-order-content .order: nth-child(odd){
            background-color: var(--text-input-field);
        }

Viento en popa

les comparto mi codigo por si a alguno le interesa

<!DOCTYPE html>
<html lang=鈥渆s鈥>
<head>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap鈥 rel=鈥渟tylesheet鈥>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<link rel=鈥渟tylesheet鈥 href="./styles.css">
<title>My order | Platzi Yard Sale</title>
</head>
<style>
.my-order {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.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;
background-color: var(鈥搕ext-input-field);
margin-bottom: 30px;
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(鈥搈d);
font-weight: bold;
}
.order p span:nth-child(2) {
font-size: var(鈥搒m);
color: var(鈥搗ery-light-pink);
}
.order p:nth-child(2) {
text-align: end;
font-weight: bold;
}
.order img{
height: 19px;
cursor: pointer;
}
</style>
<body>
<header>

</header>
<main>
    <div class="my-order">
        <div class="my-order-container">
            <h1 class="title-order">
                My order
            </h1>
            <div class="my-order-content">
                <div class="order">
                    <div>
                        <p>
                            <span>
                                10.03.2021
                            </span>
                            <span>
                                6 articles
                            </span>
                        </p>
                    </div>
                    <p>
                        $560.00
                    </p>
                    <img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
                </div>
            </div>
            <div class="my-order-content">
                <div class="order">
                    <div>
                        <p>
                            <span>
                                10.03.2021
                            </span>
                            <span>
                                6 articles
                            </span>
                        </p>
                    </div>
                    <p>
                        $560.00
                    </p>
                    <img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
                </div>
            </div>
            <div class="my-order-content">
                <div class="order">
                    <div>
                        <p>
                            <span>
                                10.03.2021
                            </span>
                            <span>
                                6 articles
                            </span>
                        </p>
                    </div>
                    <p>
                        $560.00
                    </p>
                    <img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
                </div>
            </div>
            <div class="my-order-content">
                <div class="order">
                    <div>
                        <p>
                            <span>
                                10.03.2021
                            </span>
                            <span>
                                6 articles
                            </span>
                        </p>
                    </div>
                    <p>
                        $560.00
                    </p>
                    <img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
                </div>
            </div>
            <div class="my-order-content">
                <div class="order">
                    <div>
                        <p>
                            <span>
                                10.03.2021
                            </span>
                            <span>
                                6 articles
                            </span>
                        </p>
                    </div>
                    <p>
                        $560.00
                    </p>
                    <img src="https://icones.pro/wp-content/uploads/2021/06/icone-fleche-droite-noir.png" alt="">
                </div>
            </div>
        </div>
    </div>
</main>

</body>
</html>

vamos melo caramelo

As铆 me qued贸 uwu

He aqu铆 mis avances hasta el momento:
1.- La p谩gina de 鈥渆l email se ha enviado鈥:

2.- La p谩gina de Log In:

3.- La p谩gina de Sign In:

4.- La p谩gina de My Account:

5.- La p谩gina principal:

6.- El men煤 de escritorio:

7.- El men煤 para dispositivos m贸viles:

8.- La lista de una orden:

9.- Una lista de todas las 贸rdenes:

As铆 vamos:

Buenas! yo para practicar le agregue este c贸digo. No se si esta del todo correcto pero creo que quedo bastante bien.

       .total {
            text-align: end;
            font-weight: bold;
            font-size: var(--lg);
            margin: 16px;
        }
        .line { 
            border-top: 1px solid var(--very-light-pink);
        } 




Por cierto para los que usan VS Code recomiendo ampliamente la extension LIVE SERVER. Asi se les actualiza automaticamente el navegador cada vez que guardan

Creo que una de las cosas m谩s globales es indicar que los <p> no tengan margin. As铆 se puede indicar cuanto se necesita luego.