When el profe pregunta si ya pudistes con la grilla de las anteriores clases… Y no pudistes…
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
Si ya tienes una cuenta,
Iniciar sesión
Estructura base de la sección de beneficios
18/32Recursos
Para empezar, revisemos un poco el diseño en Figma para conocer qué código necesitamos crear.
Análisis de la estructura
Al inicio nos encontramos con un logo flotante que ya aprendimos a posicionarlo con position: absolute. Tenemos algunos otros íconos que podemos almacenar en etiquetas span y varios contenedores con cajas de texto.
La imagen solo toma la primera caja, ya que las siguientes tienen la misma estructura. Mientras que aquí aprenderás a construir todo el diseño de la imagen, te harás cargo de terminar las otras tres cajas. ¡Vamos a nuestro archivo index.html!
Cómo hacer la maquetación
- Abrimos la segunda sección y le damos una clase con base a su contenido. Como detalla lo que es el producto Batatabit, el nombre podría ser main-product-detail.
- Creamos la clase para el contenedor del título principal con product-detail–title.
- Creamos las etiquetas que anteriormente encontramos en el diseño como span, h2, p, section y article.
- Creamos la clase product-detail–batata-logo para la etiqueta span que contendrá nuestro logo.
Dentro del primer artículo:
- La primera etiqueta p será el título de la tarjeta, y el nombre de su clase será product–card-title, con la estructura bloque–elemento.
- La segunda etiqueta p será el cuerpo de la tarjeta, y el nombre de su clase será product–card-body.
- Por último, agregamos el contenido dentro de cada etiqueta de texto.
<section class="main-product-detail">
<span class="product-detail--batata-logo"></span>
<div class="product-detail--title">
<h2>Creamos un producto sin comparación.</h2>
<p>Confiable y diseñado para su uso diario.</p>
</div>
<section class="product-cards--container">
<article class="product-detail--card">
<span class="clock"></span>
<p class="product--card-title">Tiempo real</p>
<p class="product--card-body">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
</article>
</section>
</section>
No te olvides de crear los otros tres actículos para completar la estructura de la segunda sección.
Contribución creada por: José Miguel Veintimilla (Platzi Contributor).
Aportes 239
Preguntas 17
Ordenar por:
excelente y lo que me gusta es que nos dejas retos eso es bueno la verdad soloa si sabremos que aprendemos
ya se que me van a decir niño rata o algo por el estilo PERO ME IMPORTA UN BLEDO
RETO FINALIZADO!
¡reto completado!
Le hice algunos cambios para mejorar la vista.
Hola Compañeros. He logrado hacer el movimiento de las tablas con PURO CSS se puede hacer movimiento por medio de las flechas y también se puede hacer directamente moviendo la tabla hacia los lados. El **scroll **en x lo he ocultado para que se vea mucho mejor. Para que se mueva lentamente le agregué la propiedad scroll-behavior con el valor smooth
Por acá dejo el código que llevo hasta ahora.
<code>
<div class="main-comisions-table">
<p class="comision-table--tittle">Comisiones</p>
<div class="comision-table--container">
<div class="table__top-left">Bitrade</div>
<div class="table__top-right table__right">$ 12.96</div>
<div>Bitpreco</div>
<div class="table__right">$ 13.07</div>
<div>Novadax</div>
<div class="table__right">$ 13.15</div>
<div class="table__bottom-left ">Cointex</div>
<div class="table__bottom-right table__right">$ 14.96</div>
</div>
<div class="comision-table--date">
<p><b>Actualizado:</b> 19 Julio 23:45 </p>
</div>
<code>
.comision-table--container{
display: grid;
grid-template-columns: minmax(100px,150px) minmax(100px,150px);
grid-template-rows: 60px 60px 60px 60px;
gap: 3px;
}
dato: los textos podemos copiarlos desde Figma y pegar en el editor, para no escribirlo todo
Es un poco loca mi idea, y seguro este mal, pero yo cambie la tabla de bitocin por una tabla de store de guitarras. 
Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.
¡Reto completado! Nada más le agregué un box shadow
'section.product-cards--container>article*4.product-detail--card>span+p.product--card-title+p.product--cart-body'
esta seria la abreviacion de emmet para crear las tarjetas y evitar errores de al copiar y pegar
https://code.visualstudio.com/docs/editor/emmet esta es la documentacion
Un pequeño aporte😄
<html>
<p class="product--card-body1">Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
<p class="product--card-body2">Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
<p class="product--card-body3">No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
<p class="product--card-body4">Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
Reto cumplido !!
<div class="main-comission-table">
<p class="comission-table-title">Comisiones</p>
<div>
<table class="comission-table-container">
<tr>
<td class="top-left">Bitrade</td>
<td class="table__right top-right">$ 12.96</td>
</tr>
<tr>
<td>Bitpreco</td>
<td class="table__right">$ 13.07</td>
</tr>
<tr>
<td>Novadax</td>
<td class="table__right">$ 13.15</td>
</tr>
<tr>
<td class="bottom-left">Coinext</td>
<td class="table__right bottom-right">$ 14.96</td>
</tr>
</table>
</div>
<div class="comission-table-date">
<p>
<b>Actualizado: </b> 19 Julio 23:45
</p>
</div>
</div>
.main-comission-table{
width: 70%;
margin: 0 auto;
}
.main-comission-table .comission-table-title{
text-align: left;
margin-left: 5px;
margin-top: 15px;
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--secondary-blue);
}
.comission-table-container{
width: 70%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.comission-table-container td{
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
font-family: "Inter", sans-serif;
color: var(--grey);
background-color: var(--just-white);
}
.comission-table-container .table__right{
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6rem;
color: #757575;
}
.comission-table-container .top-right{
border-radius: 0 15px 0 0;
}
.comission-table-container .top-left{
border-radius: 15px 0 0 0;
}
.comission-table-container .bottom-left{
border-radius: 0 0 0 15px;
}
.comission-table-container .bottom-right{
border-radius: 0 0 15px 0;
}
.comission-table-date{
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 20px;
padding: 8px;
border-radius: 8px;
background-color: var(--soft-blue);
}
.comission-table-date p{
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: 300;
color: var(--warm-black);
}```
:’ )
Anexo el resultado de la tabla comisiones:
Pues… así vamos. Me encanta este curso, pero por alguna razón me he tardado muchísimo en terminarlo, jajajajaja.
Mi intento antes de ver como lo realizan.
fácil solo copie y pegue la otra tabla cambie algunas clases para cambiar el color y eso 😁
Reto Cumplido
Reto completado 😃😉
RETO CUMPLIDO!.
/*
Para buenas prácticas
1. Posicionamiento
2. Modelo de caja (BOX MODEL)
3. Tipografia
4.Visuales
5.Otros
*/
:root {
/*colores*/
--bicoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #201e1c;
--black: #282623;
--grey: #bababa;
--off-white:#faf8f7;
--just-white: #fff;
}
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
font-size: 62.5%;
font-family: 'DM Sans', sans-serif;
}
header{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width:100%;
min-width: 320px;
height:334px;
text-align: center;
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img {
width: 150px;
height: 24px;
margin-top: 60px;
align-self:center;
}
.header--title-container{
width: 90%;
min-width: 288px;
max-width: 900px;
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;
left: calc(50% - 118px);
top:270px;
display: block;
margin-top: 35px;
padding: 15px;
width:229px;
height: 48px;
background-color: var(--off-white);
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(--soft-blue);
}
.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/images/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(--bicoin-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--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);
}
.main-run-table {
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: "Inter",sans-serif;
}
.main-run-table .run-table-title{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color:var(--secondary-blue);
}
.run-table-container{
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.run-table-container table{
width: 100%;
height: 100%;
}
.run-table-container td{
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color:var(--grey);
background-color: var(--just-white);
}
.run-table-container .table__top-left{
border-radius:15px 0 0 0;
}
.run-table-container .table__top-right{
border-radius: 0 15px 0 0 ;
}
.run-table-container .table__bottom-left{
border-radius: 0 0 0 15px;
}
.run-table-container .table__bottom-right{
border-radius: 0 0 15px 0;
}
.run-table-container .table__right {
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
.run-table--date{
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color:#E7F5FF;
border-radius: 8px;
}
.run-table--date p {
font-size: 1.2rem;
line-height: 1.5rem;
color: var(--warm-black);
}
Reto terminado.
.main-commissions-table {
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: "Inter", sans-serif;
}
.main-commissions-table .commisions-table-title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
padding-right: 140px;
color: var(--secundary-blue);
}
.comissions-table-container {
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.comissions-table-container table {
width: 100%;
height: 100%;
}
.comissions-table-container td {
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(--grey);
background-color: var(--just-white);
}
.comissions-table-container .table__top-left {
border-radius: 8px 0 0 0;
}
.comissions-table-container .table__top-right {
border-radius: 0 8px 0 0;
}
.comissions-table-container .table__bottom-left {
border-radius: 0 0 0 8px;
}
.comissions-table-container .table__bottom-right {
border-radius: 0 0 8px 0;
}
.comissions-table-date {
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-blue);
border-radius: 8px;
}
.comissions-table-date p {
font-size: 1.2rem;
line-height: 1.5rem;
color: var(--black);
font-weight: 300;
}
Parte de mi ejercicio con la segunda tabla de la clase anterior
<div class="main-comisions-table">
<p class="comisions-table--title">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>Ethereum</td>
<td class="table__right">$13.07</td>
</tr>
<tr>
<td>Ripple</td>
<td class="table__right">$13.15</td>
</tr>
<tr>
<td class="table__bottom-left">Cointex</td>
<td class="table__bottom-right table__right">$14.96</td>
</tr>
</table>
</div>
<div class="comisions-table--date">
<p><b>Actualizado: 19 de julio 23:45</b></p>
</div>
</div>
.main-currency-table, .main-comisions-table{
width: 70%;
min-width: 235px;
max-width: 500px;
height: 350px;
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);
}
.main-comisions-table .comisions-table--title{
margin-top: 20px;
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
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{
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/assets/icons/down-arrow.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/assets/icons/trending-up.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.currency-table--container .right{
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url('/assets/assets/icons/right-arrow.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;
}
.comisions-table--date{
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-blue);
border-radius: 8px;
}
.currency-table--date p, .comisions-table--date p{
font-size: 1.2rem;
line-height: 1.5rem;
color: var(--warn-black);
}
Este fue mi código para la tabla no sé si haya un mejor manera
HTML:
<div class="main-comision-table">
<p class="comision-table--title">Comisiones</p>
<div class="comision-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="comision-table--date">
<p><b>Actualizado: </b>19 Julio 23:48</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 {
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--secunfary-blue);
}
.comision-table--container {
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.comision-table--container table {
width: 100%;
height: 100%;
}
.comision-table--container td {
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
font-weight: normal;
font-family: 'Inter', sans-serif;
background-color: var(--just-white);
color: var(--grey);
}
.comision-table--container .table__right {
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
.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: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-blue);
border-radius: 8px;
}
.comision-table--date p {
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: 300;
color: var(--warm-black);
}
Trate de hacerlo sin tanta ayuda pero, es dificil coloque los marcadores de up y down como absolutos con relatividad al div de los precios, Use grid, y para los botones para cambiar de tabala tambien use una etiqueta a en modo absoluto por y use el top: calc(50% - .8rem), espero les parezca un poco el diseño.!
CSS
.main-exchange--tables {
position: relative;
width: 70%;
min-width: 25rem;
max-width: 50rem;
/* height: 36rem; */
margin: 0 auto;
font-family: "Inter", "sans-serif";
}
.main-exchange--tables--title {
width: 85%;
margin: 0 auto;
padding-left: 2rem;
margin-bottom: 1.5rem;
min-width: 23rem;
max-width: 30rem;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
text-align: start;
}
.monedas .main-exchange--tables--title {
color: #FF9536;
}
.main-exchange--tables_grid {
display: grid;
width: 85%;
min-width: 20rem;
max-width: 30rem;
height: 15.6rem;
margin: 0 auto;
grid-template-columns: 50% 50%;
margin-bottom: 2rem;
/* Colores */
border-radius: 1rem;
color: var(--gray);
font-size: 1.4rem;
line-height: 1.69rem;
background-color: var(--just-white);
}
.main-exchange--tables div {
border-bottom: .2rem solid var(--off-white);
}
.main-exchange--tables_title {
text-align: start;
font-weight: 500;
padding: 1rem 1.2rem;
border-right: .2rem solid var(--off-white);;
}
.main-exchange--tables_price {
font-weight: 400;
padding: 1rem 1.2rem;
text-align: start;
color: #757575;
position: relative;
}
.main-exchange--tables_price span {
position: absolute;
right: 1.6rem;
top: 1.6rem;
width: 1.6rem;
height: 1rem;
}
.main-exchange--tables_price .arrow-down {
background-image: url('../assets/icons/trending-down.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-exchange--tables_price .arrow-up {
background-image: url('../assets/icons/trending-up.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-exchange--tables_update {
margin-bottom: 3rem;
}
.main-exchange--tables_update a {
text-decoration: none;
color: var(--warm-black);
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: bold;
padding: .8rem;
border-radius: .8rem;
}
.main-exchange--tables_update.monedas a {
background-color: var(--soft-orange);
}
.main-exchange--tables_update a span {
font-weight: normal;
}
.tableMonedas--arrowButton {
position: absolute;
top: calc(50% - .8rem);
width: 1rem;
height: 1.6rem;
right: 0;
background-image: url('../assets/icons/right-arrow.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.comisiones .main-exchange--tables_price {
text-align: center;
}
.comisiones .main-exchange--tables--title {
color: var(--secondary-blue);
}
.main-exchange--tables_update.comisiones a {
background-color: var(--soft-blue);
}
.tableComisiones--arrowButton {
position: absolute;
top: calc(50% - .8rem);
width: 1rem;
height: 1.6rem;
left: 0;
background-image: url('../assets/icons/right-arrow.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transform: rotate(180deg);
}
HTML
<!-- Tabla de Monedas -->
<div class="main-exchange--tables monedas">
<p class="main-exchange--tables--title">Monedas</p>
<div class="main-exchange--tables_grid">
<div class="main-exchange--tables_title">
<p>Bitcoin</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 1.96<span class="arrow-down"></span></p>
</div>
<div class="main-exchange--tables_title">
<p>Ethereum</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 0.07<span class="arrow-up"></span></p>
</div>
<div class="main-exchange--tables_title">
<p>Ripple</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 2.15<span class="arrow-down"></span></p>
</div>
<div class="main-exchange--tables_title">
<p>Stellar</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 4.96<span class="arrow-down"></span></p>
</div>
</div>
<div class="main-exchange--tables_update monedas">
<a href="">Actualizado: <span>18 de Julio 19:02</span></a>
</div>
<a href="" class="tableMonedas--arrowButton"></a>
</div>
<!-- Tabla de Comisiones -->
<div class="main-exchange--tables comisiones">
<p class="main-exchange--tables--title comisiones">Comisiones</p>
<div class="main-exchange--tables_grid">
<div class="main-exchange--tables_title">
<p>Bitrade</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 12.96</p>
</div>
<div class="main-exchange--tables_title">
<p>Bitpreco</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 13.07</p>
</div>
<div class="main-exchange--tables_title">
<p>Novadax</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 13.15</p>
</div>
<div class="main-exchange--tables_title">
<p>Coinext</p>
</div>
<div class="main-exchange--tables_price">
<p>$ 14.96</p>
</div>
</div>
<div class="main-exchange--tables_update comisiones">
<a href="">Actualizado: <span>18 de Julio 19:02</span></a>
</div>
<a href="" class="tableComisiones--arrowButton"></a>
</div>
Reto terminado!
Para darle estilos a la tabla, solo agregue las clases de la tabla en los estilos que ya tenia de la primera. Solo tuve que cambiar los colores con mas especificidad
Lo intente agregar la otra tabla pero no soy capaz poner el carrusel para arrastrar el contenido de las tablas
Este es el codigo emmet para generar toda la seccion de cartas con 1 click, solamente requieren cambiar la clase “item” de cada span por su respectivo item:
section.product-card–container>article.product-detail–card*4>span.item+p.product-card-title+p.product-card-body
Aquí les dejo el código que hice para resolver el reto de crear la otra tabla. Recuerden que usando la coma “,” pueden incluir en los estilos a una clase distinta 😉
HTML
<section class="main__exchange--container">
<div class="background__img"></div>
<div class="main__exchange--container-title">
<h2>Visibilizamos todas las tasas de cambio.</h2>
<p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
</div>
<section class="main__tables--container">
<div class="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 Julio 23:45</p>
</div>
</div>
<div class="main__commissions--table">
<p class="commissions__table--title">Comisiones</p>
<div class="commissions__table--container">
<table>
<tr>
<td class="table__top--left">Bitrade</td>
<td class="table__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="commissions__table--date">
<p><b>Actualizado:</b> 19 Julio 23:48</p>
</div>
</div>
</section>
</section>
CSS
.main__exchange--container{
width: 100%;
height: auto;
padding-top: 80px;
padding-bottom: 30px;
text-align: center;
}
.main__exchange--container-title{
width: 90%;
min-width: 288px;
max-width: 900px;
margin: 0 auto;
}
.background__img{
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-title h2{
margin-bottom: 30px;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--black);
}
.main__exchange--container-title p{
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6rem;
color: #757575;
}
.main__currency--table, .main__commissions--table{
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: "Inter", sans-serif;
}
.main__currency--table .currency__table--title{
margin-bottom: 15px;
margin-left: 18px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--bitcoin-orange);
text-align: left;
}
.main__commissions--table .commissions__table--title{
margin-bottom: 15px;
margin-left: 18px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--secondary-blue);
text-align: left;
}
.currency__table--container, .commissions__table--container{
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: auto;
}
.currency__table--container table, .commissions__table--container table{
width: 100%;
height: 100%;
}
.currency__table--container td, .commissions__table--container td{
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(--gray);
background-color: var(--just-white);
}
.currency__table--container .table__top--left, .commissions__table--container .table__top--left{
border-radius: 15px 0 0 0;
}
.currency__table--container .table__top--right, .commissions__table--container .table__top--right{
border-radius: 0 15px 0 0;
}
.currency__table--container .table__bottom--left, .commissions__table--container .table__bottom--left{
border-radius: 0 0 0 15px;
}
.currency__table--container .table__bottom--right, .commissions__table--container .table__bottom--right{
border-radius: 0 0 15px 0;
}
.currency__table--container .table__right, .commissions__table--container .table__right{
font-size: 1.4rem;
font-weight: 500;
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: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-orange);
border-radius: 8px;
}
.commissions__table--date{
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: #E7F5FF;
border-radius: 8px;
}
.currency__table--date p, .commissions__table--date p{
font-size: 1.2rem;
line-height: 1.5rem;
color: var(--warm-black);
}
Así va quedando con un poco de diseño personal
Aquí comparto mi resultado (mi paleta de colores es diferente):
Listo! reto cumplido
Clase 18: Para empezar, revisemos un poco el diseño en Figma para conocer qué código necesitamos crear.
## Análisis de la estructura
Al inicio nos encontramos con un logo flotante que ya aprendimos a posicionarlo con ***position: absolute***. Tenemos algunos otros íconos que podemos almacenar en etiquetas span y varios contenedores con cajas de texto.
La imagen solo toma la primera caja, ya que las siguientes tienen la misma estructura. Mientras que aquí aprenderás a construir todo el diseño de la imagen, te harás cargo de terminar las otras tres cajas. ¡Vamos a nuestro archivo ***index.html***!
## Cómo hacer la maquetación
* Abrimos la segunda sección y le damos una clase con base a su contenido. Como detalla lo que es el producto Batatabit, el nombre podría ser ***main-product-detail***.
* Creamos la clase para el contenedor del título principal con ***product-detail–title***.
* Creamos las etiquetas que anteriormente encontramos en el diseño como ***span***, ***h2***, ***p***, ***section*** y ***article***.
* Creamos la clase ***product-detail–batata-logo*** para la etiqueta span que contendrá nuestro logo.
Dentro del primer artículo:
* La primera etiqueta ***p*** será el título de la tarjeta, y el nombre de su clase será ***product–card-title***, con la estructura bloque–elemento.
* La segunda etiqueta ***p*** será el cuerpo de la tarjeta, y el nombre de su clase será ***product–card-body***.
* Por último, agregamos el contenido dentro de cada etiqueta de texto.
` <section class="main-product-detail">`
` `
`
`
`
`
` <section class="product-cards--container">`
` <article class="product-detail--card">`
` `
` Creamos un producto sin comparación.
` `Confiable y diseñado para su uso diario.
` `Tiempo real
` `Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.
` ` </article>` ` </section>` ` </section>` No te olvides de crear los otros tres actículos para completar la estructura de la segunda sección.
Hecho con **Grid:**
Lo hice igual solo que no me gaste en poner las palabras iguales
es poco pero es trabajo honesto
reto terminado
reto completado
Mi resultado
RESULTADO:
HTML
CSS
para que el icono me quedara flotante tuve que poner position relative en la section , de lo contrario se iva para el encabezado
Esta es la estructura que utiliza para las tablas, lo hice con GRID
<div class="main-currency-table">
<h3 class="main-currency-table__title">Monedas</h3>
<div class="table">
<div>
<p class="table__top-rigth">Bitcoin</p>
<div class="table__left-container">
<p>$1.96</p>
<div class="table__icon-container">
<img src="./assets/icons/trending-down.svg" alt="" />
</div>
</div>
</div>
</div>
Y estos los estilos
.main-tables-container {
width: 224px;
margin: 0 auto;
height: auto;
margin-bottom: 30px;
}
.main-currency-table__title {
font-size: 1.8rem;
color: var(--bitcoin-orange);
text-align: left;
margin-bottom: 10px;
}
.main-currency-table p {
margin: 15px 12px;
}
.table {
background-color: var(--just-white);
box-shadow: 4px 4px 10px 8px rgba(231, 231, 231, 0.16),
-4px -4px 10px 8px rgba(231, 231, 231, 0.16);
border-radius: 8px;
margin-bottom: 30px;
}
.table > div {
display: grid;
grid-template-columns: 3fr 2fr;
text-align: left;
border-bottom: 2px solid #ebebeb;
}
.table > div:last-child {
border-bottom: none;
}
.table .table__top-rigth{
color: var(--warm-black);
margin: 15px 12px;
font-size: 1.4rem;
}
.table__left-container {
display: flex;
justify-content: flex-start;
border-left: 2px solid #ebebeb;
}
.table__left-container p{
font-size: 1.4rem;
color: #757575;
}
.table__icon-container {
display: grid;
place-content: center;
}
.table__icon-container img {
scale: 1.2;
}
.table__update {
width: 90%;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 1.2rem;
padding: 8px;
border-radius: 10px;
background-color: var(--soft-orange);
margin-bottom: 30px;
color: var(--black);
}
.table__update span {
font-weight: bolder;
}
@media screen and (min-width: 349px) {
.main-tables-container {
width: 350px;
}
.table__left-container {
justify-content: space-evenly;
}
}
Si lo logre 😃 aunque intente hacer el slider pero no me salio!!
HTML:
<div class="main-commission-table">
<p class="commission-table__title">Comisiones</p>
<div class="commission-table--container">
<div class="div1"> <p>Bitrade</p> </div>
<div class="div2"> <p>$ 12.96</p> </div>
<div class="div3"> <p>Bitpreco</p> </div>
<div class="div4"> <p>$ 13.07</p> </div>
<div class="div5"> <p>Novadax</p> </div>
<div class="div6"> <p>$ 13.15</p> </div>
<div class="div7"> <p>Coinext</p> </div>
<div class="div8"> <p>$ 14.96</p> </div>
</div>
<div class="commission-table--date">
<p> <b>Actualizado: </b><span class="current-date"></span></span></p>
</div>
</div>
CSS:
.main-commission-table {
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: "Inter", "sans.serif";
}
.main-commission-table .commission-table__title{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--secondary-blue);
}
.commission-table--container {
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.commission-table--container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 2px;
grid-row-gap: 2px;
background-color: var(--off-white);
}
.commission-table--container div {
display: flex;
justify-content: center;
align-items: center;
}
.commission-table--container div p {
margin: 0;
}
.commission-table--date{
width: 200px;
height: 31px;
margin: 15px auto 0;
padding-top: 7px;
background-color: var(--soft-blue);
border-radius: 8px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; background-color: var(--just-white); border-radius: 15px 0 0 0;}
.div2 { grid-area: 1 / 2 / 2 / 3; background-color: var(--just-white); border-radius: 0 15px 0 0;}
.div3 { grid-area: 2 / 1 / 3 / 2; background-color: var(--just-white);}
.div4 { grid-area: 2 / 2 / 3 / 3; background-color: var(--just-white);}
.div5 { grid-area: 3 / 1 / 4 / 2; background-color: var(--just-white);}
.div6 { grid-area: 3 / 2 / 4 / 3; background-color: var(--just-white);}
.div7 { grid-area: 4 / 1 / 5 / 2; background-color: var(--just-white); border-radius: 0 0 0 15px;}
.div8 { grid-area: 4 / 2 / 5 / 3; background-color: var(--just-white); border-radius: 0 0 15px 0;}
captura:
Reto Terminado…
Reto aceptado
Parte del codigo
<section class="main-exchange--table-container">
<div class="main-exchange--table">
<p class="main-exchange--table-title">Monedas</p>
<div class="main-exchange--table-grid">
<div class="main-exchange--table-grid-label">Bitcoin</div>
<div class="main-exchange--table-grid-value">$1.96 <span class="icon-down"></span></div>
<div class="main-exchange--table-grid-label">Ethereum</div>
<div class="main-exchange--table-grid-value">$0.07 <span class="icon-up"></span></div>
<div class="main-exchange--table-grid-label">Ripple </div>
<div class="main-exchange--table-grid-value">$2.15 <span class="icon-down"></span></div>
<div class="main-exchange--table-grid-label">Stellar </div>
<div class="main-exchange--table-grid-value">$4.96 <span class="icon-down"></span></div>
</div>
<div class="main-exchange--currency-update">
<p><b>Actualizado:</b> 19 Julio 23:45</p>
</div>
</div>
<div class="main-exchange--table">
<p class="main-exchange--table-title main-exchange--table-title__blue">Comisiones</p>
<div class="main-exchange--table-grid">
<div class="main-exchange--table-grid-label">Bitrade</div>
<div class="main-exchange--table-grid-value">$ 12.96</div>
<div class="main-exchange--table-grid-label">Bitpreco</div>
<div class="main-exchange--table-grid-value">$ 13.07</div>
<div class="main-exchange--table-grid-label">Novadax</div>
<div class="main-exchange--table-grid-value">$ 13.15</div>
<div class="main-exchange--table-grid-label">Coinext</div>
<div class="main-exchange--table-grid-value">$ 14.96</div>
</div>
<div class="main-exchange--currency-update main-exchange--currency-update__soft-blue">
<p><b>Actualizado:</b> 19 Julio 23:48</p>
</div>
</div>
</section>
Me parece genial todo el conocimiento que comparte el profesor y todo lo que estoy aprendiendo.
Reto cumplido
Aproveché en repetir clases para los demás <section> incluido el span de la imagen, que lo único que tiene diferente es una clase adicional donde específico la imagen que llevará…
Hola, para las flechas laterales de la tabla usé el siguiente código:
HTML
<div>
<img class="arrow__left" src="./assets/icons/right-arrow.svg" alt="">
</div>
<div>
<img class="arrow__right" src="./assets/icons/right-arrow.svg" alt="">
</div>
CSS
.main-tables-container {
display: flex;
align-items: center;
}
.main-tables-container .arrow__right {
margin-right: 20px;
}
.main-tables-container .arrow__left {
margin-left: 20px;
transform: scaleX(-1);
}
Con los retos nos ayuda a poner en práctica lo aprendido, excelente.
todo me salio bien lo que no he podido es separarla
Asi fue mi resultado:
📢📢 AVISO IMPORTANTE ❗❗
Mira el siguiente tutorial para acceder al resumen visual de la clase 📗
Reto completado:
Me va quedando asi:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Bata Bit</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 te ayuda a navegar entre los diferentes precios y tendencias.</p>
<a class="header--button" href="">Conoce Nuestros Planes <span></span></a>
</div>
</header>
<main>
<section class="main-exchange-container">
<div class="backgroundImg">
<img src="" alt="">
</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-exchange-container__table--container">
<h3>Monedas</h3>
<li class="contenedor-item">
<p class="item">Bitcoin</p>
</li>
<li class="contenedor-item">
<p class="item">$ 1.96<span class="down"></span></p>
</li>
<li class="contenedor-item">
<p class="item">Ethereum</p>
</li>
<li class="contenedor-item">
<p class="item">$ 0.07<span class="up"></span></p>
</li>
<li class="contenedor-item">
<p class="item">Ripple</p>
</li>
<li class="contenedor-item">
<p class="item">$ 2.15<span class="down"></span></p>
</li>
<li class="contenedor-item">
<p class="item">Stellar</p>
</li>
<li class="contenedor-item">
<p class="item">$ 4.96<span class="down"></span></p>
</li>
<div class="currency-table--date">
<p><span>Actualizado:</span> 9 Octubre 09:45</p>
</div>
</section>
<section class="main-commissions-container__table--container">
<h3>Comisiones</h3>
<li class="contenedor-item">
<p class="item">Bitrade</p>
</li>
<li class="contenedor-item">
<p class="item">$ 12.96</p>
</li>
<li class="contenedor-item">
<p class="item">Bitpreco</p>
</li>
<li class="contenedor-item">
<p class="item">$ 13.07</p>
</li>
<li class="contenedor-item">
<p class="item">Novadax</p>
</li>
<li class="contenedor-item">
<p class="item">$ 13.15</p>
</li>
<li class="contenedor-item">
<p class="item">Coinext</p>
</li>
<li class="contenedor-item">
<p class="item">$ 14.96</p>
</li>
<div class="commissions-table--date">
<p><span>Actualizado:</span> 9 Octubre 09:45</p>
</div>
</section>
</section>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
CSS
/*
1. Posicionamiento
2. Modelo caja (Bos model)
3. Tipografia
4. Visuales
5. Otros
*/
:root {
/*Colores*/
--bitcoin-orange: #F7931A;
--soft-orange: #FFE9D5;
--secondary-blue: #1A9AF7;
--soft-blue: #E7F5FF;
--warm-black: #282623;
--black: #201E1C;
--grey: #BABABA;
--off-white: #FAF8F7;
--just-white: #FFFFFF;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: 'DM Sans', sans-serif;
}
header {
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 295px;
text-align: center;
}
header img {
width: 151px;
height: 24px;
margin-top: 38px;
align-self: center;
}
.header--title-container {
width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 32px;
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: 2.4rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(--soft-orange);
}
.header--title-container .header--button {
position: absolute;
left: calc(50% - 117px);
top: 231px;
display: block;
margin-top: 32px;
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: 4px;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: var(--black);
}
.header--button span {
display: inline-block;
width: 12px;
height: 7.41px;
margin-left: 10px;
background-image: url('./assets/icons/down-arrow.svg');
}
main {
width: 100%;
height: auto;
background-color: var(--off-white);
}
.main-exchange-container {
width: 100%;
height: auto;
padding-top: 59px;
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: 195px;
height: 195px;
margin: 0 auto;
margin-bottom: 40px;
background-image: url('./assets/img/Bitcoin.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-exchange-container h2 {
margin-bottom: 24px;
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-exchange-container__table--container, .main-commissions-container__table--container {
display: grid;
grid-template-columns: 101px 95px;
grid-auto-rows: 39px;
place-content: center;
text-align: left;
list-style: none;
gap: 1px;
font-family: "Inter", sans-serif;
}
.main-commissions-container__table--container {
margin-top: 30px;
}
.contenedor-item {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 35px;
grid-template-areas:
". a a a a a a"
". a a a a a a";
box-shadow: 0px 8px 8px rgba(89, 73, 30, 0.16);
}
.item {
grid-area: a;
align-self: center;
}
.main-exchange-container__table--container h3 {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 1.8rem;
font-weight: 700;
line-height: 23px;
color: var(--bitcoin-orange);
grid-column: 1 / -1;
margin-bottom: 15px;
}
.main-commissions-container__table--container h3 {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 1.8rem;
font-weight: 700;
line-height: 23px;
color: #1A9AF7;
grid-column: 1 / -1;
margin-bottom: 15px;
}
.main-exchange-container__table--container li:nth-child(2n), .main-commissions-container__table--container li:nth-child(2n) {
font-size: 1.6rem;
font-weight: 500;
color: #B5B0AC;
/* text-align: center; */
background-color: var(--just-white);
/* border: 1px solid var(--grey); */
}
.main-exchange-container__table--container li:nth-child(2n+1), .main-commissions-container__table--container li:nth-child(2n+1) {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6rem;
/* text-align: center; */
color: #757575;
background-color: var(--just-white);
/* border: 1px solid var(--grey); */
}
.main-exchange-container__table--container li:nth-child(2), .main-commissions-container__table--container li:nth-child(2) {
border-radius: 8px 0 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+3), .main-commissions-container__table--container li:nth-last-child(-n+3) {
border-radius: 0 0 0 8px;
}
.main-exchange-container__table--container li:nth-child(3), .main-commissions-container__table--container li:nth-child(3) {
border-radius: 0 8px 0 0;
}
.main-exchange-container__table--container li:nth-last-child(-n+2), .main-commissions-container__table--container li:nth-last-child(-n+2) {
border-radius: 0 0 8px 0;
}
.main-exchange-container__table--container .down {
display: inline-block;
background-image: url('./assets/icons/trending-down.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 12px;
height: 12px;
margin-left: 10px;
}
.main-exchange-container__table--container .up {
display: inline-block;
background-image: url('./assets/icons/trending-up.svg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 12px;
height: 12px;
margin-left: 10px;
}
.main-exchange-container .main-exchange-container__table--container .currency-table--date {
margin: 0 auto;
margin-top: 16px;
grid-column: 1 / -1;
width: 177px;
height: 31px;
padding: 6px 1px;
text-align: center;
justify-self: center;
background-color: var(--soft-orange);
border-radius: 8px;
}
.main-exchange-container .main-commissions-container__table--container .commissions-table--date {
margin: 0 auto;
margin-top: 16px;
grid-column: 1 / -1;
width: 177px;
height: 31px;
padding: 6px 1px;
text-align: center;
justify-self: center;
background-color: #E7F5FF;
;
border-radius: 8px;
}
.currency-table--date p, .commissions-table--date p {
font-size: 1.1rem;
font-weight: 300;
color: var(--warm-black);
}
.currency-table--date span {
font-weight: bold;
}
Asi me quedo la otra tabla
Challenge Accepted!
Asi quedo hasta ahora mi proyecto:
no pude grabar en gif y todavia no hice el curso de github para poder compartir bien los resultados. proximamento ire compartiendo todo. no use grid, solo flex y le saque la barra de scroll para q no se vea feo
<!-- SECTION BENEFITS -->
<section class="main-product-detail">
<span></span>
<!-- TEXT -->
<div>
<h2>Lorem ipsum dolor sit amet consectetur.</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<!-- CARDS CONTENT -->
<section class="product-cards--container">
<article class="product-detail--card">
<span class="clock"></span>
<!-- bloque-elemento -> titulo de tarjeta -->
<p class="product--card-title">Lorem ipsum dolor sit amet.</p>
<p class="product--card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Explicabo accusamus, illo odit maiores ut assumenda.</p>
</article>
</section>
</section>
Aqui esta lo que yo logré hacer con las tablas, con humildad jejeje
Reto: Hecho en su mayoria con CSS Flexbox
.
.
.
Img:
.
;
line-height: 2.4rem;
padding-left: 2rem;
}
.main-comissions-table .comissions-table--title {
color: var(--secondary-blue);
}
.currency-table--container, .comissions-table--container {
background-color: var(--just-white);
border-radius: 1rem;
}
.currency-table--container table, .comissions-table--container table {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.currency-table--container tr, .comissions-table--container tr {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.currency-table--container td, .comissions-table--container td {
width: 50%;
height: 25%;
font-size: 1.6rem;
font-weight: 300;
padding: 1rem;
color: var(--grey);
display: flex;
justify-content: space-between;
align-items: baseline;
border: 0.001rem solid var(--off-white);
}
.comissions-table--container table tr .table__right {
display: flex;
justify-content: flex-end;
}
.currency-table--container td .up{
background-image: url('./assets/icons/trending-up.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 1.4rem;
width: 1.4rem;
}
.currency-table--container td .down {
background-image: url('./assets/icons/trending-down.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 1.4rem;
width: 1.4rem;
}
.currency-table--container td:first-of-type, .comissions-table--container td:first-of-type {
font-weight: 500;
text-align: left;
color: var(--soft-grey);
padding-right: 1rem;
}
.main-currency-table .currency-table--date {
background-color: var(--soft-orange);
}
.main-comissions-table .comissions-table--date {
background-color: var(--soft-blue);
}
.main-currency-table .currency-table--date, .main-comissions-table .comissions-table--date {
width: fit-content;
padding: 0.8rem;
border-radius: 0.72rem;
align-self: center;
}
Super Vamos Por mas…
Este es mi resultado con las tablas, no lo hice con grid pero si pude hacer la transición (: (más detalles de como hacerlo en el comentario de la clase pasada)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<img src="./assets/img/logo.svg" alt="">
<div class="header--tittle--container">
<h1>La próxima revolución en el intercambio de criptomonedas.</h1>
<p>
Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
<a href="" class="header--button">Conoce nuestros planes <span></span></a>
</div>
</header>
<main></main>
<section class="main-exchange-container">
<div class="backgroundImg"></div>
<div class="main-exchange-conatainer--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--tittle">Monedas</p>
<div class="currency-table--container">
<table>
<tr>
<td class="table__top-left">Bitcoin</td>
<td class="table__top-righ table__right">$1.96<span class="down"></span></td>
</tr>
<tr>
<td>Ethereum</td>
<td class="table__right">$0.07 <span class="up"></span></td>
</tr>
<tr>
<td>Ripple</td>
<td class="table__right">$2.17 <span class="down"></span></td>
</tr>
<tr>
<td class="table__bottom-left">Stellar</td>
<td class="table__bottom table__right">$4.96<span class="down"></span></td>
</tr>
</table>
</div>
<div class="currency-table--date">
<p><b>Actualizado:</b> 19 Julio 23:45</p>
</div>
</div>
<div class="main-comission-table">
<p class="comission-table--tittle">Comisiones</p>
<div class="comission-table--container">
<table>
<tr>
<td class="table__top-left">Bitrade</td>
<td class="table__top-righ 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.07</td>
</tr>
<tr>
<td class="table__bottom-left">Cointext</td>
<td class="table__bottom table__right">$14.96</td>
</tr>
</table>
</div>
<div class="comission-table--date">
<p><b>Actualizado:</b> 19 Julio 23:45</p>
</div>
</div>
</section>
</section>
<section></section>
<section></section>
<section></section>
<section></section>
<footer></footer>
</body>
</html>
CSS
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: 'DM Sans', sans-serif;
}
header{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 334px;
text-align: center;
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img{
width: 150px;
height: 50px;
margin-top: 60px;
align-self: center;
}
.header--tittle--container{
width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 4 0px;
text-align: center;
align-self: center;
}
.header--tittle--container h1{
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--just-white);
}
.header--tittle--container p {
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(--soft-orange);
}
.header--tittle--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;
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);
}
.main-exchange-container {
width: 100%;
height: auto;
padding-top: 80px;
padding-bottom: 30px;
text-align: center;
background-color: var(--off-white);
}
.main-exchange-container--tittle{
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: 50px;
font-size: 2.4rem;
font-weight: bold;
height: 2.6rem;
color: var(--black);
}
.main-exchange-container p{
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6rem;
color: #757575;
}
.main-currency-table, .main-comission-table{
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: "Inter", sans-serif;
}
.main-currency-table .currency-table--tittle {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
height: 2.3rem;
color: var(--bitcoin-orange);
}
.currency-table--container, .comission-table--container{
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
}
.currency-table--container table, .comission-table--container table{
width: 100%;
height: 100%;
}
.currency-table--container td, .comission-table--container td{
width: 50%;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(--grey);
background-color: var(--just-white);
}
.currency-table--container .table__top-left, .comission-table--container .table__top-left{
border-radius: 15px 0 0 0;
}
.currency-table--container .table_top-right, .comission-table--container .table_top-right{
border-radius: 0 15px 0 0 ;
}
.currency-table--container .table__bottom-left, .comission-table--container .table__bottom-left{
border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right, .comission-table--container .table__bottom-right{
border-radius: 0 0 15px 0;
}
.currency-table--container .table__right, .comission-table--container .table__right {
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
.currency-table--container .down {
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
background-image: url(./assets/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, .comission-table--date p{
font-size: 1.2rem;
line-height: 1.5rem;
font-weight: 300;
color: var(--warm-black);
}
/* COMISIONES */
.main-comission-table .comission-table--tittle{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
height: 2.3rem;
color: var(--secondary-blue);
}
.comission-table--date{
width: 190px;
height: 30px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-blue);
border-radius: 8px;
}
Muy buena clase!
Yo lo establecí de ésta manera:
Decidí hacer toda esta sección primero por mi cuenta. No sé por ahora qué tan diferente quedó mi código con respecto al del profe, pero les comparto tanto mi HTML como CSS de lo que hice. El resultado me quedó tal cual como el de Figma.
.
HTML:
<section class="main-benefit-container">
<div class="main-benefit--title">
<h2>Creamos un producto sin comparación.</h2>
<p>Confiable y diseñado para su uso diario.</p>
</div>
<section class="main-benefit-content">
<article class="content-tiempo">
<span class="content-tiempo--img"></span>
<h3>Tiempo real</h3>
<p>Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.</p>
</article>
<article class="content-tasas">
<span class="content-tasas--img"></span>
<h3>No hay tasas escondidas</h3>
<p>Ni en la compra o al momento de exit, Batabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
</article>
<article class="content-monedas">
<span class="content-monedas--img"></span>
<h3>Compara monedas</h3>
<p>No más rumores, con Babtabit sabrás el valor real de cada moneda en el mercado actual.</p>
</article>
<article class="content-informacion">
<span class="content-informacion--img"></span>
<h3>Información Confiable</h3>
<p>Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualizan.</p>
</article>
</section>
</section>
.
CSS:
.main-benefit-container {
width: 100%;
min-width: 288px;
height: auto;
padding: 64px 0 46px;
background-color: var(--black);
color: var(--just-white);
}
.main-benefit--title {
width: 90%;
height: auto;
margin: 0 auto;
text-align: center;
}
.main-benefit--title h2 {
font-size: 2.4rem;
font-weight: 700;
line-height: 2.6rem;
}
.main-benefit--title p {
padding: 24px 0 0;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
}
.main-benefit-content {
display: flex;
flex-direction: column;
margin: 32px 0 0;
}
.content-tiempo, .content-monedas, .content-tasas, .content-informacion {
width: 90%;
max-width: 345px;
background-color: var(--warm-black);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
border-radius: 4px;
margin: 16px auto;
padding: 14px 0 0;
}
.content-tiempo h3, .content-monedas h3, .content-tasas h3, .content-informacion h3 {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.8rem;
padding: 10px 16px 5px;
}
.content-tiempo p, .content-monedas p, .content-tasas p, .content-informacion p {
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: #808080;
padding: 5px 16px 22px;
}
.main-benefit-content span {
display: block;
width: 24px;
height: 24px;
position: relative;
left: 16px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content-tiempo--img {
background-image: url(./assets/icons/clock.svg);
}
.content-tasas--img {
background-image: url(./assets/icons/eye.svg);
}
.content-monedas--img {
background-image: url(./assets/icons/dollar-sign.svg);
}
.content-informacion--img {
background-image: url(./assets/icons/check-circle.svg);
}
Hecho con ‘display: grid;’ (y solo un poquito de JavaScript) porque las tablas son horribles XD
Así quedó la segunda tabla 😃
Amigos les recomiendo ir familiarizandose con las abreviaciones de Emmet que sirven bastante para optimizar el tiempo. Podemos crear toda esta arquitectura en una sola linea de codigo, usariamos esta
section.product-cards--container>article.product-detail--card*4>span+p.product--card-tittle+p.product--card-body
y de una vez se le formaria esto
<section class="product-cards--container">
<article class="product-detail--card">
<span></span>
<p class="product--card-tittle"></p>
<p class="product--card-body"></p>
</article>
<article class="product-detail--card">
<span></span>
<p class="product--card-tittle"></p>
<p class="product--card-body"></p>
</article>
<article class="product-detail--card">
<span></span>
<p class="product--card-tittle"></p>
<p class="product--card-body"></p>
</article>
<article class="product-detail--card">
<span></span>
<p class="product--card-tittle"></p>
<p class="product--card-body"></p>
</article>
</section>
No entiendo porque diego escribe todos los textos a mano cuando puede ir a figma copiar y pegar, pero bueno supongo que es para enseñarnos algo. Si son pajeros como yo y quieren ahorrarse mucho tiempo vayan a figam seleccionen el texto que quieren pasar a vscode y lo unico que tienen que hacer es tocar esa palabra y a la derecha les va a aparecer copiar (o tambien pueden selecciona la palabra y copiarla manualmente).
Saludos
Reto Cumplido, jugando con las clases y usando modificadores.
/* CSS Currency Table */
.exchange-table__title--currency {
color: var(--bitcoin-orange);
}
.exchange-table__date--currency {
background-color: var(--soft-orange);
}
/* CSS Comision Table */
.exchange-table__title--comision {
color: var(--secondary-blue);
}
.exchange-table__date--comision {
background-color: var(--soft-blue);
}
.
Me gusta mucho la explicación detallada, profesional y pausada del profe Diego. Se hace entender fácilmente. La manera combinada de usar la metodología BEM (bases de la misma y toque personalizado) es interesante y se comprende. Realmente lo importante es ser consistente en todo el proyecto a la hora de usar X o Y metodología para nombrar clases. La profe Estefany también aclara que esta metodología acepta cambios en la nomenclatura. Feliz de aprender y nunca parar. 💪💚
Platzi ha cambiado mi mundo!!!
le cambié las clases y le aplique los estilos de forma similar (Y)
OMG que emoción terminar el curso
Buenas, decidí hacer los dos con Grid, en realidad uno, gracias a que muchas cosas se repetían como se ve en la imagen solo fue agregar modificadores específicos y cambiar valores de html !!!
codigo html =============
codigo css =================
Adjunto mi resultado del reto
Lo intente con grid.
Reto cumplido
Scroll
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile First Project</title>
<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="style.css">
</head>
<body>
<header>
<img src="assets/img/logo.svg" alt="Logo de Batatabit">
<div class="header--title-container">
<h1>La próxima revolución en el intercambio de criptomonedas.</h1>
<p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
<a href="#" class="header--button">Conoce Nuestros Planes <span></span></a>
<!-- <a href="#" class="header--button2">Conoce Nuestros Planes <span>i</span></a> -->
<!-- <img src="assets/icons/down-arrow.svg" alt="Botón que te mostrará los planes"> -->
</div>
</header>
<main>
<section class="main-exchange-container">
<div class="background-img"></div>
<div class="main-exchange-container--title">
<h2>Visibilizamos todas las tasas de cambio</h2>
<p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
</div>
<div class="main-tables-container">
<div class="main-currency-table" id="table1">
<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>
<a href="#table2" class="table-go-right">
<img src="assets/icons/right-arrow.svg" alt="Botón para ir a la tabla de comisiones">
</a>
</div>
<div class="currency-table__date">
<p><b>Actualizado:</b> 19 Julio 23:45</p>
</div>
</div>
<div class="main-commissions-table" id="table2">
<p class="commissions-table__title">Comisiones</p>
<div class="commissions-table__container">
<table>
<tr>
<td class="table__top--left">Bitrade </td>
<td class="table__top--right table__right">$12.96</td>
</tr>
<tr>
<td>Bitpreco</td>
<td class="table__right">$13.07</td>
</tr>
<tr>
<td>Novadax</td>
<td class="table__right">$13.15</td>
</tr>
<tr>
<td class="table__bottom-left">Coinext</td>
<td class="table__bottom-right table__right">$14.96 </td>
</tr>
</table>
<a href="#table1" class="table-go-left">
<img src="assets/icons/left-arrow.svg" alt="Botón para ir a la tabla de precios de las monedas">
</a>
</div>
<div class="commissions-table__date">
<p><b>Actualizado:</b> 19 Julio 23:45</p>
</div>
</div>
</div>
</section>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
CSS
:root{
--primary-color: #f7931a;
--soft-primary-color: #ffe9d5;
--secondary-color: #1a9af7;
--soft-secondary-color: #e7f5ff;
--dark-color: #282623;
--warm-dark-color: #201e1c;
--background-color: #faf8f7;
--light-color: #fff;
--primary-family-font: 'DM Sans', sans-serif;
--secondary-family-font: 'Inter', sans-serif;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
font-family: var(--primary-family-font);
}
/* **************HEADER*********************** */
header{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 334px;
text-align: center;
background: linear-gradient(208.83deg, var(--warm-dark-color) 16.69%, var(--primary-color) 100%);
}
header img{
width: 151px;
height: 24px;
margin-top: 60px;
align-self: center;
}
.header--title-container{
width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 50px;
text-align: center;
align-self: center;
}
.header--title-container h1{
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--light-color);
}
.header--title-container p{
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(--soft-primary-color);
}
.header--title-container .header--button{
position: absolute;
left: calc(50% - 118px);
top: calc(50% -48px/2);
top: 270px;
display: block;
margin-top: 35px;
padding: 15px;
width: 229px;
height: 48px;
background: var(--background-color);
box-shadow: 0px 4px 0px rgba(89, 73, 30, 0.16);
border: none;
border-radius: 4px;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: var(--warm-dark-color);
}
.header--title-container .header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url("assets/icons/down-arrow.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* **************MAIN*********************** */
main{
width: 100%;
height: auto;
background-color: var(--background-color);
}
.main-exchange-container{
width: 100%;
height: auto;
padding: 80px 0 30px 0;
text-align: center;
}
.main-exchange-container .background-img{
width: 200px;
height: 200px;
margin: 0 auto; /*centramos horizontalmente*/
margin-bottom: 50px;
background-image: url("assets/img/Bitcoin.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.main-exchange-container--title{
width: 90%;
min-width: 288px;
max-width: 900px;
margin: 0 auto;
}
.main-exchange-container h2{
margin-bottom: 30px;
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(--warm-dark-color);
}
.main-exchange-container p{
margin-bottom: 30px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.6rem;
color: #757575;
}
.main-tables-container{
display: flex;
flex-direction: row;
overflow-x: scroll;
scroll-behavior: smooth;
}
/*---------------Contenedores (currency y commissions)---------------*/
.main-currency-table, .main-commissions-table {
width: auto;
min-width: 320px;
max-width: 500px;
height: auto;
margin: 0 auto;
font-family: "Inter", sans-serif;
}
/*---------------Titulo monedas---------------*/
.main-currency-table .currency-table__title{
width: 70%;
margin: 0 auto;
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--primary-color);
text-align: start;
padding-left: 12px;
font-family: var(--primary-family-font);
font-weight: bold;
}
/*---------------Titulo comisiones---------------*/
.main-commissions-table .commissions-table__title{
width: 70%;
margin: 0 auto;
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
line-height: 2.3rem;
color: var(--secondary-color);
text-align: start;
padding-left: 12px;
font-family: var(--primary-family-font);
font-weight: bold;
}
/*---------------Contenedor de la tabla (currency y commissions)---------------*/
.currency-table__container, .commissions-table__container{
width: 70%;
min-width: 230px;
max-width: 300px;
height: 250px;
margin: 0 auto;
border-radius: 15px;
/* nuevo cambio (position no estaba)*/
position: relative;
}
/*---------------Tabla (currency y commissions)---------------*/
.currency-table__container table, .commissions-table__container table{
width: 100%;
height: 100%;
}
/*---------------Todos los elementos (currency y commissions)---------------*/
.currency-table__container td, .commissions-table__container td{
width: 50%;
height: 39px;
padding: 10px 12px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: #B5B0AC;
text-align: start;
background-color: var(--light-color);
/* background-color: red; */
}
/*---------------Elementos de la segunda columna (currency y commissions)---------------*/
.currency-table__container .table__right, .commissions-table__container .table__right{
padding: 11px 12px;
font-size: 1.4rem;
font-weight: normal;
line-height: 1.7rem;
color: #757575;
}
/*---------------Bordes---------------*/
.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;
}
/*---------------span (currency y commissions)---------------*/
.currency-table__container td span, .commissions-table__container td span{
display: inline-block;
width: 15px;
height: 15px;
margin-left: 10px;
}
.currency-table__container span.down, .commissions-table__container span.down{
background-image: url("assets/icons/trending-down.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.currency-table__container span.up, .commissions-table__container span.up{
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;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-primary-color);
border-radius: 8px;
text-align: center;
font-weight: bold;
}
.commissions-table__date{
width: 190px;
height: 31px;
margin: 0 auto;
margin-top: 15px;
padding: 8px;
background-color: var(--soft-secondary-color);
border-radius: 8px;
text-align: center;
font-weight: bold;
color: var(--dark-color);
}
.currency-table__date p, .commissions-table__date p{
margin: 7px;
font-size: 1.2rem;
line-height: 1.5px;
color: var(--dark-color);
}
/*---------------Flechas que te cambian de tabla---------------*/
.table-go-right{
position: absolute;
right: -40px;
padding: 15px;
top: calc(50% - 20px);
}
.table-go-left{
position: absolute;
left: -40px;
padding: 15px;
top: calc(50% - 20px);
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.