Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Haz lo que hicimos en el aula

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Comenzando un formulario y actividad Haz lo que hicimos en el aula

por Julie Andrea Solano Diaz
| 103.8k xp | 169 posts
PROFESIONAL UNIVERSITARIO 
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Contacto - Barbería Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div class="caja">
                <h1><img src="imagenes/logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="contacto.html">Contacto</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <form>
                <label for="nombreapellido"> Nombre y Apellido </label>
                <input type="text"id="nombreapellido">

                <label for="correoelectronico"> Correo Electrónico </label>
                <input type="text" id="correoelectronico">

                <label for="telefono"> Teléfono </label>
                <input type="text" id="telefono">

                <input type="submit" value="Enviar Formulario">

            </form>
        </main>
        <footer>
            <img src="imagenes/logo-blanco.png">
            <p class="copyright">&copy Copyright Barbería Alura - 2023</p>
        </footer>
    </body>
</html>
3 respuestas
por Julie Andrea Solano Diaz
| 103.8k xp | 169 posts
PROFESIONAL UNIVERSITARIO 
header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

.caja{
    width: 940px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top:110px;
    right: 0;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}

.productos{
    width: 940px;
    margin: 0 auto;
    padding: 50px;
}


.productos li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

.productos li:hover{
    border-color:#c78c19;
}

.productos li:active{
    border-color:#088c19;
}

.productos h2{
    font-size: 30px;
    font-weight: bold;
}

.productos li:hover h2{
    font-size: 33px;
}

.producto-descripcion{
    font-size: 18px;
}

.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top:10px;
}

footer{
    text-align: center;
    background: url(imagenes/bg.jpg);
    padding:40px;
}

.copyright{
    color:#FFFFFF;
    font-size: 13px;
    margin:20px;
}

main{
width: 940px;
margin: 0 auto;

}

form{
   margin: 40px 0;

}

form label{
   display: block;
   font-size: 20px;
   margin: 0 0 10px;

}

form input{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
por Ingrid Silva
| 1729.8k xp | 5580 posts
Instructor

Hola Julie , espero que esté bien.

Gracias por compartir tu código con nosotros, yo teste y está correcto contínua con tu estudos :)

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Te recomiendo que puedes interactuar con el resto de nuestros compañero por nuestro Discord.

En virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos

De esa manera si tienes algún comentario, opinión, recomendación o algún consejo sea por el Discord, con certeza por ahí llegará a más personas

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

Hola Julie, espero que estés bien! ¡Que increible! Felicitaciones por la creatividad! Gracias por compartir tu código con nosotros. Si tiene alguna pregunta sobre el contenido del curso, estamos aquí para ayudarlo. ¡Sigue practicando! ¡Vamos juntos! :)

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)