No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Finalizando estilos de tabla de monedas

17/32
Recursos

¿Cómo te fue detallando los estilos de tabla de monedas? Seguro lo hiciste genial. Ya casi llegamos al final de esta sección de tablas. ¿Te diste cuenta que sólo nos falta el texto de actualización? Lo más complicado ya ha pasado, así que vamos a ello.

Cómo agregar estilos

  • Primero le damos un ancho de 190px y alto de 30px para que exista el espacio.
  • Lo centramos con margin: 0 auto.
  • Lo separamos de la tabla con margin-top: 15px.
  • Creamos un espaciado interno con padding: 8px.
  • Ajustamos su color de fondo con la variable –soft-orange.
  • Redondeamos los bordes con border-radius: 8px.
  • Para darle estilos al texto llamamos la etiqueta p desde el contenedor de la tabla con .currency-table–date p.
  • Ajustamos su tamaño a 1.2rem y le damos un interlineado de 1.5rem.
  • Por último, le cambiamos el color con la variable –warm-black.
.currency-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Este sería el resultado:
image.png

Y de esta manera, hemos terminado la primera sección del proyecto. ¡Muy bien!

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).

Aportes 361

Preguntas 27

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hice un ligero cambio a las tablas, implementé CSS GRID

Un par de aportes a la clase
Para evitar el desbordamiento del texto podemos usar width: max-content;

Para evitar sobrescribir estilos en la misma clase podemos ahorrarnos lineas haciendo margin: 15px auto 0 en lugar de

margin: 0 auto;
margin-top: 15px;

Y la clase quedaría de la siguiente forma 😄

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

Espero les sirva mi aporte

Acá esta mi versión con perritos de raza! Saludos!

Reto logrado, todo con Puro CSS

Never stop learning 😃

Reto cumplido con CSS GRID.

HTML

          <div class="main-commission-table" >
            <p class="commission-table--title">Comisiones</p>
            <div class="commission-table--container">
              <div class="commission-table--item">
                <p>Bitrade</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 12.96</p>
              </div>
              <div class="commission-table--item">
                <p>Bitpreco</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 13.07</p>
              </div>
              <div class="commission-table--item">
                <p>Novadax</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 13.15</p>
              </div>
              <div class="commission-table--item">
                <p>Coinext</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 14.96</p>
              </div>
            </div>
            <div class="commission-table--date">
              <p> <b>Actualizado:</b>  19 Julio 23:48</p>
            </div>
          </div>

CSS
Como varios de los estilos se repiten no los coloque acá. Esta el CSS que necesite para hacer la tabla.

.commission-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--just-white);
  border-radius: 15px;
}
.commission-table--item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--off-white);
}
.commission-table--item p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--grey);
}
.commission-table--date {
  background-color: var(--soft-blue);
}```

Reto cumplido usando CSS GRID

Poquito pero con mucha ilusión. Mi aporte en scss

<h3></h3>
<main>
    <section class="exchange">
      <div class="exchange-background-img"></div>
      <div class="exchange-title">
        <h2>Visibilizamos todas las tasas de cambio.</h2>
        <p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
      </div>
      <section class="exchange-tables">
        <div class="table-currency">
          <p class="table-currency-title">Monedas</p>
          <div class="table-currency-container">
            <div class="table-currency-top-left">
              <h4>Bitcoin</h4>
            </div>
            <div class="table-currency-top-right">
              <h5>$ 1.96 <span class="currency-down"></span></h5>
            </div>
            <div>
              <h4>Ethereum</h4>
            </div>
            <div>
              <h5>$ 0.07 <span class="currency-up"></span></h5>
            </div>
            <div>
              <h4>Ripple</h4>
            </div>
            <div>
              <h5>$ 2.15 <span class="currency-down"></span></h5>
            </div>
            <div class="table-currency-bottom-left">
              <h4>Stellar</h4>
            </div>
            <div class="table-currency-bottom-right">
              <h5>$ 4.96 <span class="currency-down"></span></h5>
            </div>
          </div>
          <div class="table-currency-date">
            <p><span>Actualizado:</span> 19 de Julio 23:45</p>
          </div>
        </div>
        <div class="table-commissions">
          <p class="table-commissions-title">Comisiones</p>
          <div class="table-commissions-container">
            <div class="table-commissions-top-left">
              <h4>Bitrade</h4>
            </div>
            <div class="table-commissions-top-right">
              <h5>$ 12.96</h5>
            </div>
            <div>
              <h4>Bitpreco</h4>
            </div>
            <div>
              <h5>$ 13.07</h5>
            </div>
            <div>
              <h4>Novadax</h4>
            </div>
            <div>
              <h5>$ 13.15</h5>
            </div>
            <div class="table-commissions-bottom-left">
              <h4>Coinext</h4>
            </div>
            <div class="table-commissions-bottom-right">
              <h5>$ 14.96</h5>
            </div>
          </div>
          <div class="table-commissions-date">
            <p><span>Actualizado:</span> 19 de Julio 23:48</p>
          </div>
        </div>
      </section>
    </section>
  </main>
main{
  background: var(--off-white);
  height: auto;
  width: 100%;

  .exchange {
    padding-top: 24px; 
    height: auto;
    width: 100%;
    text-align: center;

    &-background-img {
      //background: url('../img/bitcoin.svg') center/cover no-repeat; //Shorthand 
      background-image: url('../img/bitcoin.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      margin: 40px auto;
      height: 200px;
      width: 200px;
    }

    &-title {
      width: 90%;
      min-width: 288px;
      max-width: 900px;
      margin: 0 auto;

      h2 {
        color: var(--warm-black);
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 2.6rem;
        margin-bottom: 24px;
      }

      p {
        color: var(--gray-text);
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.6rem;
        margin-bottom: 48px;
      }      
    }

    &-tables {
      width: 90%;
      min-width: 288px;
      max-width: 900px;
      margin: 0 auto; 
      margin-bottom: 24px;

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

        &-title {
          display: grid;
          color: var(--bitcoin-orange);
          font-size: 1.8rem;
          font-weight: bold;
          line-height: 2.344rem;
          margin-bottom: 12px;  
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
        }

        &-container { 
          display: grid;
          justify-content: center;
          grid-template-columns: 100px 95px;
          grid-template-rows: repeat(4, 39px);
          margin: 0 auto; 
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
          justify-content: center; 

          div {
            background-color: var(--just-white); 


            &.table-currency-top-left{
              border-radius: 15px 0 0 0;
            }
  
            &.table-currency-top-right{
              border-radius: 0 15px 0 0;
            }
  
            &.table-currency-bottom-left{
              border-radius: 0 0 0 15px;
            }
  
            &.table-currency-bottom-right{
              border-radius: 0 0 15px 0;
            }  
  
            h4 { 
              display: flex;
              color: #b5b0ac;
              font-size: 1.6rem;
              font-weight: 500;
              line-height: 1.936rem;
              padding: 10px 12px;
              justify-content: start;
            }
            
            h5 {
              color: var(--gray-text);
              font-size: 1.4rem;
              font-weight: 400;
              line-height: 1.694rem;
              padding: 11px 12px;

              span {
                display: inline-block;
                margin-left: 10px;
                height: 15px;
                width: 15px;
                
                &.currency-down{
                  background: url('../icons/trending-down.svg') center/cover no-repeat;
                }

                &.currency-up{
                  background: url('../icons/trending-up.svg') center/cover no-repeat;
                }
              } 
            } 
          } 
        }

        &-date {
          background-color: var(--soft-orange);
          color: var(--warm-black);
          font-size: 1.2rem;
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          line-height: 1.452rem;
          margin: 16px auto;
          padding: 8px;
          width: max-content; 
          border-radius: 8px;
          justify-self: center;
          align-self: center;
          
          span {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.936rem;
          } 
        } 
      }

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

        &-title {
          display: grid;
          color: var(--secondary-blue);
          font-size: 1.8rem;
          font-weight: bold;
          line-height: 2.344rem;
          margin-bottom: 12px;  
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
        } 

        &-container { 
          display: grid;
          justify-content: center;
          grid-template-columns: 100px 95px;
          grid-template-rows: repeat(4, 39px);
          margin: 0 auto; 
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
          justify-content: center; 

          div {
            background-color: var(--just-white); 


            &.table-currency-top-left{
              border-radius: 15px 0 0 0;
            }
  
            &.table-currency-top-right{
              border-radius: 0 15px 0 0;
            }
  
            &.table-currency-bottom-left{
              border-radius: 0 0 0 15px;
            }
  
            &.table-currency-bottom-right{
              border-radius: 0 0 15px 0;
            }  
  
            h4 { 
              display: flex;
              color: #b5b0ac;
              font-size: 1.6rem;
              font-weight: 500;
              line-height: 1.936rem;
              padding: 10px 12px;
              justify-content: start;
            }
            
            h5 {
              color: var(--gray-text);
              font-size: 1.4rem;
              font-weight: 400;
              line-height: 1.694rem;
              padding: 11px 12px; 
              
            } 
          } 
        }

        &-date {
          background-color: var(--soft-blue);
          color: var(--warm-black);
          font-size: 1.2rem;
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          line-height: 1.452rem;
          margin: 16px auto;
          padding: 8px;
          width: max-content; 
          border-radius: 8px;
          justify-self: center;
          align-self: center;
          
          span {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.936rem;
          } 
        } 
      } 
    } 
  } 
}

Resultado del reto, agregue e js para el cambio de tabla a mostrar

Para la segunda tabla reutilice los estilos creados en clase, de la siguiente manra en cada caso donde eran los mismos:

.main-currency-table,
.main-commissions-table{
    
}

Para las flechas agregue lo siguiente abajo de p.currency-table–title // Tambien paara commissions

<div class="arrow-right" id="arrowRight"></div>

Al div de main-currency-table y main-commissions-table les agregue un id para identificarlos en el js
A main-commissions-table le agregue un display:none para que no se muestre al inicio

Codigo JS

const left = document.getElementById('arrowLeft');
const right = document.getElementById('arrowRight');
const tableCurrency =document.getElementById('tableCurrency');
const tableCommissions =document.getElementById('tableCommissions');

left.addEventListener("click", showCurrency);
right.addEventListener("click", showCommissions);

function showCommissions(){
    tableCurrency.style.display = "none";
    tableCommissions.style.display = "block";
}
function showCurrency(){
    tableCurrency.style.display = "block";
    tableCommissions.style.display = "none";
}


Asi quedo mi segunda tabla

<!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:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/styles.css">
    <title>Document</title>
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">

        <div class="header--title--container">
            <h1>La próxima revolución en el intercambio de criptomonedas</h1>
            <p>Batatabit 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>Visualizamos todas las tasas de cambio</h2>
                <p>Traemos informacion en tiempo real de las casas de cambio y las monedas mas importantes del mundo</p>
            </div>
            <section class="main--tables--container">
                <div class="main--currency--table">
                    <p class="currency--table--title">Monedas</p>
                    <div class="currency--table--container">
                        <table>
                            <tr>
                                <td class="table__top-left">Bitcoin</td>
                                <td class="table__top-right table__right">$1.96 <span class="down"></span></td>
                            </tr> 

                            <tr>
                                <td>Etherium</td>
                                <td class="table__right">$0.07 <span class="up"></span></td>
                            </tr> 

                            <tr>
                                <td>Ripple</td>
                                <td class="table__right">$2.17 <span class="down"></span></td>
                            </tr> 

                            <tr>
                                <td class="table__bottom--left">Stellar</td>
                                <td class="table__bottom--right table__right">$4.96 <span class="down"></span></td>
                            </tr> 
                        </table>
                        <div class="currency--table--date">
                            <p>  <b>Actualizado:</b>  19 de julio 23:45 </p>
                        </div>
                    </div>
                </div>

                
                <div class="main--comisions--table">
                    <h2>Comisiones</h2>
                    <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>
/*
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;
}


header
{
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

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

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

.header--title--container h1
{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem; /* Dimension entre lineas */
    color: var(--just-white);
}

.header--title--container p
{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem; /* Dimension entre lineas */
    color: var(--soft-orange);   
}

.header--title--container .header--button
{
    position:absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top:35px ;
    padding: 15px;
    width: 229px;
    height:48px;
    background-color: var(--off-white);
    /*Sombras*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    /*Fuentes*/
    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%;
    min-width: 320px;
    height: auto;
    background-color: var(--off-white);
}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

.currency--table--container .table__right
{
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
} 

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

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

.currency--table--container .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--container .currency--table--date p
{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.45rem;
    color: var(--warm-black);
}

.main--comisions--table
{
    width: 63%;
    min-width: 235px;
    max-width: 300px;
    height: 360px;
    margin: 0 auto;
    font-family: 'Inter',sans-serif;
}

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

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

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

.comisions--table--container td
{
    width: 50%;
    padding: 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 3.7rem;
    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;
    
}

.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
{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:#E7F5FF;
    border-radius: 8px;
}

.comisions--table--container .comisions--table--date p
{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.45rem;
    color: var(--warm-black);
}

Les comparto mi resultado

Le hice unos pequeños cambio, en base al aporte de https://platzi.com/comentario/1877304/

<section class="main-tables-container">
          <div class="main-MC-table">
            <p class="MC-table--title">Monedas</p>
            <div class="MC-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>Riple</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="MC-table--date">
              <p><b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
          </div>
          <div class="main-MC-table">
            <p class="C-table--title">Comisiones</p>
            <div class="MC-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="C-table--date">
              <p><b>Actualizado:</b> 19 Julio 23:48</p>
            </div>
          </div>
        </section>
CSS
.main-MC-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.main-MC-table .MC-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--bitcoin-orange);
}
.MC-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
}
.MC-table--container table {
  width: 100%;
  height: 100%;
}
.MC-table--container td {
  width: 40%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--gray);
  background-color: var(--just-white);
}
.MC-table--container .table__top-left {
  border-radius: 15px 0 0 0;
}
.MC-table--container .table__top-right {
  border-radius: 0 15px 0 0;
}
.MC-table--container .table__bottom-left {
  border-radius: 0 0 0 15px;
}
.MC-table--container .table__bottom-right {
  border-radius: 0 0 15px 0;
}
.MC-table--container .table__right {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}
.MC-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;
}
.MC-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;
}
.MC-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-orange);
  border-radius: 8px;
}
.MC-table--date p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--warm-black);
}
/*Tabla Comision*/
.main-MC-table .C-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--secondary-blue);
}
.C-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-blue);
  border-radius: 8px;
}
.C-table--date p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--warm-black);
}```


Reto cumplido gracias profe!

Hice la segunda tabla pero “dinámica” con JS

Logrado!

Así quedaron mis tablas, le puse par líneas de código adicionales a la tabla del profe porque en Figma está alineado el texto a la izquierda.

Espero les sirva…

.currency-table--container td {
	padding-left: 15px;
    	text-align: left;

En cuanto al código de la segunda tabla, lo que hice fue duplicar la primera y pegarme a los estilos de la anterior para no duplicar códigos, les pongo el ejemplo con lo que les escribí arriba, quedaría así:

.currency-table--container td, .comissions-table--container td {
	padding-left: 15px;
    	text-align: left;

Listo, reto completado 😃
![](

Reto cumplido!

Reto cimplido. tambien le añadi los botones de izquierda y derecha

Para los botones añadi un div extra como hermando de la tabla

          <!-- la tabla -->
          <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>Ethererum</td>
                <td class="table--right">$ 0.07 <span class="up"></span></td>
              </tr>
              <tr>
                <td>Ripple</td>
                <td class="table--right">$ 2.15 <span class="down"></span></td>
              </tr>
              <tr>
                <td class="table--bottom-left">Stellar</td>
                <td class="table--bottom-right table--right">$ 4.96 <span class="down"></span></td>
              </tr>
            </table>
            <div class="currency-table-container__right-button"></div>
          </div>

Y para posicionarlo

/* botton derecha */
.currency-table-container .currency-table-container__right-button {
  width: 7px;
  height: 12px;
  position: absolute;
  top: calc(50% - 6px);
  right: -24px;
  background: url('../assets/icons/right-icon.svg') center/cover no-repeat;
}
/*
  para que se posicione en relacion a la tabla el <div class="currecncy-table-container">
  debe estar posicionado 
 */
.currency-table-container {
  position: relative;
}

Trate de completar el reto de una forma sencilla, por lo cual al los dos div que contiene la fecha de actualización deje la misma clase currency-table–date y agregue otra clase monedas y comisiones dependiendo de a que tabla correspondía y los estilos quedan de esta manera:

.currency-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    border-radius: 8px;
}

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

.monedas{
    background-color: var(--soft-orange);
}

.comisiones{
    background-color: #E7F5FF;;
}

¿Si uso exactamente las mismas clases y solo cambio lo que necesito, en este caso solo el título de la tabla y el cuadro que contiene la fecha?
¿Es una buena práctica?

En chrome queda perfecta la sección de actualizado pero en Safari el texto se desborda. Alguien sabe esto a qué se debe? Creo que puede ser un tema relacionado a la fuente que está tomando Safari pero no estoy seguro…

![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202024-04-12%20155047-ddf692fc-a5e1-4c31-b45a-745e8626dbbb.jpg)![]()
Reto cumplido, cuesta pero poco a poco vamos avanzando!! ![](https://static.platzi.com/media/user_upload/image-9d552db4-1147-4cd0-90dc-e3679230f0ff.jpg)

Y el scroll y el scroll horizontal???

Hice que fuese como un carrusel cuando le das clic al punto se cambia

aquí les dejo el repositorio:
https://github.com/jonniermartinez/BataBit

Casi nunca había usado y estilizado las tablas.

Así me va quedando, por más que se vea igual, estoy optimizando lo que es las clases de css

Reto completado

Bueno como mucho de los estilos se repetían lo que hice fue jugar con las clases en el HTML para no repetir código, no se si es trampa o eficiencia jaja

Tenia poca fe en realizar la segunda tabla pero recordé que es normal y correcto reutilizar código, así que solo reutilice el código que ya había hecho para la primera tabla y agregue clases en el HTML para los componentes de la segunda. Después de algunos errores quedo, nunca en mi vida me había sentido tan programador hasta ahora :3


DOne

He aquí mi reto completado 😄 y lo hice agregando la menor cantidad de líneas de código extras ![](

Aquí mi resultado de las “tablas”, pues como indicó el profe, lo hice con grid, así que use otro método.

Hecho

Segunda tabla terminada con CSS GRID

  • HTML
<div class="main-comision-table">
                    <p class="comision-table--title">Comisiones</p>
                    <div class="comision-table--container">
                        <div class="comision-table--item table__top-left">
                            <p class="comision-table-item--title">Bitrade</p>
                        </div>
                        <div class="comision-table--item table__top-right">
                            <p class="comision-table-item--price">$ 12.96</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--title">Bitpreco</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--price">$ 13.07</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--title">Novadax</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--price">$ 13.15</p>
                        </div>
                        <div class="comision-table--item table__bottom-left">
                            <p class="comision-table-item--title">Coinext</p>
                        </div>
                        <div class="comision-table--item table__bottom-right">
                            <p class="comision-table-item--price">$ 14.96</p>
                        </div>
                    </div>
                    <div class="comision-table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:45 </p>
                    </div>
                </div>

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

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

}

.comision-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 2.6px;
    grid-column-gap: 2px;
}

.comision-table--item{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.comision-table--item p{
    margin: 0;
}

.comision-table--item .comision-table-item--title{
    color: var(--grey);
    font-size: 1.6rem;
}

.comision-table--container .table__top-left{
    border-radius: 15px 0 0 0;
}
.comision-table--container .table__top-right{
    border-radius: 0 15px 0 0;
}
.comision-table--container .table__bottom-left{
    border-radius: 0 0 0 15px;
}
.comision-table--container .table__bottom-right{
    border-radius: 0 0 15px 0;
}

.comision-table--date{
    width: 190px;
    height: 30px;
    margin: 15px auto 0;
    padding: 8px;
    background-color: #E7F5FF;
    border-radius: 8px;
}

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

Reto finalizado.

Estoy haciendo el curso con el uso de preprocesadores para llevar un código más organizado

Reto cumplido

Reto terminado🙌

Cambie un poco el código para que se pareciera mucho mas al modelo de Figma, pero en general es el mismo que hice el profe DeGranda. Tambien me ayudo mucho el comentario de un compañero de ponerle coma a los estilos de la primera tabla y agregar las clases de la segunda tabla, fue super sencillo así

<section class="main-exchange-container">
      <div class="backgroundImg"></div>
      <div class="main-exchange-container--title">
        <h2>Visibilizamos todas las tasas de cambio.</h2>
        <p>
          Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.
        </p>
      </div>
      <section class="main-tables-container">
        <div class="main-currency-table">
          <p class="currency-table--title">Monedas</p>
          <div class="currency-table--container">
            <table>
              <tr>
                <td class="table__top-left">Bitcoin</td>
                <td class="table__top-right table__right">$ 1.96 <span class="down"></span></td>
              </tr>
              <tr>
                <td>Ethereum</td>
                <td class="table__right">$ 0.07 <span class="up"></span></td>
              </tr>
              <tr>
                <td>Ripple</td>
                <td class="table__right">$ 2.15 <span class="down"></span></td>
              </tr>
              <tr>
                <td class="table__bottom-left">Stellar</td>
                <td class="table__bottom-right table__right">$ 4.96 <span class="down"></span></td>
              </tr>
            </table>
          </div>
          <div class="currency-table--date">
            <p><b>Actualizado:</b> 19 de Julio 23:45</p>
          </div>
        </div>
        <div class="main-commission-table">
          <p class="commission-table--title">Comisiones</p>
          <div class="commission-table--container">
            <table>
              <tr>
                <td class="table__top-left">Bitrade</td>
                <td class="table__top-right table__right">$ 12.96 <span class="down"></span></td>
              </tr>
              <tr>
                <td>Bitpreco</td>
                <td class="table__right">$ 13.07</td>
              </tr>
              <tr>
                <td>Novadax</td>
                <td class="table__right">$ 13.15</td>
              </tr>
              <tr>
                <td class="table__bottom-left">Coinext</td>
                <td class="table__bottom-right table__right">$ 14.96 </td>
              </tr>
            </table>
          </div>
          <div class="commission-table--date">
            <p><b>Actualizado:</b> 19 de Julio 23:48</p>
          </div>
        </div>
      </section>
.main-currency-table, .main-commission-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 320px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}
.main-currency-table .currency-table--title, .main-commission-table .commission-table--title {
  text-align: left;
  margin-top: 48px;
  margin-bottom: 15px;
  padding-left: 16px;
  font-family: 'DM Sans', sans-serif;
  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: 200px;
  margin: 0 auto;
}
.currency-table--container table, .commission-table--container table {
  width: 100%;
  height: 100%;
}
.currency-table--container td, .commission-table--container td {
  text-align: left;
  padding: 10px 12px 10px 12px;
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: #B5B0AC;
  background-color: var(--just-white);
}
.currency-table--container .table__top-left, .commission-table--container .table__top-left {
  border-radius: 8px 0 0 0;
}
.currency-table--container .table__bottom-left, .commission-table--container .table__bottom-left {
  border-radius: 0 0 0 8px;
}
.currency-table--container .table__top-right, .commission-table--container .table__top-right {
  border-radius: 0 8px 0 0;
}
.currency-table--container .table__top-left, .commission-table--container .table__top-left {
  border-radius: 0 0 8px 0;
}
.currency-table--container .table__right, .commission-table--container .table__right{
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: #757575;
  ;
}
.currency-table--container .down {
  display: inline-block;
  margin-left: 10px;
  width: 12px;
  height: 12px;
  background: url(./assets/icons/trending-down.svg) center/cover no-repeat;
}
.currency-table--container .up {
  display: inline-block;
  margin-left: 10px;
  width: 12px;
  height: 12px;
  background: url(./assets/icons/trending-up.svg) center/cover no-repeat;
}
.currency-table--date, .commission-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 16px;
  padding: 8px;
  border-radius: 8px;
}
.currency-table--date p, .commission-table--date p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: var(--warm-black);
}
.currency-table--date {
  background-color: var(--soft-orange);
}
.commission-table--date {
  background-color: var(--soft-blue);
}

Mi aporte

Implementadolo con css grid, y feliz que salio, pero aun falta que pueda ser responsivo

Usando Grid layout para las tablas y flex para el contenedor de las tablas, lo hago así, pues aún no se me da lo del overflow

Fue muy facil hacer la otra tabla apliando los estilos

 <section class="main-tables-container">
                <div class="main-comisions-table">
                    <p class="main-comisions--tittle">Comisiones</p>
                    <div class="comisions-table--container">
                        <table>
                            <tr>
                                <td class="table__top-left">Bitrade</td>
                                <td class="table__top-right table__right">$12.96</td>
                            </tr>
                            <tr>
                                <td>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.95</td>
                            </tr>
                        </table>
                    </div>
                    <div class="comisions-table--date">
                        <p><b>Actualizado:</b>19 Julio 23:48</p>
                    </div>
                </div>
            </section>
.main-comisions-table .main-comisions--tittle {
    margin-bottom: 15px;
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: bold;
    color: var(--secundary-blue);
}
.currency-table--container, .comisions-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container table, .comisions-table--container table {
    width: 100%;
    height: 100%;
}
.currency-table--container td, .comisions-table--container td {
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
    background-color: var(--just-white);
}
.currency-table--container .table__top-left, .comisions-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}
.currency-table--container .table__top-right, .comisions-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}
.currency-table--container .table__bottom-left, .comisions-table--container .table__bottom-left {
    border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right, .comisions-table--container .table__bottom-right {
    border-radius: 0 0 15px 0;
}
.currency-table--container .table__right, .comisions-table--container .table__right {
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color: #757575;
}
.currency-table--container .down {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("./Assets/icons/trending-down.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table--container .up {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("./Assets/icons/trending-up.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table--date {
    width: 190px;
    height: 31px;
    padding: 8px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}
.comisions-table--date {
    width: 190px;
    height: 31px;
    padding: 8px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}
.comisions-table--date {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Asi va quedando el proyecto!


Reto cumplido
Yo en lo personal utilice herencia para realizar la segunda tabla y agrege un modificador en css solo para el cambio de los colores de esta manera no duplique codigo.

Listo!!

Como buena práctica, yo recomendaría usar:

margin-left: auto;
margin-right: auto;

en lugar de margin: 0 auto;

A menos que quieran modificar el top y bottom.

RETO COMPLETADO 😃

Reto cumplido implementando css grid:

Para la siguiente tabla use los mismos estilos y lo que hice fue las líneas para cambiar los colores y dejar el texto alineado en la segunda tabla

.main__exchangeContainer-tables div:last-child .main__currency-tableTitle{
    color: var(--secondary-blue);
}

.main__exchangeContainer-tables div:last-child table tr td:last-child {
    text-align: center;
}

.main__exchangeContainer-tables div:last-child .currency__table-date {
    background-color: var(--soft-blue);
}

Yo agregué la otra tabla justo debajo de la amarilla, ahorita que no sé utilizar js la dejaré ahí, igualmente se ve bien 😃

Ahí va la cosa, espero y hagamos el efecto de slide.

La parte del botón como que no me queda centrado, pero lo he intentado:

<<section class="main-tables-container">
            <div class="main-currency-table">
                <p class="currency-table--title comisiones">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 soft-blue">
                    <p> <b> Actualizado:</b> 19 de Julio 23:48</p>
                </div>
            </div>
        </section>> 

La segunda tabla la hice con grid y no quedó 100%igual a la primera.

![](https://static.platzi.com/media/user_upload/Document%20-%20Google%20Chrome%2021_07_2024%206_41_26%20p.m.-0e9bce4c-9235-4118-89f3-9de1a3cca1c6.jpg) unicamente copie el codigo de la primera tabla, para un mejor rederisado del codigo no fue nesesario cambira clases solo dos en especifico.
Listo, terminé de hacer las dos tablas, y con un poquito de JS, pude hacer que sirva el cambio de tabla\\<html lang="en">let flechaDer = document.querySelector('.arrow-right');let comission = document.querySelector('.main-commissions-table');let flechaIzq = document.querySelector('.arrow-left')let currency = document.querySelector('.main-currency-table') flechaDer.addEventListener('click', mostrar);flechaIzq.addEventListener('click', mostrar); function mostrar() {    comission.classList.toggle('inactive');    currency.classList.toggle('inactive')} \<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:wght@400;500;700\&family=Inter:wght@400;500\&display=swap"        rel="stylesheet">    \<link rel="stylesheet" href="./style.css">    \<title>Batata Bit\</title>\</head> \<body>    \<header>        \            \

La próxima revolución en el intercambio de criptomonedas.\

            \

Batatabit te ayuda a navegar entre los diferentes precios y tendencias.\

            \Conoce nuestros planes \\ \        \
    \</header>    \<main>        \<section class="main-exchange-container">            \
\
            \
                \

Visibilizamos todas las tasas de cambio.\

                \

Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.                \

            \
            \<section class="main-tables-container">                \
                    \

Monedas\

                    \
                        \
\
                        \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                        \
Bitcoin\$ 1.96 \\\
Ethereum\$ 0.07 \\\
Ripple\$ 2.15 \\\
Stellar\$ 4.96 \\\
                    \
                    \
\
                        \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                        \
Bitcoin\$ 1.96 \\\
Ethereum\$ 0.07 \\\
Ripple\$ 2.15 \\\
Stellar\$ 4.96 \\\
                    \
                    \
                        \

\Actualizado:\ 19 Julio 23:45\

                    \
                \
                \
                    \

Comisiones\

                    \
                        \
\
                        \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                        \
Bitrade\$ 12.96\
Bitpreco\$ 13.07\
Novadax\$ 13.15\
Coinext\$ 14.96\
                    \
                    \
\
                        \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                            \                                \                                \                            \                        \
Bitrade\$ 12.96\
Bitpreco\$ 13.07\
Novadax\$ 13.15\
Coinext\$ 14.96\
                    \
                    \
                        \

\Actualizado:\ 19 Julio 23:48\

                    \
                \
            \</section>        \</section>        \<section>\</section>        \<section>\</section>        \<section>\</section>    \</main>    \<footer>     \</footer>    \<script src="./main.js">\</script>\</body> \</html> ![](https://prnt.sc/G8Uydz1S0dWn)![](https://prnt.sc/G8Uydz1S0dWn) ![](https://static.platzi.com/media/user_upload/image-14525185-b679-400d-9bf9-f2c90846d7ae.jpg) ![]()![]()![]()![]()![]()![](https://static.platzi.com/media/user_upload/image-774715c5-d600-47c1-b365-124935f757b7.jpg) HTML ```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:wght@400;500;700&family=Inter:wght@400;500&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./style.css"> <title>Batata Bit</title> </head> <body> <header>

La próxima revolución en el intercambio de criptomonedas.

Batatabit te ayuda a navegar entre los diferentes precios y tendencias.

Conoce nuestros planes
</header> <main> <section class="main-exchange-container">

Visibilizamos todas las tasas de cambio.

Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.

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

Monedas

Bitcoin $ 1.96
Ethereum $ 0.07
Ripple $ 2.15
Stellar $ 4.96

Actualizado: 19 Julio 23:45

Comisiones

Bitrade $ 12.96
Bitpreco $ 13.07
Novadax $ 13.15
Coinext $ 14.96

Actualizado: 19 Julio 23:48

</section> </section> <section></section> <section></section> <section></section> </main> <footer> </footer> <script src="./main.js"></script> </body> </html> ```CSS ```css /* Posicionamiento --> static, absolute, relative, fixed Modelo de caja (Box model) --> margin, border, padding, content Tipografía --> tipos, tamaños de fuente, etc Estilos visuales --> box-shadow, border-radius, gradient, etc Otros --> reglas CSS y más */ :root { --bitcoin-orange: #f7931a; --soft-orange: #ffe9d5; --secondary-blue: #1a9af7; --soft-blue: #e7f5ff; --warm-black: #282623; --black: #201e1c; --grey: #bababa; --off-white: #faf8f7; --just-white: #fff; } * { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 62.5%; font-family: 'DM Sans', sans-serif; } .inactive { display: none; } header { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 320px; height: 334px; text-align: center; background: linear-gradient(207.8deg, #201e1c 16.69%, #f7931a 100%); } header img { width: 150px; height: 24px; margin-top: 60px; align-self: center; } .header--title-container { width: 90%; min-width: 288px; max-width: 900px; height: 218px; margin-top: 40px; text-align: center; align-self: center; } .header--title-container h1 { font-size: 2.4rem; font-weight: bold; line-height: 2.6rem; color: var(--just-white); } .header--title-container p { margin-top: 25px; font-size: 1.4rem; font-weight: 500; line-height: 1.8rem; color: var(--soft-orange); } .header--title-container .header--button { position: absolute; top: 270px; left: calc(50% - 118px); 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/img/Bitcoin.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .main-exchange-container h2 { margin-bottom: 30px; font-size: 2.4rem; font-weight: bold; line-height: 2.6rem; color: var(--black); } .main-exchange-container p { margin-bottom: 30px; font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; color: #757575; } /* talbe currency */ .main-currency-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family: 'Inter', sans-serif; } .main-currency-table .currency-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--bitcoin-orange); } .currency-table--container { width: 90%; min-height: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .currency-table--container .arrow-right { position: absolute; right: 10px; top: 962px; width: 24px; height: 24px; cursor: pointer; } .arrow-right img { width: 12px; } .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); } /* Borders table */ .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; } .currency-table--container .table__right { font-size: 1.4rem; font-weight: normal; list-style: 1.7rem; color: #757575; } .currency-table--container .down { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url('./assets/icons/trending-down.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--container .up { display: inline-block; width: 15px; height: 15px; margin-left: 10px; background-image: url('./assets/icons/trending-up.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .currency-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-orange); border-radius: 8px; } .currency-table--date p { font-size: 1.2rem; line-height: 1.5rem; color: var(--warm-black); } /* table commisions */ .main-commissions-table { width: 70%; min-width: 235px; max-width: 500px; height: 360px; margin: 0 auto; font-family: 'Inter', sans-serif; } .main-commissions-table .commissions-table--title { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 2.3rem; color: var(--secondary-blue); } .commissions-table--container { width: 90%; min-height: 230px; max-width: 300px; height: 250px; margin: 0 auto; } .commissions-table--container .arrow-left { position: absolute; left: 10px; top: 962px; width: 24px; height: 24px; } .arrow-left img { width: 12px; } .commissions-table--container table { width: 100%; height: 100%; } .commissions-table--container td { width: 50%; font-size: 1.6rem; font-weight: 500; line-height: 1.9rem; color: var(--grey); background-color: var(--just-white); } .commissions-table--container .table__right { font-size: 1.4rem; font-weight: normal; list-style: 1.7rem; color: #757575; } .commissions-table--date { width: 190px; height: 30px; margin: 0 auto; margin-top: 15px; padding: 8px; background-color: var(--soft-blue); border-radius: 8px; } .commissions-table--date p { font-size: 1.2rem; line-height: 1.5rem; color: var(--warm-black); } ```JS ```js let flechaDer = document.querySelector('.arrow-right'); let comission = document.querySelector('.main-commissions-table'); let flechaIzq = document.querySelector('.arrow-left') let currency = document.querySelector('.main-currency-table') flechaDer.addEventListener('click', mostrar); flechaIzq.addEventListener('click', mostrar); function mostrar() { comission.classList.toggle('inactive'); currency.classList.toggle('inactive') } ```
![](https://static.platzi.com/media/user_upload/Captura-febf325f-26c9-4242-8cc9-b0035b3d7fb2.jpg)
Me costo pero se logro!!! ![](https://static.platzi.com/media/user_upload/tabla-1886deaf-f472-4a91-b4d0-e800702cb06e.jpg)

Genial!

Para mi lo mas importante de lo que me llamo la atención del curso, era agregar el boton de interaccion para cambiar entre una tabla y otra, para que al final te la terminen dejando como reto?? mmmmm si tengo que aprender por mi cuenta, no see para que tome este curso entonces…



Reto logrado, lo mas parecido al diseño :-) ![](https://static.platzi.com/media/user_upload/chrome_zYklsDjpZN-2b058c97-09b4-43e1-b2e2-f00387fb89d4.jpg)

al parrafo de abajo si le agregamos un <strong> quedaria mejor

<strong>Actualizado</strong>

si te queda el texto por fuera del botón, pasa el padding del boton al p y ahí se soluciona.
Clase 17: ¿Cómo te fue [detallando los estilos de tabla de monedas](https://platzi.com/clases/2030-mobile-first/32314-detallando-estilos-de-tabla-de-monedas/)? Seguro lo hiciste genial. Ya casi llegamos al final de esta sección de tablas. ¿Te diste cuenta que sólo nos falta el texto de actualización? Lo más complicado ya ha pasado, así que vamos a ello. ## Cómo agregar estilos * Primero le damos un ancho de ***190px*** y alto de ***30px*** para que exista el espacio. * Lo centramos con ***margin: 0 auto***. * Lo separamos de la tabla con ***margin-top: 15px***. * Creamos un espaciado interno con ***padding: 8px***. * Ajustamos su color de fondo con la variable ***–soft-orange***. * Redondeamos los bordes con ***border-radius: 8px***. * Para darle estilos al texto llamamos la etiqueta p desde el contenedor de la tabla con ***.currency-table–date p***. * Ajustamos su tamaño a ***1.2rem*** y le damos un interlineado de ***1.5rem***. * Por último, le cambiamos el color con la variable ***–warm-black***. `.currency-table--date` { ` width: 190px`; ` height: 30px`; ` margin: 0` auto; ` margin-top: 15px`; ` padding: 8px`; ` background-color: var`(--soft-orange); ` border-radius: 8px`; } `.currency-table--date p` { ` font-size: 1.2rem`; ` line-height: 1.5rem`; ` color: var`(--warm-black); } Este sería el resultado: ![image.png](https://static.platzi.com/media/articlases/Images/image%28206%29.png) Y de esta manera, hemos terminado la primera sección del proyecto. ¡Muy bien!

💻😁 Reto completado:

**No es necesario reinventar, simplemente reutilizar lo aprendido y modificar lo necesario.** ***Es cuestión de crear una estructura ya antes vista y aplicarle estilos y contenido indicados.*** ![](https://static.platzi.com/media/user_upload/tables-33170249-370e-44de-aeef-3c2c7b5133a3.jpg)
![](https://static.platzi.com/media/user_upload/Batatabit-7f07b9cb-ed69-47d8-a7d8-1caacdd00e96.jpg)
Hecho con **Grid**: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-10-19%20120009-cf0df6ea-b669-482c-b548-4e74bae871eb.jpg)

En algunos documentos de MDN web al dia de hoy lastables ya no estan soportadas y tinen los comentarios de que se debe modificar con CSS

asì sigue el proyecto:

          <div class="tabla">
            <h3>Monedas</h3>
            <ul class="main-tabla">
              <li>Bitcoin</li>
              <li>
                $ 1.96
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>

              <li>Etherum</li>
              <li>
                $ 0.07 <img src="./assets/icons/trending-up.svg" alt="" />
              </li>

              <li>Ripple</li>
              <li>
                $ 2.15
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>

              <li>Stellar</li>
              <li>
                $ 4.96
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>
            </ul>

            <div class="actualizado">
              <p><b>actualizado</b> 19 julio 23:45.</p>
            </div>
          </div>

          <div class="tabla-comisiones">
            <h3>Comisiones</h3>
            <ul class="main-tabla">
              <li>Bitrade</li>
              <li>$ 12.96</li>

              <li>Bitprecio</li>
              <li>$ 13.07</li>

              <li>Novadax</li>
              <li>$ 13.15</li>

              <li>Coinext</li>
              <li>$ 14.96</li>
            </ul>

            <div class="actualizado">
              <p><b>actualizado</b> 19 julio 23:45.</p>
            </div>
          </div>

          <span id="flecha-derecha">
            <img src="./assets/icons/right-arrow.svg" alt="flecha derecha" />
          </span>
        </section>

El css:

.main-exchange-contanedor {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-block-start: 80px;
  margin-block-end: 30px;
  margin-inline: auto;
  width: 90%;
  min-width: 280px;
  max-width: 900px;
}
.main-exchange-contanedor figure {
  width: -moz-max-content;
  width: max-content;
  margin-block-end: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-exchange-contanedor figure img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 900px;
  min-width: 280px;
}
.main-exchange-contanedor .main-exchange-containedor--titulo h2 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-block-end: 12px;
}
.main-exchange-contanedor .main-exchange-containedor--titulo p {
  font-size: 1.6rem;
  color: #757575;
  margin-block-end: 8px;
}

.main-tabla-containedor {
  display: flex;
  overflow-x: hidden;
  margin: 0 auto;
  width: 60%;
  min-width: 260px;
  max-width: 460px;
  font-family: "inter", sans-serif;
}
@keyframes irse {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.main-tabla-containedor .tabla h3, .main-tabla-containedor .tabla-comisiones h3 {
  text-align: left;
  margin-block-end: 8px;
  font-size: 2.4rem;
  font-weight: bold;
  color: #f7931a;
}
.main-tabla-containedor .tabla .main-tabla, .main-tabla-containedor .tabla-comisiones .main-tabla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: flex-start;
  width: 100%;
  min-width: 260px;
  max-width: 380px;
  padding: 12px;
  border-radius: 12px;
  background-color: #fff;
}
.main-tabla-containedor .tabla .main-tabla li, .main-tabla-containedor .tabla-comisiones .main-tabla li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 4px 0;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #757575;
  list-style: none;
}
.main-tabla-containedor .tabla .main-tabla li:nth-child(even), .main-tabla-containedor .tabla-comisiones .main-tabla li:nth-child(even) {
  font-weight: 700;
}
.main-tabla-containedor .tabla .main-tabla li .caida, .main-tabla-containedor .tabla-comisiones .main-tabla li .caida {
  display: inline-block;
  background-image: url("./assets/icons/trending-down.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-tabla-containedor .tabla .main-tabla li .subida, .main-tabla-containedor .tabla-comisiones .main-tabla li .subida {
  display: inline-block;
  background-image: url("assets/icons/trending-up.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-tabla-containedor .tabla .actualizado, .main-tabla-containedor .tabla-comisiones .actualizado {
  margin: 12px auto;
  padding: 16px;
  width: min(100%, 26rem);
  border-radius: 12px;
  font-size: 1.2rem;
  background-color: #ffe8d5;
}
@keyframes aparecer {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.main-tabla-containedor .tabla-comisiones h3 {
  color: #53a8f8;
}
.main-tabla-containedor .tabla-comisiones .actualizado {
  background-color: #e7f5ff;
}
.main-tabla-containedor #flecha-derecha {
  position: absolute;
  right: 2.8rem;
  bottom: -30.8rem;
  width: -moz-max-content;
  width: max-content;
  cursor: pointer;
  transition: 0.3s ease;
}
.main-tabla-containedor #flecha-derecha img {
  width: 12px;
}

Y esta vez el javascript:

const move = document.getElementById("flecha-derecha");
const comiciones = document.getElementsByClassName("tabla-comisiones")[0];
const monedas = document.getElementsByClassName("tabla")[0];

let concurrent = 0;

move.addEventListener("click", incrementNumber);

function incrementNumber() {
  if (concurrent === 0) {
    ++concurrent;
    moveRight();
  } else {
    --concurrent;
    moveLeft();
  }
}

function moveRight() {
  monedas.style.removeProperty("animation");

  move.style.right = "none";
  move.style.left = "2rem";
  move.style.transform = "rotate(180deg)";

  comiciones.style.order = 1;
  comiciones.style.animation = "aparecer 0.3s ease-in-out";

  monedas.style.order = 2;
}

function moveLeft() {
  move.style.removeProperty("left");
  move.style.removeProperty("transform");
  comiciones.style.removeProperty("animation");

  comiciones.style.order = 2;
  monedas.style.order = 1;

  monedas.style.animation = "irse 0.3s ease-in-out";
}

Mi resultado

Mi resultado

![](

Reutilice las mismas clases. Asimsimo cree dos clases nuevas agregando las variaciones de la primera tabla.

<!-- codigo HTML-->
    <main>
<!-- codigo anterior de currency-table -->
<!-- nueva tabla para comisiones -->
            <div class="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 colum__right">$12.96 </td>
                        </tr>
                        <tr>
                            <td>Bitpreco</td>
                            <td class="colum__right">$13.07 </td>
                        </tr>
                        <tr>
                            <td>Novadax</td>
                            <td class="colum__right">$13.15 </td>
                        </tr>
                        <tr>
                            <td class="table__bottom-left">Coinext</td>
                            <td class="table__bottom-right colum__right">$14.96 </td>
                        </tr>
                    </table>
                </div>
                <div class="commissions-table--date">
                    <p><b>Actualizado:</b>19 Julio 23:48 </p>
                </div>
            </div>

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

<!-- codigo CSS -->

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

.main-currency-table .currency-table--tittle, .commissions-table .commissions-table--tittle{
    width: 90%;
    /*margin-bottom: 15px;*/
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: left;
    margin:15px auto;
}

.commissions-table .commissions-table--tittle{
    color: var(--secondary-blue);
}

.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: 500px;
    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 .colum__right, .commissions-table--container .colum__right{
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color:#757575;
}

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

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

}

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

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

}

Reto terminado 😃

Hola, comparto mi tabla

Reto completado !! 😁😁

Es la primera vez que utilizo las tablas.

Reto completado!

Aquí dejo las tablas hechas con GRID y un buen uso de BEM para reutilización eficiente del código 😊

Código HTML:


<section class="tabla">
	<h3 class="tabla__heading">Monedas</h3>
        <div class="tabla__contenido">
                    <p class="celda tabla__cripto">Bitcoin</p>
                    <p class="celda tabla__precio">10.12 €<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Ethereum</p>
                    <p class="celda tabla__precio">5.47 €<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-up.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Ripple</p>
                    <p class="celda tabla__precio">2.15 €<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Stellar</p>
                    <p class="celda tabla__precio">1.13 €<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>
                </div>
                <p class="tabla__actualizado"><span class="tabla__actualizado-act">Actualizado: </span>19 Julio 23:45</p>
            </section>

<section class="tabla">
<h3 class="tabla__heading tabla__heading--comisiones">Comisiones</h3>
	<div class="tabla__contenido">
        	<p class="celda celda--2 tabla__cripto">Bitrade</p>
                <p class="celda celda--2 tabla__precio">15.45 €</p>

                <p class="celda celda--2 tabla__cripto">Bitpreco</p>
                <p class="celda celda--2 tabla__precio">13.58 €</p>

                <p class="celda celda--2 tabla__cripto">Novadax</p>
                <p class="celda celda--2 tabla__precio">10.05 €</p>

                <p class="celda celda--2 tabla__cripto">Coinext</p>
                <p class="celda celda--2 tabla__precio">14.93 €</p>
            </div>
            <p class="tabla__actualizado tabla__actualizado--comisiones"><span class="tabla__actualizado-act">Actualizado: </span>19 Julio 23:45</p>
</section>

Código CSS:


/* Tablas */

.tabla {
    width: 60%;
    max-width: 50rem;
    margin: 4rem auto 2rem auto;
    font-family: var(--font-s);
}
.tabla__heading {
    margin-inline-start: 1rem;
    font-size: 1.6rem;
    text-align: left;
    color: var(--primary);
}
.tabla__heading--comisiones {
    color: var(--secondary);
}
.tabla__contenido {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    font-size: 1.4rem;
    background-color: var(--just-light);
    color: var(--light-darker);
}
.celda {
    padding: 1rem;
    border: 1px solid #dcdcdc;
}
.celda:hover {
    background-color: var(--primary-soft);
    cursor: default;
}
.celda--2:hover {
    background-color: var(--secondary-soft);
}
.tabla__cripto {
    text-align: left;
}
.tabla__cripto:nth-child(1) {
    border-top-left-radius: 1rem;
}
.tabla__cripto:nth-child(7) {
    border-bottom-left-radius: 1rem;
}
.tabla__precio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.tabla__precio:nth-child(2) {
    border-top-right-radius: 1rem;
}
.tabla__precio:nth-child(8) {
    border-bottom-right-radius: 1rem;
}
.tabla__actualizado {
    padding-block: 1rem;
    margin: 1.5rem 0 0;
    font-size: 1.2rem;
    background-color: var(--primary-soft);
    border-radius: .8rem;
}
.tabla__actualizado--comisiones {
    background-color: var(--secondary-soft);
}
.tabla__actualizado-act {
    font-weight: bold;
}

tarea.

Reto Tabla Comisiones.

Reto