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

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

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

Tomé el curso de GRID y salió! Mu feliz!!

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

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.

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

Reto completado wuujuu

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.

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.

Yo tratando de ver si los bordes se redondearon o no

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

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

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

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.

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

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

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

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

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

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

Tarea completada:

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 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:[email protected];500;700&family=Inter:[email protected];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 “Monedas” 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;
}

Al momento de agregar los iconos, se pueden reciclar los estilos para solamente cambiar el background-image según el modificador de elemento:

Por acá les dejo la segunda tabla:

No te olvides que falta alinear a izquierda el texto de la columna izquierda de la tabla y a derecha el texto de la columna derecha de la tabla.

El diseñador de la página debería tener en cuenta el contraste entre los colores de foreground y background. Por ejemplo el de la tabla es de 1.94:1 cuando como mínimo debería tener 4.5:1.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

mi avance

<!-- Se le pone una clase extra al precio porque si te fijas en el modelo el precio viene con una fuente y color diferente, por eso se le pone otra clase, para poder darle estilo a esa parte de la tabla -->

Reto Finalizado:

Reto completado

Al monent va quedando así.

desafío completado.

![](

A los compañeros que están empezando les recomiendo mucho leer, aprender y usar las seudo clases, nos ayudan un montón.

Hola acá están mis cuadros 🤧

echa la tarea

Les dejo mi código:
=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=z, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap" rel="stylesheet">
    <link href="/style.css" rel="stylesheet">
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">
        <div class="header__title-container">
            <h1>La próxima revolución en el intercambio de criptomonedas</h1>
            <p>Batabit te ayuda a navegar entre los diferentes precios y tendencias</p>
            <a href="" class="header__button">Know our new plans <span></span> </a> <!-- span nos ayuda para agregar iconos dentro de algun form -->
        </div>
    </header>
    <main>
        <section class="main-exchange-container">
            <div class="main-exchange-container__image"></div>
            <div class="main-exchange-container__title">
                <h2>Visibilizamos todas las tasas de cambios</h2>
                <p>Traemos información en tiempo real de las cosas de cambio y las monedas más importantes del mundo</p>
            </div> 
            <section class="main-table-container">
                <h3>Monedas</h3>
                <div class="table-1">
                   <div>Bitrado</div>      <div class="s2">$12.96 <span class="item1"></span></div>
                   <div>Bitprecio</div>    <div class="s2">$13.07 <span class="item2"></span></div>
                   <div>Novadax</div>      <div class="s2">$13.15 <span class="item3"></span></div>
                   <div>Coinext</div>      <div class="s2">$14.96 <span class="item4"></span></div>
                </div>
                <p><strong>Actualizado:</strong> 19 de julio 23:45</p>                
            </section>
        </section>
        <section></section>
        <section></section>
        <section></section>
       
    </main>
    <footer>
        
    </footer>
</body>
</html> ```
=================CSS============

:root {
/colores/
–bitcoin-orange:#F7931A;
–soft-orange:#FFE9D5;
–secondary-blue:#1A9AF7;
–soft-blue: #E7F5FF;
–warm-black: #201E1C;
–warm-black1: #282623;
–grey: #BABABA;
–off-white: #FAF8F7;
–just-white: #FFFFFF;
}

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

html{
font-size: 62.5%;
font-family: ‘DM Sans’, sans-serif;
}

header{
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, #2a109b 16.69%, #1af0f7 100%);
}

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

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

.header__title-container h1{
font-family: ‘Permanent Marker’;
font-size:2.4rem;
font-weight: bold;
line-height:2.6rem;
color: var(–just-white);
}
.header__title-container p{
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height:1.8rem;
color: var(–soft-orange);
}

.header__title-container .header__button {
position: absolute;
left: calc(50% - 118px);
top:270px;
display:block;
margin-top:35px;
padding:15px;
width:229px;
height: 48px;
font-family: ‘Permanent Marker’, cursive;
font-size:1.4rem;
font-weight: bold;
text-decoration: none;
color: var(–warm-black);
background-color: var(–off-white);
/Sombra/
box-shadow: 0px 4px 8px rgba(89,73,30,0.16);
border-radius: 15px;
border:none;

}

.header__button span{
display:inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url("/assets/icons/down-arrow.svg");
}

/* Main*/
/* Main*/
/* Main*/
/* Main*/
/* Main*/
main {
width:100%;
height: auto;
background-color: var(–off-white);
}

.main-exchange-container{
display: flex;
flex-direction: column;
width:100%;
height: auto;
padding-top: 80px;
padding-bottom: 30px;
text-align: center;

}
.main-exchange-container .main-exchange-container__image{
width: 200px;
height: 200px;
justify-self: center;
align-self: center;
margin-bottom: 50px;
background-image: url("/assets/img/Bitcoin.svg");
background-repeat: no-repeat;
background-position:center;
background-size: cover;
}

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

}
.main-exchange-container .main-exchange-container__title h2 {
margin-bottom:30px;
font-family: ‘Permanent Marker’;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(–warm-black);
}
.main-exchange-container .main-exchange-container__title p{
margin-bottom:60px;
font-size:1.4rem;
font-weight: 500;
line-height: 1.6rem;

color: #757575;

}
.main-table-container{
position: relative;
min-width: 288px;
font-family: “Inter”, sans-serif;
}

.main-table-container .table-1{
margin-top: 20px;
display:grid;
justify-content: center;
font-size: 1.4rem;
grid-gap: 20px;
color: var(–grey);
grid-template-columns: 60px 100px;
}

.main-table-container h3{
position: absolute;
top:-15px;
left: calc(50% - 90px);
font-weight: bold;
font-size: 1.8rem;
color: var(–bitcoin-orange);
}
.main-table-container p{
font-weight: bold;
font-size: 1.6rem;
font-weight: 500;
color: var(–bitcoin-orange);
}
.main-table-container .table-1 div{
display: block;
justify-self: start;
align-self: center;
}

.main-table-container .table-1 div:hover{
border-style:solid;
border-color: rgb(212, 196, 196);
}
.item1, .item3, .item4{
display: inline-block;
justify-self: end;
align-self: center;
margin-left: 20px;
width:10px;
height:10px;
background-image: url("/assets/icons/trending-down.svg");
background-size: contain;
background-repeat: no-repeat;
background-position:center;
}

.item2{
display: inline-block;
justify-self: end;
align-self: center;
margin-left: 20px;
width:10px;
height:10px;
background-image: url("/assets/icons/trending-up.svg");
background-size: contain;
background-repeat: no-repeat;
background-position:center;
}

.main-table-container p{
padding-top:7px;
display: inline-block;
margin-top:30px;
width:173px;
height:31px;
font-size:1.2rem;
font-weight: 400;
color: var(–warm-black1);
background-color: var(–soft-orange);
}
.main-table-container strong{
font-weight: 700;
}

Hola PlatziNautas;

Les envío mi solución del reto:

Saludos!

Comparto el codigo en HTML

Y los estilos con CSS Grid y Sass

Yo lo dejaré como tarea pendiente luego de que haga el curso de grid, así tengo una en <table> y otra en grind para mi portfolio.

Asi quedo mi segunda tabla, este es el codigo que hice
HTML

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/styles.css">
    <title>Tables Practice</title>
</head>
<body>
    <header>
        
    </header>
    <main>
        
        <section class="main--table--container">
            <div>
                <h3 class="comisions--table--title">Comisiones</h3>
                <div class="comisions--table--container">
                    <table>
                        <tr>
                            <td class="table__top--right">Bitrade</td>
                            <td class="table__top--left table--right">$12.96</td>
                        </tr>
                        <tr>
                            <td>Bitprecio</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__bottom--right">$14.96</td>
                        </tr>
                    </table>
                    <div class="comisions--table--date">
                        <p> <b>Actualizado:</b>  19 de julio 19:48</p>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>>

CSS

/*
1. Posicionamiento
2. Modelo de caja (Box-model)
3. Tipografia
4. Visuales (Shadow box, border radius)
5. Otros
*/
/*Implementacion de variables*/
:root
{
/* Colores*/
--bitcoin-orange: #F7931A;
--soft-orange: #FFE9D5;
--secondary-blue: #1A9AF7;
--soft-blue: #E7F5FF;
--warm-black: #201E1C;
--black: #282623;
--grey: #BABABA;
--off-white: #FAF8F7;
--just-white: #FFFFFF;

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

html
{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

main
{
    width: 100%;
    min-width: 320px;
    height: auto;
    background-color: var(--off-white);
}

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

.main--table--container .comisions--table--title
{
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 1.8rem;
    font-family: 'DM Sans';
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

.main--table--container .comisions--table--container
{
    width: 90%;
    min-width: 233px;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
}

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

.comisions--table--container td
{
    width: 50%;
    height: auto;
    padding: 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2rem;
    color: var(--grey);
    background-color: var(--just-white);
}

.comisions--table--container .table--right
{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7rem;
    color: #757575;
    padding: 12px 11px;
}

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

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

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

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

.comisions--table--container .comisions--table--date
{
    display: flex;
    width: 100%;
    height: 30px;
    margin-top: 15px;
    justify-content: center;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.45rem;
    color: var(--warm-black);
    background-color: #E7F5FF;
    border-radius: 8px;
}

.comisions--table--container .comisions--table--date p
{
    align-self: center;
    justify-self: center;
}```

Ahí va el reto de estilizar las dos tablas:

HTML:

<section class="main-tables-continer">
                <div class="main-currency-table">
                    <p class="currency-table__title">Currencies</p>
                    <div class="currency-table__container">
                        <table>
                            <tr>
                                <td class="table--top-left">Bitcoin</td>
                                <td class="table--top-right table--right">$1.96 <span class="down"></span></td>
                            </tr>
                            <tr>
                                <td >Ethereum</td>
                                <td class="table--right">$0.07 <span class="up"></span></td>
                            </tr>
                            <tr>
                                <td>Ripple</td>
                                <td class="table--right">$2.15 <span class="down"></span></td>
                            </tr>
                            <tr>
                                <td class="table--bottom-left">Stellar</td>
                                <td class="table--bottom-right table--right">$4.96 <span class="down"></span></td>
                            </tr>
                        </table>
                        <span class="arrow"></span>
                    </div>
                    <div class="currency-table__date">
                        <p> <b>Updated:</b> 19 July 23:45 </p>
                    </div>
                </div>
                <div class="main-commission-table hidden">
                    <p class="commission-table__title">Commissions</p>
                    <div class="commission-table__container">
                        <table>
                            <tr>
                                <td class="table--top-left">Bitrade</td>
                                <td class="table--top-right table--right">$12.96</td>
                            </tr>
                            <tr>
                                <td >Bitpreco</td>
                                <td class="table--right">$13.07</td>
                            </tr>
                            <tr>
                                <td>Novadax</td>
                                <td class="table--right">$13.15</td>
                            </tr>
                            <tr>
                                <td class="table--bottom-left">Coinext</td>
                                <td class="table--bottom-right table--right">$14.96</td>
                            </tr>
                        </table>
                        <span class="arrow"></span>
                    </div>
                    <div class="commission-table__date">
                        <p> <b>Updated:</b> 19 July 23:45 </p>
                    </div>
                </div>
            </section>

CSS:

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

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

.main-currency-table .currency-table__title {
    color: var(--bitcoin-color);
}
.main-commission-table .commission-table__title {
    color: var(--secundary-color);
}

.currency-table__container, .commission-table__container {
    position: relative;
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}

table {
    width: 100%;
    height: 100%;
}

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

.table--top-left {
    border-radius: 15px 0 0 0;
}
.table--top-right {
    border-radius:  0 15px 0 0;
}
.table--bottom-left {
    border-radius:  0 0 0 15px;
}
.table--bottom-right {
    border-radius:  0 0 15px 0;
}

.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-size: cover;
    background-position: center;
}

.currency-table__container .down {
    background-image: url('./assets/icons/trending-down.png');
}
.currency-table__container .up {
    background-image: url('./assets/icons/trending-up.png');
}

.currency-table__date, .commission-table__date {
    width: 173px;
    height: 31px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    border-radius: 8px;

}

.currency-table__date {
    background-color: var(--soft1-color);
}

.commission-table__date {
    background-color: var(--soft2-color);
}

.currency-table__date p, .commission-table__date p{
    color: var(--warm2-dark);
}

.currency-table__container .arrow, .commission-table__container .arrow {
    display: inline-block;
    position: absolute;
    top: calc(50% - 6px);
    width: 8px;
    height: 12px;
}

.main-currency-table .arrow {
    left: 105%;
    background-image: url('./assets/icons/mdi-arrow-right.png');
}
.main-commission-table .arrow {
    left: -5%;
    background-image: url('./assets/icons/mdi-arrow-left.png');
}

/* .hidden {
    display: none;
} */

Aquí dejo el desafío de la clase, lo hice con grid. No hice la parte de el border-radious porque en mi monitor la verdad no se distinguen bien los colores jajaj así que seria hacer algo totalmente a ciegas. Cuando el profesor lo estaba haciendo la vdd yo no vi ninguna diferencia en mi monitor.

codigo css

====================

============= html

Intenté hacer la tabla con HTML pero se me complicó demasiado, intenté con GRID y fue un lujo.

Así le dí estilos:

.table-main{
    width: 196px;
    background-color: white;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-rows: 25%;
    align-items: center;
    border-radius: 5%;
    font-family: 'Inter', sans-serif;
}```

Reto realizado

Asi me quedo la tabla, no les pongo codigo porque ya hay muchos, pero basicamente lo hice renombrendo clases y agregandola con coma a los estilos que ya habia escrito

Listo el reto, intente colocar la columna de texto en el extremo izquierdo con una clase espesifica para cada etiqueta td pero no me funciono, alguna sugerencia?

Me encanta este curso

Otra forma de hacer estos bordes que hace el profe

Seria usar las propiedades top,right,bottom,left que tiene el border radius

y es mucho mas claro y explicito saber a que esquina se le esta aplicando el border.

Gran clase!

Hecho el reto:

<table>
                                <tr>
                                    <td class="table__top-left">Bitcoin</td>
                                    <td class="table__top-right table__right">$1.96 <span class="down"></span></td>
                                </tr>
                                <tr>
                                    <td>Ethereum</td>
                                    <td class="table__right">$0.07 <span class="up"></span></td>
                                </tr>
                                <tr>
                                    <td>Ripple</td>
                                    <td class="table__right">$2.15 <span class="down"></span></td>
                                </tr>
                                <tr>
                                    <td class="table__bottom-left">Stellar <span class="down"></span></td>
                                    <td class="table__bottom-right table__right">$4.96</td>
                                </tr>
                            </table>

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

Es más fácil de lo esperado si se considera que podemos usar las comas en las clases anteriores para no tener que hacerlo dos veces. 😃
![](

Mi estructura html de la segunda tabla

<div class="main-currency-table">
                    <p class="currency-table--title2">Comisiones</p>
                    <div class="currency-table--container">
                        <table>
                            <tr>
                                <td class="table__top-left">Bitrade</td>
                                <td class="table__top-right table__right">$ 12.96</td>
                            </tr>
                            <tr>
                                <td>Bitpreco</td>
                                <td class="table__right">$ 13.07</td>
                            </tr>
                            <tr>
                                <td>Novadax</td>
                                <td class="table__right">$ 13.15</td>
                            </tr>
                            <tr>
                                <td class="table__bottom-left">Coinext</td>
                                <td class="table__bottom-right table__right">$ 14.96</td>
                            </tr>
                        </table>
                    </div>
                    <div class="currency-table--date">
                        <p>
                            <b>Actualizado:</b> 19 Julio 23:48
                        </p>
                    </div>

Reutilice clases y eso hace que el único estilo que tuve que agregar es :

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

para modificar el titulo de la segunda tabla

![](

Porsiacaso ese fondo gris que tiene a modo de borde la tabla se obtiene en el video pasado

A mi me quedanan los iconos de trending line desalineados con el precio. Por si a alguien más le sucedió, lo arreglé con un vertical-align:

.currency-table--container .icon {
    vertical-align: middle;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-left: 1rem;
    background-size: cover;
    background-position: center center;
}

Aquí está mi reto.

…Y aquí está el código CSS

<.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, .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/icon/trending-down1.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-up1.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.currency-table--date p {
  height: 35px;
  padding-top: 8px;
  margin-top: 15px;
  color: var(--warm-black);
  border-width: thin;
  border-radius: 10px;
  background-color: var(--soft-orange);
}
.main-tables-container .comission-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--secondary-blue);
}
.comission-table--date p {
  height: 35px;
  padding-top: 8px;
  margin-top: 15px;
  margin-right: 20px;
  margin-left: 20px;
  color: var(--warm-black);
  border-width: thin;
  border-radius: 10px;
  background-color: var(--sonft-blue);
}> 

Reto cumplido, aún no sé como agregar interacción para que se deslicen las tablas, pero para eso estamos aquí, para aprender 😁

Listo el reto.

Reto realizado

<div class="main-currency-table">
                <p class="commissions-table--title">Comisiones</p>
                <div class="currency-table--container">
                    <table>
                        <tr>   <!-- hace referencia a los rous, que son como las filas que existen en las tablas -->
                            <td class="table__top-left">Bitrade</td>
                            <td class="table__top-right table__right">$12.96</td> <!-- hace referencia a la data que es la informacion que existe adentro de esa fila -->
                        </tr>
                        <tr>   
                         <td>Bitpreco</td>
                         <td class="table__right">$13.07</td> 
                     </tr>
                     <tr>   
                         <td>Novadax</td>
                         <td class="table__right">$13.15</td> 
                     </tr>
                     <tr>   
                         <td class="table__bottom-left">Coinext</td>
                         <td class="table__bottom-right table__right">$14.96</td> 
                     </tr>
                    </table>
                </div>
                <div class="commissions-table--date">
                    <p><b>Actualizado: 19 Julio a las 23:45</b></p>
                </div>
           </section>

Reto cumplido…

.main-currency-table {
width: 70%;
min-width: 235px;
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-rigth{
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__top-rigth {
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-currency-table .commissions-table–title {
color: var(–secondary-blue);
}