No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Agregando imagen

16/26
Recursos

Aportes 49

Preguntas 5

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Cada vez m谩s independiente. :鈥)

As铆 va quedando, agregu茅 un overlay para indicar cu谩ntos likes y comentarios tiene cada post.

No se si sirva el comentario, pero pueden evitar la parte de definirle el border-bottom al 鈥h3鈥, haciendo uso de una etiqueta que dibuja una linea de separaci贸n, 鈥hr

no me base en el dise帽o del video

Amigos que tienen problema con el scroll, recuerden quitar de la etiqueta body los estilos que se pasaron a la clase .home-body.

Quedar铆a as铆:

body {
font-family:鈥楻obot Mono鈥, monospace;
margin: 0;
padding: 0;
}

home-body {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

En que momentos es correcto usar una imagen como tag 鈥渋mg鈥 o como background?

Realice el cambio que dijo Diego pero no me resulto, tuve que agregar un display: content para que me aparezca el scroll. Alguno mas le paso?

Wow no sab铆a que poniendo un % en el width ayudabas a que la imagen se acomode conforme mueves el tama帽o del navegador!馃く

Gracias, me ha servido de mucho este curso. As铆 va quedando mi plantilla! 馃槂

Los curso de Diego Degranda son una exquisitez. Me encanta el enfoque pragm谩tico que imprime en sus ense帽anzas, va al grano, se aprende haciendo. Est谩 valiendo la pena cada centavo y cada minuto de inversi贸n.

Tratando de hacer el ejercicio por mi cuenta, hab铆a ca铆do en cuenta del error del scroll en blogs.
Pens茅 en hacer cambiar los estilos de todos los que requieran scroll, pero cambiar para que solo la que no necesita scroll lo haga es m谩s f谩cil 馃槄

Recuerden siempre por buenas practicas, tomar la imagen usar paginas para reducir el tama帽o de las mismas, ya que en promedio nuestras imagenes deberian pesar 120kb aprox

la forma de generar scroll es de esta forma
.home-body{
top: 0;
bottom: 0;
right: 0;
left:0;
overflow: scroll;
}

Si a un elemento con grid, le aplicas porcentajes en su tama帽o, tomar谩 el porcentaje de la celda en la que est茅, lo que hace que se adapte al tama帽o de la celda.

La termine ,les dejo el una screenshot y el codigo me encantaria recibir su feedback .Saludos

CSS

.blogs-main{
    display:grid;
}
.blogs-news-container{
    background-color: #e6e9ed;
    padding:0 50px 40px;
}
.blogs-main-new{
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows:2fr;
}
.blogs-news-img-container{
    grid-column:1;
}
.blogs-news-img-container img {
    width:85%;
}
.blogs-news-info-container{
    grid-column:2;
}
.blogs-news-info-container p {
    margin-bottom:35px;
}
.blogs-posts-container{
    padding: 0 50px 40px;
}
.blogs-posts-container h3{
    border-bottom:1px solid #cdd2da;
    padding-bottom: 20px ;
    text-align:center;
    
}
.blogs-posts-container div {
    display:grid;
    grid-template-columns: repeat(3,2fr);
    grid-auto-rows: auto;
    gap: 20px;
}
.blogs-posts-container .post-container{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.blogs-posts-container .post-container img {
    width: 100%;
    align-self: center;
    margin-top: 5px;
}
.blogs-posts-container .post-container a {
    font-size: 12px;
    border: 1px solid #48cfad;
    width: 100px;
    padding: 8px 4px;
    margin:10px 0 3px 10px;
    text-align: center;
}
footer{
    margin-top: 40px;
    border-top: 35px solid #48cfad;
    height: 60px;
    display: flex;
    justify-content: center;
    background-color: #22272d;
}
footer p {
    color: white;
    font-weight: bold;
    align-self: center;
}

Muy buena clase 馃槂

Momento en el que explica porqu茅 la p谩gina no genera scroll. Debido a la posici贸n Fixed que se coloc贸 al body en el home con los valores de top, left, rigth y botto, en cero (0).

Genial cada d铆a m谩s seguro del pensamiento de maquetador CSS!!! 馃槂 馃槂

La imagen es una animaci贸n que saque de https://www.pixeltrue.com/ y esta en json

Tambien funciona asi
.home-body{
overflow-y: scroll;
scroll-behavior: smooth;
}

Asi va quedando banda

As铆 qued贸 en mi estilo:

Tuve ciertos problemas con las clases y la maquetaci贸n de la p谩gina web, as铆 que los que hice y les recomiendo, es que ustedes traten de maquetar cada parte y usen la clase como una gu铆a, no solo ir copiando lo que vemos en pantalla, porque al final es una mala pr谩ctica, adem谩s, cada persona piensa distinto, por lo que cada quien puede solucionar de distintas maneras el mismo problema.

As铆 va quedando con maquetaci贸n MovileFirst
Si hay algo que pueda mejorar les agradezco sus comentarios.

Amigos, tengo un problema, me queda as铆. ayudenme porfavor.

Excelente profesor

De esta manera evitamos hacer scroll

position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

Me encantaa! Estoy haciendolo con mis fotillos y colores

Sigamos 馃槃

Muy clara la clase, que buena!

Todo quedando genial!

Igual que los compa帽eros ten铆a problemas al principio en la vista blogs, pero siguiendo los pasos indicados en el video al crear la clase en la etiqueta body de index.html y separar las propiedades originales del body hacia esta clase se soluciona el problema.

Excelente.

Genial, gran clase

sigamos aprendiendo 馃槃

VA QUEDANDO GENIAL

Puliendo detalles.

cerca del final de este gran proyecto 馃槤

Me gusto esa forma de darle una clase al body, para que solo afecte a nuestra pantalla principal el position: fixed.

joder!!! claro body tambi茅n es una etiqueta, yo haciendo malabares con mi c贸digo.

muy bien, estoy aprendiendo muchos trucos sobre maquetacion!

Perfecto! 馃槃

Va quedando super鈥 Excelente clase!

Yo tuve con confusi贸n con la clase .home-body pero la solucion茅 as铆

.home-body {
    margin: 0;
    padding: 0;
    position: initial;
    font-family: 'Roboto mono', monospace;
}```

Espero que les haya servido

Lo del scroll no me quedo muy claro, debo ejecutarlo en c贸digo para ver tal me va.

Me agrada, me grada mucho lo que veo. Voy a practicar lo de las im谩genes porque las he colocado es en css y no desde el html. 鉁咅煉煈煆烩嶐煉火煠擆煋堭煈

Interesante. 馃 En general me provoca algunos dolores de cabeza el alineamiento de las im谩genes.