Cursos Empresas Blog Live Conf Eventos Precios

0:007:26

Recursos

Resumen

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).

Estructuración de Secciones y Tarjetas en HTML y CSS

Curso de Responsive Design: Maquetación Mobile First

Clase 18 de 32

Clase 18 / 32

Diego Fernando Guzmán Rodríguez

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

Comentarios (273)273 comentarios

Joshua Ortiz Rosales

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

Joel Dominguez Merino

Concuerdo completamente contigo!

Victor Andres Castillo Zambrano

esa es la mejor parte, te reta a mejorar por ti mismo

Daniel Alejandro Romero Navarro

Hace 5 años

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

Rubén Contreras

Aquí nadie te dirá eso. Está genial, solo el footer se poco espaciado con los border. Pero, al parecer es una imagen... trata de centrarla. :)

Fernando Espiritu

dani te quedo genial !!! y x2 nadien te dira eso

Florencia Urquiza

RETO FINALIZADO!

Cristian Camilo

Bacanoo! Trata de mover lostitulos hacia la izquierda como se muestra en figma (como lo requiere el cliente)

Ignacio Consuegra

Te quedó excelente.

Luis José Cruz Martínez

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.

Jonathan Castillo Flores

Hola, Luis. Muchas gracias. Me estoy guiando de tu código para ver el deslizamiento. Una pregunta, en el código de la segunda tabla, por qué aún tiene la clase currency de la primera tabla, creo que solo sería la clase summission. Agradezco tu apoyo.

EDGAR MERCADO GARCIA

Hola, muy bueno el trabajo que hiciste con las tablas para mostrarlos de esa manera.

Jose Alberto Sanchez Nava

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

Jesús Andrés Monge Loor

Te quedó genial bro!

Cesar Guevara Cabrera

Como hiciste para que cuando le des sombra a la tabla no se marque una esquina en punta si no que se vea bordeado incluso con la sombra, parece que le hubieras podido dar sombra al <table>, gracias!

Jean Carlos Hallak

Christian Velázquez

Gracias por el dato.

Juan Jose Hernandez Garcia

jajaj gracias bro te debo una Xd

Mercy María Ix Ballote

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

Ariel Ezequiel Biazzo Genua

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

Carlos Eduardo Ortiz Mora

¿Qué diferencia existe en usar los iconos como background vs usarlos como imágenes? Ambos los puedo posicionar absolutos y dar medidas.

Carlos Antonio Espin Constante

Hola Carlos. Te dejo este link para que resuelvas tu duda. https://es.stackoverflow.com/questions/24511/cu%C3%A1ndo-se-deber%C3%ADa-usar-img-y-cuando-background-image

Nunca pares de aprender.

Luis Lira

Dependiendo qué es lo que quiera hacer con la imagen. Si solo quieres que aparezca y darle estilo a tu gusto sería como background, pero si necesitas ponerle un alt o más opciones de las etiquetas que tiene la etiqueta <img> sería mejor que la uses con la misma etiqueta.

Joel Alejandro Tovar Ramos

'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

Transport Systems

Hace 4 años

Gracias por tu aporte es muy bueno y ahorra mucho tiempo.

Benjamin Allen Ramirez Horna

pero amigo el BEM esta mal

EDWIN VASQUEZ VALLE

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

El texto para que lo tengamos disponible.

hmm

Brandon Argel Verdeja Domínguez

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

Jesús Antonio Panesso Sánchez

Parcero como estas? Me podes ayudar, es que no se que estoy haciendo mal y no logro acomodar la tabla

Diego Cucaresse

Hola Jesus. ¿Pudiste resolver el problema con las tablas?

Cristian Caballero

Me da cursiosidad por que poner los iconos y/o logos como background y no directamente como imagenes, alguna buena practica o motivo que desconozco?

Kevin J. Zea Alvarado

Desde mi experiencia, no sería buena práctica del todo, ya que para los que tienen capacidades visuales diferentes les será más difícil qué es exactamente ese elemento.

Supongo que lo mejor para esos casos es agregar un title para que funcione como una especie de alt en los <img />.Eso es mejor para cuando se agregan iconos.

@kevinjea Tampoco me parece una buena practica y tienes un buen punto a considerar, pero me extraña que no haya un buen motivo para esta manera de hacerlo

Javier Paulo Perdomo Tamani

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>

no es el BEM

Carlos Mauricio Quilachamín Simbaña

Reto cumplido !!

Sebastian Marat Urdanegui Bisalaya

Andriuws Lima

¿Como has logrado añadir el box-shadow? ¿lo has hecho con grid ó table?

Cristian Emanuel Collazo

La metodología BEM (Block, Element, Modifier o Bloque, Elemento, Modificador)

Block (El componente entero) Block__Element (El elemento dentro del componente) Block__Element--Modifier (el color del elemento del bloque)

Por que Diego De Granda constantemente cambia este orden y/o uso de esta nomenclatura? me confunde

Jose Leonardo rincon Ducuara

El profe Diego usa la metodología BEM como una referencia pero no la usa al pie de la letra, mas bien usa una metodología la cual le permite identificar las clases en su código.

jajaja si, me di cuenta. Al principio me costaba un montón, pero a medida que voy avanzando voy entendiendo todo y ya no me confunde si es BEM o es BEM edición especial xD.

Jorge Alejandro Niglia

Hola, Porque en los títulos de las tarjetas, dentro del article, se usa un <p> y no un <h3>?Semánticamente, no sería más apropiado para los títulos?

María Sierra

La verdad es que si, para el SEO sería conveniente que utilizarán en los títulos las etiquetas de los h1. Pero también, lo puedes hacer como lo hace el profesor.

Sí podría ser una opción, actualmente no sé qué tanta repercusión tiene la semántica en el SEO, pero puede ser mucha ayuda también para los lectores de pantallas que tengas una semántica apropiada.

Miguel Angel Toledo Santiago

:' )

Recursos

Resumen

Estructuración de Secciones y Tarjetas en HTML y CSS

Progreso del curso

Bienvenida al curso

Setup inicial

Sección de Header

Sección de Intercambios

Sección de Beneficios

Sección de Planes

Sección de Footer

Media Queries

Lighthouse

Próximos pasos