Carlos Daniel
Pregunta¿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.
HTML
<!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>``` CSS
- {
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;
}```
Lisandro Garcia
te sugiero poner la etiqueta de <form action... > antes del div contenedor del codigo (div principal), la de cierre </form> si la puedes poner dentro
Lisandro Garcia
te sugiero poner la etiqueta de <form action... > antes del div contenedor del codigo (div principal), la de cierre </form> si la puedes poner dentro
