Hice un ligero cambio a las tablas, implementé CSS GRID
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.
Bienvenida al curso
Por qué aprender Responsive Design con Mobile First
Setup inicial
Analizando el diseño: proyecto del curso
El valor de Mobile First
Arquitectura inicial
Assets de nuestro proyecto
Fuentes de nuestro proyecto
Estilos base
Sección de Header
Maquetación del header
Implementando BEM
Uso de linear-gradient
Uso de position para botón flotante
Sección de Intercambios
Estructura base de la sección de intercambio
Imagen de background
Estructura de tabla de monedas
Estilos base de tabla de monedas
Detallando estilos de tabla de monedas
Finalizando estilos de tabla de monedas
Sección de Beneficios
Estructura base de la sección de beneficios
Estilos de la sección de beneficios
Maquetando tarjetas de beneficios
Sección de Planes
Maquetando sección comodín
Estructura de sección de planes
Aplicando estilos a sección de planes
Aplicando estilos a las tarjetas de la sección de planes
Detallando estilos en tarjetas de planes
Aplicando estilos al botón de call to action
Scroll horizontal con CSS
Sección de Footer
Footer
Media Queries
Aplicando media queries
Lighthouse
Análisis con Lighthouse
Próximos pasos
Cierre y próximos pasos
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Diego De Granda
¿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.
.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:
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
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…
Y el scroll y el scroll horizontal???
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
<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>
.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
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.
Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
Conoce nuestros planesTraemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.
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
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…
al parrafo de abajo si le agregamos un <strong> quedaria mejor
<strong>Actualizado</strong>
💻😁 Reto completado:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?