No tienes acceso a esta clase

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

Estructura base de la secci贸n de beneficios

18/32
Recursos

Para empezar, revisemos un poco el dise帽o en Figma para conocer qu茅 c贸digo necesitamos crear.

An谩lisis de la estructura

Al inicio nos encontramos con un logo flotante que ya aprendimos a posicionarlo con position: absolute. Tenemos algunos otros 铆conos que podemos almacenar en etiquetas span y varios contenedores con cajas de texto.

18.jpg

La imagen solo toma la primera caja, ya que las siguientes tienen la misma estructura. Mientras que aqu铆 aprender谩s a construir todo el dise帽o de la imagen, te har谩s cargo de terminar las otras tres cajas. 隆Vamos a nuestro archivo index.html!

C贸mo hacer la maquetaci贸n

  • Abrimos la segunda secci贸n y le damos una clase con base a su contenido. Como detalla lo que es el producto Batatabit, el nombre podr铆a ser main-product-detail.
  • Creamos la clase para el contenedor del t铆tulo principal con product-detail鈥搕itle.
  • Creamos las etiquetas que anteriormente encontramos en el dise帽o como span, h2, p, section y article.
  • Creamos la clase product-detail鈥揵atata-logo para la etiqueta span que contendr谩 nuestro logo.

Dentro del primer art铆culo:

  • La primera etiqueta p ser谩 el t铆tulo de la tarjeta, y el nombre de su clase ser谩 product鈥揷ard-title, con la estructura bloque鈥揺lemento.
  • La segunda etiqueta p ser谩 el cuerpo de la tarjeta, y el nombre de su clase ser谩 product鈥揷ard-body.
  • Por 煤ltimo, agregamos el contenido dentro de cada etiqueta de texto.
        <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>
            </section>
        </section>

No te olvides de crear los otros tres act铆culos para completar la estructura de la segunda secci贸n.

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

Aportes 239

Preguntas 17

Ordenar por:

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

o inicia sesi贸n.

When el profe pregunta si ya pudistes con la grilla de las anteriores clases鈥 Y no pudistes鈥

excelente y lo que me gusta es que nos dejas retos eso es bueno la verdad soloa si sabremos que aprendemos


ya se que me van a decir ni帽o rata o algo por el estilo PERO ME IMPORTA UN BLEDO

RETO FINALIZADO!

隆reto completado!
Le hice algunos cambios para mejorar la vista.

Hola Compa帽eros. He logrado hacer el movimiento de las tablas con PURO CSS se puede hacer movimiento por medio de las flechas y tambi茅n se puede hacer directamente moviendo la tabla hacia los lados. El **scroll **en x lo he ocultado para que se vea mucho mejor. Para que se mueva lentamente le agregu茅 la propiedad scroll-behavior con el valor smooth

Por ac谩 dejo el c贸digo que llevo hasta ahora.

<code> 
<div class="main-comisions-table">
                    <p class="comision-table--tittle">Comisiones</p>
                    <div class="comision-table--container">
                        <div class="table__top-left">Bitrade</div>
                        <div class="table__top-right table__right">$ 12.96</div>
                        <div>Bitpreco</div>
                        <div class="table__right">$ 13.07</div>
                        <div>Novadax</div>
                        <div class="table__right">$ 13.15</div>
                        <div class="table__bottom-left ">Cointex</div>
                        <div class="table__bottom-right table__right">$ 14.96</div>
                    </div>
                    <div class="comision-table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:45 </p>
                    </div>
<code>
.comision-table--container{
    display: grid;
    grid-template-columns: minmax(100px,150px) minmax(100px,150px);
    grid-template-rows: 60px 60px 60px 60px;
    gap: 3px;
}

dato: los textos podemos copiarlos desde Figma y pegar en el editor, para no escribirlo todo

Es un poco loca mi idea, y seguro este mal, pero yo cambie la tabla de bitocin por una tabla de store de guitarras. ![](

Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.

隆Reto completado! Nada m谩s le agregu茅 un box shadow

   'section.product-cards--container>article*4.product-detail--card>span+p.product--card-title+p.product--cart-body'

esta seria la abreviacion de emmet para crear las tarjetas y evitar errores de al copiar y pegar

https://code.visualstudio.com/docs/editor/emmet esta es la documentacion

Un peque帽o aporte馃槃

<html> 
<p class="product--card-body1">Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.</p>
<p class="product--card-body2">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que est谩s adquiriendo.</p>
<p class="product--card-body3">No m谩s rumores, con Babtabit sabr谩s el valor real de cada moneda en el mercado actual.</p>
<p class="product--card-body4">Nuestras fuentes estn 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>

Reto cumplido !!

            <div class="main-comission-table">

                <p class="comission-table-title">Comisiones</p>

                <div>
                    <table class="comission-table-container">
                        <tr>
                            <td class="top-left">Bitrade</td>
                            <td class="table__right top-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="bottom-left">Coinext</td>
                            <td class="table__right bottom-right">$ 14.96</td>
                        </tr>
                    </table>
                </div>

                <div class="comission-table-date">
                    <p>
                       <b>Actualizado: </b> 19 Julio 23:45
                    </p>
                </div>
            </div>
.main-comission-table{
    width: 70%;
    margin: 0 auto;
}

.main-comission-table .comission-table-title{
    text-align: left;
    margin-left: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

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

.comission-table-container td{
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    font-family: "Inter", sans-serif;
    color: var(--grey);
    background-color: var(--just-white);
}

.comission-table-container .table__right{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    color: #757575;
}

.comission-table-container .top-right{
    border-radius: 0 15px 0 0;
}

.comission-table-container .top-left{
    border-radius: 15px 0 0 0;
}

.comission-table-container .bottom-left{
    border-radius: 0 0 0 15px;
}

.comission-table-container .bottom-right{
    border-radius: 0 0 15px 0;
}

.comission-table-date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 8px;
    border-radius: 8px;
    background-color: var(--soft-blue);
}

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

:鈥 )

Anexo el resultado de la tabla comisiones:

Pues鈥 as铆 vamos. Me encanta este curso, pero por alguna raz贸n me he tardado much铆simo en terminarlo, jajajajaja.

Mi intento antes de ver como lo realizan.

f谩cil solo copie y pegue la otra tabla cambie algunas clases para cambiar el color y eso 馃榿

Reto Cumplido

Reto completado 馃槂馃槈

RETO CUMPLIDO!.


/*
Para buenas pr谩cticas 
1. Posicionamiento
2. Modelo de caja (BOX MODEL)
3. Tipografia
4.Visuales
5.Otros
*/

:root {
    /*colores*/
    --bicoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white:#faf8f7;
    --just-white: #fff;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
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;
    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(--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(--soft-blue);
}
.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/images/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 {
    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(--bicoin-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;
}
.currency-table--date{
    width: 190px;
    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;
    line-height: 1.5rem;
    color: var(--warm-black);
}


.main-run-table {
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: "Inter",sans-serif;
}
.main-run-table .run-table-title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color:var(--secondary-blue);
}
.run-table-container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}

.run-table-container table{
    width: 100%;
    height: 100%;

}

.run-table-container td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color:var(--grey);
    background-color: var(--just-white); 
}
.run-table-container .table__top-left{
    border-radius:15px 0 0 0;
}
.run-table-container .table__top-right{
    border-radius: 0 15px 0 0 ;
}
.run-table-container .table__bottom-left{
    border-radius: 0 0 0 15px;
}
.run-table-container .table__bottom-right{
    border-radius: 0 0 15px 0;
}
.run-table-container .table__right {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}


.run-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:#E7F5FF;
    border-radius: 8px;
}
.run-table--date p {
   
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}


Reto terminado.

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

.main-commissions-table .commisions-table-title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  padding-right: 140px;
  color: var(--secundary-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__top-left {
  border-radius: 8px 0 0 0;
}

.comissions-table-container .table__top-right {
  border-radius: 0 8px 0 0;
}
.comissions-table-container .table__bottom-left {
  border-radius: 0 0 0 8px;
}
.comissions-table-container .table__bottom-right {
  border-radius: 0 0 8px 0;
}
.comissions-table-date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-blue);
  border-radius: 8px;
}
.comissions-table-date p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: var(--black);
  font-weight: 300;
}

Parte de mi ejercicio con la segunda tabla de la clase anterior

                <div class="main-comisions-table">
                    <p class="comisions-table--title">Comisiones</p>
                    <div class="comisions-table--container">
                        <table>
                            <tr>
                                <td class="table__top-left">Bitrade</td>
                                <td class="table__top-right table__right">$12.96</td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td class="table__right">$13.07</td>
                            </tr>
                            <tr>
                                <td>Ripple</td>
                                <td class="table__right">$13.15</td>
                            </tr>
                            <tr>
                                <td class="table__bottom-left">Cointex</td>
                                <td class="table__bottom-right table__right">$14.96</td>
                            </tr>
                        </table>
                    </div>
                    <div class="comisions-table--date">
                        <p><b>Actualizado: 19 de julio 23:45</b></p>
                    </div>
                </div>
.main-currency-table, .main-comisions-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 350px;
    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-comisions-table .comisions-table--title{
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secundary-blue);
}

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

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

.currency-table--container td, .comisions-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/assets/icons/down-arrow.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/assets/icons/trending-up.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

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

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

.currency-table--date p, .comisions-table--date p{
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warn-black);
}


Este fue mi c贸digo para la tabla no s茅 si haya un mejor manera
HTML:

 <div class="main-comision-table">
                    <p class="comision-table--title">Comisiones</p>
                    <div class="comision-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>
                    <div class="comision-table--date">
                        <p><b>Actualizado: </b>19 Julio 23:48</p>
                    </div>
                </div>

CSS:

.main-comision-table {
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}
.main-comision-table .comision-table--title {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secunfary-blue);
}
.comision-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.comision-table--container table {
    width: 100%;
    height: 100%;
}
.comision-table--container td {
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    font-weight: normal;
    font-family: 'Inter', sans-serif;
    background-color: var(--just-white);
    color: var(--grey);
}
.comision-table--container .table__right {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}
.comision-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}
.comision-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}
.comision-table--container .table__bottom-left {
    border-radius: 0 0 0 15px;
}
.comision-table--container .table__bottom-right {
    border-radius: 0 0 15px 0;
}
.comision-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}
.comision-table--date p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: var(--warm-black);
}

Trate de hacerlo sin tanta ayuda pero, es dificil coloque los marcadores de up y down como absolutos con relatividad al div de los precios, Use grid, y para los botones para cambiar de tabala tambien use una etiqueta a en modo absoluto por y use el top: calc(50% - .8rem), espero les parezca un poco el dise帽o.!

CSS

.main-exchange--tables {
    position: relative;
    width: 70%;
    min-width: 25rem;
    max-width: 50rem;
    /* height: 36rem; */
    margin: 0 auto;
    font-family: "Inter", "sans-serif";
}
.main-exchange--tables--title {
    width: 85%;
    margin: 0 auto;
    padding-left: 2rem;
    margin-bottom: 1.5rem;
    min-width: 23rem;
    max-width: 30rem;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    text-align: start;
}
.monedas .main-exchange--tables--title {
    color: #FF9536;
}

.main-exchange--tables_grid {
    display: grid;
    width: 85%;
    min-width: 20rem;
    max-width: 30rem;
    height: 15.6rem;
    margin: 0 auto;
    grid-template-columns: 50% 50%;
    margin-bottom: 2rem;
    /* Colores */
    border-radius: 1rem;
    color: var(--gray);
    font-size: 1.4rem;
    line-height: 1.69rem;
    background-color: var(--just-white);
}
.main-exchange--tables div {
    border-bottom: .2rem solid var(--off-white);
}
.main-exchange--tables_title {
    text-align: start;
    font-weight: 500;
    padding: 1rem 1.2rem;
    border-right: .2rem solid var(--off-white);;
}
.main-exchange--tables_price {
    font-weight: 400;
    padding: 1rem 1.2rem;
    text-align: start;
    color: #757575;
    position: relative;
}
.main-exchange--tables_price span {
    position: absolute;
    right: 1.6rem;
    top: 1.6rem;
    width: 1.6rem;
    height: 1rem;
}
.main-exchange--tables_price .arrow-down {
    background-image: url('../assets/icons/trending-down.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-exchange--tables_price .arrow-up {
    background-image: url('../assets/icons/trending-up.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-exchange--tables_update {
    margin-bottom: 3rem;
}

.main-exchange--tables_update a {
    text-decoration: none;
    color: var(--warm-black);
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: bold;
    padding: .8rem;
    border-radius: .8rem;
}
.main-exchange--tables_update.monedas a {
    background-color: var(--soft-orange);
}
.main-exchange--tables_update a span {
    font-weight: normal;
}
.tableMonedas--arrowButton {
    position: absolute;
    top: calc(50% - .8rem);
    width: 1rem;
    height: 1.6rem;
    right: 0;
    background-image: url('../assets/icons/right-arrow.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.comisiones .main-exchange--tables_price {
    text-align: center;
}
.comisiones .main-exchange--tables--title {
    color: var(--secondary-blue);
}
.main-exchange--tables_update.comisiones a {
    background-color: var(--soft-blue);
}
.tableComisiones--arrowButton {
    position: absolute;
    top: calc(50% - .8rem);
    width: 1rem;
    height: 1.6rem;
    left: 0;
    background-image: url('../assets/icons/right-arrow.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(180deg);
}

HTML

<!-- Tabla de Monedas -->
                <div class="main-exchange--tables monedas">
                    <p class="main-exchange--tables--title">Monedas</p>
                    <div class="main-exchange--tables_grid">
                        <div class="main-exchange--tables_title">
                            <p>Bitcoin</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 1.96<span class="arrow-down"></span></p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Ethereum</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 0.07<span class="arrow-up"></span></p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Ripple</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 2.15<span class="arrow-down"></span></p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Stellar</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 4.96<span class="arrow-down"></span></p>
                        </div>
                    </div>
                    <div class="main-exchange--tables_update monedas">
                        <a href="">Actualizado: <span>18 de Julio 19:02</span></a>
                    </div>
                    <a href="" class="tableMonedas--arrowButton"></a>
                </div>
                <!-- Tabla de Comisiones -->
                <div class="main-exchange--tables comisiones">
                    <p class="main-exchange--tables--title comisiones">Comisiones</p>
                    <div class="main-exchange--tables_grid">
                        <div class="main-exchange--tables_title">
                            <p>Bitrade</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 12.96</p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Bitpreco</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 13.07</p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Novadax</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 13.15</p>
                        </div>
                        <div class="main-exchange--tables_title">
                            <p>Coinext</p>
                        </div>
                        <div class="main-exchange--tables_price">
                            <p>$ 14.96</p>
                        </div>
                    </div>
                    <div class="main-exchange--tables_update comisiones">
                        <a href="">Actualizado: <span>18 de Julio 19:02</span></a>
                    </div>
                    <a href="" class="tableComisiones--arrowButton"></a>
                </div>

Reto terminado!

Para darle estilos a la tabla, solo agregue las clases de la tabla en los estilos que ya tenia de la primera. Solo tuve que cambiar los colores con mas especificidad

Lo intente agregar la otra tabla pero no soy capaz poner el carrusel para arrastrar el contenido de las tablas

Este es el codigo emmet para generar toda la seccion de cartas con 1 click, solamente requieren cambiar la clase 鈥渋tem鈥 de cada span por su respectivo item:

section.product-card鈥揷ontainer>article.product-detail鈥揷ard*4>span.item+p.product-card-title+p.product-card-body

Aqu铆 les dejo el c贸digo que hice para resolver el reto de crear la otra tabla. Recuerden que usando la coma 鈥,鈥 pueden incluir en los estilos a una clase distinta 馃槈

HTML

<section class="main__exchange--container">
            <div class="background__img"></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.15<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>
                    <div class="currency__table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:45</p>
                    </div>
                </div>
                <div class="main__commissions--table">
                    <p class="commissions__table--title">Comisiones</p>
                    <div class="commissions__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>
                    <div class="commissions__table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:48</p>
                    </div>
                </div>
            </section>
        </section> 

CSS

.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;
}
.background__img{
    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-title h2{
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}
.main__exchange--container-title p{
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}
.main__currency--table, .main__commissions--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;
    margin-left: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: left;
}
.main__commissions--table .commissions__table--title{
    margin-bottom: 15px;
    margin-left: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
    text-align: left;
}
.currency__table--container, .commissions__table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: auto;
}
.currency__table--container table, .commissions__table--container table{
    width: 100%;
    height: 100%;
}
.currency__table--container td, .commissions__table--container td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--gray);
    background-color: var(--just-white);
}
.currency__table--container .table__top--left, .commissions__table--container .table__top--left{
    border-radius: 15px 0 0 0;
}
.currency__table--container .table__top--right, .commissions__table--container .table__top--right{
    border-radius: 0 15px 0 0;
}
.currency__table--container .table__bottom--left, .commissions__table--container .table__bottom--left{
    border-radius: 0 0 0 15px;
}
.currency__table--container .table__bottom--right, .commissions__table--container .table__bottom--right{
    border-radius: 0 0 15px 0;
}
.currency__table--container .table__right, .commissions__table--container .table__right{
    font-size: 1.4rem;
    font-weight: 500;
    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;
}
.currency__table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.commissions__table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: #E7F5FF;
    border-radius: 8px;
}
.currency__table--date p, .commissions__table--date p{
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

As铆 va quedando con un poco de dise帽o personal

Aqu铆 comparto mi resultado (mi paleta de colores es diferente):

Listo! reto cumplido

Clase 18: Para empezar, revisemos un poco el dise帽o en Figma para conocer qu茅 c贸digo necesitamos crear. ## An谩lisis de la estructura Al inicio nos encontramos con un logo flotante que ya aprendimos a posicionarlo con ***position: absolute***. Tenemos algunos otros 铆conos que podemos almacenar en etiquetas span y varios contenedores con cajas de texto. ![18.jpg](https://static.platzi.com/media/articlases/Images/18.jpg) La imagen solo toma la primera caja, ya que las siguientes tienen la misma estructura. Mientras que aqu铆 aprender谩s a construir todo el dise帽o de la imagen, te har谩s cargo de terminar las otras tres cajas. 隆Vamos a nuestro archivo ***index.html***! ## C贸mo hacer la maquetaci贸n * Abrimos la segunda secci贸n y le damos una clase con base a su contenido. Como detalla lo que es el producto Batatabit, el nombre podr铆a ser ***main-product-detail***. * Creamos la clase para el contenedor del t铆tulo principal con ***product-detail鈥搕itle***. * Creamos las etiquetas que anteriormente encontramos en el dise帽o como ***span***, ***h2***, ***p***, ***section*** y ***article***. * Creamos la clase ***product-detail鈥揵atata-logo*** para la etiqueta span que contendr谩 nuestro logo. Dentro del primer art铆culo: * La primera etiqueta ***p*** ser谩 el t铆tulo de la tarjeta, y el nombre de su clase ser谩 ***product鈥揷ard-title***, con la estructura bloque鈥揺lemento. * La segunda etiqueta ***p*** ser谩 el cuerpo de la tarjeta, y el nombre de su clase ser谩 ***product鈥揷ard-body***. * Por 煤ltimo, agregamos el contenido dentro de cada etiqueta de texto. ` <section class="main-product-detail">` ` ` `
` `

Creamos un producto sin comparaci贸n.

` `

Confiable y dise帽ado para su uso diario.

` `
` ` <section class="product-cards--container">` ` <article class="product-detail--card">` ` ` `

Tiempo real

` `

Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.

` ` </article>` ` </section>` ` </section>` No te olvides de crear los otros tres act铆culos para completar la estructura de la segunda secci贸n.
Hecho con **Grid:** ![](https://static.platzi.com/media/user_upload/Captura%20web_20-10-2023_11520_127.0.0.1-f573d1f8-5bbd-4c62-8ef1-2799f87f797c.jpg)

Lo hice igual solo que no me gaste en poner las palabras iguales

es poco pero es trabajo honesto

reto terminado

reto completado

Mi resultado

RESULTADO:

HTML

CSS

para que el icono me quedara flotante tuve que poner position relative en la section , de lo contrario se iva para el encabezado

Esta es la estructura que utiliza para las tablas, lo hice con GRID

<div class="main-currency-table">
            <h3 class="main-currency-table__title">Monedas</h3>
            <div class="table">
              <div>
                <p class="table__top-rigth">Bitcoin</p>
                <div class="table__left-container">
                  <p>$1.96</p>
                  <div class="table__icon-container">
                    <img src="./assets/icons/trending-down.svg" alt="" />
                  </div>
                </div>
              </div>
</div>

Y estos los estilos


.main-tables-container {
  width: 224px;
  margin:  0 auto;
  height: auto;
  margin-bottom: 30px;
}


.main-currency-table__title {
  font-size: 1.8rem;
  color: var(--bitcoin-orange);
  text-align: left;
  margin-bottom: 10px;
}
.main-currency-table p {
  margin: 15px 12px;
}

.table {
  background-color: var(--just-white);
  box-shadow: 4px 4px 10px 8px rgba(231, 231, 231, 0.16),
              -4px -4px 10px 8px rgba(231, 231, 231, 0.16);
  border-radius: 8px;
  margin-bottom: 30px;
}

.table > div {
  display: grid;
  grid-template-columns: 3fr 2fr;
  text-align: left;
  border-bottom: 2px solid #ebebeb;
}

.table > div:last-child {
  border-bottom: none;
}

.table .table__top-rigth{
  color: var(--warm-black);
  margin: 15px 12px;
  font-size: 1.4rem;
}

.table__left-container {
  display: flex;
  justify-content: flex-start;
  border-left: 2px solid #ebebeb;
  
}

.table__left-container p{
  font-size: 1.4rem;
  color: #757575;
}

.table__icon-container {
  display: grid;
  place-content: center;
}

.table__icon-container img {
  scale: 1.2;
}

.table__update {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 1.2rem;
  padding: 8px;
  border-radius: 10px;
  background-color: var(--soft-orange);
  margin-bottom: 30px;
  color: var(--black);

}

.table__update span {
  font-weight: bolder;
}

@media screen and (min-width: 349px) {
  .main-tables-container {
    width: 350px;
  }

  .table__left-container {
    justify-content: space-evenly;
  }
}

Si lo logre 馃槂 aunque intente hacer el slider pero no me salio!!
HTML:

<div class="main-commission-table">
                    <p class="commission-table__title">Comisiones</p>
                    <div class="commission-table--container">
                        <div class="div1"> <p>Bitrade</p> </div>
                        <div class="div2"> <p>$ 12.96</p> </div>
                        <div class="div3"> <p>Bitpreco</p> </div>
                        <div class="div4"> <p>$ 13.07</p> </div>
                        <div class="div5"> <p>Novadax</p> </div>
                        <div class="div6"> <p>$ 13.15</p> </div>
                        <div class="div7"> <p>Coinext</p> </div>
                        <div class="div8"> <p>$ 14.96</p> </div>
                    </div>
                    <div class="commission-table--date">
                        <p> <b>Actualizado: </b><span class="current-date"></span></span></p>
                    </div>
                </div>

CSS:

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

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

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

.commission-table--container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    background-color: var(--off-white);
}


.commission-table--container div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.commission-table--container div p {
    margin: 0;
}

.commission-table--date{
    width: 200px;
    height: 31px;
    margin: 15px auto 0;
    padding-top: 7px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; background-color: var(--just-white); border-radius: 15px 0 0 0;}
.div2 { grid-area: 1 / 2 / 2 / 3; background-color: var(--just-white); border-radius: 0 15px 0 0;}
.div3 { grid-area: 2 / 1 / 3 / 2; background-color: var(--just-white);}
.div4 { grid-area: 2 / 2 / 3 / 3; background-color: var(--just-white);}
.div5 { grid-area: 3 / 1 / 4 / 2; background-color: var(--just-white);}
.div6 { grid-area: 3 / 2 / 4 / 3; background-color: var(--just-white);}
.div7 { grid-area: 4 / 1 / 5 / 2; background-color: var(--just-white); border-radius: 0 0 0 15px;}
.div8 { grid-area: 4 / 2 / 5 / 3; background-color: var(--just-white); border-radius: 0 0 15px 0;}

captura:
![](
los valores de las cryptos y la fecha las obtengo de una API

Reto Terminado鈥

Reto aceptado

Parte del codigo

<section class="main-exchange--table-container">
        <div class="main-exchange--table">
          <p class="main-exchange--table-title">Monedas</p>
          <div class="main-exchange--table-grid">
            <div class="main-exchange--table-grid-label">Bitcoin</div>
            <div class="main-exchange--table-grid-value">$1.96 <span class="icon-down"></span></div>
            <div class="main-exchange--table-grid-label">Ethereum</div>
            <div class="main-exchange--table-grid-value">$0.07 <span class="icon-up"></span></div>
            <div class="main-exchange--table-grid-label">Ripple </div>
            <div class="main-exchange--table-grid-value">$2.15 <span class="icon-down"></span></div>
            <div class="main-exchange--table-grid-label">Stellar </div>
            <div class="main-exchange--table-grid-value">$4.96 <span class="icon-down"></span></div>
          </div>
          <div class="main-exchange--currency-update">
            <p><b>Actualizado:</b> 19 Julio 23:45</p>
          </div>
        </div>
        <div class="main-exchange--table">
          <p class="main-exchange--table-title main-exchange--table-title__blue">Comisiones</p>
          <div class="main-exchange--table-grid">
            <div class="main-exchange--table-grid-label">Bitrade</div>
            <div class="main-exchange--table-grid-value">$ 12.96</div>
            <div class="main-exchange--table-grid-label">Bitpreco</div>
            <div class="main-exchange--table-grid-value">$ 13.07</div>
            <div class="main-exchange--table-grid-label">Novadax</div>
            <div class="main-exchange--table-grid-value">$ 13.15</div>
            <div class="main-exchange--table-grid-label">Coinext</div>
            <div class="main-exchange--table-grid-value">$ 14.96</div>
          </div>
          <div class="main-exchange--currency-update main-exchange--currency-update__soft-blue">
            <p><b>Actualizado:</b> 19 Julio 23:48</p>
          </div>
        </div>
      </section>

Me parece genial todo el conocimiento que comparte el profesor y todo lo que estoy aprendiendo.

Reto cumplido

Aprovech茅 en repetir clases para los dem谩s <section> incluido el span de la imagen, que lo 煤nico que tiene diferente es una clase adicional donde espec铆fico la imagen que llevar谩鈥

Hola, para las flechas laterales de la tabla us茅 el siguiente c贸digo:

HTML

<div>
                    <img class="arrow__left" src="./assets/icons/right-arrow.svg" alt="">
</div>
<div>
                    <img  class="arrow__right" src="./assets/icons/right-arrow.svg" alt="">
</div>

CSS

.main-tables-container {
    display: flex;
    align-items: center;
}
.main-tables-container .arrow__right {
    margin-right: 20px;
}
.main-tables-container .arrow__left {
    margin-left: 20px;
    transform: scaleX(-1);
}

Con los retos nos ayuda a poner en pr谩ctica lo aprendido, excelente.

todo me salio bien lo que no he podido es separarla

Asi fue mi resultado:

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Mira el siguiente tutorial para acceder al resumen visual de la clase 馃摋

Reto completado:

Me va quedando asi:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Bata Bit</title>
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">
        <div class="header--title-container">
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a class="header--button" href="">Conoce Nuestros Planes <span></span></a>
        </div>
    </header>
    <main>
        <section class="main-exchange-container">
            <div class="backgroundImg">
                <img src="" alt="">
            </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-exchange-container__table--container">
                <h3>Monedas</h3>
                <li class="contenedor-item">
                    <p class="item">Bitcoin</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 1.96<span class="down"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Ethereum</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 0.07<span class="up"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Ripple</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 2.15<span class="down"></span></p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Stellar</p>
                </li>
                <li class="contenedor-item">
                    <p  class="item">$ 4.96<span class="down"></span></p>
                </li>
                <div class="currency-table--date">
                    <p><span>Actualizado:</span> 9 Octubre 09:45</p>
                </div>
            </section>
            <section class="main-commissions-container__table--container">
                <h3>Comisiones</h3>
                <li class="contenedor-item">
                    <p class="item">Bitrade</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 12.96</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Bitpreco</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 13.07</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Novadax</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">$ 13.15</p>
                </li>
                <li class="contenedor-item">
                    <p class="item">Coinext</p>
                </li>
                <li class="contenedor-item">
                    <p  class="item">$ 14.96</p>
                </li>
                <div class="commissions-table--date">
                    <p><span>Actualizado:</span> 9 Octubre 09:45</p>
                </div>
            </section>
        </section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

CSS

/*
1. Posicionamiento
2. Modelo caja (Bos model)
3. Tipografia
4. Visuales
5. Otros
*/
:root {
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #282623;
    --black: #201E1C;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 295px;
    text-align: center;
}
header img {
    width: 151px;
    height: 24px;
    margin-top: 38px;
    align-self: center;
}
.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 32px;
    text-align: center;
    align-self: center;
}
.header--title-container h1 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p {
    margin-top: 2.4rem;
    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% - 117px);
    top: 231px;
    display: block;
    margin-top: 32px;
    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: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span {
    display: inline-block;
    width: 12px;
    height: 7.41px;
    margin-left: 10px;
    background-image: url('./assets/icons/down-arrow.svg');
}
main {
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}
.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 59px;
    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: 195px;
    height: 195px;
    margin: 0 auto;
    margin-bottom: 40px;
    background-image: url('./assets/img/Bitcoin.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main-exchange-container h2 {
    margin-bottom: 24px;
    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-exchange-container__table--container, .main-commissions-container__table--container {
    display: grid;
    grid-template-columns: 101px 95px;
    grid-auto-rows: 39px;
    place-content: center;
    text-align: left;
    list-style: none;
    gap: 1px;
    font-family: "Inter", sans-serif;
} 
.main-commissions-container__table--container {
    margin-top: 30px;
}
.contenedor-item {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 35px;
    grid-template-areas:
      ". a a a a a a"
      ". a a a a a a";
      box-shadow: 0px 8px 8px rgba(89, 73, 30, 0.16); 
}
.item {
    grid-area: a;
    align-self: center;
}
.main-exchange-container__table--container h3 {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: var(--bitcoin-orange);
    grid-column: 1 / -1;
    margin-bottom: 15px;
}
.main-commissions-container__table--container h3 {
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: #1A9AF7;
    grid-column: 1 / -1;
    margin-bottom: 15px;
}

.main-exchange-container__table--container li:nth-child(2n), .main-commissions-container__table--container li:nth-child(2n) {
    font-size: 1.6rem;
    font-weight: 500;
    color: #B5B0AC;
    /* text-align: center; */
    background-color: var(--just-white);
    /* border: 1px solid var(--grey); */
}
.main-exchange-container__table--container li:nth-child(2n+1), .main-commissions-container__table--container li:nth-child(2n+1) {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    /* text-align: center; */
    color: #757575;
    background-color: var(--just-white);
    /* border: 1px solid var(--grey); */
}
.main-exchange-container__table--container li:nth-child(2), .main-commissions-container__table--container li:nth-child(2) {
    border-radius: 8px 0 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+3), .main-commissions-container__table--container li:nth-last-child(-n+3) {
    border-radius: 0 0 0 8px;
}
.main-exchange-container__table--container li:nth-child(3), .main-commissions-container__table--container li:nth-child(3) {
    border-radius: 0 8px 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+2), .main-commissions-container__table--container li:nth-last-child(-n+2) {
    border-radius: 0 0 8px 0;
}
.main-exchange-container__table--container .down {
    display: inline-block;
    background-image: url('./assets/icons/trending-down.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}
.main-exchange-container__table--container .up {
    display: inline-block;
    background-image: url('./assets/icons/trending-up.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}
.main-exchange-container .main-exchange-container__table--container .currency-table--date {
    margin: 0 auto;
    margin-top: 16px;
    grid-column: 1 / -1;
    width: 177px;
    height: 31px;
    padding: 6px 1px;
    text-align: center;
    justify-self: center;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.main-exchange-container .main-commissions-container__table--container .commissions-table--date {
    margin: 0 auto;
    margin-top: 16px;
    grid-column: 1 / -1;
    width: 177px;
    height: 31px;
    padding: 6px 1px;
    text-align: center;
    justify-self: center;
    background-color: #E7F5FF;
    ;
    border-radius: 8px;
}
.currency-table--date p, .commissions-table--date p {
	font-size: 1.1rem;
    font-weight: 300;
    color: var(--warm-black);
}

.currency-table--date span {
    font-weight: bold;
}

Asi me quedo la otra tabla

Challenge Accepted!

Asi quedo hasta ahora mi proyecto:


no pude grabar en gif y todavia no hice el curso de github para poder compartir bien los resultados. proximamento ire compartiendo todo. no use grid, solo flex y le saque la barra de scroll para q no se vea feo

<!-- SECTION BENEFITS -->
        <section class="main-product-detail">
            <span></span>
            <!-- TEXT -->
            <div>
                <h2>Lorem ipsum dolor sit amet consectetur.</h2>
                <p>Lorem ipsum dolor sit amet.</p>
            </div>

            <!-- CARDS CONTENT -->
            <section class="product-cards--container">
                <article class="product-detail--card">
                    <span class="clock"></span>
                    <!-- bloque-elemento -> titulo de tarjeta -->
                    <p class="product--card-title">Lorem ipsum dolor sit amet.</p>
                    <p class="product--card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo accusamus, illo odit maiores ut assumenda.</p>
                </article>
            </section>
        </section>

Aqui esta lo que yo logr茅 hacer con las tablas, con humildad jejeje

Reto: Hecho en su mayoria con CSS Flexbox
.
.
.
Img:
.
![](

.
CSS
.

.main-tables-container {
    width: 64%;
}

.main-currency-table, .main-comissions-table {
    width: 100%;
    min-width: 20rem;
    max-width: 50rem;
    height: 24rem;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2.4rem;
    margin-bottom: 8rem;
}
.main-currency-table .currency-table--title, .main-comissions-table .comissions-table--title {
    font-weight: bold;
    font-size: medium;
    text-align: left;
    color: var(--bitcoin-orange);    
    line-height: 2.4rem;
    padding-left: 2rem;

}
.main-comissions-table .comissions-table--title {
    color: var(--secondary-blue);    
}

.currency-table--container, .comissions-table--container {
    background-color: var(--just-white);
    border-radius: 1rem;
}

.currency-table--container table, .comissions-table--container table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.currency-table--container tr, .comissions-table--container tr {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.currency-table--container td, .comissions-table--container td {
    width: 50%;
    height: 25%;
    font-size: 1.6rem;
    font-weight: 300; 
    padding: 1rem;
    color: var(--grey);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border: 0.001rem solid var(--off-white);
}

.comissions-table--container table tr .table__right {
    display: flex;
    justify-content: flex-end;
}
.currency-table--container td .up{
    background-image: url('./assets/icons/trending-up.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 1.4rem;
    width: 1.4rem;
}
.currency-table--container td .down {
    background-image: url('./assets/icons/trending-down.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 1.4rem;
    width: 1.4rem;
}

.currency-table--container td:first-of-type, .comissions-table--container td:first-of-type {
    font-weight: 500;
    text-align: left;
    color: var(--soft-grey);
    padding-right: 1rem;
}

.main-currency-table .currency-table--date {
    background-color: var(--soft-orange);
}

.main-comissions-table .comissions-table--date {
    background-color: var(--soft-blue);
}

.main-currency-table .currency-table--date, .main-comissions-table .comissions-table--date {
    width: fit-content;
    padding: 0.8rem;
    border-radius: 0.72rem;
    align-self: center;
}

Super Vamos Por mas鈥


Este es mi resultado con las tablas, no lo hice con grid pero si pude hacer la transici贸n (: (m谩s detalles de como hacerlo en el comentario de la clase pasada)

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans: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="">
        <div class="header--tittle--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></main>
    <section class="main-exchange-container">
       <div class="backgroundImg"></div>
       <div class="main-exchange-conatainer--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--tittle">Monedas</p>
               <div class="currency-table--container">
                   <table>
                       <tr>
                           <td class="table__top-left">Bitcoin</td>
                           <td class="table__top-righ 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 table__right">$4.96<span class="down"></span></td>
                    </tr>
                   </table>
               </div>
               <div class="currency-table--date">
                   <p><b>Actualizado:</b> 19 Julio 23:45</p>
               </div>
           </div>
           <div class="main-comission-table">
            <p class="comission-table--tittle">Comisiones</p>
            <div class="comission-table--container">
                <table>
                    <tr>
                        <td class="table__top-left">Bitrade</td>
                        <td class="table__top-righ 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.07</td>
                 </tr>
                 <tr>
                     <td class="table__bottom-left">Cointext</td>
                     <td class="table__bottom table__right">$14.96</td>
                 </tr>
                </table>
            </div>
            <div class="comission-table--date">
                <p><b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
        </div>
       </section>
    </section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <footer></footer>
</body>
</html>

CSS

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
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;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img{
    width: 150px;
    height: 50px;
    margin-top: 60px;
    align-self: center;
}
.header--tittle--container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 4 0px;
    text-align: center;
    align-self: center;
}
.header--tittle--container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--tittle--container p {
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--tittle--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);
    /* Sombras*/
    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);
}
.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
    background-color: var(--off-white);
}
.main-exchange-container--tittle{
    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: 50px;
    font-size: 2.4rem;
    font-weight: bold;
    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-comission-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}
.main-currency-table .currency-table--tittle { 
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    height: 2.3rem;
    color: var(--bitcoin-orange);
}
.currency-table--container, .comission-table--container{ 
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container table, .comission-table--container table{
    width: 100%;
    height: 100%;
}
.currency-table--container td, .comission-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, .comission-table--container .table__top-left{
    border-radius: 15px 0 0 0;
}
.currency-table--container .table_top-right, .comission-table--container .table_top-right{
    border-radius: 0 15px 0 0 ;
}
.currency-table--container .table__bottom-left, .comission-table--container .table__bottom-left{
    border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right, .comission-table--container .table__bottom-right{
    border-radius: 0 0 15px 0;
}
.currency-table--container .table__right, .comission-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;
}
.currency-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p, .comission-table--date p{
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: var(--warm-black);
}
/* COMISIONES */
.main-comission-table .comission-table--tittle{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    height: 2.3rem;
    color: var(--secondary-blue);
}
.comission-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}

Muy buena clase!

Yo lo establec铆 de 茅sta manera:

Decid铆 hacer toda esta secci贸n primero por mi cuenta. No s茅 por ahora qu茅 tan diferente qued贸 mi c贸digo con respecto al del profe, pero les comparto tanto mi HTML como CSS de lo que hice. El resultado me qued贸 tal cual como el de Figma.

.
HTML:

<section class="main-benefit-container">
            <div class="main-benefit--title">
                <h2>Creamos un producto sin comparaci贸n.</h2>
                <p>Confiable y dise帽ado para su uso diario.</p>
            </div>
            <section class="main-benefit-content">
                <article class="content-tiempo">
                    <span class="content-tiempo--img"></span>
                    <h3>Tiempo real</h3>
                    <p>Nuestro API toma informaci贸n minuto a minuto sobre las tasas que m谩s determinan el comportamiento.</p>
                </article>
                <article class="content-tasas">
                    <span class="content-tasas--img"></span>
                    <h3>No hay tasas escondidas</h3>
                    <p>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="content-monedas">
                    <span class="content-monedas--img"></span>
                    <h3>Compara monedas</h3>
                    <p>No m谩s rumores, con Babtabit sabr谩s el valor real de cada moneda en el mercado actual.</p>
                </article>
                <article class="content-informacion">
                    <span class="content-informacion--img"></span>
                    <h3>Informaci贸n Confiable</h3>
                    <p>Nuestras fuentes est谩n 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
                </article>
            </section>
        </section>

.
CSS:

.main-benefit-container {
    width: 100%;
    min-width: 288px;
    height: auto;
    padding: 64px 0 46px;
    background-color: var(--black);
    color: var(--just-white);
}

.main-benefit--title {
    width: 90%;
    height: auto;
    margin: 0 auto;
    text-align: center;
}

.main-benefit--title h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.6rem;
}

.main-benefit--title p {
    padding: 24px 0 0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
}

.main-benefit-content {
    display: flex;
    flex-direction: column;
    margin: 32px 0 0;
}

.content-tiempo, .content-monedas, .content-tasas, .content-informacion {
    width: 90%;
    max-width: 345px;
    background-color: var(--warm-black);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
    border-radius: 4px;
    margin: 16px auto;
    padding: 14px 0 0;
}

.content-tiempo h3, .content-monedas h3, .content-tasas h3, .content-informacion h3 {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.8rem;
    padding: 10px 16px 5px;
}

.content-tiempo p, .content-monedas p, .content-tasas p, .content-informacion p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: #808080;
    padding: 5px 16px 22px;
}

.main-benefit-content span {
    display: block;
    width: 24px;
    height: 24px;
    position: relative;
    left: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

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

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

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

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

Hecho con 鈥榙isplay: grid;鈥 (y solo un poquito de JavaScript) porque las tablas son horribles XD

As铆 qued贸 la segunda tabla 馃槂

Amigos les recomiendo ir familiarizandose con las abreviaciones de Emmet que sirven bastante para optimizar el tiempo. Podemos crear toda esta arquitectura en una sola linea de codigo, usariamos esta

section.product-cards--container>article.product-detail--card*4>span+p.product--card-tittle+p.product--card-body

y de una vez se le formaria esto

<section class="product-cards--container">
          <article class="product-detail--card">
            <span></span>
            <p class="product--card-tittle"></p>
            <p class="product--card-body"></p>
          </article>
          <article class="product-detail--card">
            <span></span>
            <p class="product--card-tittle"></p>
            <p class="product--card-body"></p>
          </article>
          <article class="product-detail--card">
            <span></span>
            <p class="product--card-tittle"></p>
            <p class="product--card-body"></p>
          </article>
          <article class="product-detail--card">
            <span></span>
            <p class="product--card-tittle"></p>
            <p class="product--card-body"></p>
          </article>
        </section>

No entiendo porque diego escribe todos los textos a mano cuando puede ir a figma copiar y pegar, pero bueno supongo que es para ense帽arnos algo. Si son pajeros como yo y quieren ahorrarse mucho tiempo vayan a figam seleccionen el texto que quieren pasar a vscode y lo unico que tienen que hacer es tocar esa palabra y a la derecha les va a aparecer copiar (o tambien pueden selecciona la palabra y copiarla manualmente).
Saludos

Reto Cumplido, jugando con las clases y usando modificadores.

/* CSS Currency Table */
.exchange-table__title--currency {
    color: var(--bitcoin-orange);
}
.exchange-table__date--currency {
    background-color: var(--soft-orange);
}

/* CSS Comision Table */
.exchange-table__title--comision {
    color: var(--secondary-blue);
}
.exchange-table__date--comision {
    background-color: var(--soft-blue);
}

.

Me gusta mucho la explicaci贸n detallada, profesional y pausada del profe Diego. Se hace entender f谩cilmente. La manera combinada de usar la metodolog铆a BEM (bases de la misma y toque personalizado) es interesante y se comprende. Realmente lo importante es ser consistente en todo el proyecto a la hora de usar X o Y metodolog铆a para nombrar clases. La profe Estefany tambi茅n aclara que esta metodolog铆a acepta cambios en la nomenclatura. Feliz de aprender y nunca parar. 馃挭馃挌

Platzi ha cambiado mi mundo!!!

le cambi茅 las clases y le aplique los estilos de forma similar (Y)

OMG que emoci贸n terminar el curso

Buenas, decid铆 hacer los dos con Grid, en realidad uno, gracias a que muchas cosas se repet铆an como se ve en la imagen solo fue agregar modificadores espec铆ficos y cambiar valores de html !!!

codigo html =============

codigo css =================

Adjunto mi resultado del reto

Lo intente con grid.

Reto cumplido

Scroll


HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile First Project</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 de 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>
            <!-- <a href="#" class="header--button2">Conoce Nuestros Planes <span>i</span></a> -->
            <!-- <img src="assets/icons/down-arrow.svg" alt="Bot贸n que te mostrar谩 los planes"> -->
        </div>
    </header>
    <main>
        <section class="main-exchange-container">
            <div class="background-img"></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>
            <div class="main-tables-container">
                <div class="main-currency-table" id="table1">
                    <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.15 <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>

                        <a href="#table2" class="table-go-right">
                            <img src="assets/icons/right-arrow.svg" alt="Bot贸n para ir a la tabla de comisiones">
                        </a>
                    </div>

                    <div class="currency-table__date">
                        <p><b>Actualizado:</b> 19 Julio 23:45</p>
                    </div>
                </div>

                <div class="main-commissions-table" id="table2">
                    <p class="commissions-table__title">Comisiones</p>

                    <div class="commissions-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>

                        <a href="#table1" class="table-go-left">
                            <img src="assets/icons/left-arrow.svg" alt="Bot贸n para ir a la tabla de precios de las monedas">
                        </a>
                    </div>

                    <div class="commissions-table__date">
                        <p><b>Actualizado:</b> 19 Julio 23:45</p>
                    </div>
                </div>
                
            </div>


        </section>

        <section></section>
        <section></section>
        <section></section>
    </main>

    <footer></footer>
    
</body>
</html>


CSS

:root{
    --primary-color: #f7931a;
    --soft-primary-color: #ffe9d5;
    --secondary-color: #1a9af7;
    --soft-secondary-color: #e7f5ff;
    --dark-color: #282623;
    --warm-dark-color: #201e1c;
    --background-color: #faf8f7;
    --light-color: #fff;
    --primary-family-font: 'DM Sans', sans-serif;
    --secondary-family-font: 'Inter', sans-serif;
}

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


html{
    font-size: 62.5%;
    font-family: var(--primary-family-font);
}

/* **************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(208.83deg, var(--warm-dark-color) 16.69%, var(--primary-color) 100%);
}

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

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

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

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

.header--title-container .header--button{
    position: absolute;
    left: calc(50% - 118px);
    top: calc(50% -48px/2);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background: var(--background-color);
    box-shadow: 0px 4px 0px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--warm-dark-color);
}
.header--title-container .header--button span{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("assets/icons/down-arrow.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* **************MAIN*********************** */
main{
    width: 100%;
    height: auto;
    background-color: var(--background-color);
}
.main-exchange-container{
    width: 100%;
    height: auto;
    padding: 80px 0 30px 0;
    text-align: center;
}

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

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

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

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


.main-tables-container{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

/*---------------Contenedores (currency y commissions)---------------*/
.main-currency-table, .main-commissions-table {
    width: auto; 
    min-width: 320px; 
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}
/*---------------Titulo monedas---------------*/ 
.main-currency-table .currency-table__title{ 
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--primary-color);
    text-align: start;
    padding-left: 12px;
    font-family: var(--primary-family-font);
    font-weight: bold;
}
/*---------------Titulo comisiones---------------*/
.main-commissions-table .commissions-table__title{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-color);
    text-align: start;
    padding-left: 12px;
    font-family: var(--primary-family-font);
    font-weight: bold;
}

/*---------------Contenedor de la tabla (currency y commissions)---------------*/
.currency-table__container, .commissions-table__container{
    width: 70%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px;
    /* nuevo cambio (position no estaba)*/ 
    position: relative; 
    
}

/*---------------Tabla (currency y commissions)---------------*/
.currency-table__container table, .commissions-table__container table{
    width: 100%;
    height: 100%;    

}

/*---------------Todos los elementos (currency y commissions)---------------*/
.currency-table__container td, .commissions-table__container td{
    width: 50%;
    height: 39px;
    padding: 10px 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: #B5B0AC;
    text-align: start;
    background-color: var(--light-color);
    /* background-color: red; */
}

/*---------------Elementos de la segunda columna (currency y commissions)---------------*/
.currency-table__container .table__right, .commissions-table__container .table__right{
    padding: 11px 12px;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

/*---------------Bordes---------------*/
.currency-table__container .table__top--left,
.commissions-table__container .table__top--left {
  border-radius: 15px 0 0 0;
}
.currency-table__container .table__top--right,
.commissions-table__container .table__top--right {
  border-radius: 0 15px 0 0;
}
.currency-table__container .table__bottom-left,
.commissions-table__container .table__bottom-left {
  border-radius: 0 0 0 15px;
}
.currency-table__container .table__bottom-right,
.commissions-table__container .table__bottom-right {
  border-radius: 0 0 15px 0;
}

/*---------------span (currency y commissions)---------------*/
.currency-table__container td span, .commissions-table__container td span{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
}
.currency-table__container span.down, .commissions-table__container span.down{
    background-image: url("assets/icons/trending-down.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table__container span.up, .commissions-table__container span.up{
    background-image: url("assets/icons/trending-up.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.currency-table__date{
    width: 190px;
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-primary-color);
    border-radius: 8px;
    text-align: center;
    
    font-weight: bold;
    
}
.commissions-table__date{
    width: 190px;
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-secondary-color);
    border-radius: 8px;
    text-align: center;
    
    font-weight: bold;
    color: var(--dark-color);
}

.currency-table__date p, .commissions-table__date p{
    margin: 7px;
    font-size: 1.2rem;
    line-height: 1.5px;
    color: var(--dark-color);
}

/*---------------Flechas que te cambian de tabla---------------*/
.table-go-right{
    position: absolute;
    right: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}
.table-go-left{
    position: absolute;
    left: -40px;
    padding: 15px;
    top: calc(50% - 20px);
}