Maquetando tarjetas de beneficios

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.
![](

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

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.

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

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 completado

Avances por acá…

tarea.

como me quedo ami…

HTML:

<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 informacion minuto a minuto sobre las tasas que mas 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 los que estás adquiriendo.</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, Batabit sabrás el valor real de cada moneda en el mercado actual.</p>
            </article>
        
        
            <article class="product-detail--card">
                <span class="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>

CSS:

.main-product-detail .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;

}
.main-product-detail .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;
}
.main-product-detail .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: no-repeat;
}

Reto aceptado

Vi en los comentarios la forma de simplificarlo en css para no repetir tanto código, pero preferí hacer cada sección con su respectiva clase, ahorita que estoy aprendiendo más vale repeitr para que se me quede grabado, diría un profe: “practice, practice”

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

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.

Tiempo real

Nuestra API toma informacion minuto a minuto a minuto sobre las tasas que mas determinan el comportamiento.

No hay tasas escondidas

Ni en la compra o al momento del "exit", Batabit siempre te muestra el costo real de lo que estás adquiriendo.

Compara monedas

No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.

Informacion confiable

Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.

Mi resultado

![](

![](

Estoy agradecido por lo estoy aprendiendo. Gracias Platzi.

Anexo mi aporte, no sé porqué me quedaron centrados todos los items pero no me disgusta el resultado jaj:

Tarjetas Terminadas.

Asi lo complete:)

Pues hice el mismo codigo varias veces.
Fue muy repetitivo, pero lo que deseaba era practicar todo. Mientras escribia cada linea, podia recordar para que servia cada una y que hacia.

<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>
        <section class="main-product-detail">
            <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>
        <section class="main-product-detail">
            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="icon money"></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>
        <section class="main-product-detail">
            <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>

<.main-product-detail{
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    padding: 10px 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;
    line-height: 2.6rem;
    font-weight: bold;
    color: var(--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: 10px auto;
    padding: 10px;
    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;
}

.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 .money{
    background-image: url('./assets/icons/dollar-sign.svg');
}

.product-detail--card .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(--white);
}

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

Asi me quedo mi codigo con las tarjetas que dejo como reto:

<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=“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-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 class="main-product--detail">
        <span class="product-detail--batata-logo"></span>
        <div class="product-detail--tittle">
            <h2>Te ayudamos a tomar la mejor decisión, siempre.</h2>
            <p>Que la incertidumbre en materia de criptomonedas sea cosa del pasado.</p>
        </div>
        <section class="product-cards--container">
            <article class="product-detail--card">
                <span class="clock"></span>
                <p class="product--card-tittle">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="vector"></span>
                <p class="product--card-tittle">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"></span>
                <p class="product--card-tittle">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="ok"></span>
                <p class="product--card-tittle">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>

yo lo hice mas largo.

La metodología Mobile First pretende maquetar primero el diseño en vista de dispositivo movil; sin embargo, no podemos olvidar que también debe adaptarse a pantallas más grandes.

Así, para este reto acomodé las tarjetas mediante un grid, de la forma:

.product-cards--container {
  display: grid;
  justify-content: center;
  row-gap: 16px;
  column-gap: 16px;
}

@media (min-width: 768px) {
  .product-cards--container {
    grid-template-columns: repeat(2, auto);
  }
}

Con esto logramos un resultado a 2 columnas de forma:

Y un resultado a una columna de la forma:

Espero les sirva!

Completado.

Quedo elegante, aunque algo de confusión con los colores dark y warm dark

Bueno esta parte me pareció más facil no necesita mucha cosa solo especificidad:

les comparto mi propuesta:

<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"></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>
        </section>

y en CSS:

.
.
.
.product-detail--card span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.product-detail--card .clock {
    background-image: url('./assets/icons/ico-clock.svg');
}
.product-detail--card .eye {
    background-image: url('./assets/icons/ico-eye.svg');
}
.product-detail--card .dolar {
    background-image: url('./assets/icons/ico-dollar.svg');
}
.product-detail--card .check {
    background-image: url('./assets/icons/ico-check.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;
}

Cumpliendo el reto 💪🏼

Reto cumplido

Aqui les dejo mi reto cumplido 😃

HTML

<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="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 atual.</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 actulizan.</p>
            </article>
            <article>
              <span></span>
              <p></p>
              <p></p>
            </article>
          </section>

css

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

Reto cumplido :3

Resultado final

Aqui esta mi reto completado, use mucho codigo repetido

Mi HTML

        </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="nohaytasas-card">
                <span class="eye"></span>
                <p class="tasas--card-title">No hay tasas escondidas</p>
                <p class="tasas--card-body">Ni en la compra o al momento de exit, Batatabit siempre te muestra el costo real de lo que estas adquiriendo</p>
            </article>
            <article class="compara-card">
                <span class="money"></span>
                <p class="money--card-title">Compara monedas</p>
                <p class="money--card-body">No mas rumores, con Batatabit sabras el valor real de cada moneda en el mercado actual</p>
            </article>
            <article class="informacion-card">
                <span class="check"></span>
                <p class="check--card-title">Informacion Confiable</p>
                <p class="check--card-body">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
            </article>
        </section>

Mi CSS

.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(--fade-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-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;
    height: 1.8rem;
    color: #808080;
}
.nohaytasas-card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--fade-black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.nohaytasas-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;
}
.nohaytasas-card .tasas--card-title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.nohaytasas-card .tasas--card-body{
    font-size: 1.4rem;
    font-weight: 500;
    height: 1.8rem;
    color: #808080;
}
.compara-card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--fade-black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.compara-card .money{
    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;
}
.compara-card .money--card-title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.compara-card .money--card-body{
    font-size: 1.4rem;
    font-weight: 500;
    height: 1.8rem;
    color: #808080;    
}
.informacion-card{
    width: 90%;
    min-width: 288px;
    max-width: 400px;
    height: 150px;
    margin: 15px auto;
    padding: 15px;
    background-color: var(--fade-black);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.informacion-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;
}
.informacion-card .check--card-title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}
.informacion-card .check--card-body{
    font-size: 1.4rem;
    font-weight: 500;
    height: 1.8rem;
    color: #808080;   
}

El tamaño en figma del icono de las tarjetas es de 24x24px

width: 24px; 
height: 24px;

HTML

< <section class="products">
            <span class="products__isologo"></span>
            <div class="products__title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <section class="productCards">
                <article class="productCard">
                    <span class="productCard__icon clock"></span>
                    <p class="productCard__title">Tiempo real</p>
                    <p class="productCard__paragraph">Nuestra API toma informacón minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>

                <article class="productCard">
                    <span class="productCard__icon eye"></span>
                    <p class="productCard__title">Tiempo real</p>
                    <p class="productCard__paragraph">Nuestra API toma informacón minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>

                <article class="productCard">
                    <span class="productCard__icon dolar"></span>
                    <p class="productCard__title">Tiempo real</p>
                    <p class="productCard__paragraph">Nuestra API toma informacón minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>

                <article class="productCard">
                    <span class="productCard__icon check"></span>
                    <p class="productCard__title">Tiempo real</p>
                    <p class="productCard__paragraph">Nuestra API toma informacón minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
                </article>
            </section>
        </section>> 

Le agregué una clase extra a cada card según el símbolo para evitar repetir código en css

<.productCard__icon{
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-block-end: 16px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat; 

}

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

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

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

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

Aquí vamos

Este es mi aporte

Aporte correspondiente a la clase

Reto cumplido

ESTE ES MI RETO TERMINADO

Repito, y no me voy a cansar de decirlo. Implementando de buena manera la metodología BEM solo tienes que reutilizar un bloque las veces que sea necesario y esos estilos se aplicaran a los 4 ‘bloques’ por igual reduciendo considerablemente tu código y haciendo muy fácil de modificar en un futuro

Aquí les dejo un video explicando la metodología
BEM: https://www.youtube.com/watch?v=bvnzyXGkNY4&list=WL&index=3&t=4s

'Super recomendable’
Asi quedaron mis cards

📢📢 AVISO IMPORTANTE ❗❗

• Mira el siguiente tutorial para acceder al resumen visual de la clase 📗

Mi aporte a la clase esta imagen de local donde puedo decir que cumpli el reto.
Nadie me esta midiendo el tiempo, pero si lo siento como que voy lento, es un impostor disfrazado. Gracias a mi esfuerzo he avanzado a la siguiente sección. Veamos si puedo terminar una más.

Cree un id con las imágenes respectivas y luego definí una clase general para los items.

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

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

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

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

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

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

asi quedo mi proyecto

css

html

Reto cumplido:

Asi quedo mi diseño
![](

este es el codigo

aporte

CSS

.product-detail--card .clock, .product-detail--card .eye, .product-detail--card .dollar, .product-detail--card .check-circle {
    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-circle{
    background-image: url(../assets/icons/check-circle.svg);
}

HTML

            <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>
            </section>
            
            <section class="product-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="product-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="product-cards--container">
                <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>

<                <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 mamento de exit, Batatabit
                    siempre te muestra el costo real de lo que estas adquiriendo</p>
                </article>

                <article class="product-detail-card">
                    <span class="money"></span>
                    <p class="product-card-title">Compara monedas</p>
                    <p class="product-card-body">No mas rumores, con Batatabit sabras 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">Informacion confiable</p>
                    <p class="product-card-body">Nuestas fuentes estan 100% verificadas y continuamos 
                    auditando su contenido mientras se actualizan</p>
                </article>> 

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

el reto estuvo facilitio aqui mando el resultado

Aquí el cogido del reto de completar la sección de productos.

Yo no utilice más clases, solo utilice la etiqueta Span con el selector que le da especificidad directa de la clase .product-detail–card.
…
.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/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);
}

Comparto mi aporte a la actividad.

CODE HTML

<section class="product-cards--container">
          <article class="product-detail--card">
            <span class="product-detail--icon 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="product-detail--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 estas adquiriendo.
            </p>
          </article>
          <article class="product-detail--card">
            <span class="product-detail--icon dollar"></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="product-detail--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 mienstras se actualizan.
            </p>
          </article>
        </section>

code css

.product-detail--card {
  width: 100%;
  min-width: 288px;
  max-width: 400px;
  height: 160px;
  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 .product-detail--icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: 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;
}

.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 mas estoy disfrutando de este curso es como manejamos la creatividad para ahorrar codigo, evitar error o problemas.

La verdad que esta seccion fue una de las mas faciles de hacer desde que empece este curso ya que le vas agarrando mas la mano y se va facilitando mucho mas. Solo faltaria tener algunos conocimientos en JS para dejarla mas “presentable” ya que al hacer las anterior card es bastante dificil hacerlo solo con codigo css puro.

Comparto mi trabajo hasta el momento !

HTML:

        <section class="main-product-detail">
            
            <span class="product-deatil__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-card-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>
            </section>

            <section class="product-card-container">
                <article class="product-detail__card">
                    <span class="icon-card eye"></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-card-container">
                <article class="product-detail__card">
                    <span class="icon-card dollar-sign"></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 class="product-card-container">
                <article class="product-detail__card">
                    <span class="icon-card check-circle"></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>

CSS:

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

.product-deatil__batata-logo{
    position: absolute;
    width: 40px;
    height: 2.5rem;
    top: -11px;
    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: 24px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.product-detail__title p{
    margin-bottom: 32px;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--gery-article);
}

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

.product-card-container .icon-card{
    display: inline-block;
    width: 24px;
    height: 24px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; 
}

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

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

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

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

.product-card-container .product-card__title{
    margin-top: 12px;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.8rem;
    color: var(--just-white);
}

.product-card-container .product-card__body{
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.8rem;
    color: var(--gery-article);
}

Espero le sirva a alguien

reto cumplido:

logrado

![](

ya casi le cogemos el tranquillo solo nos faltan los 600 cursos mas entendiendo todo grasias a esta comunidad tan maravillosa .

Solamente reutilicé el código de la primera tarjeta. Pensé en hacer una clase para los íconos y reciclar su código pero decidí hacer una clase para cada ícono para sí memorizar la manera correcta de insertarlos

Reto cumplido! Implementando extensamente CSS Flexbox
.
.
.

.
.
.
HTML
.

<section class="main-product-detail">
            <span class="main-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-card--container">
                <article class="product-detail--card">
                    <span class="icon 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="icon 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="icon dollar-sign"></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.</p>
                </article>
                <article class="product-detail--card">
                    <span class="icon check-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>
                </article>
            </section>
        </section>

.
.
.
CSS
.

.main-product-detail {
    width: 100%;
    height: auto;
    position: relative;
    padding: 3.6rem 1.8rem;
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 3rem;
    align-items: center;
}

.main-product-detail .main-product-detail--batata-logo {
    position: absolute;
    background-image: url('./assets/icons/batata.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 2.4rem;
    width: 4rem;
    top: -2%;
    left: calc(50% - 2rem);
}

.main-product-detail .product-detail--title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-top: 3rem;
    gap: 2rem;
}

.main-product-detail .product-detail--title h2 {
    font-size: 2.4rem;
    font-weight: bold;
    text-align: center;
    color: var(--just-white);
}

.main-product-detail .product-detail--title p {
    color: var(--grey);
    font-size: medium;
}

.main-product-detail .product-card--container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
}

.product-card--container .product-detail--card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.6rem;
    background-color: var(--warm-black);
    border-radius: 0.5rem;
    min-width: 30rem;
    max-width: 40rem;
    box-shadow: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.16);
}

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

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

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

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


.product-card--container .product-detail--card .icon {
    background-size: cover;
    background-repeat: no-repeat;
    height: 2.4rem;
    width: 2.4rem;
}

.product-card--container .product-detail--card .product--card-title {
    font-size: large;
    color: var(--just-white);
}

.product-card--container .product-detail--card .product--card-body {
    font-size: medium;
    color: var(--grey);
}

que buenas clases
dejo captura de mi reto cumplido

Reto cumplido

Challenge accepted
Se jugó y se ganó

Aumenten el tamaño de W y H en los iconos:

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

.product-detail--card .dineros {
    display: inline-block;
    width: 25px;
    height: 25px;
    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: 25px;
    height: 25px;
    margin-bottom: 10px;
    background-image: url(./assets/icons/check-circle.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

HTML
<span class=" clock eye"></span>
<span class=“clock dollar”></span>
<span class=“clock checklist”></span>

CSS
.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 .checklist {
background-image: url("…/assets/icons/check-circle.svg");

}

finished homework

✅ Tarjetas completadas, así quedo:

.product-cards__container {
  max-width: 754px;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.product-detail__card {
  width: auto;
  min-width: 288px;
  max-width: 345px;

  padding: 16px 20px 22px 20px;
  margin: 0 16px;
  margin-bottom: 16px;

  background-color: var(--black);
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
}

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

.product__card-body {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8rem;
  color: var(--gray)
}

.product-detail__card .icon-card {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 12px;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* He subido todos los assets para usarlos con link, hice una lista en Notion: https://cabosmanuel.notion.site/Batata-Bit-assets-e4addfc8a86c4bb9baf72847369aee83 */
.clock { background-image: url("https://gist.githack.com/CabosManuel/6bc69345ec5970503fce82e17725cc7a/raw/0eae9085d44ca9547c8d2c76bafa2461a04de58f/clock.svg"); }
.eye { background-image: url("https://gist.githack.com/CabosManuel/d9dbbe6d6dda95a3382000949be85fcc/raw/a9de9bb9834823fc0c39c215b939ca64072d34c0/eye.svg"); }
.dollar { background-image: url("https://gist.githack.com/CabosManuel/272f1e59fe68c2f04d14f8bdf7954e1b/raw/079416f521c4639a3fd76929e199dc084189c7b1/dollar-sign.svg"); }
.check { background-image: url("https://gist.githack.com/CabosManuel/98e530278767eb38ce2ad5ded87b38d4/raw/80279194bdd2fe04c0870a2701e8855a223b6f29/check-circle.svg"); }

Ya esta utilizando algo similar para los iconos de la tabla.

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

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

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

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

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

Reto cumplido :3

<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="produc-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="produc-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="produc-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="produc-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>

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

.check {
    background-image: url(./assets/icons/check.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 Finalizado

Mi HTML
<section class=“main-product-detail”>
<span class=“product-detail–batata-logo”></span>
<div class=“product-detail–title”>
<h2>Creamos un producto sin comparacion</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”>Nuestra API toma informacion minuto a minuto sobre las tasas que mas determinan el comportamiento.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon eye”></span>
<p class=“product–card-title”>Tiempo real</p>
<p class=“product–card-body”>Nuestra API toma informacion minuto a minuto sobre las tasas que mas determinan el comportamiento.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon dollar”></span>
<p class=“product–card-title”>Compara monedas</p>
<p class=“product–card-body”>No mas rumores, con Batabit sabras el valor real de cada moneda en el mercado actual.</p>
</article>
<article class=“product-detail–card”>
<span class=“icon check-ok”></span>
<p class=“product–card-title”>Informacion confiable</p>
<p class=“product–card-body”>Nuestras fuentes estan 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
</article>
</section>
</section>

aqui la forma como lo hice:
.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-position: center;
background-size: cover;
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;
}
.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-ok {
background-image: url(’./assets/icons/check-circle.svg’);
}

Reajustar el código para reducirlo al máximo posible fue una agradable experiencia de aprendizaje