Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Maquetando tarjetas de beneficios

20/31
Recursos

Aportes 313

Preguntas 22

Ordenar por:

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

Para no repetir codigo, cree una clase llamada icon-card y luego a cada icono le asignaba un background diferente.

.product-detail--card .icon-card {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.clock {
    background-image: url('./../assets/icons/clock.svg');
}

.eye {
    background-image: url('./../assets/icons/aye.svg')
}

.dolar {
    background-image: url('./../assets/icons/dollar-sign\ 1.svg');
}

.circle{
    background-image: url('./../assets/icons/check-circle\ 1.svg');
}```

HTML

<section class="product-cards-container">
                    <article class="product-detail-card">
                        <span class="icon-card clock"></span>
                        <h3 class="product-card-title">Tiempo real</h3>
                        <p class="product-card-body">
                            Nuestra API toma información minuto a minutro sobre las tareas que
                            determinan el comportamiento.
                        </p>
                    </article>
                    <article class="product-detail-card">
                        <span class="icon-card eye"></span>
                        <h3 class="product-card-title">No hay tasas escondidas</h3>
                        <p class="product-card-body">
                            Ni en la compra o al momento de exit. Barabit siempre te muestra el
                            costo real de lo estás alquilando.
                        </p>
                    </article>
                    <article class="product-detail-card">
                        <span class="icon-card dollar"></span>
                        <h3 class="product-card-title">Compara monedas</h3>
                        <p class="product-card-body">
                            No más rumores, con Batabit sabrás el valor real de cada moneda en el
                            mercado actual.
                        </p>
                    </article>
                    <article class="product-detail-card">
                        <span class="icon-card circle"></span>
                        <h3 class="product-card-title">Información confiable</h3>
                        <p class="product-card-body">
                            Nuestras fuentes están 100% verificadas y continuamos auditando su
                            contenido mientras se actualizan.
                        </p>
                </section>

CSS

.product-detail-card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail-card .icon-card {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.product-detail-card .clock {
    background-image: url("./../assets/icons/clock.svg");
}
.product-detail-card .eye {
    background-image: url("../assets/icons/eye.svg");
}
.product-detail-card .dollar {
    background-image: url("../assets/icons/dollar-sign.svg");
}
.product-detail-card .circle {
    background-image: url("../assets/icons/check-circle.svg");
}
.product-card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--white);
}
.product-card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

Anexo la solución del reto con las otras card:

Código, hice un clase global para los estilos y luego a cada span le coloque otra clase solo para anexarle el background-image

Realizado.

Me encanta como va quedando todo!
Reto cumplido 😄

Yo lo quise hacer de una manera distinta, lo que hice en vez de crear una nueva clase conjunta para los elemento fue llamar a todas las clases a las vez y darle los atributos que tiene en común, luego llamar a cada clase por separado para añadir el icon que le corresponda a cada uno, no se si eso seria una mala practica, si alguien sabe si esto es correcto o no, le agradecería que me dijera.
![](

Me esta gustando mucho este curso

Reto completado, le agregue una clase general a todos los iconos y otra especifica por cada icono y así usar menos código.

Me ha costado dar con la clave pero he podido hacerlo de la siguiente manera, espero que si alguien lo lee pueda recomendarme otra forma de mejorarlo. Gracias de antemano.

![](

Y aquí mi código CSS:

.product-cards--container {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail--card .clock, .eye, .dollar-sign, .check-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.clock {
    background-image: url(./assets/icons/clock.svg);
}
.eye {
    background-image: url(./assets/icons/eye.svg);
}
.dollar-sign {
    background-image: url(./assets/icons/dollar-sign.svg);
}
.check-circle {
    background-image: url(./assets/icons/check-circle.svg);
}
.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color:#808080;
}```


Reto terminado, no fue muy difícil de hacer, solo replicar el código HTML y luego modificar un poco el CSS y cambiar las imágenes de background por cada span, el resultado es el siguiente:

Este es mi código HTML (lo modificado)

<section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <section class="producto-cards--container">
                <article class="product-detail--card">
                    <span class="clock"></span>
                    <p class="product--card-title">Tiempo real</p>
                    <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
            </section>
            <section class="producto-cards--container">
                <article class="product-detail--card">
                    <span class="eye"></span>
                    <p class="product--card-title">No hay tasas escondidas</p>
                    <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
                </article>
            </section>
            <section class="producto-cards--container">
                <article class="product-detail--card">
                    <span class="dollar"></span>
                    <p class="product--card-title">Compara monedas</p>
                    <p class="product--card-body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
                </article>
            </section>
            <section class="producto-cards--container">
                <article class="product-detail--card">
                    <span class="check"></span>
                    <p class="product--card-title">Información confiable</p>
                    <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>
        </section>

'
Y este es mi código CSS (lo modificado):

.product-detail--card .clock,
.product-detail--card .eye,
.product-detail--card .dollar,
.product-detail--card .check {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product-detail--card .clock {
    background-image: url('./assets/icons/clock.svg');
}
.product-detail--card .eye {
    background-image: url('./assets/icons/eye.svg');
}
.product-detail--card .dollar {
    background-image: url('./assets/icons/dollar_sign.svg');
}
.product-detail--card .check {
    background-image: url('./assets/icons/check_circle.svg');
}

Reto completado

Lo logré, pero debo aprender a ser más resumido con las líneas de código.

<section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="clock"></span>
                    <p class="product--card-title">Tiempo real</p>
                    <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
                <article class="product-detail--card">
                    <span class="eye"></span>
                    <p class="product--card-title">No hay tasas escondidas</p>
                    <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
                </article>
                <article class="product-detail--card">
                    <span class="dolar-sign"></span>
                    <p class="product--card-title">Compara monedas</p>
                    <p class="product--card-body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
                </article>
                <article class="product-detail--card">
                    <span class="check-circle"></span>
                    <p class="product--card-title">Información confiable</p>
                    <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>
        </section>
.main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% - 20px);
    background-image: url('./assets/icons/batata.svg');
}

.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

.product-detail--title  h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

.product-detail--card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 152px;
    margin: 16px auto;
    padding: 16px;
    background-color: var(--black);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail--card .clock {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-image: url('./assets/icons/clock.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product--card-title {
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}


.product-detail--card .eye {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-image: url('./assets/icons/eye.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.product-detail--card .dolar-sign {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-image: url('./assets/icons/dollar-sign.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.product-detail--card .check-circle {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-image: url('./assets/icons/check-circle.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Así va quedando el código:

Nota: Se puede reutilizar el código de los artículos por completo:

/*
1. Posicionamiento
2. Modelo de caja
3. Tipografía
4. Visuales
5. Otros
*/

:root {
    /* Colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black1: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif ;
}

header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    align-items: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

header img{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;  
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center; 
}

.header--title-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header--title-container p{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

.header--title-container .header--button{
    position: absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);  
    border: none;  
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black1);
}

.header--button span{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("../assets/icons/Vector.svg");
}

main{
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}

.main-exchange-container{
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}   

.main-exchange-container--title{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

.main-exchange-container .background-img{
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 50px;
    background-image: url("../assets/icons/Bitcoin.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main-exchange-container h2{
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black1);
}
.main-exchange-container p{
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

.main-currency-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}
.main-currency-table .currency-table--title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
}

.currency-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}

.currency-table--container table{
    width: 100%;
    height: 100%;
}

.currency-table--container td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
    background-color: var(--just-white);
}

.currency-table--container .table__top-left{
    border-radius: 15px 0 0 0 ;
}

.currency-table--container .table__top-right{
    border-radius: 0 15px 0 0;
}

.currency-table--container .table__bottom-left{
    border-radius: 0 0 0 15px;
}

.currency-table--container .table__bottom-right{
    border-radius: 0 0 15px 0;
}

.currency-table--container .table__right{
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

.currency-table--container .down{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("../assets/icons/trending-down.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.currency-table--container .up{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("../assets/icons/trending-up.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.comissions-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 290px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}

.comissions-table .comissions-table--title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

.comissions-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}


.comissions-table--container table{
    width: 100%;
    height: 100%;
}

.comissions-table--container td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
    background-color: var(--just-white);
}

.comissions-table--container .table__right{
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

.comissions-table--container .table__top-left{
    border-radius: 15px 0 0 0 ;
}

.comissions-table--container .table__top-right{
    border-radius: 0 15px 0 0;
}

.comissions-table--container .table__bottom-left{
    border-radius: 0 0 0 15px;
}

.comissions-table--container .table__bottom-right{
    border-radius: 0 0 15px 0;
}

.currency-table--date{
    width: max-content;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}

.currency-table--date p{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--warm-black);
}

.comissions-table--date{
    background-color: var(--soft-blue);
    width: max-content;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    border-radius: 8px;
}

.comissions-table--date p{
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

.main-product-detail{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

.product-detail--batata-logo{
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% - 20px);
    background-image: url(../assets/icons/batatabit.svg);
}

.product-detail--title{
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.product-detail--title h2{
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.product-detail--title p{
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

.product-detail--card{
    width: 90%;
    min-width: 288;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black1);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail--card .clock-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/clock.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-card--title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

.product-card--body{
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #808080;  
}

.product-detail--card .eye-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/eye.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-detail--card .dolar-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/dollar-sign.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.product-detail--card .check-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/check-circle.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Reto realizado:

Aquí mi reto terminado 😃

Excelente termine!

Desafío Completado😎

¡Listo!

Reto cumplido 😄

increíble la facilidad con la que se hacen estar tarjetas.

Reto terminado y aceptado. Me encanta estos retos.

![](

Hola les comparto lo del reto

La metodologia BEM es lo mejor para no repetir codigo

Hola utilizando la metodología bem podemos reutilizar estilos con muy pocas lineas.
Les comparto mi solución al reto.

.product-detail__icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("./assets/icons/clock.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product-card__title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--white);
}
.product-card__body{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.product-detail__icon--eye{
    background-image: url("./assets/icons/eye.svg");
}
.product-detail__icon--dollar{
    background-image: url("./assets/icons/dollar-sign.svg");
}
.product-detail__icon--check{
    background-image: url("./assets/icons/check-circle.svg");
}

Reto Completado:

así me quedo, no soy experta en el tema, todo para mi es nuevo lo quería intentar hacer ante de leer los demás comentarios para ver si podía realizarlo y pues bueno evidencio que se hubiese podido hacer de una forma mas sencilla. jejeje lo importante lo intente

Reto cumplido 😃,

¡Reto cumplido!

Reto completado 😃

Aquí les comparto un screenshot de cómo se ve mi solución de las otras cards.

En mi caso, simplemente desde el principio hice el código de las cards adicionales y lo único que tuve que hacer mientras seguía la clase, fue cambiar el ícono para cada card porque el resto comparte los mismos estilos.

Reutilizando el posicionamiento para todos los icono y uso de clase para el background de cada icono.

Done 😉

Lindos retos 😄

Reto completado (optimicé el código evitando repetir líneas de código):
INSPECTOR:


HTML:

CSS:


Hola a todos, así quedó mi reto, estoy practicndo el no repetir tanto el código.

.product-detail–card span{
display: inline-block;
width: 20px;
height: 20px;
margin-bottom: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.clock{
background-image: url("./assets/icons/clock1.svg");
}
.eye{
background-image: url("./assets/icons/eye1.svg");
}
.dollar{
background-image: url("./assets/icons/dollar-sign1.svg");
}
.check{
background-image: url("./assets/icons/check-circle1.svg");
}

Desafío completado

¡Reto logrado! 💪💚🚀

Lo primero que hice fue preguntarme que podía servir del código escrito por el profe Diego. Entonces, dejé en las otras tarjetas las mismas clases porque me servía la misma configuración. Lo único que cambia es el ícono en cada tarjeta, así que dejé en las otras tarjetas la misma clase “clock” porque la configuración también servía. Solo creé una segunda clase en estas tarjetas y en el CSS llamé únicamente a esas nuevas clases eye, dollar-sign y check-circle y busqué el ícono correspondiente. Y listo!!! Adjunto el código.

HTML

<section class="main-product-detail">
        <span class="product-detail--batata-logo"></span>
        <div class="product-detail--title">
          <h2>Creamos un producto sin comparación.</h2>
          <p>Confiable y diseñado para su uso diario.</p>
        </div>
        <section class="product-cards--container">
          <article class="product-detail--card">
            <span class="clock"></span>
            <p class="product--card-title">Tiempo real </p>
            <p class="product--card-body">Nuestra API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
          </article>
          <article class="product-detail--card">
            <span class="clock eye"></span>
            <p class="product--card-title">No hay tasas escondidas </p>
            <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
          </article>
          <article class="product-detail--card">
            <span class="clock dollar-sign"></span>
            <p class="product--card-title">Compara monedas </p>
            <p class="product--card-body">No más rumores, con Batabit sabrás el valor real de cada moneda en el mercado actual.</p>
          </article>
          <article class="product-detail--card">
            <span class="clock check-circle"></span>
            <p class="product--card-title">Información confiable </p>
            <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
          </article>
        </section>
      </section> 

CSS

.main-product-detail {
  position: relative;
  width: 100%;
  min-width: 320px;
  height: auto;
  padding: 20px 10px;
  background-color: var(--warm-black);
}
.product-detail--batata-logo {
  position: absolute;
  width: 40px;
  height: 25px;
  top: -10px;
  left: calc(50% - 20px);
  background-image: url('./assets/icons/batata.svg');
}
.product-detail--title {
  width: 90%;
  min-width: 288px;
  height: auto;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}
.product-detail--title h2 {
  margin-bottom: 20px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--just-white);
}
.product-detail--title p {
  margin-bottom: 20px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #808080;
}
.product-detail--card {
  width: 90%;
  min-width: 288px;
  max-width: 400px;
  height: 150px;
  margin: 15px auto;
  padding: 15px;
  background-color: var(--black);
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail--card .clock {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background-image: url('./assets/icons/clock.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.product-detail--card .eye {
  background-image: url('./assets/icons/eye.svg');
}
.product-detail--card .dollar-sign {
  background-image: url('./assets/icons/dollar-sign.svg');
}
.product-detail--card .check-circle {
  background-image: url('./assets/icons/check-circle.svg');
}
.product--card-title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--just-white);
}
.product--card-body {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #808080;
}

LISTO. Ojalá a mí se me hubiera ocurrido lo de crear una clase para todos los íconos jaja yo sí repetí todo el código.


.main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: var(--warm-black);
}

.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    background-image: url("../assets/icons/batata.svg");
    top: -10px;
    left: calc(50% - 20px);
}

.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}
.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #808080;
}
.product-detail--card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--off-black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.product-detail--card .clock {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/clock.svg");
    background-size: cover;
    background-position: center;
    background-repeat: none;
}
.product-detail--card .eye {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/eye.svg");
    background-size: cover;
    background-position: center;
    background-repeat: none;
}
.product-detail--card .dollar-sign {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/dollar-sign.svg");
    background-size: cover;
    background-position: center;
    background-repeat: none;
}
.product-detail--card .check-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("../assets/icons/check-circle.svg");
    background-size: cover;
    background-position: center;
    background-repeat: none;
}

Lo trate de solucionar dando una clase extra al icono sin cambiar la que ya tenia los estiolos y solo modifique el background por el nuevo !!

=============== resultado ==================

=============== HTML ==================

=============== CSS ==================

Para no repetir código agregue una segunda clase llamada icons y agregué los estilos de los iconos

Mi avance de la práctica

.product-detail--batata-logo{
  position: absolute;
  width: 40px;
  height: 25px;
  top: -10px;
  left: calc(50% - 20px);
  background-image: url('./assets/icons/batata.svg');
}

.product-detail--title {
  width: 90%;
  min-width: 288px;
  height: auto;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

.product-detail--title h2{
  margin-bottom: 20px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--just-white);
}

.product-detail--title p{
  margin-bottom: 20px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #808080;
}

.product-detail--card{
  width: 90%;
  min-width: 288px;
  max-width: 400px;
  height: 150px;
  margin: 15px auto;
  padding: 15px;
  background-color: var(--black);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail--card .clock, .money, .eye{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background-image: url('./assets/icons/clock.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.eye{
  background-image: url('./assets/icons/eye.svg');
}

.money{
  background-image: url('./assets/icons/dollar-sign.svg');
}

.product--card-title{
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--just-white);
}

.product-card--body{
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: #808080;
}

Para no tocar el css
utilicé el siguiente mixin
.

mixin product-cards(image, title, info)
    section.product-cards--container 
        article.product-detail--card 
            span.clock
            p.product--card-title #{title}
            p.product--card-body #{info}

.
y aquí lo llamé
.

        section.main-product-detail   
            span.product-detail--batata-logo 
            div.product-detail--title 
                h2 Creamos un producto sin comparación.
                p Confiable y diseñado para su uso diario.
            +product-cards("/assets/icons/clock.svg","Tiempo real","Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.")
            +product-cards("/assets/icons/eye.svg","No hay tasas escondidas","Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.")
            +product-cards("/assets/icons/dollar-sign.svg","Compara monedas","No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.")
            +product-cards("/assets/icons/check-circle.svg","Información confiable","Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.")

Ahorrando lineas de codigo jeje

.main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background: var(--warm-black);
}

.product-detail--batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    top: -10px;
    left: calc(50% - 20px);
    background-image: url("./assets/icons/batata.svg");
}

.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

.product-detail--card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail--card .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clock {
    background-image: url("./assets/icons/clock.svg");
}

.eye {
    background-image: url("./assets/icons/eye.svg");
}

.dollar {
    background-image: url("./assets/icons/dollar-sign.svg");
}

.check {
    background-image: url("./assets/icons/check-circle.svg");
}

.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

Así vamos 😎:

Quiza Ahorre un poco de codigo. Para los iconos.

.product-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.clock{
    background-image: url('/assets/icons/clock.svg');
}
.eye {
    background-image: url('/assets/icons/eye.svg');
}
.dollar-sign{
    background-image: url('/assets/icons/dollar-sign.svg');
}
.check-circle {
    background-image: url('/assets/icons/checkcircle.svg');
}

Ahorrando líneas de código más BEM.

.cards-container__icon {
 display: inline-block;
 width: 20px;
 height: 20px;
 margin-bottom: 12px;
}

.cards-container--clock {
 background: url(./assets/icons/clock.svg) center/ cover no-repeat;
}

.cards-container--eye {
 background: url(./assets/icons/eye.svg) center/ cover no-repeat;
}

.cards-container--dollar {
 background: url(./assets/icons/dollar-sign.svg) center/ cover no-repeat;
}

.cards-container--like {
 background: url(./assets/icons/check-circle.svg) center/ cover no-repeat;
}

Ponemos el reloj

Beneficios

HTML

<section class="main-product-detail">
    <span class="product-detail__batata-logo"></span>
    <div class="product-detail__title">
        <h2>Creamos un producto sin comparación.</h2>
        <p>Confiable y diseñado para su uso diario.</p>
    </div>
    <div class="product-cards__container">
        <article class="product-detail__card">
            <span class="detail-image detail-image--clock"></span>
            <h3 class="product__card--title">Tiempo real</h3>
            <p class="product__card--body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
        </article>
        <article class="product-detail__card">
            <span class="detail-image detail-image--eye"></span>
            <h3 class="product__card--title">No hay tasas escondidas</h3>
            <p class="product__card--body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
        </article>
        <article class="product-detail__card">
            <span class="detail-image detail-image--dollar"></span>
            <h3 class="product__card--title">Compara monedas</h3>
            <p class="product__card--body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
        </article>
        <article class="product-detail__card">
            <span class="detail-image detail-image--check"></span>
            <h3 class="product__card--title">Información confiable</h3>
            <p class="product__card--body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
        </article>
    </div>
</section>

CSS

.main-product-detail{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background-color: #201E1C;
}

.product-detail__batata-logo{
    position: absolute;
    width: 40.57px;
    height: 24.01px;
    background-image: url("assets/icons/batata.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    left: calc(50% - 40.57px/2);
    top: calc(0% - 24.01px/2);
}

.product-detail__title{
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}

.product-detail__title h2{
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--light-color);
}

.product-detail__title p{
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: #808080;
    margin-bottom: 32px;
}

.product-detail__card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: auto;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--dark-color);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    margin-bottom: 16px;
}

.detail-image{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.detail-image--clock{
    background-image: url("assets/icons/clock.svg");
}
.detail-image--eye{
    background-image: url("assets/icons/eye.svg");
    
}
.detail-image--dollar{
    background-image: url("assets/icons/dollar-sign.svg");
}
.detail-image--check{
    background-image: url("assets/icons/check-circle.svg");
}


.product__card--title{
    margin-bottom: 10px;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: var(--light-color);
}

.product__card--body{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

Aplicando la metodología BEM

HTML

<!-- BEM: bloque__elemento--modificador -->
<div class="product-cards__container">
    <article>
        <span class="detail-image detail-image--clock"></span>
    </article>

    <article>
        <span class="detail-image detail-image--eye"></span>
    </article>

    <article>
        <span class="detail-image detail-image--dollar"></span>
    </article>

    <article>
        <span class="detail-image detail-image--check"></span>
    </article>
</div>

CSS

/*blqoue*/
.detail-image{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*modificadores*/
.detail-image--clock{
    background-image: url("assets/icons/clock.svg");
}
.detail-image--eye{
    background-image: url("assets/icons/eye.svg");
    
}
.detail-image--dollar{
    background-image: url("assets/icons/dollar-sign.svg");
}
.detail-image--check{
    background-image: url("assets/icons/check-circle.svg");
}
 

HTML

<<section class="product-cards-container">
        <article class="product-detail--cards">
          <span class="clock"></span>
          <p class="product--card-title">Tiempo real</p>
          <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
        </article>

        <article class="product-detail--cards">
          <span class="eye"></span>
          <p class="product--card-title">No hay tasas escondidas</p>
          <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
        </article>

        <article class="product-detail--cards">
          <span class="dollar"></span>
          <p class="product--card-title">Compara monedas</p>
          <p class="product--card-body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
        </article>

        <article class="product-detail--cards">
          <span class="check"></span>
          <p class="product--card-title">Información confiable</p>
          <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
        </article>
      </section>> 

CSS:

<.product-detail--cards{
  width:100%;
  min-width: 288px;
  max-width: 400px;
  height: 150px;
  margin: 15px auto;
  padding:15px;
  background-color: var(--black);
  border-radius: 4px;
  box-shadow: 0px 4px 8px 0px #00000029;
}

.product--card-title{
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height:1.8rem;
  color: var(--just-white);
}

.product--card-body{
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height:1.8rem;
  color: #808080;
}

.product-detail--cards .clock {
  display: inline-block;
  width:24px;
  height: 24px;
  margin-bottom:10px;
  background-image: url('assets/icons/clock.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-detail--cards .eye {
  display: inline-block;
  width:24px;
  height: 24px;
  margin-bottom:10px;
  background-image: url('assets/icons/eye.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-detail--cards .dollar {
  display: inline-block;
  width:24px;
  height: 24px;
  margin-bottom:10px;
  background-image: url('assets/icons/dollar_sign.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-detail--cards .check {
  display: inline-block;
  width:24px;
  height: 24px;
  margin-bottom:10px;
  background-image: url('assets/icons/check_circle.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}> 

.product-detail--card {
    width: 80%;
    min-width: 228px;
    max-width: 400px;
    height: auto;
    margin: 0 auto;
    background-color:#282623;
    text-align: left;
    padding: 16px;
    margin-top: 15px;
    border-radius: 6px;
}
.product-detail--card .product--icon{
    display: inline-block;
    width: 25px;
    height: 25px;
}
.product-detail--card .clock{
    background-image: url("./assets/icons/clock.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.product-detail--card .eye{
    background-image: url("./assets/icons/eye.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.product-detail--card .dollar{
    background-image: url("./assets/icons/dollar.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.product-detail--card .check{
    background-image: url("./assets/icons/check-circle.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.product-detail--card .product--card-title{
    font-size: 1.8rem;
    font-weight: bold;
}

.product-detail--card .product--card-body{
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.4rem;
    color: var(--gray-lite);
    margin-top: 10px;
}

le sume una clase a los icons, ya que todos usan el mismo tamanno intente no repetir tanto codigo.

Cards
![](

<section class=“product-cards–container”>
<article class=“product-detail–card”>
<span class=“icon-card clock”></span>
<p class=“product–card-title”>Tiempo real</p>
<p class=“product–card-body”>Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon-card eye”></span>
<p class=“product–card-title”>No hay tasas escondidas</p>
<p class=“product–card-body”>Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon-card dollar”></span>
<p class=“product–card-title”>Compara monedas</p>
<p class=“product–card-body”>No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon-card check-circle”></span>
<p class=“product–card-title”>Informacion confiable</p>
<p class=“product–card-body”>Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
</article>

.product-detail–card .icon-card {
display: inline-block;
width: 20px;
height: 20px;
margin-bottom: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.product–card-title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.8rem;
color: var(–just-white);
}
.product–card-body {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}
.product-detail–card .clock {
background-image: url("./assets/icons/clock.svg");
}
.product-detail–card .eye {
background-image: url("./assets/icons/eye.svg");
}
.product-detail–card .dollar {
background-image: url(./assets/icons/dollar-sign.svg);
}
.product-detail–card .check-circle {
background-image: url("./assets/icons/check-circle.svg");
}

Listo! Creo que ya veo la Matrix!

.main__product__detail
{
  position: relative;
  width: 100%;
  min-width: 320px;
  height:auto;
  padding: 20px 10px;
  background-color: var(--black);
}
.product__detail__batata_logo
{
  position: absolute;
  width:40px;
  height:25px;
  top:-10px;
  left:calc(50% - 20px);
  background-image:url('./assets/icons/batata.svg');
}
.product__detail__title
{
  width:90%;
  min-width: 288px;
  height:auto;
  margin: 0 auto;
  margin-top:50px;
  text-align: center;
}
.product__detail__title h2
{
  margin-bottom:20px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height:2.6rem;
  color:var(--just-white);
}
.product__detail__title p
{
  margin-bottom:20px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height:1.8rem;
  color:#808080;
}
.product__cards__container .product__detail__card
{
  width: 90%;
  min-width: 288px;
  max-width:400px;
  height: 150px;
  margin: 15px auto;
  padding:15px;
  background-color:var(--warm-black);
  border-radius:5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product__cards__container .product__detail__card .clock
{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background: url('./assets/icons/clock.svg') center/cover no-repeat;
}
.product__cards__container .product__detail__card .eye
{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background: url('./assets/icons/eye.svg') center/cover no-repeat;
}
.product__cards__container .product__detail__card .money
{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background: url('./assets/icons/dollar-sign.svg') center/cover no-repeat;
}
.product__cards__container .product__detail__card .check
{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background: url('./assets/icons/check-circle.svg') center/cover no-repeat;
}
.product__detail__card .product__card_title
{
  margin-bottom:15px;
  font-size:1.8rem;
  font-weight: bold;
  line-height:1.8rem;
  color:var(--just-white)
}
.product__detail__card .product__card_body
{
  font-size: 1.4rem;
  font-weight:500;
  line-height:1.8rem;
  color:#808080;
}

me encanta estos retos


Reto cumplido tmb.

Reto cumplido!

Gracias al uso de herramientas como PUG y SASS, terminé todas las tarjetas al mismo tiempo. Así me quedó.



Pude simplificar el código bastante y además poder hacerlo más mantenible en el futuro.

  • En PUG primero declaro una array con los contenidos de las cards y hago un mixing para la creación de las tarjetas.
-
  var cards = [
    ["clock","Tiempo real", "Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento."],
    ["eye","No hay tasas escondidas","Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo."],
    ["dollar","Compara monedas","No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual."],
    ["check","Información confiable","Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan."]
  ];

mixin productCard(icon, title, desc)
    article.card
        span(class="card__icon "+icon)
        h3.card__title= title
        p.card__description= desc

  • Luego hago itero la array para ir construyendo las cards
section.product-detail
  span.product-detail__logo
    .product-detail__title
      h2 Creamos un producto sin comparación.
      p Confiable y diseñado para su uso diario.
    section.product-cards
      each val in cards
+productCard(val[0],val[1],val[2])

  • El resultado en HTML:
  <section class="product-detail"><span class="product-detail__logo"></span>
    <div class="product-detail__title">
      <h2>Creamos un producto sin comparación.</h2>
      <p>Confiable y diseñado para su uso diario.</p>
    </div>
    <section class="product-cards">
      <article class="card"><span class="card__icon clock"></span>
        <h3 class="card__title">Tiempo real</h3>
        <p class="card__description">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
      </article>
      <article class="card"><span class="card__icon eye"></span>
        <h3 class="card__title">No hay tasas escondidas</h3>
        <p class="card__description">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
      </article>
      <article class="card"><span class="card__icon dollar"></span>
        <h3 class="card__title">Compara monedas</h3>
        <p class="card__description">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
      </article>
      <article class="card"><span class="card__icon check"></span>
        <h3 class="card__title">Información confiable</h3>
        <p class="card__description">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
      </article>
    </section>
  </section>
  • Aplico estilos con SASS:
.product-cards {
            .card {
                width: 90%;
                min-width: 288px;
                max-width: 400px;
                height: 154px;
                margin: 15px auto;
                padding: 15px;
                background-color: $warm-black-1;
                border-radius: 6px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.16);
                &__icon {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    margin-bottom: 10px;
                    background-size: cover;
                    background-repeat: no-repeat;
                }
                .clock {background-image: url('../assets/clock.svg')}
                .eye {background-image: url('../assets/eye.svg')}
                .dollar {background-image: url('../assets/dollar-sign.svg')}
                .check {background-image: url('../assets/check-circle.svg')}
                &__title {
                    margin-bottom: 12px;
                    font-size: 1.8rem;
                    font-weight: 700;
                    color: $just-white;
                }
                &__description {
                    font-size: 1.4rem;
                    font-weight: 500;
                    line-height: 1.8rem;
                    color: $grey1;
                }
            }
        }

Estuvo muy fácil este reto:

HTML

<!DOCTYPE html>
<html lang="es">
<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>Batatabit</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=DM+Sans:ital,[email protected],500;0,700;1,400&family=Inter:[email protected];500;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="assets/css/mobile_style.css">
</head>
<body>
  <header>
    <img src="./assets/imgs/logo.svg" alt="Bitcoin logo">
    <div class="header--title-container">
      <h1>
        La próxima revolución en el intercambio de criptomonedas.
      </h1>
      <p>
        Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
      </p>
      <a class="header--button" href="#">
        Conoce Nuestros Planes
        <span></span>
      </a>
    </div>
  </header>
  <main>
    <section class="main-exchange-container">
      <div class="backdground-img"></div>
      <div class="main-exchange-container--title">
        <h2>
          Visibilizamos todas las tasas de cambio.
        </h2>
        <p class="title">
          Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.
        </p>
        <section class="main-tables-container">
          <div class="main-currency-table">
            <p class="currency-table--title jsTitle">Monedas</p>
            <divv class="currency-table--container">
              <table class="table1">
                <tr>
                  <td class="table__top-left jsMoney1">Bitcoin</td>
                  <td class="table__top-right table__right">$ 1.96 <span class="down jsIcon"></span></td>
                </tr>
                <tr>
                  <td class="jsMoney2">Ethereum</td>
                  <td class="table__right">$ 0.07 <span class="up jsIcon"></span></td>
                </tr>
                <tr>
                  <td class="jsMoney3">Ripple</td>
                  <td class="table__right">$ 2.15 <span class="down jsIcon"></span></td>
                </tr>
                  <td class="table__bottom-left jsMoney4">Stellar</td>
                  <td class="table__bottom-right table__right">$ 4.96 <span class="down jsIcon"></span></td>
                </tr>
              </table>
            </div>
            <div class="currency-table--date jsUpdated">
              <p><strong>Actualizado: </strong>19 Julio 23:45</p>
            </div>
          </div>
          <div class="next_table_icon jsIconNextTable">
            <span class="next_table__icon"></span>
          </div>
          <div class="previous_table_icon jsIconPreviousTable">
            <span class="previous_table__icon"></span>
          </div>
        </section>
      </div>
    </section>

    <section class="main-product-detail">
      <span class="product-detail--batata-logo"></span>
      <div class="product-detail-title">
        <h2>
          Creamos un producto sin comparación.
        </h2>
        <p>
          Confiable y diseñado para su uso diario.
        </p>
      </div>
      <section class="product-cards--container">
        <article class="product-detail--card">
          <span class="clock icon"></span>
          <p class="product--card-title">
            Tiempo real
          </p>
          <p class="product--card-body">
            Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.
          </p>
        </article>
      </section>

      <section class="product-cards--container">
        <article class="product-detail--card">
          <span class="eye icon"></span>
          <p class="product--card-title">
            No hay tasas escondidas
          </p>
          <p class="product--card-body">
            Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.
          </p>
        </article>
      </section>

      <section class="product-cards--container">
        <article class="product-detail--card">
          <span class="dollar icon"></span>
          <p class="product--card-title">
            Compara monedas
          </p>
          <p class="product--card-body">
            No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.
          </p>
        </article>
      </section>

      <section class="product-cards--container">
        <article class="product-detail--card">
          <span class="check-circle icon"></span>
          <p class="product--card-title">
            Información confiable
          </p>
          <p class="product--card-body">
            Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.
          </p>
        </article>
      </section>
    </section>
  </main>
  <footer>

  </footer>
  <script src="./assets/js/main.js"></script>
</body>
</html>

CSS

/*
  1. Posicionamiento
  2. Modelo de caja (Box Model)
  3. Tipografía
  4. Visuales
  5. Miscelaneos - otros.
 */

 :root {
   /* Colores */
   --bitcoin-orange: #F7931A;
   --soft-orange: #FFE9D5;
   --secondary-blue: #1A9AF7;
   --soft-blue: #E7F5FF;
   --warm-black: #201E1C;
   --black: #282623;
   --grey: #BABABA;
   --off-white: #FAF8F7;
   --just-white: #FFF;
 }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  font-family: 'DM Sans', sans-serif;
}

body {
  font-size: 1.6rem;
}

header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 32rem;
  height: 33.4rem;
  text-align: center;
  background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

header img {
  width: 15rem;
  height: 6rem;
  align-self: center;
}

.header--title-container {
  width: 90%;
  min-width: 28.8rem;
  max-width: 90rem;
  height: 21.8rem;
  margin-top: 4rem;
  text-align: center;
  align-self: center;
}

.header--title-container h1 {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--just-white);
}

.header--title-container p {
  margin-top: 2.5rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1rem;
  color: var(--soft-orange);
}

.header--button {
  position: absolute;
  left: calc(50% - 114.5px);
  top: 27rem;
  display: block;
  margin-top: 3.5rem;
  padding: 1.5rem;
  width: 22.9rem;
  height: 4.8rem;
  background-color: var(--off-white);
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.8rem;
  color: var(--warm-black);
  text-decoration: none;
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  border: none;
  border-radius: 5px;
}

.header--button span {
  display: inline-block;
  width: 1.3rem;
  height: 0.8rem;
  margin-left: 1rem;
  background-image: url('../icons/down-arrow.svg');
}

main {
  width: 100%;
  height: auto;
  background-color: var(--off-white);
}

.main-exchange-container {
  width: 100%;
  height: auto;
  padding-top: 8rem;
  padding-bottom: 3rem;
  text-align: center;
  /* display: none; */
}

.backdground-img {
  width: 20rem;
  height: 20rem;
  margin: 0 auto;
  background-image: url('../imgs/Bitcoin.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 3rem;
}

.main-exchange-container--title {
  width: 90%;
  min-width: 28.8rem;
  max-width: 90rem;
  margin: 0 auto;
}

.main-exchange-container h2 {
  margin-bottom: 3rem;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--black);
}

.main-exchange-container .title {
  margin-bottom: 3rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6rem;
  color: #757575;
}

.main-currency-table {
  width: 70%;
  min-width: 23.5rem;
  height: 25rem;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}

.currency-table--title {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--bitcoin-orange);
}

.currency-table--container {
  width: 90%;
  min-width: 23rem;
  max-width: 30rem;
  margin: 0 auto;
}

.table1 {
  width: 100%;
  height: 100%;
}

.table1 td {
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--grey);
  background-color: var(--just-white);
  text-align: left;
  padding-left: 2rem;
}

.currency-table--container .table__top-left {
  border-radius: 1.5rem 0 0 0;
}

.currency-table--container .table__top-right {
  border-radius: 0 1.5rem 0 0;
}

.currency-table--container .table__bottom-right {
  border-radius: 0 0 1.5rem 0;
}

.currency-table--container .table__bottom-left {
  border-radius: 0 0 0 1.5rem;
}

.currency-table--container .table__right {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}

.currency-table--container .down {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 1rem;
  background-image: url('../icons/trending-down.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.currency-table--container .up {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 1rem;
  background-image: url('../icons/trending-up.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.currency-table--date {
  width: 19rem;
  height: 3rem;
  margin: 0 auto;
  margin-top: 5rem;
  padding: 0.8rem;
  background-color: var(--soft-orange);
  border-radius: 0.8rem;
  color: var(--warm-black);
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1.5rem;
  font-weight: 300;
}

.next_table_icon {
  position: absolute;
  right: 30px;
  top: 943px;
  width: 12px;
  height: 8px;
}

.next_table__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('../icons/right-arrow.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.previous_table_icon {
  position: absolute;
  display: none;
  left: 30px;
  top: 943px;
  width: 12px;
  height: 8px;
}

.previous_table__icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('../icons/left-arrow.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-product-detail  {
  position: relative;
  widows: 100%;
  min-width: 320px;
  height: auto;
  padding: 20px 10px;
  background-color: var(--warm-black);
}

.product-detail--batata-logo {
  position: absolute;
  top: -10px;
  left: calc(50% - 20px);
  width: 40px;
  height: 25px;
  background-image: url('../icons/batata.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.product-detail-title {
  width: 90%;
  min-width: 288px;
  height: auto;
  margin: 0 auto;
  margin-top: 50px;
  text-align: center;
}

.product-detail-title h2 {
  margin-bottom: 20px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--just-white);
}

.product-detail-title p {
  margin-bottom: 20px;
  font-size: 1.4rem;
  line-height: 1.8rem;
  font-weight: normal;
  color: #808080;
}

.product-detail--card {
  width: 100%;
  min-width: 288px;
  max-width: 400px;
  height: 150px;
  margin: 15px auto;
  padding: 15px;
  background-color: var(--black);
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.clock {
  background-image: url('../icons/clock.svg');
}

.eye {
  background-image: url('../icons/eye.svg');
}

.dollar {
  background-image: url('../icons/dollar-sign.svg');
}

.check-circle {
  background-image: url('../icons/check-circle.svg');
}

.product--card-title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2rem;
  color: var(--just-white);
}

.product--card-body {
  margin-bottom: 15px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6rem;
  color: #808080;
}

Quedo! 😄✅

Así lo hice yo, no sé si se pueda reducir más el código

HTML

<section class="product-cards-container">
                <article class="product-detail-card">
                    <span class="card-icon clock"></span>
                    <p class="product-card-title">Tiempo real</p>
                    <p class="product-card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
            </section>
            <section class="product-cards-container">
                <article class="product-detail-card">
                    <span class="card-icon eye"></span>
                    <p class="product-card-title">No hay tasas escondidas</p>
                    <p class="product-card-body">Ni en la compra o al momento de exit, Batatabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
                </article>
            </section>
            <section class="product-cards-container">
                <article class="product-detail-card">
                    <span class="card-icon dollar"></span>
                    <p class="product-card-title">Compara monedas</p>
                    <p class="product-card-body">No más rumores, con Batatabit sabrás el valor real de cada moneda en el mercado actual</p>
                </article>
            </section>
            <section class="product-cards-container">
                <article class="product-detail-card">
                    <span class="card-icon check"></span>
                    <p class="product-card-title">Información confiable</p>
                    <p class="product-card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>

CSS

.product-detail-card {
    width: 90%;
    min-width: 288px;
    max-width: 420px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--warm-black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.product-detail-card .card-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clock  {
    background-image: url("../MultiMedia/icons/clock.svg");
}
.eye {
    background-image: url("../MultiMedia/icons/eye.svg");
}

.dollar {
    background-image: url("../MultiMedia/icons/dollar-sign.svg");
}

.check {
    background-image: url("../MultiMedia/icons/check-circle.svg");
}

.product-card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

.product-card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

Cuando terminas el reto antes de que te lo pida Diego, he mejorado mucho desde que empecé la escuela, estoy tan feliz y agradecido 🤗

Reto terminado! Me siento orgulloso de haberlo logrado ya que soy muy nuevo en esto. He arendido muchísimo en este curso!

Para obtener el padding-bottom como se muestra en el modelo de figma, cambié el height de 150 px a auto a la clase .product-detail__card, espero les sea de utilidad:

.product-detail__card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: auto;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

👌👍


done

Comparto mis aportes…

De esta manera se pueden ahorrar código



Reto Cumplido!

¡Reto completado!

.product-detail--card .clock {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("/assets/icons/clock.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Own code starts */
.product-detail--card .eye {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("/assets/icons/eye.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-detail--card .dollar {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("/assets/icons/dollar-sign.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-detail--card .check {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url("/assets/icons/check-circle.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Own code ends */

No es lo más optimizado pero es lo queue hay 😪

Mi resultado

Agregue una clase icon en cada span de las tarjetas

HTML

        <section class="main-product-detail">
            <span class="product-detail--batata-logo"></span>
            <div class="product-detail--title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>

            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="icon clock"></span>
                    <p class="product--card-title">Tiempo real</p>
                    <p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
            </section>

            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="icon eye"></span>
                    <p class="product--card-title">No hay tasas escondidas</p>
                    <p class="product--card-body">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
                </article>
            </section>

            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="icon dollar"></span>
                    <p class="product--card-title">Compara monedas</p>
                    <p class="product--card-body">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
                </article>
            </section>

            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="icon check"></span>
                    <p class="product--card-title">Información confiable</p>
                    <p class="product--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>
        </section>

CSS

.product-detail--card .icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.product-detail--card .clock{
    background-image: url('../assets/icons/clock.svg');
}

.product-detail--card .eye{
    background-image: url('../assets/icons/eye.svg');
}

.product-detail--card .dollar{
    background-image: url('../assets/icons/dollar-sign.svg');
}

.product-detail--card .check{
    background-image: url('../assets/icons/check-circle.svg');
}

Lo que hice fue copiar el codigo, dejar las clases y solamente cambiar la de los iconos, hay algun inconveniente con eso?

HTML
<section class=“product-card–container”>
<article class=“product-detail–card”>
<span class=“clock”></span>
<p class=“product–card-title”> Tiempo real</p>
<p class=“product–card-body”>Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
</article>
<article class=“product-detail–card”>
<span class=“dollar”></span>
<p class=“product–card-title”> Compara monedas</p>
<p class=“product–card-body”>No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
</article>
<article class=“product-detail–card”>
<span class=“check”></span>
<p class=“product–card-title”> Información confiable</p>
<p class=“product–card-body”>Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
</article>
</section>

<code> 

CSS de las tarjetas

.main-product-detail {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 20px 10px;
    background: var(--warm-black);
}
.product-detail-batata-logo {
    position: absolute;
    width: 40px;
    height: 25px;
    background-image: url(./assets/icons/batata.svg);
    top: -10px;
    left: calc(50% - 20px);
}
.product-detail--title {
    width: 90%;
    min-width: 288px;
    height: auto;
    margin: 0 auto;
    margin-top: 50px;
    text-align: center;
}
.product-detail--title h2 {
    margin-bottom: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.product-detail--title p {
    margin-bottom: 20px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.product-detail--card {
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail--card .clock {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url(./assets/icons/clock.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}
.product-detail--card .dollar {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url(./assets/icons/dollar-sign.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product-detail--card .check {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-image: url(./assets/icons/check-circle.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

listo el resto de los articles.

Proyecto hasta ahora:

GitHub:
https://github.com/Juanvcas/Bitatabit-Platzi-


El primero que pude hacer sin ningún problema :’)

Reto completado:

Así se ve con pesticide.

Solo hay que agregarles width: max-content;
usar margin y position relative y absolute
Me inspire viendo la página de apple, y ver lo limpio que son sus cajas.

bueno este es el reto que he sentido que se me facilito más.

Los iconos los puse como img en HTML para simplificar CSS, también quería comentar que use Flexbox para el dieño de toda la página. Se ahorra mucho tiempo de diseño, simplifica la lectura y se ahorra muchas instrucciones.
Aquí dejo mis cards

<.product-detail--card .clock, .eye, .dollar, .check {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clock {
background-image: url(./assets/icons/clock.svg);
}

.eye {
    background-image: url(./assets/icons/eye.svg);
   
}

.dollar {
    background-image: url(./assets/icons/dollar-sign.svg);
}

.check {
    background-image: url(./assets/icons/check-circle.svg);
}>

el texto quedaba muy apretado asi que agregue un heigth: auto

.product-detail–card{
width: 90%;
min-width: 288px;
max-width: 400px;
height: auto;
margin: 15px auto;
padding: 15px;
background-color: var(–black);
border-radius: 5px;
box-shadow: 0 4px 8px rgb(0,0,0, 0.16);
}

Reto

Se agregan esta líneas de codigo con sus respectivas clases en el `span´ de las tarjetas.

.product-detail--card .eye {
    background-image: url(./assets/icons/eye.svg);
}

.product-detail--card .dollar {
    background-image: url(./assets/icons/dollar-sign.svg);
}

.product-detail--card .check{
    background-image: url(./assets/icons/check-circle.svg);
}

reto cumplido!

Aquí mi aporte
()

.main-product-detail {
position: relative;
width: 100%;
min-width: 320px;
height: auto;
padding: 20px 10px;
background-color: var(–warm-black);
}

.product-detail–batata-logo {
position: absolute;
width: 40px;
height: 25px;
top: -10px;
left: calc(50% - 20px);
background-image: url(./assets/images/logoBrand.svg);
}

.product-detail–title {
width: 90%;
min-width: 288px;
height: auto;
margin: 0 auto;
margin-top: 50px;
text-align: center;
}

.product-detail–title h2 {
margin-bottom: 20px;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(–just-white);
}

.product-detail–title p {
margin-bottom: 20px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}

.product-detail–card {
width: 90%;
min-width: 288px;
max-width: 400px;
margin: 15px auto;
padding: 15px;
background-color: var(–black);
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 1.16);
}

.product-detail–card .clock {
display: inline-block;
width: 20px;
height: 20px;
margin-bottom: 10px;
background-image: url(./assets/icons/clock.svg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.product–card-title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.8rem;
color: var(–just-white);
}

.product–card-body {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.8rem;
color: #808080;
}

.product-detail–card .eye {
background-image: url(./assets/icons/eye.svg);
}

.product-detail–card .dollar {
background-image: url(./assets/icons/dollar-sign.svg);
}

.product-detail–card .check {
background-image: url(./assets/icons/check-circle.svg);
}

Aquí la parte terminada