No tienes acceso a esta clase

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

Detallando estilos de tabla de monedas

16/32
Recursos

El dise帽o de la tabla tienen una apariencia bastante similar a la original. Nos faltan algunos detalles como redondear las esquinas, colores al texto y los 铆conos. Tienes raz贸n.

Entonces, 隆agreguemos esos estilos!

C贸mo agregar bordes de la tabla

驴Recuerdas que creamos clases espec铆ficas para los botones situados en las esquinas? Pues es momento de llamarlos.

  • Empezemos por el lado izquierdo de la tabla, y lo llamamos desde su contenedor con .currency-table鈥揷ontainer .table__top-left.
  • Le agregamos un border-radius: 15px 0 0 0 en donde cada una de las cuatro posiciones representa una esquina de la caja que estamos estilando: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda, respectivamente.
  • Aplicamos estos valores a cada una de las esquinas.
.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;
}

C贸mo aplicar texto de precios

  • Llamamos la clase que aplicamos a todos los textos de la columna derecha con .currency-table鈥揷ontainer .table__right.
  • Ajustamos su tama帽o a 1.4rem y le damos un ancho normal.
  • Agregamos un interlineado de 1.7rem.
  • Ajustamos el color usado en el dise帽o #757575.
.currency-table--container .table__right {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

C贸mo agregar 铆conos

Observando el dise帽o, nos damos cuenta que hay dos tipos de flechas: hacia arriba y abajo. Entonces tenemos que dividir y aplicar a las etiquetas span estas dos clases: up y down.

  • Llamamos a las etiquetas span con su clase desde el contenedor de la tabla con .currency-table鈥揷ontainer .down.
  • Usamos display: inline-block para mantener el 铆cono en la misma l铆nea que el texto.
  • Le damos un ancho y alto de 15px.
  • Agregamos un margin-left: 10px para separarlo del texto.
  • Llamamos la imagen desde su direcci贸n con ***background-image: url("")***.
  • Ajustamos su tama帽o al del contenedor con cover, lo centramos y especificamos que no se repita la imagen.
  • Aplicamos los mismos estilos para la clase .currency-table鈥揷ontainer .up. S贸lo cambiamos la url del 铆cono.
.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;
}

Este ser铆a nuestro resultado en pantalla:
image.png

Genial, 驴no? Ahora solo falta que apliques lo mismo a la otra tabla que falta. Recuerda que no hay una sola manera de lograrlo, sino tantas como programadores hay. Lo importante es que lo intentes. Ver谩s que es muy sencillo.

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

Aportes 161

Preguntas 22

Ordenar por:

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

Gente, no se olviden que la otra tabla la pueden hacer simplemente poniendole una coma a los estilos de la primera tabla y agregando las clases de la tabla de la izquierda
Por ejemplo, yo simplemente le cambi茅 en las clases de la primera tabla lo que dec铆a 鈥渃urrency鈥 por 鈥渃ommission鈥. Y todo me sali贸 muy bien. Pr谩cticamente se reescribieron los estilos solo dos veces, si no me equivoco.

Mi CSS se ve as铆

.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,
.main-commission-table .commission-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{
    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;
    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{
    background-image: url('./assets/icons/trending-up.svg');
}

Terminado el reto!!

Fue bastante f谩cil solo hay que cambiarle el color y el contenido, pueden ver lo que realice con mas detalle en mi repo: https://github.com/JairoPozo/Proyecto_Bit

Intente desafiarme e inclu铆 un c贸digo JS para realizar el cambio de pantalla

Para esto tuve que incluir dos div con un background de las flechas
(_ El div va en la tabla correspondiente, flecha derecha para las comisiones y la izquierda para las monedas_)

<div class="container-arrow" id="arrow-right"></div>
<div class="container-arrow--left" id="arrow-left"></div>

y las posicion茅 con absolute

.container-arrow{
  height: 10px;
  width: 12px;
  background-image: url("../assets/icons/right-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  right: -10%;
  cursor: pointer;
}
.container-arrow--left{
  display: none;
  height: 10px;
  width: 12px;
  background-image: url("../assets/icons/left-arrow.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: -10%;
  cursor: pointer;
}

Aqu铆 el c贸digo de js:

const arrow_right = document.getElementById("arrow-right")
const arrow_left = document.getElementById("arrow-left")
const table_1 = document.getElementById("table-1")
const table_2 = document.getElementById("table-2")
arrow_right.onclick = function(){
   table_1.style.display = "none"
   table_2.style.display = "grid"
   arrow_left.style.display = "block"
}
arrow_left.onclick = function(){
    table_1.style.display = "grid"
    table_2.style.display = "none"
    arrow_right.style.display = "block"
}

Yo tratando de ver si los bordes se redondearon o no

Para el border-radius pueden usar:

.currency-table__container table {
  width: 100%;
  border-radius: 16px;
  overflow: hidden; /* Esto es importante */
}

Para los estilos de los primeros td pueden usar la pseudoclase :first-of-type

.currency-table__container td:first-of-type {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}

As铆 ya no tendr铆an que colocar las clases en los td

Algo que hice para no repetir codigo fue poner en el span una clase tranding la cual contuviera este codigo

.main-tables-grid .trending {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Para los que no sepan para que hice esto es para no repeit codigo
en el html puse up o down
y en el css solo puse

.main-tables-grid .up {
  background-image: url("../assets/icons/trending-up.svg");
}
.main-tables-grid .down {
  background-image: url("../assets/icons/trending-down.svg");
}```


Una peque帽a alternativa a 鈥渂order-radius鈥:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius


Tom茅 el curso de GRID y sali贸! Mu feliz!!

Quiz谩s algunos de los estudiantes que lleguen a esta clase les sirva esto.

Al momento de realizar el bordeado de la tabla no alcanzas a ver los bordes por los colores o por tu pantalla te recomiendo:

Cambiar el color de el fondo de la tabla as铆 podr谩s ver con detalle si es que esta cambiando o no el bordeado.
Y el cambio de color lo haces ac谩:

Y al final solo regresas el color original y listo.
Quiz谩s es un consejo obvio pero igual a alguien con problemas de la vista le sirve.

Hola a todos!
Les quer铆a contar como pens茅 la estructura de la secci贸n de las tablas para optimizar el uso de las clases y las l铆neas de c贸digo.

As铆 me qued贸 el c贸digo HTML

         <section class="exchange-carousel-container"> 
                <div class="exchange-carousel__item ">
                    <!-- Monedas -->
                    <!-- .market-title es la clase para darle color naranja al t铆tulo -->
                    <h3 class="exchange-carousel__title market-title">Monedas</h3>

                    <!-- tabla de monedas con display grid -->
                    <div class="exchange-carousel__table">
                        <p>Bitcoin</p>
                        <!--.market-trend define la estructura del span donde va a ir la flechita-->
                        <!-- .down o .up indican cu谩l de las dos flechas va -->
                        <p>$1.96 <span class="market-trend down"></span></p>
                        <p>Ethereum</p>
                        <p>$0.07<span class="market-trend up"></span></p>
                        <p>Ripple</p>
                        <p>$2.17<span class="market-trend down"></span></p>
                        <p>Stellar</p>
                        <p>$4.96<span class="market-trend down"></span></p>
                    </div>

                    <!-- .market-currency es la clase para darle fondo naranja al texto -->
                    <p class="exchange-carousel__currency market-currency">Valores en <strong>$USD</strong></p>
                </div>

                <div class="exchange-carousel__item ">
                    <!-- Comisiones -->
                    <!-- .fee-title pone el t铆tulo de color celeste -->
                    <h3 class="exchange-carousel__title fee-title">Comisiones</h3>

                    <!-- tabla de comisiones con display grid -->
                    <div class="exchange-carousel__table">
                        <p>Bitrade</p>
                        <p>$12.96</p>
                        <p>Bitpreco</p>
                        <p>$13.07</p>
                        <p>Novadex</p>
                        <p>$13.15</p>
                        <p>Coinext</p>
                        <p>$14.96</p>
                    </div>

                    <!-- .fee-currency le da un color de fondo celeste al texto -->
                    <p class="exchange-carousel__currency fee-currency">Valores en <strong>$USD</strong></p>
                </div>  
            </section>

As铆 el c贸digo CSS

/*************
***CAROUSEL***
*************/

/*secci贸n del carousel de tablas*/
.exchange-carousel-container {
    width: 100%;
    min-width: 288px;
    max-width: 700px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}

/*ESTRUCTURA de elementos Market y Fee del carousel*/
.exchange-carousel__item {
    width: 70%;
    min-width: 220px;
    max-width: 500px;
    margin: 0 auto 30px;
    font-family: 'Inter', sans-serif;

}

/*T铆tulos de las tablas*/
.exchange-carousel__title {
    margin-bottom: 12px;
    margin-left: 12px;
    font-size: 1.8rem;
    font-weight: 600;
}

/*Color del t铆tulo Monedas*/
.market-title{
    color: var(--bitcoin-orange);
}

/*Color del t铆tulo Comisiones*/
.fee-title {
    color: var(--secondary-blue);
}

/*Estructura de las Tablas*/
.exchange-carousel__table {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--just-white);
    border-radius: 8px;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--grey);
}

.exchange-carousel__table p{
    padding: 10px;
}

/*Estilos de los precios de las tablas*/
/*"Todos lo elemenos de la derecha"*/
.exchange-carousel__table p:nth-child(even) {
    font-weight:normal;
    color: #757575;
    font-size: 1.4rem;
    text-align: center;
}

/*flechas de la tabla Market*/
.exchange-carousel__table .market-trend {
    background-repeat: no-repeat;
    background-position: right;
    margin-left: 20px;
    display: inline-block;
    width: 11px;
    height: 6px;
}

/*Flecha roja hacia abajo*/
.exchange-carousel__table .down {
    background-image: url('./assets/icons/trending-down.svg');
}

/*Flecha verde hacia arriba*/
.exchange-carousel__table .up {
    background-image: url('./assets/icons/trending-up.svg');
}

/*Elemento que indica el tipo de moneda*/
.exchange-carousel__currency {
    padding: 8px;
    width: 115px;
    height: 31px;
    border-radius: 8px;
    margin: 16px auto 0;
    color: var(--warm-black);
    font-size: 12px;
    text-align: center;
}

/*Texto con fondo naranja*/
.market-currency {
    background-color: var(--soft-orange);
}

/*Texto con fondo celeste*/
.fee-currency {
    background-color: var(--soft-blue);
}

As铆 me qued贸 a mi.

Aqu铆 les dejo el html y css de las respectivas tablas.

HTML

<section class="main-tables-container">
                <!-- Tabla currencys, divisa, moneda-->
                <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-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__buttom-left">Stellar</td>
                                <td class="table__buttom-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>
                <!-- Tabla comisiones -->
                <div class="main-commissions-table">
                    <p class="commissions-table--tittle">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__buttom-left">Coinext</td>
                                <td class="table__buttom-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>

CSS

/*Tabla currency, divisa, moneda*/
.main-currency-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: var(--Inter);
}
.main-currency-table .currency-table--tittle{
    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;
    height: 1.9rem;
    color: var(--gray);
    background-color: var(--withe);
}
.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__buttom-right {
    border-radius: 0 0 15px 0;
}
.currency-table--container .table__buttom-left {
    border-radius: 0 0 0 15px;
}
.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');
}
.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;
}
/*Tabla comisiones*/
.main-commissions-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: var(--Inter);
}
.main-commissions-table .commissions-table--tittle{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}
.commissions-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.commissions-table--container table {
    width: 100%;
    height: 100%;
}
.commissions-table--container td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    height: 1.9rem;
    color: var(--gray);
    background-color: var(--withe);
}
.commissions-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}
.commissions-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}
.commissions-table--container .table__buttom-right {
    border-radius: 0 0 15px 0;
}
.commissions-table--container .table__buttom-left {
    border-radius: 0 0 0 15px;
}
.commissions-table--container .table__right{
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}
.commissions-table--container .down{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url('./assets/icons/trending-down.svg');
}
.commissions-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;
}

si yo no fuera usado un span con background, sino una <img/> estaria mal? que beneficio trae usar un span con background?

Se siente tan bien cuando comienzas a entender el 鈥榩or que鈥 de cada linea de codigo.
dejas de copiar y actuar por analogia y empiezas a aplicar la logica.

Para quienes estan recien comenzando鈥 ANIMO! En un comienzo es frustrante, es dificil. Pero poco a poco iras entendiendo cada linea; y si no paras de aprender, dominaras todo lo que te propongas

Reto completado wuujuu

隆Listo!

C贸digo CSS

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

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Mira el siguiente tutorial para acceder al resumen visual de la clase 馃摌+ bonus final 馃挵

Les comparto como saque la tabla con grid

HTML

<section class="main--tables-container">
  <div class="main--currency-table">
    <h3 class="currency-table--title">Monedas</h3>
    <div class="grid-currency-table">
      <h4>Bitcoin</h4>
      <p>$ 42862.10 <span class="down"></span></p>
      <h4>Etherum</h4>
      <p>$ 3355.00 <span class="up"></span></p>
      <h4>Bitcoin Cash</h4>
      <p>$ 1085.34 <span class="down"></span></p>
      <h4>Litecoin</h4>
      <p>$ 294.09 <span class="up"></span></p>
    </div>
    <p class="currency-table--date"><b>Actualizado</b> 18 de Mayo 15:35</p>
  </div>
</section>

CSS

.main--currency-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  margin: 0 auto;
}
.main--currency-table .currency-table--title {
  font-size: 1.8rem;
  line-height: 2.3rem;
  font-weight: bold;
  color: var(--bitcoin-orange);
  text-align: left;
  margin-left: 8px;
}
.grid-currency-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  margin: 0 auto;
  font-family: "Linter", sans-serif;
}
.grid-currency-table h4 {
  font-size: 1.6rem;
  line-height: 1.9rem;
  font-weight: 500;
  color: var(--grey);
  background-color: var(--just-white);
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--off-white);
}
.grid-currency-table p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
  background-color: var(--just-white);
  border: 1px solid var(--off-white);
}
.grid-currency-table p span {
  display: inline-block;
  width: 15px;
  height: 15px;
}
.grid-currency-table p span.up {
  background-image: url("./assets/icons/trending-up.svg");
}
.grid-currency-table p span.down {
  background-image: url("./assets/icons/trending-down.svg");
}
.grid-currency-table h4:first-child {
  border-top-left-radius: 15px;
}
.grid-currency-table p:nth-child(2) {
  border-top-right-radius: 15px;
}
.grid-currency-table h4:nth-last-child(2) {
  border-bottom-left-radius: 15px;
}
.grid-currency-table p:last-child {
  border-bottom-right-radius: 15px;
}

Un peque帽o aporte para dar formato a la tabla con pseudoclases, me parece m谩s pr谩ctico que crear clases:

.currency-table__container table tr:first-child td:first-child{
    border-radius: 15px 0 0 0;
}
.currency-table__container table tr:first-child td:last-child{
    border-radius: 0 15px 0 0;
}
.currency-table__container table tr:last-child td:last-child{
    border-radius: 0 0 15px 0;
}
.currency-table__container table tr:last-child td:first-child{
    border-radius: 0 0 0 15px;
}

Una alternativa a dar bordes a cada lado creo que es mejor darle directo el borde a la tabla.

.currency__table-container table {
  width: 100%;
  height: 100%;
  background-color: var(--white);
  border-radius: 15px;
}

yo lo habia hecho primero con la etiqueta individualizada por la clase del contenedor, y luego 2 clases especificas que lo unico que se modifica es la url del background de esa forma evito repetir todo el codigo 2 veces:

.main-currency-table span{
    display:inline-block;
    width:15px;
    height: 15px;
    margin-left: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main-currency-table .span-down{
    background-image: url('./assets/icons/trending-down.svg');
}

.main-currency-table .span-up{
    background-image: url('./assets/icons/trending-up.svg');
}

Que tal buen dia campeones.

Background image es mala practica en este caso, me puse a investigar el uso de esta propiedad y encontr茅 que: El uso de Background image genera problema de accesabilidad, ya que los navegadores no brindan ninguna informaci贸n especial sobre im谩genes de fondo a la tecnolog铆a de asistencia. Esto es importante principalmente para los lectores de pantalla, ya que un lector de pantalla no anunciar谩 su presencia y, por lo tanto, no transmitir谩 nada a sus usuarios. Si la imagen contiene informaci贸n cr铆tica para comprender el prop贸sito general de la p谩gina. En este caso los iconos de tendencia baja y alta, son informaci贸n valiosa e importante para entender como est谩 el comportamiento en la tendenc铆a del valor de la criptomoneda, por lo tanto es mejor describirla sem谩nticamente en el documento html con una etiqueta figure e img.

Listo, solo agregu茅 las clases para clonar los estilos a la tabla 馃槃
Ready para darle movimiento a la tabla de monedas y comisiones

SI no fuera por el display: inline-block鈥

asjlkdjaskdl me estaba alocando de porque no se ve铆a mis iconos.

Mi obra maestra

Hacer con css un scroll horizontal de ambas informaciones, fue una tortura pero aprendi varias cosas nuevas, os delo el codigo. Mis humilde 463 lineas.
.
CSS
.

/*
1. Posicionamiento
2. Modelo de caja
3. Tipografia
4. Visuales
5. Otros
*/

:root
{
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange:#FFE9D5;
    --secundary-blue: #1A9AF7;
    --soft-blue: #e7f5ff;
    --warm-black:   #201e1c;
    --black: #282623;
    --gray:#BABABA;
	--off-white:#FAF8F7;
	--just-white:#FFFFFF;
}

*
{
    margin: 0;
    padding: 0;
    box-sizing: 0;
}
html
{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
/*Color de fondo del header*/
header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 334px;
    min-width: 320px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    
}
/*logo*/
header picture img{
    width: 180;
    height: 28px;
    margin-top: 60px;
    align-items: center;
}
/*logo dimensiones*/
.header-title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin: 30px auto auto;
}
/*titulo*/
.header-title-container h1
{
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.6rem;
    color: var(--just-white);
    margin: 0 10px 0;
}
/*parrafo del header*/
.header-title-container p
{
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
    margin: 30px 10px 30px;
}

/*boton flotante*/
.header-title-container .header-bottom 
{
    position: absolute;
    left: calc(50% - 130px);
    top: calc(100% - 60px);
    display: block;
    margin: 35px auto 0px;
    padding: 15px;
    width: 229px;
    height: 20px;
    background-color: var(--off-white);
    /* Sombras */
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
}

/*imagen del boton flotante*/
.header-bottom span
{
    display: inline-block;   
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("../assets/icons/down-arrow.svg");
}

/*fondo cuerpo*/
main
{
    width: 100%;
    background-color: var(--off-white);
    height: auto;
}
/*contenedor 1 dimensiones*/
.main-exchange-container
{
    padding: 60px 10px 30px;
    text-align: center;
}
/*tama帽o minimo y maximo de la pantalla*/
.main-exchange-container--title
{
    min-width: 288px;
    max-width: 900px;
}
/*imagen de Bitcoin*/
.main-exchange-container .background-img
{
    background-image: url("../assets/img/Bitcoin.svg") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
}
/*titulo main*/
.main-exchange-container--title h2
{
    margin: 0 10px 0;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.6rem;
    color: var(--black);
}
/*parrafo main*/
.main-exchange-container--title p 
{
    margin: 30px 10px 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}
/*////////////////////////Tabla 1 //////////////////////*/
/*dimensiones de la tabla*/

.main-currency-table
{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto 20px;
    font-family: "Inter" , sans-serif;
    position: relative;
}
/*titulo de la tabla*/
.main-currency-table .main-currency-table--title
{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    margin: 0 auto 15px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: start;
    padding: 0 0 0 10px ;

}
/*tama帽o de la tabla contenedora*/
.currency-table--container
{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container table
{
    width: 100%;
    height: 100%;
}
/*division de espacios y colores de la tabla contenedora*/
.currency-table--container table td
{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--gray);
    background-color: var(--just-white);
    text-align: start;
    padding: 0 0 0 10px ;
    position: relative;
}
/*Imagen tablas*/
.currency-table--container .table__right .down
{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 30px;
    background-image: url(../assets/icons/trending-down.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table--container .table__right .up
{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 30px;
    background-image: url(../assets/icons/trending-up.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*posicionamiento de las imagenes del contenedor tabla*/
.currency-table--container .down
{
    position: absolute;
    right: 20px;
}
.currency-table--container .up
{
    position: absolute;
    right: 20px;
}
/*posicionamiento del arrow*/
.main-arrow
{
    background-image: url("../assets/icons/down-arrow.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: inline-block;
    width: 12px;
    height: 7.5px;
    position: absolute;
    transform: rotate(-90deg);
    left: 105%;
    top: 44%;
    max-block-size: 500px;
}
/*Alineacion de texto de las tablas , estilos*/
.currency-table--container .table
{
    display: inline-block;
    text-align: center;
}
.currency-table--container .table__right
{
    text-align: center;
    padding-right: 20px;
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color:#757575
}

/*Bordes contenedor movil*/
.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-right
{
    border-radius: 0 0 15px 0 ;
}
.currency-table--container .table__bottom-left
{
    border-radius: 0 0 0 15px  ;
}
/*barra final*/
.currency-table--date
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px;
    height: 16px;
    width: 180px;
    min-width: 100px;
    max-width: 300px;
    background-color: #FFE9D5;
    margin: 20px auto 0;
    border-radius: 5px;
}
/*////////////////////////Tabla 2 //////////////////////*/
/*dimensiones de la tabla*/

.main-currency-table2
{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto 20px;
    font-family: "Inter" , sans-serif;
    position: relative;
}
/*titulo de la tabla*/
.main-currency-table2 .main-currency-table--title2
{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    margin: 0 auto 15px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3rem;
    color: #1A9AF7;
    text-align: start;
    padding: 0 0 0 10px ;

}
/*tama帽o de la tabla contenedora*/
.currency-table--container2
{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container2 table
{
    width: 100%;
    height: 100%;
}
/*division de espacios y colores de la tabla contenedora*/
.currency-table--container2 table td
{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--gray);
    background-color: var(--just-white);
    text-align: start;
    padding: 0 0 0 10px ;
    position: relative;
}
/*posicionamiento del arrow*/
.main-arrow2
{
    background-image: url("../assets/icons/down-arrow.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: inline-block;
    width: 12px;
    height: 7.5px;
    position: absolute;
    transform: rotate(90deg);
    right: 105%;
    top: 44%;
    max-block-size: 500px;
}
/*Alineacion de texto de las tablas , estilos*/
.currency-table--container2 .table2
{
    display: inline-block;
    text-align: center;
}
.currency-table--container2 .table__right2
{
    text-align: center;
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color:#757575
}

/*Bordes contenedor movil*/
.currency-table--container2 .table__top-left2
{
    border-radius: 15px 0 0 0 ;
}
.currency-table--container2 .table__top-right2
{
    border-radius: 0 15px 0 0 ;
}
.currency-table--container2 .table__bottom-right2
{
    border-radius: 0 0 15px 0 ;
}
.currency-table--container2 .table__bottom-left2
{
    border-radius: 0 0 0 15px  ;
}
/*barra final*/
.currency-table--date2
{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 8px;
    height: 16px;
    width: 180px;
    min-width: 100px;
    max-width: 300px;
    background-color: #E7F5FF;
    margin: 20px auto 0;
    border-radius: 5px;
}
/*/////////////////Cajas contenedoras del scroll//////////////////*/
/*/////////////////Celulares ////////////////////////////////////*/
.main-tables-container
{
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    min-width: 288px;
    max-width: 450px;
    height: auto;
    margin: 0 auto;
}
.container1
{
    display: flex;
    scroll-snap-align: center;
    min-width: 288px;
    max-width: 900px;
    margin: 0 65px 0 65px;
}
.container2
{
    display: flex;

    scroll-snap-align: center;
    min-width: 288px;
    max-width: 900px;
    margin: 0 65px 0 65px;
}


.
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="stylesheet" href="./CSS/Style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <picture>
        <img src="./assets/img/logo.svg" alt="">
        </picture>
        <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-bottom">Conoce Nuestros Planes <span></span></a>
        </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>
            <section class="main-tables-container">
                <div class="container1">
                    <div class="main-currency-table">
                        <p class="main-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="main-arrow">
                                <span ></span>
                            </div>
                        </div>
                        <div class="currency-table--date">
                            <p> <b>Actualizado:</b>  19 de julio a las 23:45</p>
                        </div>
                    </div>
                </div>
                <div class="container2">
                    <div class="main-currency-table2">
                        <p class="main-currency-table--title2">Comisiones</p>
                        <div class="currency-table--container2">
                            <table>
                                <tr>
                                    <td class="table__top-left2">Bitrate</td>
                                    <td class="table__top-right2 table__right2">$12.96 </td>
                                </tr>
                                <tr>
                                    <td>Bitpreco</td>
                                    <td class="table__right2">$13.07</td>
                                </tr>
                                <tr>
                                    <td>Novadax</td>
                                    <td class="table__right2" >$13.15 </td>
                                </tr>
                                <tr>
                                    <td class="table__bottom-left2">Coinext</td>
                                    <td class="table__bottom-right2 table__right2">$14.96 </td>
                                </tr>
                                
                            </table>
                            <div class="main-arrow2">
                                <span ></span>
                            </div>
                        </div>
                        <div class="currency-table--date2">
                            <p> <b>Actualizado:</b>  19 de julio a las 23:45</p>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>```

RETO FINALIZADO

Para no repetir las mismas lineas de c贸digo le puse otra clase de nombre arrow 馃

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

Este es el reto completado. Tambien modifique la posici贸n de los t铆tulos seg煤n lo planteado por el area de dise帽o, la columna de la izquierda deb铆a tener el texto alineado a la izquierda, esto tambi茅n lo cambie. He aprendido mucho, Diego explica muy bien, estoy muy contento con mi suscripci贸n en Platzi. P. D. Tambien estoy tomando la escuela de ingles y tambi茅n hay excelentes profesores.

Banda!, yo coloque los Iconos de down y up. sin necesidad de agregarle clases a lso span

Les dejo el cogido, para que lo chequeen y puedan entender el manejo de la especificidad.

.currency-table-container span {
  display: inline-block;
  height: 15px;
  width: 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 table :nth-child(2) td > span {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin-left: 10px;
  background-size: cover;
  background-position: center;
  background-image: url("./assets/icons/trending-up.svg");
  background-repeat: no-repeat;
}

馃槃 por fin puedo decir que pude hacerlo diferente, para cambiar las letras de la derecha ocupe un pseudolemento,

.currency-table-container td:nth-child(n+2){
   color:#757575;
   font-size: 1.4rem;
   font-weight: 400;
   line-height: 1.694rem;
} 

Reto Iconos de la primera tabla y creaci贸n de la segunda

  • Faltaba en el ejemplo del profe alinear los textos de la primera columna, lo hice con:
.main-currency-table .currency-table--title{
    text-align: left;
    text-indent: 20px;
   /*... dem谩s estilos*/
}
  • Para la segunda tabla hay que quitar los span de los iconos, ya que no son necesarios.

Otra forma de redondear las esquinas, as铆 lo hice yo y me funcion贸

.currency-table--container .table__top-left {
  border-top-left-radius: 15px;
}
.currency-table--container .table__top-right {
  border-top-right-radius: 15px;
}
.currency-table--container .table__bottom-left {
  border-bottom-left-radius: 15px;
}
.currency-table--container .table__bottom-right {
  border-bottom-right-radius: 15px;
}

Me sirvio hacer esto para no repetir el codigo con las dos imagenes de trending . En ves de hacer una clase down hice tres clases: trending en la cual puse el posicionamiento y el tama帽o del span contenedor y las clases up y down donde puse la url de las imagines

.trending {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.down {
  background-image: url('./assets/trending-down.svg');
}

.up {
  background-image: url('./assets/trending-up.svg');
}

espero que les sirva

Recuerden que pueden reutilizar c贸digo jugando con las etiquetas, por ejemplo yo pr谩cticamente copie los nombres de las etiquetas de la primera tabla, pero les cambie solo el Currency por el Commissions y as铆 quedo.
.

.
Este es el CSS

.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;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
}

.currency-table--container, .commissions-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 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(--grey);
    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: 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;
}

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

.
Este es el HTML
.

<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">$ 35.112,9 <span class="down"></span></td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td class="table__right">$2.529,40 <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>
                    <div class="currency-table--date">
                        <p> <b>Actualizado:</b> 9 Junio 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__right table__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="table__bottom-left">Coinext</td>
                                <td class="table__right table__top-right">14.96</td>
                            </tr>
                        </table>
                    </div>
                    <div class="commissions-table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:48</p>
                    </div>
                </div>
            </section>

Mi GitHub: https://github.com/AnfelGomez

Termin茅 de colocar las im谩genes de los trendings:

El c贸digo de CSS para el trending-up es:

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

Hola, yo a帽ad铆 las siguientes reglas para que fuera lo m谩s acorde al maquetado en Figma, espero sirva 馃槂

.main-currency-table .currency-table__title,
.main-commission-table .commission-table__title {
    text-align: left;
    text-indent: 16px;
    margin-bottom: 15px;
    font-family: "DM Sans", sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
} 
.currency-table__container td:nth-child(1),
.commission-table__container td:nth-child(1) {
    text-align: left;
    text-indent: 11px;  
}

Resultado:

Reto terminado, solo me falta agregar la flecha y la interacci贸n que se debe de dar. Cabe recalcar que en lugar de estar declarando a cada rato las clases re-use lo que pude, la parte de table y td las deje sin clase para que se pudieran aplicar a las de la otra.

.currency-table鈥揷ontainer .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鈥揷ontainer .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;
}

Reto completado!

De esta manera a帽ad铆 las flechas de trending-up/down:

.main__currency-table__container span{
    display: inline-block;
    margin-left: 10px;
    width: 12px;
    height: 12px;
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.main__currency-table__container span.trending-up{
    background-image: url('./assets/icons/trending-up.svg');
}

.main__currency-table__container span.trending-down{
    background-image: url('./assets/icons/trending-down.svg');
}

CSS
/* Tabla Comision Inicio*/

.main-exchange-container2 h2{
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.3rem;
color: var(鈥揵lack);
}
.main-exchange-container2 p{
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 500;
height: 1.6rem;
color: #757575;
}

.main-currency-table2{
width: 70%;
min-width: 235px;
max-width: 300px;
height: 65px;
margin: 0 auto;
font-family: 鈥淚nter鈥, sans-serif;
}

.main-currency-table2 .currency-table鈥搕itle2{
margin-bottom: 5px;
margin-top: 10px;
font-size: 1.4rem;
font-weight: bold;
line-height: 2.3rem;
color: var(鈥揵itcoin-orange);
}
.currency-table鈥揷ontainer2{
width: 90%;
min-width: 230px;
max-width:300px;
height: 250px;
margin: 0 auto;
}

.currency-table鈥揷ontainer2 table{
width: 100%;
height: 100%;
}
.currency-table鈥揷ontainer2 td{
width: 50%;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.4rem;
color: var(鈥揼rey);
background-color: var(鈥搄ust-white);
}

.currency-table鈥揷ontainer2 .table__top-left2{
border-radius: 15px 0 0 0;
}
.currency-table鈥揷ontainer2 .table__top-right2{
border-radius: 0 15px 0 0;
}
.currency-table鈥揷ontainer2 .table__bottom-left2{
border-radius: 0 0 0 15px;
}
.currency-table鈥揷ontainer2 .table__bottom-right2{
border-radius: 0 0 15px 0;
}

.currency-table鈥揷ontainer2 .table__right2{
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
/* Tabla Comision FIN*/

HTML
<section class=鈥渕ain-tables-container2鈥>
<div class=鈥渕ain-currency-table2鈥>
<p class=鈥渃urrency-table鈥搕itle2鈥>Comisiones</p>
</div>
<div class=鈥渃urrency-table鈥揷ontainer2鈥>
<table>
<tr>
<td class=鈥渢able__top-left2鈥>Bitrade</td>
<td class=鈥渢able__top-right table__right2鈥>$ 12.96</td>
</tr>
<tr>
<td>Bitpreco</td>
<td class=鈥渢able__right2鈥>$ 13.07</td>
</tr>
<tr>
<td>Novadax</td>
<td class=鈥渢able__right2鈥>$ 13.15</td>
</tr>
<tr>
<td class=鈥渢able__bottom-left2鈥>Coinext</td>
<td class=鈥渢able__bottom-right table__right2鈥>$ 14.96</td>
</tr>
</table>
</div>
<div class=鈥渃urrency-table鈥揹ate2鈥>
<p>
<b>Actualizado:</b> 19 de Julio 23:45
</p>
</div>
</section>

No s茅 s铆 se habr谩n dado cuenta pero con solo poner border-radius en:

.currency-table鈥揷ontainer td {
font-family: 鈥楳ontserrat鈥, 200;
width: 50%;
font-size: 16px;
font-weight: 500px;
line-height: 19px;
color: var(鈥揼rey);
background-color: var(鈥搄ust-white);
border-radius: 5px;
}

Es m谩s que suficientes, no tienes que hacerlo uno por uno como lo hace el profe 馃槙

Les adjunto la foto para que vean鈥 y le puse de fondo un color celeste solo para que ustedes lo aprecien mejor鈥

![](

![](

馃Amigos. A煤n no he tomado el curso de grid pero me atrev铆 a intentarlo y creo que obtuve unos resultados aceptables (:

Yo se que no es un gran logro copiar algo que ya esta escrito, pero entender al 100% todo que se esta leyendo y replicarlo en otro trabajo es un buen logro.

Coloquen un background al td para que puedan ver los bordes redondeados:

td{
    background-color: orange !important;
}

Alguien me puede decir por qu茅 no me se me centra el texto de la tabla, tengo todo el contenido a la izquierda y mi c贸digo es el mismo que el de Diego.

As铆 me va quedando el proyecto.
Pueden ver el c贸digo en Github

Hay vamos con el reto 馃槉馃憤

codigo de la primera tabla que hizo DIEGO en los videos

.main__content-table{
	width: 90%;
	min-width: 23rem;
	max-width: 30rem;
	height: 25rem;
	margin: 0 auto;
}

.main__table{
	width: 100%;
	height: 100%;
	background-color: var(--just-white);
}


.main__table td{
	width: 50%;
}

.table__cell-left{
	font-weight: var(--size-500);
	line-height: 1.9rem;
	color: #B5B0AC;
	font-size: 1.6rem;
}

.table__cell-rigth{
	font-weight: var(--size-400);
	font-size: 1.4rem;
	line-height: 1.6rem;
	color:#757575;
}

.boder-left{
	border-radius: 1.5rem;
}

.border-rigth{
	border-radius: 1.5rem;
}

.border-left-botton{
	border-radius: 1.5rem;
}

.border-rigth-botton{
	border-radius: 1.5rem;
}

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

.cell-up{
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: 1rem;
	background-image: url('../assets/icons/trending-up.svg');
	background-position: center;
	background-repeat: no-repeat;
}
.main__update{
	margin-top: 3rem;
}

.main__update-parrafo{
	background-color: var(--soft-orange);
	border-radius: 1rem;
	padding: 1rem 0;
	font-family: var(--font-inter);
	font-weight:normal;
	line-height: 1.9rem;
	font-size: 1.4rem;
	width: 75%;
	margin: 0 auto;
}

.main__update-bold{
	font-family: var(--font-inter);
	font-weight: var(--size-700);
	line-height: 1.9rem;
	font-size: 1.6rem;
}

codigo de la segunda tabla que era el RETO (aqui se aprecia la reutilizacion de codigo con las clases) REUTILZE TODAS LAS CLASES YA QUE LLEVAN EL MISMO ESTILO son peque帽as las diferencias

.comisionario{
	margin-top:4rem; 
}

.comisiones-parrafo{
	background-color: var(--soft-blue);
}

.comisiones-title{
	color:#1A9AF7;

}

aqui el resultado de ambas tablas

Buenas noches banda, recuerden que pueden optimizar un poco el c贸digo evitando la repetici贸n del mismo, las clases .up y .down las dejas con el background image y puede crear una clase general para el resto de las configuraciones, as铆: `.main-currency-table__container .trending-icon {聽 聽 display: inline-block;聽 聽 width: 15px;聽 聽 height: 15px;聽 聽 margin-left: 10px;聽 聽 background-size: cover;聽 聽 background-position: center;聽 聽 background-repeat: no-repeat;}` `.up {聽 聽 background-image: url('/assets/icons/trending-up.svg');}` `.down {聽 聽 background-image: url('/assets/icons/trending-down.svg');}`

html - css - javascript

Implementando :is() y :has()

<section class="__coins" id="coins">
                    <div class="__coins-container">
                        <div>
                            <p class="table-title">Monedas</p>
                            <div class="__table-container">
                                <table>
                                    <tr>
                                        <td data-cell="coin">Bitcoin</td>
                                        <td data-cell="value">$1.96</td>
                                        <td data-cell="trend">
                                            <img src="./assets/icons/trending-down.svg" alt="">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td data-cell="coin">Ethereum</td>
                                        <td data-cell="value">$0.07</td>
                                        <td data-cell="trend">
                                            <img src="./assets/icons/trending-up.svg" alt="">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td data-cell="coin">Ripple</td>
                                        <td data-cell="value">$2.15</td>
                                        <td data-cell="trend">
                                            <img src="./assets/icons/trending-down.svg" alt="">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td data-cell="coin">Stellar</td>
                                        <td data-cell="value">$4.96</td>
                                        <td data-cell="trend">
                                            <img src="./assets/icons/trending-down.svg" alt="">
                                        </td>
                                    </tr>
                                </table>
                                <div class="table-arrow">
                                    <img id="right-arrow" src="./assets/icons/right-arrow.svg" alt="right-arrow">
                                </div>
                            </div>
                        </div>
                        <div class="actualizacion">
                            <span class="refresh-text">Actualizado:</span>
                            <span class="refresh-date">19 Julio 23:45</span>
                            <div/>
                        </div>
                    </section>
                </section>
                <section class="__comission" id="comission" style="display: none;">
                    <div class="__comission-container">
                        <div>
                            <p class="table-title">Comisi贸n</p>
                            <div class="__table-container">
                                <div class="table-arrow">
                                    <img id="left-arrow" src="./assets/icons/right-arrow.svg" alt="left-arrow">
                                </div>
                                <table>
                                    <tr>
                                        <td data-cell="platform">Bitrade</td>
                                        <td data-cell="value">$12.96</td>
                                    </tr>
                                    <tr>
                                        <td ata-cell="platform">Bitpreco</td>
                                        <td data-cell="value">$13.07</td>
                                    </tr>
                                    <tr>
                                        <td data-cell="platform">Novadax</td>
                                        <td data-cell="value">$13.15</td>
                                    </tr>
                                    <tr>
                                        <td data-cell="platform">Coinext</td>
                                        <td data-cell="value">$14.96</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="actualizacion">
                            <span class="refresh-text">Actualizado:</span>
                            <span class="refresh-date">19 Julio 23:48</span>
                            <div/>
                        </div>
                    </section>
                </section>
:is(.__coins-container, .__comission-container) {
    container-type: inline-size;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: clamp(320px, 80%, 600px);
    aspect-ratio: 2 / 1;
    margin-inline: auto;
    border-radius: 10px;

    /* background-color: red; */
    padding-top: 4rem;
    padding-bottom: 5rem;

    & .table-title {
        color: var(--bitcoin-orange);
        font-size: 4.5cqw;
        padding-left: .5rem;
    }

    & .__table-container {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;

        & table {
            background-color: var(--off-white);
            border-radius: 10px;
            font-size: 5cqw;
            font-family: "Inter";
            color: var(--warm-black);

            & tr {
                background-color: var(--just-white);
                border-collapse: collapse;

                & td {
                    padding: .5rem;
                    border-collapse: var(--bitcoin-orange);

                    &[data-cell="value"] {
                        text-align: right;
                        padding-left: 2rem;
                    }

                    &[data-cell="coin"] {
                        text-align: left;
                        padding-right: 2rem;
                    }

                    &[data-cell="trend"] {
                        text-align: left;
                        padding: 0 1rem;
                    }
                }
            }
        }

        & .table-arrow {
            margin-left: .5rem;
            background-color: var(--just-white);

            & img {
                cursor: pointer;
                padding: 1rem;
                border-radius: 5px;
                box-shadow: 1px 1px 1px var(--warm-black);
            }

            & img:hover {
                box-shadow: -1px -1px 1px var(--warm-black);
            }
        }
    }

    & :has(#left-arrow) {
        & .table-title {
            color: var(--secondary-blue);
        }

        & img {
            transform: scaleX(-1);
        }
    }

    & .actualizacion {
        background-color: var(--soft-orange);
        margin-top: 1rem;
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-radius: 5px;
        width: clamp(170px, 50%, 600px);
        text-align: center;
        container-type: inline-size;
        align-content: center;

        & .refresh-text {
            font-weight: 700;
            font-size: 6cqw;
        }

        & .refresh-date {
            font-weight: 300;
            font-size: 5.5cqw;
        }
    }
}
const right_arrow = document.getElementById("right-arrow")
const left_arrow  = document.getElementById("left-arrow")

const coins     = document.getElementById("coins")
const comission = document.getElementById("comission")


right_arrow.onclick = function() {
   event.preventDefault();
   coins.style.display     = "none"
   comission.style.display = "block"
}

left_arrow.onclick = function() {
    event.preventDefault();
    coins.style.display     = "block"
    comission.style.display = "none"
}

```css 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: 238px; 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/imgs/Bitcoin.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .main-exchange-container--title h2 { margin-bottom: 30px; font-size: 2.4rem; font-weight: var(--lg-weight); line-height: 2.6rem; color: black; } .main-exchange-container--title p { margin-bottom: 30px; font-size: 1.4rem; font-weight: var(--md-weight); line-height: 1.6rem; color: #757575; } .main-currency-table, .main-commision-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family: "Inter", sans-serif; } .main-currency-table .main-currency-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: var(--md-weight); line-height: 2.3rem; color: var(--bitcoin-orange); } .main-currency-table--container, .main-commision-table--container { width: 90%; min-width: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .main-currency-table--container table, .main-commision-table--container table{ width: 100%; height: 100%; } .main-currency-table--container td, .main-commision-table--container td { width: 50%; font-size: 1.6rem; font-weight: var(--md-weight); line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .main-currency-table--container .table__top-left, .main-commision-table--container .table__top-left { border-radius: 15px 0 0 0; } .main-currency-table--container, .main-commision-table--container .table__top-right { border-radius: 0 15px 0 0; } .main-currency-table--container, .main-commision-table--container .table__bottom-left { border-radius: 0 0 0 15px; } .main-currency-table--container, .main-commision-table--container .table__bottom-right { border-radius: 0 0 15px 0; } .main-currency-table--container, .main-commision-table--container .table__right { font-size: 1.4rem; font-weight: normal; line-height: 1.7rem; color: #757575; } .main-currency-table--container .down, .up { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-position: center; background-repeat: no-repeat; } .main-currency-table--container .down { background-image: url('./assets/icons/trending-down.png'); } .main-currency-table--container .up { background-image: url('./assets/icons/trending-up.png'); } .main-commision-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: var(--md-weight); line-height: 2.3rem; color: var(--secondary-blue); } ```![](https://static.platzi.com/media/user_upload/image-d3999e2e-601f-4bdc-968b-effbe1df4602.jpg)
Reto superado. ![](https://static.platzi.com/media/user_upload/imagen-2769130d-e2fd-4b6e-a8e1-f3be245d27c1.jpg) ![]()

Revisando para la segunda clase encuentro que todos los estilos se aplican tambien, entonces para el color del titulo de comisiones aplico un id para estilizar el color azul, de resto dejo las mismas clases

Clase 16: El dise帽o de la tabla tienen una apariencia bastante similar a la original. Nos faltan algunos detalles como redondear las esquinas, colores al texto y los 铆conos. Tienes raz贸n. Entonces, 隆agreguemos esos estilos! ## C贸mo agregar bordes de la tabla 驴Recuerdas que creamos clases espec铆ficas para los botones situados en las esquinas? Pues es momento de llamarlos. * Empezemos por el lado izquierdo de la tabla, y lo llamamos desde su contenedor con ***.currency-table鈥揷ontainer .table\_\_top-left***. * Le agregamos un ***border-radius: 15px 0 0 0*** en donde cada una de las cuatro posiciones representa una esquina de la caja que estamos estilando: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda, respectivamente. * Aplicamos estos valores a cada una de las esquinas. `.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`; } ## C贸mo aplicar texto de precios * Llamamos la clase que aplicamos a todos los textos de la columna derecha con ***.currency-table鈥揷ontainer .table\_\_right***. * Ajustamos su tama帽o a ***1.4rem*** y le damos un ancho normal. * Agregamos un interlineado de ***1.7rem***. * Ajustamos el ***color*** usado en el dise帽o ***#757575***. .currency-table--container .table\_\_right { ` font-size: 1.4rem;` font-weight: normal; ` line-height: 1.7rem;` color: #757575; } ## C贸mo agregar 铆conos Observando el dise帽o, nos damos cuenta que hay dos tipos de flechas: hacia arriba y abajo. Entonces tenemos que dividir y aplicar a las etiquetas ***span*** estas dos clases: ***up*** y ***down***. * Llamamos a las etiquetas ***span*** con su clase desde el contenedor de la tabla con ***.currency-table鈥揷ontainer .down***. * Usamos ***display: inline-block*** para mantener el 铆cono en la misma l铆nea que el texto. * Le damos un ancho y alto de ***15px***. * Agregamos un ***margin-left: 10px*** para separarlo del texto. * Llamamos la imagen desde su direcci贸n con \*\*\*background-image: url("")\*\*\*. * Ajustamos su tama帽o al del contenedor con ***cover***, lo centramos y especificamos que no se repita la imagen. * Aplicamos los mismos estilos para la clase ***.currency-table鈥揷ontainer .up***. S贸lo cambiamos la ***url*** del 铆cono. `.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; } Este ser铆a nuestro resultado en pantalla: ![image.png](https://static.platzi.com/media/articlases/Images/image%28205%29.png) Genial, 驴no? Ahora solo falta que apliques lo mismo a la otra tabla que falta. Recuerda que no hay una sola manera de lograrlo, sino tantas como programadores hay. Lo importante es que lo intentes. Ver谩s que es muy sencillo.
Hecho con **Grid:** ![]().main-tables-container .currency-table--container {聽 聽 display: grid;聽 聽 grid-template-rows: repeat(4,39px); 聽 聽聽 聽 grid-template-columns: repeat(2, 1fr);聽 聽 gap: 8px 10px;聽 聽 justify-items: start;聽 聽 align-items: center; 聽 聽 background-color: var(--just-white); 聽聽 聽 border-radius: 8px; } .currency-table--container .table-left {聽 聽 color: #B5B0AC;聽 聽 font-size: 16px;聽 聽 font-weight: 500;聽 聽 letter-spacing: -0.32px;} .currency-table--container .table\_\_right {聽 聽 color: #757575;聽 聽 font-size: 14px; 聽 聽聽 聽 font-weight: 400;聽 聽 letter-spacing: -0.28px;聽 聽 width: 95px;} .currency-table--container .table\_\_right .tredding-down {聽 聽 display: inline-block;聽 聽 background: url(./assets/icons/trending-down.svg) center/cover no-repeat; 聽 聽聽 聽 width: 15px;聽 聽 height: 15px;聽 聽 margin-left: 10px;聽 聽 background-size: cover;聽 聽 background-position: center;} .currency-table--container .tredding-up {聽 聽 display: inline-block;聽 聽 background: url(./assets/icons/trending-up.svg) center/cover no-repeat; 聽 聽聽 聽 width: 15px;聽 聽 height: 15px;聽 聽 margin-left: 10px;聽 聽 background-size: cover;聽 聽 background-position: center;} .currency-table--date p {聽 聽 background-color: var(--soft-orange);聽 聽 color: var(--warm-black);聽 聽 border-radius: 8px;聽 聽 padding: 6px;聽 聽 font-family: 'Inter', sans-serif;聽 聽 font-size: 1.4rem;聽 聽 margin-top: 15px;}![]()![]()![]()```css .main-tables-container .currency-table--container { display: grid; grid-template-rows: repeat(4,39px); grid-template-columns: repeat(2, 1fr); gap: 8px 10px; justify-items: start; align-items: center; background-color: var(--just-white); border-radius: 8px; } .currency-table--container .table-left { color: #B5B0AC; font-size: 16px; font-weight: 500; letter-spacing: -0.32px; } .currency-table--container .table__right { color: #757575; font-size: 14px; font-weight: 400; letter-spacing: -0.28px; width: 95px; } .currency-table--container .table__right .tredding-down { display: inline-block; background: url(./assets/icons/trending-down.svg) center/cover no-repeat; width: 15px; height: 15px; margin-left: 10px; background-size: cover; background-position: center; } .currency-table--container .tredding-up { display: inline-block; background: url(./assets/icons/trending-up.svg) center/cover no-repeat; width: 15px; height: 15px; margin-left: 10px; background-size: cover; background-position: center; } .currency-table--date p { background-color: var(--soft-orange); color: var(--warm-black); border-radius: 8px; padding: 6px; font-family: 'Inter', sans-serif; font-size: 1.4rem; margin-top: 15px; } ```![]()![](https://static.platzi.com/media/user_upload/style-50418c1f-af81-4917-b956-a886724ab93f.jpg)

listo el css

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

Mi tabla de comisiones

Reto completado 馃樈

tarea.

Reto Terminado.

Para la tabla us茅 esto:

.currency-table--container table {
    background-color: var(--just-white);
    border-collapse: collapse;
    border-radius: 8px;
}

Reto completado:
Html:

css

La diferencia entre usar comillas simples (鈥欌) o ninguna comilla en la propiedad de la imagen de fondo depende de la ruta del archivo de la imagen a la que se hace referencia.

Si la ruta del archivo tiene espacios o caracteres especiales, como en el ejemplo que proporcion贸 donde el nombre del archivo tiene una tendencia descendente 1.svg, entonces debe usar comillas dobles ("") o caracteres de escape () para hacer referencia correctamente al archivo. En este caso, la barra invertida se usa para escapar del espacio en el nombre del archivo, as铆: 鈥/assets/trending-down\ 1.svg.

Si la ruta del archivo no tiene caracteres especiales, puede usar comillas simples, comillas dobles o ninguna comilla para hacer referencia al archivo de imagen en la propiedad de imagen de fondo. Por ejemplo: imagen de fondo: url(鈥/activos/imagen.png); o imagen de fondo: url("鈥/assets/image.png");

termine el reto pero solo copie todos las etiquetas html mantuve las mismas clases y solo ele agregue una clase extra para cambiar el color del titulo comisiones.

Creo que difiero un poco con el profe en el minuto 2:00, no hay necesidad de colocarle a cada esquina un border-radius independiente y SI se puede crear en el contenedor de la tabla.

.currency-table__container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    border-radius: 15px; -->AGREGAR
    overflow: hidden;  -->AGREGAR
}

De esta forma tendremos el mismo resultado esperado y queda como mejor pr谩ctica, me parece a mi. que estar diviviendo los border-radius seg煤n el elemento. Como todo creo que hay muchas formas de hacerlo, de igual forma, las buenas pr谩cticas no son reglas y al final importa el resultado, solo quiero aclarar que si es posible. 馃槃

Codigo HTML

<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.007 <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">Stellear</td>
                            <td class="table__bottom-right table__right">$4.96 <span class="down"></span>
                            </td>
                        </tr>
                    </table>
                </div>
                    <p><b>Actualizado:</b> 19 julio 23:45</p>
                </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>
                        <p><b>Actualizado:</b>19 de Julio 23:48</p>
                    </div>
                </div>
            </div>
         </section>
        </section>

Codigo 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;
}
.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 {
  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: 15px;
  background-image: url('./assets/icons/trending-up.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.main-commissions-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.main-commissions-table .commissions-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--secondary-blue);
}
.commissions-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
}
.commissions-table--container table {
  width: 100%;
  height: 100%;
}
.commissions-table--container td {
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--grey);
  background-color: var(--just-white);
}
.commissions-table--container .table__top-left {
  border-radius: 15px 0 0 0;
}
.commissions-table--container .table__top-right {
  border-radius: 0 15px 0 0;
}
.commissions-table--container .table__bottom-left {
  border-radius: 0 0 0 15px;
}
.commissions-table--container .table__bottom-right {
  border-radius: 0 0 15px 0;
}
.commissions-table--container .table__right {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}

Me toco sufrir tener paciencia y deseo de aprender lo entendi muchas gracias lo que no e podido subir al aporte 馃槙

Con grid:

.comisiones-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 15px;
    gap: 3px;
    overflow: hidden;
}
.comisiones-table--container-title, .comisiones-table--container-price{
    background-color: var(--white);
    display: grid;
    place-content: center;
}
.comisiones-table--container-title p{
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
}
.comisiones-table--container-price p{
    margin-bottom: 0;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
}

Para el reto del profesor de la segunda tabla lo que hice fue generar un label con un input de tipo checkbox debajo del div currency-table鈥揷ontainer.

luego le di los siguientes estilos con css:

y trate el cambio de estado haciendole click a el icono de la flecha con JS de la siguiente manera.
recupere la id y clase del label y el checkbox en js con un document.querySelector(""). Luego a traves de un addEventListener (que es un escucha de eventos, el cual tiene 2 parametros, el primer parametro es la accion a ejecutar, por ejemplo un click, o pasar el mouse sobre el elemento, presionar una tecla, etc, y el segundo parametro es una funcion, dentro de la funcion coloque un if el cual esta validando si el checkbox esta tildado, si esta tildado ejecuta los estilos en linea que coloque con JS, si no ejecuta los otros estilos).

Quedo de la siguiente manera.

Al hacerle click al icono de la flecha cambie de Comisiones a Monedas y viceversa

Reto cumplido, fui trabajando ambas tablas en simult谩neo y compartiendo estilos para ahorrar esfuerzo:

tambien se pueden redondear las esquinas con:

.currency-table--conteiner{
  border-radius: 15px;
  overflow: auto
}

reto cumplido:

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

Mi soluci贸n fue cambiar las clases a:

<section class="main-tables-container" >
<div class="main-table">

Despu茅s apliqu茅 los cambios a css y as铆 reutilic茅 el c贸digo, para no escribir tanto, b谩sicamente us茅 lo mismo y s贸lo agregu茅 una clase para el t铆tulo que era de otro color, tambi茅n mov铆 los t铆tulospara que quedar谩n como en figma 馃槂

Reto cumplido!!

CSS:

.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--tittle, .main-commission-table .commission-table--tittle {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
}
.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: 500px;
    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;
}
.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--date, .commission-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    background-color: var(--soft-orange);
    margin-top: 15px;
    padding: 8px;
    border-radius: 8px;
}
.currency-table--date p, .commission-table--date p {
    margin: 0 auto;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--warm-black);
}
.main-tables-container .commission-table--tittle {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

.currency-table--container .down,
.currency-table--container .up {
    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{
    background-image: url('./assets/icons/trending-up.svg');
}

.currency--right-arrow span,
.comision--left-arrow span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url('./assets/icons/right_arrow.svg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    bottom: 85px;
    left: 150px;
    cursor: pointer;
}
.comision--left-arrow span {
    background-image: url('./assets/icons/arrow_left.svg');
    left: -150px;
}
.main-comision-table {
    display: none;
}

HTML:

            <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-right table__right">$1.96 <span class="up"></span></td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td class="table__right">$0.07 <span class="down"></span></td>
                            </tr>
                            <tr>
                                <td>Ripple</td>
                                <td class="table__right">$2.17 <span class="up"></span></td>
                            </tr>
                            <tr>
                                <td class="table__bottom-left">Stellar</td>
                                <td class="table__bottom-right table__right">$4.96 <span class="up"></span></td>
                            </tr>
                        </table>
                    </div>
                    <div class="currency-table--date">
                        <p> <b>Actualizado:</b> 13 Julio 11:10 </p>
                    </div>
                </div>
                <section class="main-commission-table">
                 <div class="main-tables-container">
                    <p class="commission-table--tittle"> 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 <span></span></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="commission-table--date">
                        <p> <b>Actualizado:</b> 13 Julio 11:10 </p>
                 </div>
                </section>
        </section>

As铆 qued贸 el reto

.main-commission-table {
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: var(--inter);
}

.main-commission-table .commission-table--title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: var(--secondary-blue);
}

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

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

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

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

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

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

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

.commission-table--container .table__left {
    color: #757575;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.7rem;
    text-align: center;
}

Hay otra manera de poder utilizar la propiedades de border radius.
Lo comparto porque se me hizo m谩s sencillo.
Es posible especificar los valores de cada esquina mediante propiedades por separado y queda exactamente igual, solo hay que especificarlo con el border-top-right-radius (borde superior derecho) y se redondea 8px sin necesidad de poner 0px 18px 0px 0px. Solo se usa una vez.
Les muestro un ejemplo:

Ojal谩 les sirva

Hi. Finish the challenge

Asi quedaron los restos de los iconos en las ultimas tres filas de la tabla

En lugar de agregar tantas clases a las diferentes td para generar el border radius en la tabla se puede hacer a trav茅s de la psudo clase :nth-child(){ }.

<code> 
table tr:nth-child(1) td:nth-child(1){
border-radius: 15px 0 0 0;
}
table tr:nth-child(1) td:nth-child(2){
border-radius: 0 15px 0 0;
}
table tr:nth-child(4) td:nth-child(2){
border-radius: 0 0 15px 0;
}
table tr:nth-child(4) td:nth-child(1){
border-radius: 0 0 0 15px;
}

Esto lo hice porque siempre hago el c贸digo antes de ver el video y luego comparo.

En lugar de agregar tantas clases a las diferentes td para generar el border radius en la tabla se puede hacer a trav茅s de la psudo clase :nth-child(){ }.

table tr:nth-child(1) td:nth-child(1){
border-radius: 15px 0 0 0;
}
table tr:nth-child(1) td:nth-child(2){
border-radius: 0 15px 0 0;
}
table tr:nth-child(4) td:nth-child(2){
border-radius: 0 0 15px 0;
}
table tr:nth-child(4) td:nth-child(1){
border-radius: 0 0 0 15px;
}

Esto lo hice porque siempre hago el c贸digo antes de ver el video y luego comparo.

Tarea completada:

Este es mi avance en el proyecto

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>BatataBit</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <header>
        <img src="./assets/imgs/logo.svg" alt="">
        <div class="header--title-container">
            <h1>La pr&oacute;xima revoluci&oacute;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&oacute;n en tiempo real de las casas de cambio y las monedas m谩s importantes del
                    mundo </p>
            </div>
            <section class="main-table-container">
                <div class="main-currency-table" id="table-1">
                    <div class="currency-table-container">
                        <p class="currency-table--title">Monedas</p>
                        <div class="container-arrow--right" id="arrow-right"></div>
                        <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>Etherum</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>
                </div>
                <div class="main-commission-table" id="table-2">
                    <div class="commission-table-container">
                        <p class="commission-table--title">Comisiones</p>
                        <table>
                            <div class="container-arrow--left" id="arrow-left"></div>
                            <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>
            </section>
            <div class="currency-table--date">
                <p><b> Actualizado: 19 JULIO 23:45</b></p>
            </div>
        </section>
    </main>
</body>
<script src="/main.js"></script>

</html>

CSS

/*
1. Posicionamiento
2. Modelo caja (Box model)
3. Tipograf铆a
4. Visuales
5. Otros
*/

:root {
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D4;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --gray: #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 {
    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;
    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% - 115px);
    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);
    min-width: 320px;
}

.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/imgs/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-commission-table {
    display: none;
}

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

.main-commission-table .commission-table--title {
    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(--gray);
    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: 400;
    line-height: 1.7rem;
    color: var(#757575)
}

.currency-table-container .down,
.currency-table-container .up {
    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 {
    background-image: url("./assets/icons/trending-up.svg");
}

.container-arrow--right {
    position: relative;
    top: 50%;
    left: 100%;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-image: url("./assets/icons/arrow_right.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.container-arrow--left {
    display: none;
    position: relative;
    top: 50%;
    right:  10%;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background-image: url("./assets/icons/arrow_left.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

JS

const arrow_right = document.getElementById("arrow-right")
const arrow_left = document.getElementById("arrow-left")
const table_1 = document.getElementById("table-1")
const table_2 = document.getElementById("table-2")
arrow_right.onclick = function () {
    table_1.style.display = "none"
    table_2.style.display = "flex"
    arrow_left.style.display = "block"
}
arrow_left.onclick = function () {
    table_1.style.display = "flex"
    table_2.style.display = "none"
    arrow_right.style.display = "block"
}

Reto completado

.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-comission-table .comission-table--title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}
.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: cover;
    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: cover;
    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;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--warm-black);
}
.comission-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}

Hola como estan? me di cuenta que el profe no alineo el titulo 鈥淢onedas鈥 con el texto de la primer columna de abajo, les dejo como lo hice y como quedo!!


Si a帽ades un padding a la table con respecto a su contenedor y usas ese contenedor para hacer el border-radious de las esquinas te ahorras el proceso de ir esquina por esquina. Al menos yo no he visto problemas

Aqui les dejo el resultado con Grid.

<div class="main-runners-grid">
            <p class="runners-grid--title">Corredoras</p>
            <div class="runners-grid--container">
              <div class="runners-grid">
                <div class="runners up-left"><div class="name">Bitrade</div></div>
                <div class="runners number up-right">$12.96</div>
                <div class="runners name">Bitpreco</div>
                <div class="runners number">$13.07</div>
                <div class="runners name">Novadax</div>
                <div class="runners number">$13.15</div>
                <div class="runners name down-left">Coinext</div>
                <div class="runners number down-right">$14.96</div>
              </div>
            </div>
            <div class="runners-grid--date">
              <p><b>Actualizado:</b> 1 julio 15:30</p>
            </div>
          </div>
/*runners grid*/
.main-runners-grid {
  
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.main-runners-grid .runners-grid--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--bitcoin-orange);
}
.runners-grid--container{
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
 
}
.runners-grid{
  display: grid;
  grid-template-columns: repeat(2, 112px);
  grid-template-rows: repeat(4, 60px);
  width: 100%;
  height: 100%;
  place-content: center;
  gap: 1px 1px;
}
.runners-grid .runners {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  background-color: var(--just-white);
}

.runners-grid .name {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--grey);
  background-color: var(--just-white);
}
.runners-grid .number {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}


.runners-grid .up-left {
  border-radius: 15px 0 0 0;
}
.runners-grid .up-right {
  border-radius: 0 15px 0 0;
}
.runners-grid .down-left {
  border-radius: 0 0 0 15px;
}
.runners-grid .down-right {
  border-radius: 0 0 15px 0;
} 
.runners-grid--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-orange);
  border-radius: 8px;
}
.runners-grid--date p {
  font-size: 1.2rem;
  color: var(--warm-black);
  line-height: 1.5rem;
  font-weight: 300;
}

Yo coloque el c贸digo de los iconos de la siguiente manera.

RETO 1:

HTML

<<table>
                <tr>
                  <td class="table__top-left">Bitcoin</td>
                  <td class="table__top-rigth table__rigth" >$ 1.96 <span class="down"></span> </td>
                </tr>

                <tr>
                  <td>Ethereum</td>
                  <td class="table__rigth">$ 0.07 <span class="up"></span> </td>
                </tr>

                <tr>
                  <td>Ripple</td>
                  <td class="table__rigth">$ 2.15 <span class="down"></span> </td>
                </tr>

                <tr>
                  <td class="table__bottom-left">Stellar</td>
                  <td class="table__bottom-rigth table__rigth">$ 4.96 <span class="down"> </span> </td>
                </tr>
              </table>

CSS

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

![](

++RETO 2: ++

HTML

< <div class="main-commissions-table">
            <p class="commissions-table--tittle">Comisiones</p>
            <div class="commissions-table--container">
              <table>
                <tr>
                  <td class="table__top-left">Bitrade</td>
                  <td class="table__top-rigth table__rigth" >$ 12.96 </td>
                </tr>

                <tr>
                  <td>Bitpreco</td>
                  <td class="table__rigth">$ 13.07</td>
                </tr>

                <tr>
                  <td>Novadax</td>
                  <td class="table__rigth">$ 13.15</td>
                </tr>

                <tr>
                  <td class="table__bottom-left">Coinext</td>
                  <td class="table__bottom-rigth table__rigth">$ 14.96</td>
                </tr>
              </table>
            </div>

          <div class="commissions-table-date">
            <p> <b> Actualizado: 19 Julio 23:48 </b></p>
          </div>
        </div>

CSS

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

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

.currency-table--container, .commissions-table--container{
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 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(--grey);
  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-rigth, .commissions-table--container .table__top-rigth{
  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-rigth, .commissions-table--container .table__bottom-rigth {
  border-radius: 0 0 15px 0;
}

.currency-table--container .table__rigth, .commissions-table--container .table__rigth{
  font-size: 1.4rem;
  font-weight:400;
  line-height: 1.7rem;
  color: #757575;
}
> 

Si me cost贸 un rato, pero creo que lo hice bien 馃槃

Cuando ya estas dominando HTML5 Y CSS3


.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;
    line-height: 1.7rem;
    font-weight: normal;
    color: #757575;
}
.currency-table-container .down{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url('./assets/icon/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/icon/trending-up.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}