Maquetando sección comodín

Se ve increíble el resultado 😄
La verdad el curso se esta pasando super rápido por que en cada clase vamos enfocados a resolver el problema presentado para cada sección.
Diego es un excelente Profesor!

No medio overflow

En vez de poner 50vh pongan 60vh. Se ve más parecido al diseño. miren.

En mi opinión esta imagen es mejor ponerla con la etiqueta <picture> y su etiqueta hija Source, para mejorar la renderización y la rapidez de la página en todos los de dispositivos. Como lo vimos en la clase de “responsive images”

La imagen en 2x

Recuerden: A los desarrolladores nos pagan por saber que copiar y pegar, y donde copiar y pegar 😃

No hay ningun fallo de overflow, el problema es que Diego ha escrito auditanmdo y es auditando, solo por esa "m" ya se empieza a salir el texto

de hecho no me dio ese problema porque no ocupo un heigth sino que lo dejo por defecto el heigth:auto; el que ya trae el navegador

Segun el prototipo móvil si es mas acertado un 60vh

Me pone muy contento saber que el problema de overflow lo resolví antes de ingresar a la clase utilizando la misma solución que brindo Diego.
Siento que estoy por buen camino 😃

Cuando estamos trabajando con imágenes, una buena práctica es mostrar una imagen optimizada para cada tipo de pantalla. Esto de logra cargando distintas imágenes de forma condicional con la etiqueta source y el atributo media de dicha etiqueta.
Esta es la forma en lo que yo lo hice 😄

EL HTML

<section class="bitcoin-img--container">
 	<picture class="bitimg">
            <source media="(min-width: 1024px)" srcset="/assets/img/bitcoinbaby3x.png" ">
       	    <source media="(min-width: 768px)" srcset="/assets/img/bitcoinbaby2x.png"">
            <img src="/assets/img/bitcoinbaby.png" >
        </picture>
        <h3>Conócelo hoy.</h3>
</section>

EL ESTILO

.bitcoin-img--container {
    position: relative;
    width: 100%;
    min-width: 320px;
    height: 50vh;
    /* background-image: url(/assets/img/bitcoinbaby2x.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}

.bitimg img{
    width: 100%;
    display: block;
}

.bitcoin-img--container h3 {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 60px;
    font-size: 2.4rem;
    font-weight: var(--bold);
    line-height: 2.6rem;
    color: var(--just-white);
    text-align: center;
}

Cuando estemos trabajando con imagenes en nuestros disenos es importante contar varias versiones de cada imagen con un tamano diferente. Normalmente se aconseja tener 3:

• Una grande para mostrar en desktop
• Una mediana para tablets
• Y una pequena para dispositivos moviles.

hola tengo algunos problemas con el simulador de google aveces no se que pasa que me genera un scroll lateral pero cuando quito y vuelvo a poner el simulador se quita alguien me puede ayudar o decirme por que pasa?

Y si no me paso lo del overflow?:'v

Que gran curso!

La imagen 2x pesa bastante y aun asi cuando subo a tamaño desktop se ve un poco pixeleada.
Mejor podemos descargar la imagen 4x y comprimirla, eliminandole metadatos y un poco de color sin perder la calidad.
-Les comparto la siguiente pagina que optimiza las imagenes hasta en un 90% Compressor.

Hola.
A lo mejor alguien al igual que yo intento estilar con margin:; en vez de padding:; en .bitcoin-img-container y no funcionó para que sea exitoso debe existir un padding en .bitcoin-img–container para que sirva de límite del margin.; y no dezplase la img.

Les dejo la imagen subida a imgBB para que puedan usarla directamente como un source https://i.ibb.co/sFVrqYv/bitcoinbaby2x.jpg

yo tengo el problema de que entre las card me esta quedando mucho espacio alguien me puede ayudar ???

Hay posibilidades de detectar los divs con la misma clase y ver cual es el que posee mas heigth y así ponerles a todos el mismo?

Por lo general y para evitar overflow yo adapto el tamaño del contenedor al contenido.

<code> 
.main-product-detail .product-detail--card
{
    width: 90%;
    max-width: 400px;
    min-width: 288px;
    **height: fit-content;**
    margin: 15px auto;
    padding: 15px;

    background-color: var(--warm-black2);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

Yo al inicio de la clase: Espera… Habia un problema :0 ?

que viene siendo vh? y porque elegir 2x?

Yo lo hice usando position: relative; y position: absolute;. Y funcionó.

AYUDA POR FAVOR!!
No logro encontrar el motivo por el cual me genera ese Scroll en la imagen. Si alguien me ayuda, se lo agradeceré.

HTML

< <section class="bitcoin-img-container">
          <h2>Conócelo hoy.</h2>
        </section>
        <section></section>> 

CSS

<.bitcoin-img-container {
    width: 100%;
    min-width: 320px;
    height: 60vh;
    background-image: url("./assets/img/bitcoinbaby2x.jpg");
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}
.bitcoin-img-container h2 {
  padding-top: 60px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.6rem;
  color: var(--just-white);
}> 

Algo que vimos (los que pasamos el curso definitivo de html y css con Diego) es la importancia de tener una imagen liviana para evitar tiempos de carga innecesariamente largos por lo que una gran herramienta es esta comprimir

Si se pone la imagen en el HTML con el elemento img, y en CSS el width es del 100%, la imagen nunca se recorta y mantiene las proporciones originales. Noten las 2 imágenes nunca se deforman por más que agrande o achique la pantalla y siempre el acho cubre el 100%

Si alguien tiene la duda de ¿cuando utilizar una etiqueta <img> o un background-image? les dejo este enlace.

en HTML lo unico que hice fue copiar los articles , cambiar las clases de los span y el texto:

<article class="product-detail--card">
          <span class="eye"></span>
          <p class="product--card-title">No hay tasas escondidas<p><!--Encabezado-->
          <p class="product--card-body">Ni en la compra o al momento de exit, Batatabit siempre te muestra el costo real de lo que estás adquiriendo.</p><!--Texto-->
        </article> 

y en el CSS solo copié los estilos de los spam y cambié el nombre y la ruta del icono 🤔

.product-detail--card .dollar-sign {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  background-image: url('./assets/icons/dollar-sign.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}```

¡Qué maravilla!

Gran clase!!

Esta bien el diseño y todo pero a mi no me gusta como se ve cuando hacemos la pantalla mas grande, por eso yo hice este diseño, no se ve tan mal después de todo…

Otra opción que se me ocurre sería manejar los tamaños de la imagen con la etiqueta picture como aprendimos en el curso anterior y el h2 manejarlo con un position absolute y posicionarlo con calc, sin embargo no estoy seguro si. sería lo correcto?

Si quieren mover el foco de la imagen cuando crece o se minimiza tambien pueden usar el background-postion property con values en porcentajes para el eje X y Y.

Yo use
background-position: 0% 50%; y me gusto como quedo

El overdlow del profe Diego es por 2 palabras: auditamndo y miesntras

De igual manera es importante saber corregir el error en futuros proyectos. 😄

En mi opinión lo que hace el curso mas interesante es el hecho de que se sigue una linea de código que no necesariamente es la mejor pero, te lleva aprender algo nuevo y relacionado.

En cuanto a las tarjetas no se esi es buena o mala practica pero todas tiene un estilo en comun, por lo que le agregue la misma clase a todas, y lo que diferencie en ellas fueron los iconos…!

CSS

/* Detalle del Producto */
.main_product_detail {
    position: relative;
    width: 100%;
    min-width: 32rem;
    height: auto;
    padding: 2rem 1.6rem;
    background-color: var(--warm-black);

}
.main_product_detail .logo {
    position: absolute;
    width: 4rem;
    height: 2.5rem;
    top: -1.2rem;
    left: calc(50% - 2rem);
    background-image: url('../assets/icons/batata.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main_product_detail-title {
    width: 90%;
    min-width: 28.8rem;
    margin: 0 auto;
    height: auto;
}
.main_product_detail-title h2 {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    margin-bottom: 2.4rem;
    text-align: center;
    color: var(--just-white);
}
.main_product_detail-title p {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    text-align: center;
    margin-bottom: 3.2rem;
    color: var(--gray);
}
.main_product_detail-cards {
    position: relative;
    width: 90%;
    min-width: 28.8rem;
    max-width: 40rem;
    padding: 2.2rem 1.6rem;
    background: var(--black);
    margin: 0 auto;
    margin-bottom: 1.6rem;
    box-shadow: 0 .4rem .8rem rgba(0,0,0,.16);
    border-radius: .4rem;
}
.main_product_detail_cards-icon {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    top: .2rem;
    left: .2rem;
    margin-bottom: 1rem;
}
.clock {
    background-image: url('../assets/icons/clock.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.eye {
    background-image: url('../assets/icons/eye.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.dollar {
    background-image: url('../assets/icons/dollar-sign.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.info {
    background-image: url('../assets/icons/check-circle.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.main_product_detail-cards p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 500;
    color: var(--gray);
}
.main_product_detail-cards .main_prdouct_detail-cards--title {
    font-size: 1.8rem;
    line-height: 1.8rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--just-white);
}

HTML

         <section class="main_product_detail">
            <span class="logo"></span>
            <div class="main_product_detail-title">
                <h2>Creamos un producto sin comparación.</h2>
                <p>Confiable y diseñado para su uso diario.</p>
            </div>
            <div class="main_product_detail-cards">
                <span class="clock main_product_detail_cards-icon"></span>
                <p class="main_prdouct_detail-cards--title">Tiempo Real</p>
                <p>Nuestro API toma información minuto a minuto sobre las tareas que más determinian el comportamiento.</p>
            </div>
            <div class="main_product_detail-cards">
                <span class="eye main_product_detail_cards-icon"></span>
                <p class="main_prdouct_detail-cards--title">No hay tasas escondidas</p>
                <p>Ni en la compra o al momento del exit, Batatabit siempre te muestra el costo real de lo que estás adquiriendo.</p>
            </div>
            <div class="main_product_detail-cards">
                <span class="dollar main_product_detail_cards-icon"></span>
                <p class="main_prdouct_detail-cards--title">Compara monedas</p>
                <p>No más rumores, con Batatabit sabrás el valor real de cada moneda en el mercado actual.</p>
            </div>
            <div class="main_product_detail-cards">
                <span class="info main_product_detail_cards-icon"></span>
                <p class="main_prdouct_detail-cards--title">Informacion confiable</p>
                <p>Nuestras fuentes están 100% verificadas y continuamos auditando su contenido mientras se actualiza.</p>
            </div>
        </section>

Buenas noches, alguien me puede decir por que pasa esto, mi imagen del lado derecho queda un poco mas salida que el contenedor superior.

![](

TÚ IMAGEN PESA DEMASIADO

Para reducir el tamaño de las imágenes uso Squoosh. Te reduce el tamaño incluso sin perder calidad(ya eso lo decides tú). De todas formas en la app te deja comparar la imagen con la calidad intacta y con la calidad un poco más baja. Espero te sea útil:)

Listo!

Diego es un excelente profesor!

Cada clase se me va muy muy rápido, esto es adictivo jeje

El texto al inicio lo estaba acomodando con un margin, pero esto mueve la imagen tambien. Asi que yo lo hice:

position: absolute;
top: 64px;
left: calc(50% - 162px/2);

Por supuesto se debe poner el contenedor en positio:relative. Y se acomoda bien!

si al h2 en lugar de 60 px le dan:

padding-top: 85px;

el h2 estará justo sobre los dedos de la modelo, logrando parecerse más al diseño original.

Como el div que contiene todo , posee la propiedad height: auto, no me dio problema. Por que los demas se ajustan al alto del contenido.

Sigue avanzando mi landing page. Casi un front-end developper

![](

Cielos y yo usando position para acomodar el texto.

sin querer resolví el overflow antes de ver esta clase jaja

Pues Yo lo solucione pasando le por valor height: auto; y también me funciona perfectamente en cualquier dimensión.

a mi ese problema del overflow del comienzo no me pasó

no se que fue lo que hice, Pero no me boto el error de que las letras salían de su padre

[](

[](

En el minuto 3.18 donde coloca el min-height:150px, yo para arreglar ese detalle le puse, height: auto,

Este modelo de curso me está pareciendo muy muy bueno

Me está gustando cómo va quedando el diseño y lo que he aprendido hasta este punto del curso. Muchas gracias.

¡Me emociono cada vez que hacemos una sección! Diego lo hace ver tan fácil, es un excelente guía en nuestro aprendizaje.
Recuerden que por buenas prácticas utilizamos imágenes con un peso de 70kb en nuestros proyectos; para comprimir la imagen utilicen tiny
Saludos, platzinautas!

Utilizar min-height para darle una altura mínima a un contenedor y crezca de acuerdo a su contenido.

Hecho 🙂

No entiendo porque le coloca un 50vh, es decir, si el 50% de la pantalla pero porque no colocó en pixeles, según lo que corroboré da el mismo resultado.
Y otra cosa al momento de crecer la pantalla la img tambien crece, pero según yo crece mal xq deberia crecer en su formato original, mas no hacerse zoom
Y una ultima cosa que me fije y es que no se si sea por cuestion de colocarle background-img pero abri desde cero la pag y la pag ya estaba cargada, sin embargo la img no todavía(y encima es la version 1x ) nose si ese problema se resuelve colocandole con etiqueta de img o a que se deba

Otra forma sería no poner el height, si no importa que todas las tarjetas tengan el mismo alto. La tarjeta se va a adaptar al tamaño del texto.

text-align:justify; y adios overflow?

en mi caso no tuve problemas con lo que se fue desarrollando en las tarjetas

Le quise agregar el logo de la batata para que tuviera un aire de transición

No me llego a dar overflow, pero pienso que es mejor usar height: auto que min-height.

el text-align: center tambien funciona en la clase del h2

• Me quedo más parecido al diseño en Figma con estos valores:

.bitcoin-img--container {
    width: 100%;
    min-width: 320px;
    height: 75vh;
    background-image: url("/assets/img/bitcoinbaby2x.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.bitcoin-img--container h2 {
    text-align: center;
    padding: 64px;
    font-size: 2.4rem;
    line-height: 2.6rem;
    font-weight: bold;
    color: var(--just-white);
}

Para resolver el tema del overflow, cambié la propiedad height de la tarjeta de 150px a “auto”, en vez de usar la propiedad “min-height”. Es más, creo que es más conveniente que utilizar “min-height” para textos más cortos.

Gracias por todo el conocimiento entegado profe, aqui esta el reto de la clase anterior completado:

aaaa prro no me paso ese overflow

Reto cumplido :

En mi caso coloqué la imagen como etiqueta img y puse dos tipos de imágenes para dekstop y mobile

Aquí el reto de la clase anterior. No tuve problemas con el texto que mencionas.

excelente ya falta poco

A Diego se le desfaso el texto de la card porque tiene mal escrita la palabra ‘auditando’. Pero de todas formas que bueno que paso ese pequeño error porque ahora sabemos como solucionar el problema del overflow.

Lo que no entiendo es ¿por que usa line-height si el h2 solo es una linea?

Para que el <h2>Conócelo hoy</h2> quede en una posición más similar a la que esta en la maqueta (https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=44%3A593), yo le puse height: 60vh; y padding-top: 50px;.
Saludos!

Lo que diego quere dar a entender con lo del overflow es que en tu tarjeta si tu aumentas tu fuente a 2rem por ejemplo pues el texto se saldra, y genera overflow y cuando estes trabajando como desarrollador podria pasarte algo similar asi que es bueno tener como resolverlo ❤️

la forma que arreglo el overFlow fue muy claro y ayudo a entender el uso de vh