[Sugerencia] FORMULARIO DE CONTACTO CON CSS | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

2
respuestas

Referente al curso HTML5 y CSS3 parte 3: Trabajando con formularios y tablas, en el capítulo Estructura de tablas y actividad Conclusión

por Heiner Tinoco

| 174.5k xp | 172 posts

Director de Proyectos

Este es mi código HTML, con algunas modificaciones realizadas por mi cuenta...

<!DOCTYPE html>

<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Barbería Alura</title>
    <link rel="icon" type="image/x-icon" href="imagenes/alura.ico" />
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-home.css">
    <link rel="stylesheet" href="reset.css">
</head>

<body>
    <header>
        <div class="caja">
            <h1><img src="imagenes/logo.png" alt="Logo"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="productos.html">Productos</a></li>
                    <li><a href="contacto.html">Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <h1>ESCRIBENOS</h1>
        <br>
        <form>
            <label for="nombreapellido">Nombre y Apellido:
            </label>
            <input class="input-form" type="text" id="nombreapellido" required>

            <label for="correoelectronico">Correo Electrónico:</label>
            <input class="input-form" type="email" id="correoelectronico" required placeholder="email@dominio.com">

            <label for="telefono">Teléfono:</label>
            <input class="input-form" type="tel" id="telefono" required placeholder="(+XX) XXX XXXXXXX">
            <br>

            <label for="mensaje">Mensaje</label>
            <textarea cols="70" rows="10" id="mensaje" class="input-padron" required></textarea>

            <fieldset>
                <legend>¿Cómo le gustaría que lo contactemos?</legend>
                <br>            
                <label for="radio-email"><input type="radio" name="contacto" value="email" id="radio-email">Email</label>

                <label for="radio-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Teléfono</label>

                <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp" checked>WhatsApp</label>

            </fieldset>

            <br>

            <fieldset>
                <legend>¿En cuál horario prefiere ser atendido?</legend>
                <br>
                <select>
                    <option>Mañana</option>
                    <option>Tarde</option>
                    <option>Noche</option>
                </select>
            </fieldset>

            <label class="checkbox"><input type="checkbox" checked>Le gustaría recibir novedades de la Barbería Alura?</label>    

            <input type="submit" class="enviar" value="Enviar datos">        

        </form>
            <br>
            <h2>CONOCE NUESTRO HORARIO DE ATENCIÓN</h2>
            <br>
            <table>
                <thead>
                    <tr>
                        <th class="trazado">Día</th>
                        <th class="trazado">Horario</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="trazado">Lunes</td>
                        <td class="trazado">8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td class="trazado">Miércoles</td>
                        <td class="trazado">8h ~ 20h</td>
                    </tr>
                    <tr>
                        <td class="trazado">Viernes</td>
                        <td class="trazado">8h ~ 20h</td>
                    </tr>
                </tbody>
            </table>
    </main>
    <footer>
        <img src="imagenes/logo-blanco.png">
        <p class="copyright">&copy; Todos los derechos reservados. Desarrollado para <a href="/index.html">Barbería
                Alura.</a> Modificado por <a href="https://www.linkedin.com/in/heiner-tinoco/" target="_blank">Heiner
                Tinoco.</a></p>
        <br>
    </footer>
</body>
</html>

Y la hoja de estilo CSS con alguna modificaciones la dejo en un comentario

2 respuestas

por Heiner Tinoco

| 174.5k xp | 172 posts

Director de Proyectos

24/05/2023

Hoja de estilos CSS con algunas modificaciones de mi parte

header {
    background-color: #BBBBBB;
    padding: 20px 0;
}

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

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

nav ul {   
    display: flex;
}

nav li{  
    padding:5px 10px 5px 10px;
    margin: 0 15px 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: 14px;
    margin:20px;
}


.copyright a{
    text-decoration: none;
    color: #fff;;
}

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

/* Formulario */
main{
    width:940px;
    margin:0 auto;
    padding: 50px;
}

main h1{
 text-align: center;
 font-size: 2em;
 font-weight: 600;
}

form{
    margin:40px 0; 
}

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

.enviar{
    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color:black;
    background: orange;
    border:none;
    border-radius: 5px;
    transition: 1s all;
    cursor:pointer;
}

.enviar:hover {
    background: darkorange;
    transform: scale(1.2);
}

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

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

form .input-form {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.input-padron {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

.checkbox {
    margin: 20px 0;
}

table {
    margin: 40px 40px;
}

thead {
    background: #555555;
    color: white;
    font-weight: bold;
}

.trazado {
    border: 3px solid #000000;
    padding: 8px 15px;
}

por Rafaela Rocha

| 2876.2k xp | 8758 posts

Alura Scuba Team Scuba Team

26/05/2023

Hola Heiner, espero que estés bien! ¡Que increible! Felicitaciones por la creatividad! Gracias por compartir tu código con nosotros. Le recomendamos que comparta su código con sus colegas en Discord, allí es posible que todos lo vean e interactúen contigo. 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! :)