A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Detallando estilos de tabla de monedas

16/31
Recursos

Aportes 119

Preguntas 18

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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

Mi CSS se ve as铆

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

Terminado el reto!!

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

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

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

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

y las posicion茅 con absolute

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

Aqu铆 el c贸digo de js:

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

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

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

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

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


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

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

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

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 鈥榩or que鈥 de cada linea de codigo.
dejas de copiar y actuar por analogia y empiezas a aplicar la logica.

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

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

Reto completado!

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

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

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

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

CSS
/* Tabla Comision Inicio*/

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

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

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

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

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

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

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

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

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

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

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

![](

![](

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

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

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

td{
    background-color: orange !important;
}

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 鈥淢onedas鈥 con el texto de la primer columna de abajo, les dejo como lo hice y como quedo!!


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

Aqui les dejo el resultado con Grid.

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

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


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

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

RETO 1:

HTML

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

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

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

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

CSS

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

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

![](

++RETO 2: ++

HTML

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

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

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

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

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

CSS

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

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

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

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

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

.currency-table--container .table__top-left, .commissions-table--container .table__top-left{
  border-radius: 15px 0 0 0;
}

.currency-table--container .table__top-rigth, .commissions-table--container .table__top-rigth{
  border-radius: 0 15px 0 0;
}

.currency-table--container .table__bottom-left, .commissions-table--container .table__bottom-left{
  border-radius: 0 0 0 15px;
}

.currency-table--container .table__bottom-rigth, .commissions-table--container .table__bottom-rigth {
  border-radius: 0 0 15px 0;
}

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

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

Cuando ya estas dominando HTML5 Y CSS3


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

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

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

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

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

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

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/
鈥揵itcoin-orange:#F7931A;
鈥搒oft-orange:#FFE9D5;
鈥搒econdary-blue:#1A9AF7;
鈥搒oft-blue: #E7F5FF;
鈥搘arm-black: #201E1C;
鈥搘arm-black1: #282623;
鈥揼rey: #BABABA;
鈥搊ff-white: #FAF8F7;
鈥搄ust-white: #FFFFFF;
}

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

html{
font-size: 62.5%;
font-family: 鈥楧M 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: 鈥楶ermanent Marker鈥;
font-size:2.4rem;
font-weight: bold;
line-height:2.6rem;
color: var(鈥搄ust-white);
}
.header__title-container p{
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height:1.8rem;
color: var(鈥搒oft-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: 鈥楶ermanent Marker鈥, cursive;
font-size:1.4rem;
font-weight: bold;
text-decoration: none;
color: var(鈥搘arm-black);
background-color: var(鈥搊ff-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(鈥搊ff-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: 鈥楶ermanent Marker鈥;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(鈥搘arm-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: 鈥淚nter鈥, sans-serif;
}

.main-table-container .table-1{
margin-top: 20px;
display:grid;
justify-content: center;
font-size: 1.4rem;
grid-gap: 20px;
color: var(鈥揼rey);
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(鈥揵itcoin-orange);
}
.main-table-container p{
font-weight: bold;
font-size: 1.6rem;
font-weight: 500;
color: var(鈥揵itcoin-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(鈥搘arm-black1);
background-color: var(鈥搒oft-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.

鈥 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: 鈥淚nter鈥, sans-serif;
}
.main-currency-table .currency-table鈥搕itle{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(鈥揵itcoin-orange);
}
.currency-table鈥揷ontainer {
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.currency-table鈥揷ontainer table {
width: 100%;
height: 100%;
}
.currency-table鈥揷ontainer td {
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(鈥揼rey);
background-color: var(鈥搄ust-white);
}
.currency-table鈥揷ontainer .table__top-left {
border-radius: 15px 0 0 0;
}
.currency-table鈥揷ontainer .table__top-rigth{
border-radius: 0 15px 0 0;
}
.currency-table鈥揷ontainer .table__bottom-left {
border-radius: 0 0 0 15px;
}
.currency-table鈥揷ontainer .table__bottom-right {
border-radius: 0 0 15px 0;
}
.currency-table鈥揷ontainer .table__top-rigth {
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
.currency-table鈥揷ontainer .down {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url(鈥./assets/icons/trending-down.svg鈥);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.currency-table鈥揷ontainer .up {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url(鈥./assets/icons/trending-up.svg鈥);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-currency-table .commissions-table鈥搕itle {
color: var(鈥搒econdary-blue);
}

Tambien se puede colocar los bordados de la siguiente forma.

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

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

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

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

Thanks Diego, it was a good class.