Estructura base de la sección de beneficios

Curso de Responsive Design: Maquetación Mobile First

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,

Recursos

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 247

Preguntas 17

Ordenar por:

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

JochuaOrtiz

hace 4 años

excelente y lo que me gusta es que nos dejas retos eso es bueno la verdad soloa si sabremos que aprendemos

Dani-Ideas

hace 3 años

ya se que me van a decir niño rata o algo por el estilo PERO ME IMPORTA UN BLEDO

Florencia Urquiza

hace 4 años

RETO FINALIZADO!

Luis José Cruz Martínez

hace 3 años

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.

Jose Alberto Sanchez Nava

hace 4 años

¡reto completado!
Le hice algunos cambios para mejorar la vista.

Jean Carlos Hallak

hace 4 años

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

Mercy María Ix Ballote

hace 4 años

dato: los textos podemos copiarlos desde Figma y pegar en el editor, para no escribirlo todo

Ariel Ezequiel Biazzo Genua

hace 3 años

Es un poco loca mi idea, y seguro este mal, pero yo cambie la tabla de bitocin por una tabla de store de guitarras. ![](

Joel Alejandro Tovar Ramos

hace 3 años

   '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

EDWIN VASQUEZ VALLE

hace 4 años

Nuestro API toma información minuto a minuto sobre las tasas que más determinan el comportamiento.

Brandon Argel Verdeja Dominguez

hace 4 años

¡Reto completado! Nada más le agregué un box shadow

PauloPerdomo

hace 3 años

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>

Carlos Mauricio Quilachamín Simbaña

hace 3 años

Reto cumplido !!

Sebastian Marat Urdanegui Bisalaya

hace 3 años

Diego Fernando Guzmán Rodríguez

hace 4 años

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