Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Detalle de producto

20/22
Recursos

Aportes 50

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Les dejo mi propia versión de los puntitos :3

CSS


.points {
        display: flex;
        justify-content: center;
      }
      .points > li {
        background: var(--very-light-pink);
        width: 8px;
        height: 8px;
        margin: 8px 6px;
        border-radius: 50%;
        list-style-type: none;
        cursor: pointer;
      }
      .points > .active {
        background: var(--hospital-green);
      }
      .points > li:hover {
        background: var(--hospital-green);
      }

HTML


<div class="points">
        <li class="active"></li>
        <li></li>
        <li></li>
      </div>

Para la descripcion de su producto: With its functional and practical design, this bike also fulfills a decorative function, adding personality and a retro-vintage aesthetic to your house. ✌️

Pa que no busquen los estilos del primary-button

.primary-button{
            height: 50px;
            width: 100%;
            border: none;
            border-radius: 8px;

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

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

            cursor: pointer;
        }

Del minuto 6 al minuto 11, fue muy confuso todo lo que hiciste

Por si a alguien le sirve: Para escribir texto fake en VS Code solo hay que escribir lorem seguido de la cantidad de palabras que quieras generar por ejemplo lorem10, lorem100 o lorem500 y despues dar a la tecla Tab

Así implementé los dots de navegación para las imágenes 👇

HTML

            <div class="dots">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
            </div>

CSS

.dots {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 20px;
    padding: 7.5px 0;
}
.dot {
    height: 5px;
    width: 5px;
    margin: 0 3px;
    border-radius: 50%;
    background-color: rgb(216, 216, 216);
}
.dot:nth-child(1) {
    background-color: rgb(173, 173, 173);
}

Hice un pequeño muy pequeño ajuste como para que el botón de close quedara un poco mejor y más centrado

.product-detail-close{
    display: flex;
    justify-content: center;
    align-items: center;
    top: 20px;
    left: 20px;
    position: absolute;
    background-color: var(--white);
    width: 16px;
    height: 16px;
    padding: 8px;
    border-radius: 50%;
    border: 1px solid var(--very-light-pink);
}

faltaron los 3 puntos bajo la imagen 😰

Utilizando el max-witdh en el aside y la imagen la ajustamos al 100% en witdh lo hacemos responsive para dispositivos mucho mas pequeños!

Buena tarde, ¿Por qué utilizar la etiqueta <aside>? Tenia entendido que esta etiqueta era utilizada para temas que no tenía que ver directamente con el contenido de la página, por ejemplo para banners laterales de publicidad. ¿Estoy equivocado?

Estos son mis apuntes de esta clase:
Debes considerar la siguiente estructura:
Aside
div
img clase
img
div product-info
p
p
p
buttom
img (primary bottom de las clases anteriores)

*Para el producto es buena idea poner a la imagen un width de 360px para su tamaño de celular.
*object-fit: cover; // para que la imagen quede muy bien visualmente.

  • Para mobile colocar width al 100%

También se puede ocupar la pseudo-clase :first-child para hacer referencia al primer hijo en un grupo de elementos hermanos.

ass jakskjsaasjk me hizo reír

El botón de cerrar es mas fácil y eficiente asarlo así:

.product-detail > img:nth-child(1){
position: absolute;
top: 12px;
left: 12px;
background-color: var(–white);
padding: 12px;
border-radius: 50%;
}

Utiliza las medidas de espaciado de shopify.
La imagen la centre usando “display: Block; - margin: 0 auto;” por alguna razón que aun desconozco no funciona con inline-block.
Si alguien tiene la respuesta, por favor ilumineme.
Recuerden que “img” funge como inline y los mismos no pueden posicionarse ni tampoco puede aplicarse margin top or bottom.

Hola, quise hacer los 3 puntitos que aparecen debajo de la imagen y asi fue como lo imagine jeje.

HTML

  <div class="points">
            <p></p>
            <p></p>
            <p></p>
        </div>

CSS

        .points {
            display: flex;
            justify-content: center;
        }
        .points p {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin: 6px 3px;
            background-color: var(--very-light-pink);
        }
        .points p:hover {
            background-color: var(--hospital-green);
            cursor: pointer;
        } 

Me llamo la atención el uso de la etiqueta “aside”, encontré una imagen interesante para ver cuando aplicar una en particular

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

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

.product-detail-close {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--white);
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 12px;
  border-radius: 50%;
}

.product-detail-close:hover {
  cursor: pointer;
}

.product-detail > img:nth-child(2) {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 0 0 20px 20px;
}

.points {
  display: flex;
  justify-content: center;
}

.points li {
  list-style: none;
  margin-inline: 15px;
}

.points button {
  border: solid 1px var(--hospital-green);
  background-color: var(--white);
  height: 8px;
  width: 8px;
  padding: 1px;
  border-radius: 50%;
}

.points .active-point {
background-color: var(--hospital-green);
}

.product-info {
  margin: 24px 24px 0 24px;
}

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

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

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

.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}

.add-to-cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  .product-detail {
    width: 100%;
  }
}
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/logos/favicon_bota_fora.svg" type="img">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/detalleProducto.css">
    <title>Detalle del Producto</title>
</head>
<body>
    <aside class="product-detail">
        <div class="product-detail-close">
            <img src="./img/icons/icon_close.png" alt="close">
        </div>
        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        <div class="points">
            <li><button class="active-point"></button></li>
            <li><button></button></li>
            <li><button></button></li>
        </div>
        <div class="product-info">
            <p>$35,00</p>
            <p>Bike</p>
            <p>With its practical position, this bike also fultills a decorative function. adding personality and a retro-vintage aesthetic to your kitchen or workplace </p>
            <button class="primary-button add-to-cart-button">
                <img src="./img/icons/bt_add_to_cart.svg" alt="add to cart">Add to cart</button>
        </div>
    </aside>
</body>
</html>

border-radius: 0 0 20px 20px; /* permite con dirección de las agujas del reloj, dar forma a la punta del borde */

Hay que añadir otra clase en el media query para que la imagen se expanda hasta que llegue a 640px:

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

        }

Necesito de su ayuda, no logro centrar el icono de cierre:

Este es mi código:

<aside class="product-detail">
      <div class="close-bg">
        <img src="./icons/icon_close.png" alt="Close" />
      </div>
      <img
        src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
        alt="Bike"
      />
      <div class="product-gallery">
        <div class="gallery-dot"></div>
        <div class="gallery-dot"></div>
        <div class="gallery-dot"></div>
        <div class="gallery-dot"></div>
      </div>
      <div class="product-info">
        <p>$35.00</p>
        <p>Mountain Bike</p>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste quas,
          doloremque quod magnam omnis eum repudiandae deleniti asperiores
          libero alias commodi eius distinctio possimus? Ipsa cum nihil
          assumenda eos minima.
        </p>
        <button class="primary-button add-button">
          <img src="./icons/bt_add_to_cart.svg" alt="Shopping Cart icon" />
          Add to cart
        </button>
      </div>
    </aside>
.product-detail {
        position: absolute;
        right: 0;
        width: 360px;
        padding-bottom: 24px;
      }
      .close-bg {
        background-color: var(--white);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        padding: 12px;
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
      }
      .close-bg:hover {
        cursor: pointer;
      }
      .product-detail > img:nth-child(2) {
        width: 100%;
        height: 360px;
        object-fit: cover;
        border-radius: 0 0 20px 20px;
      }
      .product-gallery {
        display: flex;
        justify-content: center;
      }
      .gallery-dot {
        background-color: var(--very-light-pink);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin: 5px 2px 0 2px;
      }
      .gallery-dot:nth-child(3) {
        background-color: var(--hospital-green);
      }
      .product-info {
        margin: 24px 24px 0 24px;
      }
      .product-info p:nth-child(1) {
        font-weight: bold;
        font-size: var(--md);
        margin-bottom: 8px;
      }
      .product-info p:nth-child(2) {
        color: var(--very-light-pink);
        font-size: var(--md);
        margin-bottom: 36px;
      }
      .product-info p:nth-child(3) {
        color: var(--very-light-pink);
        font-size: var(--sm);
        margin-bottom: 36px;
      }
      .primary-button {
        background-color: var(--hospital-green);
        border-radius: 8px;
        border: none;
        color: var(--white);
        width: 100%;
        height: 48px;
        cursor: pointer;
        font-size: var(--md);
        font-weight: 700;
      }
      .add-button {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .add-button img {
        margin-right: 12px;
      }
      @media (max-width: 640px) {
        .product-detail {
          width: 100%;
        }
      }

Agradecería mucho su ayuda.

A .product-info, en vez de ponerle los márgenes laterales de 24px, he puesto padding. Me parece una propiedad más adecuada para lo que se desea conseguir.

Ahí vamos…

Para los 3 puntos debajo de la imagen coloque:


Mis 3 puntituos xd:

      .scroll-points .point{
          width:  8px;
          height: 8px;
          background-color: var(--text-input-field);
          border-radius: 50%;
          margin: 0 4px;
      }

      .scroll-points .point:nth-child(1){
          background-color: var(--very-light-pink);

      }

        <div class="scroll-points" >
            <span class="point"></span>
            <span class="point"></span>
            <span class="point"></span>
        </div>


Aquí está mi 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 | Product Detail</title>
    <style>
        :root {
              --black: #000000;
              --white: #FFFFFF;
              --md: 16px;
              --very-light-pink: #C7C7C7;
              --hospital-green: #ACD9B2;
          }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .product-detail {
            width: 360px;
            position: absolute;
            right: 0;
        }
        .close-button {
            background: black;
            border-radius: 50%;
            padding: 4px;
            position: absolute;
            left: 12px;
            top: 8px;
        }
        .close-button:hover {
            cursor: pointer;
        }
        .product-img {
            position: relative;
            width: 100%;
            height: 360px;
            object-fit: cover;
        }
        .product-info {
            display: flex;
            flex-direction: column;
        }
        p {
            margin-left: 16px;
        }
        p:first-child {
            font-weight: bold;
            margin: 16px 16px 8px;
        }
        p:nth-child(2) {
            margin: 0 0 0 16px;
        }
        p:not(:first-child) {
            color: var(--very-light-pink);
        }
        .add-button {
            width: 90%;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
            background: var(--hospital-green);
            margin-top: 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        .add-button .cart-text {
            color: var(--white);
            font-size: var(--md);
            margin: 0;
        }
        @media (max-width: 800px) {
            .product-detail {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <aside class="product-detail">
        <img src="/icons/icon_close.png" alt="Close" class="close-button">
        <img src="https://www.ghost-bikes.com/fileadmin/_processed_/8/c/csm_ghost-bikes-Riot-Trail-essential-black-black-45_38d9fe71b8.png" alt="" class="product-img">
        <div class="product-info">
            <p>$ 120.00</p>
            <p>Nirvana Tour</p>
            <p>La NIRVANA Tour es la rígida definitiva para uso diario en la ciudad o en el campo. Es una bicicleta de montaña auténtica y fiable que te permite escapar y relajarte del estrés diario. Carretera, senderos forestales o singletrack: es la bicicleta perfecta para cualquier aventura. </p>
            <button class="add-button">
                <img src="/icons/bt_add_to_cart.svg" alt="" class="add-button-img">
                <p class="cart-text">Add to cart</p>
            </button>
        </div>
    </aside>
</body>
</html>

Me quise adelantar en esta clase y hacerlo a ver qué tal me salía, comparto mi resultado y código, acepto sugerencias y correcciones, excelente curso, no sé si esté tan bien mi código, acepto comentarios 😄!

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>
    <aside class="product-detail">
        <img src="https://images.pexels.com/photos/47261/pexels-photo-47261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="phone">
        <img src="./Platzi_YardSale_Icons/icon_close.png" alt="close">
        <div class="product-detail-info">
            <p>$105,00</p>
            <p>Smartphone</p>
            <p>This is a great smartphone, it has very good specifications like, 4,2in screen, water resist, high resist to stress, battery with 9000maph, great choice if u want a good phone, take it now 😉</p>
            <button class="primary-button add-to-cart-button">
                <img src="./Platzi_YardSale_Icons/bt_add_to_cart.svg" alt="cart">
                Add to cart
            </button>
        </div>
    </aside>
</body>
</html>

CSS

.product-detail {
    width: 360px;
    height: 100vh;
    padding-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
aside>img:nth-child(1){
    width: 100%;
    height: 380px;
    position: relative;
    border-radius: 20px;
    object-fit: cover;
    
}
aside img:nth-child(2){
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50px;
    left: 20px;
    border-radius: 50%;
    border: solid 0.5px var(--Very-light-pink);
    cursor: pointer;
}

.product-detail-info p:nth-child(1){
    font-size: var(--lg);
    font-weight: bold;
    margin-bottom: 0;
}
.product-detail-info p:nth-child(2){
    font-size: var(--lg);
    margin-top: 4px;
    color: var(--Very-light-pink);
}
.product-detail-info p:nth-child(3){
    font-size: var(--md);
    margin-top: 24px;
    margin-bottom: 50px;
    color: var(--Very-light-pink);
}

.add-to-cart-button{
    display: flex;
    align-items: center;
    justify-content: center;
}
.primary-button {
    border: none;
    border-radius: 8px;
    background-color: var(--hospital-green);
    color: var(--white);
    width: 100%;
    font-size: var(--lg);
    font-weight: bold;
    height: 52px;
    cursor: pointer;
}

Buenas noches team,

En cuanto al reto pendiente del slider bajo la foto del producto, aca les dejo el codigo y como se ve. Espero les sirva:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
            --dark: #232830;
            --dark-ligth: #5d626a;
            --sm: 14px;
            --md: 16px;
            --lg: 18px;
        }
        body {
            margin: 0;
            font-family: 'Quicksand', sans-serif;
        }
        .product-detail{
            width: 360px;
            padding-bottom: 24px;
            height: auto;
            position: absolute;
            right: 0;       
        }
        .product-detail-close{
            background: var(--white);
            width:12px;
            height: 12px;
            position: absolute;
            top: 12px;
            left: 12px;
            border-radius: 50%;
            z-index: 2;
            padding: 12px;
            border: solid 1px var(--very-light-pink);
        }
        .product-detail-close img{
            width: 10px;
            height: 10px;
            position: absolute;
        }
        .product-detail > img:nth-child(2){
            width: 360px;
            height: 360px;
            object-fit: cover;
            border-radius: 0 0 20px 20px;
        }
        .product-detail-close :hover{
            cursor: pointer;
        }
        .product-info{
            margin: 24px 24px 0 24px;
        }
        .product-info p:nth-child(1){
            font-weight: bold;
            font-size: var(--md);
            margin-bottom: 4px;
            margin-top: 0;
        }
        .product-info p:nth-child(2){
            font-size: var(--md);
            margin-bottom: 24px;
            margin-top: 0px;
            color: var(--dark-ligth);
        }
        .product-info p:nth-child(3){
            font-size: var(--sm);
            margin-bottom: 36px;
            margin-top: 0px;
            color: var(--dark-ligth);
        }
        .primary-button {
            background-color: var(--hospital-green);
            border: none;
            border-radius: 8px;
            color: var(--white);
            width: 100%;
            height: 50px;
            font-size: var(--md);
            font-weight: bold;
            cursor: pointer;
        }
        .add-to-cart{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .principal-slider{
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 0px;
            padding: 0px;
        }
        .slider{
            width: 100px;
        }
        .slider ul{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            margin: 0px;
            justify-items: center;
            padding: 0px 20px 0px 50px;
        }
        .select-list{
            list-style: disc;
        }
        .select-list li{
            color:var(--very-light-pink);
        }
        .select-list li:hover{
            color:var(--dark-ligth);
        }
        
        @media (max-width: 640px){
            .product-detail{
                width: 100%;
            }
            .product-detail > img:nth-child(2){
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <aside class="product-detail">
    <div class="product-detail-close">
        <img src="./icons/icon_close.png" alt="close">
    </div>  
        <img src="https://images.pexels.com/photos/2533266/pexels-photo-2533266.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt="lipstick">
        
        <div class="principal-slider">
            <div class="slider">
                <ul class="select-list">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <div class="product-info">
            <p>
                120,00 USD
            </p>
            <p>
                Retro refrigerator
            </p>
            <p>
                With its functional and practical interior, this refrigerator also fulfills a decorative function, adding personality and a retro-vintage aesthetic to your kitchen or workplace.
            </p>
            <button class="primary-button add-to-cart">
                <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
                Add to cart
            </button>
        </div>
    </aside>
</body>
</html> 

Así me quedo, para los puntos me guie con el aporte de un compañero. Muy contento con este curso, he aprendido bastante.

La verdad no veo que este profundizando en los temas, y eso teniendo en cuenta que solo estoy repasando

.product-detail-close {
            cursor: pointer;   
            position: absolute;
            top: 24px;       
            left: 24px;
            padding: 12px;
            background: var(--white);
            border: 1px solid var(--very-light-pink);
            border-radius: 50%;
            width: 14px;
            height: 14px;
            display: flex;
            justify-content: center;
            align-items: center;    
          
        }

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap” rel=“stylesheet”>
<title>Document</title>
<style>
:root {
–white: #FFFFFF;
–black: #000000;
–very-light-pink: #C7C7C7;
–text-input-field: #F7F7F7;
–hospital-green: #ACD9B2;
–sm: 14px;
–md: 16px;
–lg: 18px;
}
body {
margin: 0;
font-family: ‘Quicksand’, sans-serif;
}
.product-detail {
width: 360px;
padding-bottom: 24px;
position: absolute;
right: 0;
}
.product-detail-close {
background: var(–white);
width: 14px;
height: 14px;
position: absolute;
top: 24px;
left: 24px;
z-index: 2;
padding: 12px;
border-radius: 50%;
}
.product-detail-close:hover {
cursor: pointer;
}
.product-detail > img:nth-child(2) {
width: 100%;
height: 360px;
object-fit: cover;
border-radius: 0 0 20px 20px;
}
.product-info {
margin: 24px 24px 0 24px;
}
.product-info p:nth-child(1) {
font-weight: bold;
font-size: var(–md);
margin-top: 0;
margin-bottom: 4px;
}
.product-info p:nth-child(2) {
color: var(–very-light-pink);
font-size: var(–md);
margin-top: 0;
margin-bottom: 36px;
}
.product-info p:nth-child(3) {
color: var(–very-light-pink);
font-size: var(–sm);
margin-top: 0;
margin-bottom: 36px;
}
.primary-button {
background-color: var(–hospital-green);
border-radius: 8px;
border: none;
color: var(–white);
width: 100%;
cursor: pointer;
font-size: var(–md);
font-weight: bold;
height: 50px;
}
.add-to-cart-button {
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 640px) {
.product-detail {
width: 100%;
}
}
</style>
</head>
<body>
<aside class=“product-detail”>
<div class=“product-detail-close”>
<img src="./icons/icon_close.png" alt=“close”>
</div>
<img src=“https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940” alt=“bike”>
<div class=“product-info”>
<p>$35,00</p>
<p>Bike</p>
<p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
<button class=“primary-button add-to-cart-button”>
<img src="./icons/bt_add_to_cart.svg" alt=“add to cart”>
Add to cart
</button>
</div>
</aside>
</body>
</html>

.product-detail-close {
            background: var(--white);
            width: 14px;
            height: 14px;
            position: absolute;
            top: 24px;
            left: 24px;
            z-index: 2;
            padding: 12px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }

le agregue display flex para que se centrata mejor la image del boton en el circulo blanco

Yo considero que el codigo de la clase product-detail-close, puede mejorarse un poco, aqui la forma en la que lo hice

.product-detail-close {
    background-color: var(--white);
    width: 14px;
    height: 14px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;     	
}

Les dejo un tipo en VS Code:
Si escriben la palabra “lorem” y le dan enter generar un texto aleatorio para utilizar como ejemplo.

A esto se le conoce como lorem ipsum.
Es útil cuando quieren agregar mucho texto.

Vi la clase y me pareció que la profe se enredó un poco 😅

Yo lo hice así:

![1.jpg]
(https://static.platzi.com/media/user_upload/1-c6acf298-f5b9-4d8d-a517-86d524eeb1ca.jpg)

Hola a todos, no se si os habrá pasado a alguno, pero a mi con la explicación del @media del final, no conseguía que se posicionase la imagen al 100%, todo lo demás si, pero la imagen de la bici no. Os dejo la solución que me funcionó.
Un saludo.

Un recordatorio:
The margin property may be specified using one, two, three, or four values. Each value is a <length>, a <percentage>, or the keyword auto. Negative values draw the element closer to its neighbors than it would be by default.

CSS margin

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

        .product-detail-close img:hover{
            cursor: pointer;
        }

        .product-detail-close{
            background: var(--white);
            width: 14px;
            height: 14px;
            position: absolute;
            top: 24px;
            left: 24px;
            z-index: 2;
            padding: 12px;
            border-radius: 50%;
        }

        .product-detail > img:nth-child(2){
            width: 100%;
            height: 360px;
            object-fit: cover;
            border-radius: 0 0 20px 20px;
        }

        .product-info{
            padding: 24px 24px 0 24px;
        }

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

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

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

        .primary-button{
            background-color: var(--hospital-green);
            border-radius: 8px;
            border: none;
            color: var(--white);
            width: 100%;
            cursor: pointer;
            font-size: var(--md);
            font-weight:bold;
            height: 50px;
        }
        .add-to-cart-button{
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

Para texto de la descriipcion mejor usar
Lorem ipsum

Vayan pantalla tan más retadora. Pese a que esta sencilla si me demoro un poco más jaja
🌐 Les comparto mi código: https://github.com/iJCode1/frontend_practico_platzi
.
Resultado Desktop:

.
Resultado Móvil:

Para un texto random se podría utilizar lorem ipsum

Puntitos

Ya que varios ponen su versión de los puntitos aquí esta la mía:

HTML

<body>
    <aside class="product-detail">
        <div class="product-detail-close"><img src="icons/icon_close.png" alt=""></div>
        <img src="https://images.pexels.com/photos/3735169/pexels-photo-3735169.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="fridge almond products">
        <div class="dots">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
          </div>
        <div class="product-info">
            <p>$35.00</p>
            <p>Almond Milk</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Quam, magnam possimus autem iure eveniet eum consequatur. Necessitatibus, nisi. 
                Perferendis, maxime? Fuga magnam labore praesentium saepe velit quis eos repellat laudantium.
            </p>
            <button class="primary-button add-to-cart-button">
                <img src="icons/bt_add_to_cart.svg" alt="shopping cart"> Add to cart
            </button>
        </div>
    </aside>
</body> 

CSS

.dots {
        text-align: center;
    }

    .dot {
        cursor: pointer;
        height: 8px;
        width: 8px;
        margin: 0 2px;
        background-color: var(--very-light-pink);
        border-radius: 50%;
        display: inline-block;
    }

    .dots span:nth-child(1) {
        background-color: var(--hospital-green);
    }

Me apoyé mucho en esta página: How to is Slidehow Y este es el resultado final:

Les comparto mis resultados:

<aside> Ya no me recordaba de la etiqueta </aside> 

Código 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;
        }

        .product-detail {
            width: 360px;
            padding-bottom: 24px;
            position: absolute;
            right: 0px;
        }
        
        .product-detail-close{
            background: var(--white);
            width: 14px;
            height: 14px;
            position: absolute;
            top: 24px;
            left: 24px;
            padding: 12px;
            border-radius: 50%;
        }

        .product-detail-close img {
           z-index: 2;
        }

        .product-detail-close:hover {
            cursor: pointer;
        }

        .product-detail > img:nth-child(2){
            width: 100%;
            height: 360px;
            object-fit: cover;
            border-radius: 0 0  20px 20px;
        }

        .product-info{
            margin: 24px 24px 0px;

        }

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

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

        .primary-button{
            height: 50px;
            width: 100%;
            border: none;
            border-radius: 8px;
            color: var(--white);
            font-size: var(--md);
            font-weight: bold;
            background-color: var(--hospital-green);
            cursor: pointer;
        }

        .add-to-cart-button{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        

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