No tienes acceso a esta clase

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

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

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
6H
1M
31S

Maquetando tarjetas de beneficios

20/32
Recursos

Luego de aplicar los estilos en la secci贸n de beneficios, vamos a crear los estilos de las tarjetas de la segunda secci贸n en que estamos trabajando.

Por supuesto, empezamos por el contenedor y luego el contenido.

Crear estilos en el contenedor

  • Llamamos la clase del contenedor de la primera tarjeta con .product-detail鈥揷ard.
  • Ajustamos su ancho al 90% y alto en 150px.
  • Le damos un ancho m铆nimo de 288px y un m谩ximo de 400px. Esto es para que evite crecer m谩s y se distorsione en pantallas muy grandes.
  • A帽adimos un margen superior e inferior de 15px y lo hacemos auto a los lados para que se centre.
  • A帽adimos un padding de 15px.
  • Un color de fondo 鈥揵lack para que contraste con el color del contenedor principal.
  • Redondeamos sus esquinas con border-radius: 5px.
  • Creamos una sombra para la caja con ***box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16)***.
.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);
}

Aplicando estilos al 铆cono

  • Llamamos la clase de nuestra etiqueta span desde la clase de su contenedor.
  • Colocamos display: inline-block para que el 铆cono ocupe una l铆nea de espacio.
  • Le damos un alto y ancho de 20px.
  • A帽adimos un margin-bottom: 10px.
  • Agregamos el 铆cono con ***background-image: url(""***).
  • Ajustamos que ocupe toda la caja con cover, lo centramos y nos aseguramos que no se llegue a repetir la imagen.
.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;
}

Aplicar estilos al texto

Ten en cuenta los siguientes dos elementos:

T铆tulo

  • Llamamos la etiqueta que contiene nuestro t铆tulo por el nombre de su clase con .product鈥揷ard-title.
  • Le damos un margin-bottom: 15px.
  • Ajustamos el tama帽o de fuente en 1.8rem y le damos un ancho bold.
  • Ajustamos el interlineado en 1.8rem y le damos color con la variable 鈥搄ust-white.
.product--card-title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.8rem;
    color: var(--just-white);
}

Cuerpo

  • Llamamos la etiqueta que contiene nuestro texto cuerpo por el nombre de su clase con .product鈥揷ard-body.
  • Ajustamos el tama帽o de fuente en 1.4rem y le damos un ancho de 500.
  • Ajustamos el interlineado en 1.8rem y le damos color de #808080.
.product--card-body {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

El resultado final de la tarjeta se ver铆a de esta forma:
image.png

隆Se ve muy bien! Como te habr谩s dado cuenta faltan otras tres tarjetas con sus respectivos contenidos. Esto te corresponde a ti. Toma lo aprendido y apl铆calo en crear lo dem谩s.

Recuerda que no hay una forma de lograrlo, sino m煤ltiples. As铆 que int茅ntalo a tu manera y divi茅rtete. Nos vemos m谩s adelante para continuar trabajando en este proyecto.

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 402

Preguntas 25

Ordenar por:

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

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 estn 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 馃槃

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

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.

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: 鈥減ractice, 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.

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=鈥減roduct-cards-container鈥>
<article class=鈥減roduct-detail-card鈥>
<span class=鈥渃lock鈥></span>
<p class=鈥減roduct-card-title鈥>Tiempo real</p>
<p class=鈥減roduct-card-body鈥>Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.</p>
</article>
<article class=鈥減roduct-detail-card鈥>
<span class=鈥渆ye鈥></span>
<p class=鈥減roduct-card-title鈥>No hay tasas escondidas</p>
<p class=鈥減roduct-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=鈥減roduct-detail-card鈥>
<span class=鈥渄ollar鈥></span>
<p class=鈥減roduct-card-title鈥>Compara monedas</p>
<p class=鈥減roduct-card-body鈥>No m谩s rumores, con Babtabit sabr谩s el valor real de cada moneda en el mercado actual.</p>
</article>
<article class=鈥減roduct-detail-card鈥>
<span class=鈥渃heck-circle鈥></span>
<p class=鈥減roduct-card-title鈥>Informaci贸n confiable</p>
<p class=鈥減roduct-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 鈥榖loques鈥 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 鉂椻潡

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鈥揷ard {
width:90%;
min-width:288px;
max-width:400px;
height:150px;
margin: 15px auto;
padding:15px;
background-color:var(鈥揵lack);
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(鈥搄ust-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鈥揷ard.

.product-detail鈥揷ard > 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 鈥減resentable鈥 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=鈥渃lock dollar鈥></span>
<span class=鈥渃lock checklist鈥></span>

CSS
.product-detail鈥揷ard .eye {
background-image: url("鈥/assets/icons/eye.svg");
}

.product-detail鈥揷ard .dollar {
background-image: url("鈥/assets/icons/dollar-sign.svg");
}
.product-detail鈥揷ard .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=鈥渕ain-product-detail鈥>
<span class=鈥減roduct-detail鈥揵atata-logo鈥></span>
<div class=鈥減roduct-detail鈥搕itle鈥>
<h2>Creamos un producto sin comparacion</h2>
<p>Confiable y dise帽ado para su uso diario.</p>
</div>
<section class=鈥減roduct-cards鈥揷ontainer鈥>
<article class=鈥減roduct-detail鈥揷ard鈥>
<span class=鈥渋con clock鈥></span>
<p class=鈥減roduct鈥揷ard-title鈥>Tiempo real</p>
<p class=鈥減roduct鈥揷ard-body鈥>Nuestra API toma informacion minuto a minuto sobre las tasas que mas determinan el comportamiento.</p>
</article>
<article class=鈥減roduct-detail鈥揷ard鈥>
<span class=鈥渋con eye鈥></span>
<p class=鈥減roduct鈥揷ard-title鈥>Tiempo real</p>
<p class=鈥減roduct鈥揷ard-body鈥>Nuestra API toma informacion minuto a minuto sobre las tasas que mas determinan el comportamiento.</p>
</article>
<article class=鈥減roduct-detail鈥揷ard鈥>
<span class=鈥渋con dollar鈥></span>
<p class=鈥減roduct鈥揷ard-title鈥>Compara monedas</p>
<p class=鈥減roduct鈥揷ard-body鈥>No mas rumores, con Batabit sabras el valor real de cada moneda en el mercado actual.</p>
</article>
<article class=鈥減roduct-detail鈥揷ard鈥>
<span class=鈥渋con check-ok鈥></span>
<p class=鈥減roduct鈥揷ard-title鈥>Informacion confiable</p>
<p class=鈥減roduct鈥揷ard-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鈥揷ard {
width: 90%;
min-width: 288px;
max-width: 400px;
height: 150px;
margin: 15px auto;
padding: 15px;
background-color: var(鈥揵lack);
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}
.product-detail鈥揷ard .icon {
display: inline-block;
width: 20px;
height: 20px;
margin-bottom: 10px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.product鈥揷ard-title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 1.8rem;
color: var(鈥搄ust-white);
}
.product鈥揷ard-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

Reto Completado 馃槃

Mando el reto, puse una clase global de icon en la etiqueta span para reciclar c贸digo.
Mando el c贸digo de todas formas.

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>Batata Bit</title>
	<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<img src="./assets/img/logo.svg" alt="Logo Batatabit">
		<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 href="#" class="header--button">Conoce Nuestros Planes <span></span></a>
		</div>
	</header>
	<main>
		<section class="main-exchange-container">
			<div class="backgroundImg"></div>
			<div class="main-exchange-container--title">
				<h2>Visibilizamos todas las tasas de cambio.</h2>
				<p>Traemos informaci贸n en tiempo real de las casas de cambio y las monedas m谩s importantes del mundo.</p>
			</div>
			<section class="main-tables-container">
				<div class="main-currency-table">
					<p class="currency-table--title">Monedas</p>
					<div class="currency-table--container">
						<table>
							<tr>
								<td class="table__top-left">Bitcoin</td>
								<td class="table__top-right table__right">$ 1.96 <span class="down"></span></td>
							</tr>
							<tr>
								<td>Ethereum</td>
								<td class="table__right">$ 0.07 <span class="up"></span></td>
							</tr>
							<tr>
								<td>Ripple</td>
								<td class="table__right">$ 2.17 <span class="down"></span></td>
							</tr>
							<tr>
								<td class="table__bottom-left">Stellar</td>
								<td class="table__bottom-right table__right">$ 4.96 <span class="down"></span></td>
							</tr>
						</table>
						<div class="currency-table--date">
							<p><b>Actualizado:</b> 22 de Mayo 23:45</p>
						</div>
					</div>
				</div>
				<div class="main-commission-table">
					<p class="commission-table--title">Comisiones</p>
					<div class="commission-table--container">
						<table>
							<tr>
								<td class="table__top-left">Bitrade</td>
								<td class="table__top-right table__right">$ 12.96</td>
							</tr>
							<tr>
								<td>Bitpreco</td>
								<td class="table__right">$ 13.07</td>
							</tr>
							<tr>
								<td>Novadax</td>
								<td class="table__right">$ 13.15</td>
							</tr>
							<tr>
								<td class="table__bottom-left">Coinext</td>
								<td class="table__bottom-right table__right">$ 14.96</td>
							</tr>
						</table>
						<div class="commision-table--date">
							<p><b>Actualizado:</b> 22 de Mayo 23:48</p>
						</div>
					</div>
				</div>
				</div>
			</section>
		</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="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>
				<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>
				<article class="product-detail--card">
					<span class="icon dollar-sign"></span>
						<p class="product--card-title">Comprar 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 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>
		<section></section>
		<section></section>
	</main>
	<footer></footer>
</body>
</html>

CSS

/**=======================
 *  1. Posicionamiento
 *  2. Modelo caja (Box Model)
 *  3. Tipografia
 *  4. Visuales
 *  5. Otros
 *========================**/
 :root {
	 /* Colores */
	 --bitcoin-orange: #F7931A;
	 --soft-orange: #FFE9D4;
	 --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;
}

/**======================
 *    HEADER
 *========================**/
header {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-width: 320px;
	height: 334px;
	text-align: 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;
	line-height: 1.8rem;
	color: var(--soft-orange);
}
.header--title-container .header--button {
	position: absolute;
	left: calc(50% - 114.5px);
	top: 270px;
	display: block;
	margin-top: 35px;
	padding: 15px;
	width: 229px;
	height: 48px;
	background-color: var(--off-white);
	/* Sombra */
	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(--black);
}
.header--button span {
	display: inline-block;
	width: 13px;
	height: 8px;
	margin-left: 10px;
	background-image: url('./assets/icons/down-arrow.svg');
}
main {
	width: 100%;
	height: auto;
	background-color: var(--off-white);
}

/**===========================
 *    SECCION DE INTERCAMBIOS
 *========================**/
.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 .backgroundImg {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	margin-bottom: 50px;
	background-image: url(/assets/img/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(--black);
}
.main-exchange-container p {
	margin-bottom: 30px;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.6rem;
	color: #757575;
}
.main-currency-table, .main-commission-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);
}
.main-commission-table .commission-table--title {
	margin-bottom: 15px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2.3rem;
	color: var(--secondary-blue);
}
.currency-table--container, .commission-table--container {
	width: 90%;
	min-width: 230px;
	max-width: 300px;
	height: 250px;
	margin: 0 auto;
}
.currency-table--container table, .commission-table--container table {
	width: 100%;
	height: 100%;
}
.currency-table--container td, .commission-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, .commission-table--container .table__top-left {
	border-radius: 15px 0 0 0;
}
.currency-table--container .table__top-right, .commission-table--container .table__top-right {
	border-radius: 0 15px 0 0;
}
.currency-table--container .table__bottom-left, .commission-table--container .table__bottom-left {
	border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right, .commission-table--container .table__bottom-right {
	border-radius: 0 0 15px 0;
}
.currency-table--container .table__right, .commission-table--container .table__right {
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.7rem;
	color: #757575;
}
.currency-table--container .down, .currency-table--container .up {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.currency-table--container .down {
	background-image: url('assets/icons/trending-down.svg');
}
.currency-table--container .up {
	background-image: url('assets/icons/trending-up.svg');
}
.currency-table--date, .commision-table--date {
	width: 200px;
	height: 30px;
	margin: 0 auto;
	margin-top: 15px;
	padding: 8px;
	border-radius: 8px;
}
.currency-table--date {
	background-color: var(--soft-orange);
}
.commision-table--date {
	background-color: var(--soft-blue);
}
.currency-table--date p, .commision-table--date p {
	font-size: 1.2rem;
	font-weight: 300;
	line-height: 1.5rem;
	color: var(--warm-black);
}

/**======================
 *    SECCION BENEFICIOS
 *========================**/
.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: 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;
}
.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-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;
}

Reto realizado: