¿Saben porque no me funciona mi grid? Hice todo al paso, incluso pegue codigo que hay en los aportes para verificar que no fuera error mi...

Carlos Daniel

Pregunta

student•hace 4 años

¿Saben porque no me funciona mi grid? Hice todo al paso, incluso pegue codigo que hay en los aportes para verificar que no fuera error mio y nada. mi grid tiene solo 2 lineas y no 3 como en el video.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="hero">
        <div class="hero-container">
        <div class="badge">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/1200px-React.svg.png" alt="">
        </div>
        <h1 class="title">
            Curso de React.js
        </h1>
        <div class="description">
            <p>
                React es una de las librerías más utilizadas hoy en día para crear aplicaciones web. En este curso podrás dominar la creación de aplicaciones a través de un proyecto que te ayudará a explotar todas las capacidades de esta librería.
            </p>
            <form action="" class="form">
                <p>Registrate a Platzi</p>
                <input type="text" placeholder="Nombre">
                <input type="email" placeholder="E-mail">
                <button type="submit">Comienza ahora</button>
            </form>
            <div class="countdown">
                <p>Lanzamiento:</p>
                <p>
                    <span>01d</span>
                    <span>03h</span>
                    <span>09m</span>
                    <span>24s</span>
                </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>




* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.badge img {
    max-width: 80px;
    width: 150px;
}
.hero {
    background-color: #23475b;
    color: whitesmoke;
    padding: 32px 15px;
    font-family: arial;
    display: grid;
    grid-template-columns: minmax(auto, 1024px);
    justify-content: center;
}
.title {
    font-size: 36px;
    font-weight: normal;
    display: flex;
    align-items: center;
    grid-area: title;
}
.form {
    grid-area: form;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 10px;
}
.form input {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #dbdbe2;
    border-radius: 5px;
    margin-bottom: 10px;
}
.form p {
    font-size: 20px;
    margin-bottom: 1rem;
    color: #3a3b3f;
}
.form button {
    background-color: #98ca3f;
    color: whitesmoke;
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    border-bottom: 5px solid #6d932b;
    display: inline-block;
    cursor: pointer;
}
.countdown p {
    font-size: 30px;
    text-align: center;
    font-weight: 300;
}
.countdown span {
    font-size: 45px;

}
.countdown span::after {
    content: ":";
    display: inline-block;
}
.countdown span:last-child::after {
    display: none;
}
.hero-container {
    display: grid;
    grid-template-columns: 70px 1fr 320px;
    grid-template-areas: "badge title form"
                         ". description form"
                         ". countdown form";
    gap: 10px;
}
.badge {
    grid-area: badge;
}
.description {
    grid-area: description;
}
.countdown {
    grid-area: countdown;
}```

Josué David Coreas Paiz

student•hace 4 años

Hola @CarlosGnx creo que el div con la clase .description te falta cerrarlo. Intenta agregarla.

Eban Sayago Melián

student•hace 4 años

¿Qué navegador estás usando? ¿Está actualizado?

¿Saben porque no me funciona mi grid? Hice todo al paso, incluso pegue codigo que hay en los aportes para verificar que no fuera error mi...

Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017