Haz lo que hicimos en el aula | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

2
respuestas

por Hugo Fernando Maria Rodriguez

| 30.8k xp | 41 posts

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Contacto - Barbería Alura</title>
    <link rel="stylesheet"  href="reset.css">
    <link rel="stylesheet"  href="styles.css">
</head>
<body>
    <header>

        <div class="caja">

            <h1><img src="imagenes/logo.png" alt="Logo barbería alura"></h1>

                <nav>
                    <ul>
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="productos.html">Productos</a></li>
                        <li><a href="http://www.google.com">Contacto</a></li>
                    </ul>
                    </nav>

        </div>


    </header>

    <main>

        <form>

            <label for="nombreapellido">Nombre y apellido</label>
            <input class="input-padron" type="text" id="nombreapellido" required>    

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

            <label for="telefono">Teléfono</label>
            <input class="input-padron" type="tel" id="telefono" required placeholder="(xx) xxxxxxxx">

            <label for="mensaje">Mensaje</label>
            <textarea class="input-padron" cols="70" rows="10" id="mensaje" required></textarea>
        <fieldset>
            <legend>¿Cómo gusta que lo contactemos?</legend>

            <label for="radio-email"><input type="radio" name="Contacto" id="radio-email" value="email">Email</label>


            <label for="radio-telefono"><input type="radio" name="Contacto" id="radio-telefono" value="telefono">Telefono</label>

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


        </fieldset>

        <fieldset>


            <legend>¿En cual horario prefiere ser atendido'</legend>
            <select>
                <option>Mañana</option>
                <option>Tarde</option>
                <option>Noche</option>

            </select>

            </fieldset>

            <label><input type="checkbox" checked>Le gustaría recibir novedades de la barbería Alura</label>
            <input class="enviar" type="submit" value="Enviar formularío">

        </form>

        <table>

            <thead>
                <tr>
                    <td>Día</td>
                    <td>Horarío</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>Lunes</td>
                    <td>08h - 20h</td>
                </tr>
                <tr>
                    <td>miercoles</td>
                    <td>08h - 20h</td>
                </tr>
                <tr>
                    <td>Viernes</td>
                    <td>08h - 20h</td>
                </tr>
            </tbody>


        </table>

    </main>

    <footer>
        <img src="imagenes/logo-blanco.png" alt="Logo barberia alura">
        <p class="copyright">&copy Copyright Barbería Alura - 2020</p>

    </footer>

</body>
</html>

2 respuestas

por Hugo Fernando Maria Rodriguez

| 30.8k xp | 41 posts

30/05/2023

header{

    background-color: #bbbbbb;
    padding: 20px 0;/*desfazamiento externo*/
}
.caja{

    width: 940px;
    position: relative;/* relativo en lo absoluto */
    margin: 0 auto;/* 0 para superior inferior y automatico para bordes */
}

nav{

    position: absolute;
    top: 110px;
    right: 0;

}
nav li{

    display: inline;/* que la linsta este en linea */
    margin: 0 0 0 15px;/* espacio en las listas  */
}

nav a{

    text-transform: uppercase;/* convertimos a mayusculas */
    color: #000000;
    font-weight: bold;/*colocamos negrita*/
    font-size: 22px;
    text-decoration: none;/*quitamos decoreacion de texto*/

}

.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%;/* vertica horizontal */
    padding: 30px 20px;
    box-sizing: border-box;/*no deja que se escape la medida*/
    border: 2px solid #000000;
    border-radius: 10px;

    /* 
    border-color: #000000;
    border-width: 2px;
    border-style: solid;
    */
}
.productos h2{

    font-size: 30px;
    font-weight: bold;
}

.productos li:hover{

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

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


    font-size: 33px;
}




.producto-descripcion{
    font-size: 18px;
}
.producto-precio{
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
nav a:hover{

    color: #c78c19;
    text-decoration: underline;
}



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, form legend {

    display: block;
    font-size: 20px;
    margin: 0 0 12px;

}
.checkbox{

    margin: 20px 0;
}

.input-padron {

    display: block ;
    margin: 0 0 12px;
    padding: 10px 25px;
    width: 50%;
}
.enviar{

    width: 40%;
    padding: 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background: orange;
    border-radius: 5px;
    border: none;
    transition: 1s all;/* transición en el boton */
    cursor: pointer;/*cursor en forma de mano */
}
.enviar:hover {

    background: darkorange;
    transform: scale(1.2) ;

}

table{
    margin: 40px 40px;

}
thead{

    background: #555555;
    color: white;
    font-weight: bold;/*negrita*/

}

td,th {

    border: 1px solid black;
    padding: 8px 15px;
}

por Mariana Spinola Federico

| 455.2k xp | 1548 posts

Alura Scuba Team Instructora Front-End

01/06/2023

Gracias por compartir tu código con nosotros.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

Un saludo!

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