Detallando estilos de tabla de monedas

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 “currency” por “commission”. 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 “border-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 ‘por 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');
}

Links de las flechas de subir y bajar:

Subir (Up): https://cdn.pixabay.com/photo/2021/05/02/15/54/arrow-6223915_1280.png

Bajar (Down): https://cdn.pixabay.com/photo/2021/05/02/15/37/red-6223850_1280.png

Que tal buen dia campeones.

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–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 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(–black);
}
.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: “Inter”, sans-serif;
}

.main-currency-table2 .currency-table–title2{
margin-bottom: 5px;
margin-top: 10px;
font-size: 1.4rem;
font-weight: bold;
line-height: 2.3rem;
color: var(–bitcoin-orange);
}
.currency-table–container2{
width: 90%;
min-width: 230px;
max-width:300px;
height: 250px;
margin: 0 auto;
}

.currency-table–container2 table{
width: 100%;
height: 100%;
}
.currency-table–container2 td{
width: 50%;
font-size: 1.3rem;
font-weight: 500;
line-height: 1.4rem;
color: var(–grey);
background-color: var(–just-white);
}

.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-left2{
border-radius: 0 0 0 15px;
}
.currency-table–container2 .table__bottom-right2{
border-radius: 0 0 15px 0;
}

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

HTML
<section class=“main-tables-container2”>
<div class=“main-currency-table2”>
<p class=“currency-table–title2”>Comisiones</p>
</div>
<div class=“currency-table–container2”>
<table>
<tr>
<td class=“table__top-left2”>Bitrade</td>
<td class=“table__top-right 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-right table__right2”>$ 14.96</td>
</tr>
</table>
</div>
<div class=“currency-table–date2”>
<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–container td {
font-family: ‘Montserrat’, 200;
width: 50%;
font-size: 16px;
font-weight: 500px;
line-height: 19px;
color: var(–grey);
background-color: var(–just-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

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

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

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–container.

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