Maquetación de Pantalla "Mi Orden" en HTML y CSS

Ahora maquetaremos la pantalla llamada “my order”* cuya función es mostrar los artículos seleccionados por el usuario dentro de una tienda virtual o marketplace. Esta es la estructura que se espera que puedas crear según la vista de cada dispositivo.

• Desktop

• Mobile

Cómo hacer la maqueta de una orden de pedidos en HTML

La orden de pedidos le mostrará al usuario los productos que seleccionó, el monto total de dinero, la fecha y la cantidad total de artículos.

Por lo tanto, nuestra maqueta contiene:

1. Div “my order” → contenedor principal

2. Div “my order container” → nos permitirá alinear el contenido con mayor facilidad

3. Título → en la versión móvil sube al menú

4. Div “my order content” → tipo barra contenedora de texto con la fecha, cantidad de artículos y total de dinero

5. Div “shopping cart” → con la imagen del arítculo y texto especificando su nombre y precio.

El código HTML resultante es el siguiente:

<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>03.25.21</span>
            <span>6 articles</span>
          </p>
          <p>$560.00</p>
        </div>

        <div class="shopping-cart">
          <figure>
            <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
          </figure>
          <p>Bike</p>
          <p>$30,00</p>
        </div>
        
      </div>
    </div>
  </div>

---

Shortcuts
.my-order>(.my-order-container>.my-order-content>(p>span2)+p{560.00})+.shopping-cart>figure>img+p2

---

_

Contribución creada por: Guadalupe Monge Barale con los aportes de Yeferson Yuberley Guerrero Castro y Oscar Alejandro Castillo Naveda