Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

es un problema mio o del instructor ?

hola comparto mi programa de acuerdo al curso, he venido haciendo el paso a paso como lo explica el instructor pero no resulta el mismo programa ya que la imagen de fortnife no queda posicionado en el mismo lugar que tiene el profesor, adjunto imagen de evidencia y codigos de programa. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadcódigo css de destacados

.destaques {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%; /*la pantalla tiene un 100% de ancho entonces lo dividi por 4 columnas a 25% para agregar mas luego las imagenes*/
    grid-template-rows: 33.33% 33.33% 33.33%; /*hago las filas de 3, cada 1 de un tamaño de 33.33% para un total de 99.99%*/
    height: calc(110vh - 50px);
}

.destaques__principal {
    background: url('../img/fortnite.jpg') center / cover no-repeat;
    /*background-size: cover;
    background-position: center;
    background-repeat: no-repeat;*/

    /*grid-column-start:1 ;
    grid-column-end: 4; /*no coloco columna 3 por que debe finalizarse al comienzo de la columna 4 */
    grid-column: 1 / 4;
    grid-row: 1 / 3;

}

.destaques__secundario:nth-child(2){
    background: url('../img/pubg.jpg') center / cover no-repeat;
    grid-column: 4 / 4;
    grid-column: 1 / 2;

}

.destaques__secundario:nth-child(3){
    background: url('../img/slack.png')  center / cover no-repeat;
    grid-column: 4 / 4;
    grid-row: 2 / 3;
}

.destaques__secundario:nth-child(4){
    background:url('../img/whatsapp.png') center / cover no-repeat;
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.destaques__secundario:nth-child(5){
    background:  url('../img/cs-go.jpg') center / cover no-repeat;
    grid-column: 3 / 4;
    grid-row:  3 / 4;
}
3 respuestas

Buenas, en el destaques (2) has puesto "grid-column" 2 veces, seria remplazar la segunda por "grid-row".

en .destaques el valor de height: calc(**110vh** - 50px); debe ser 100vh, no 110vh

Te recomiendo qeu cda vez que inicie una clase, verifiques que los codigos esten igual que en el video. He encontrado que se hacen cambios y corrigen errores y en los videos no los dicen. Por ello hay errores.