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

2
respuestas

por Vinzet Abner Ramos Rojas

| 130.8k xp | 53 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 Vinzet Abner Ramos Rojas

| 130.8k xp | 53 posts

11/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 Rafaela Rocha

| 2875.2k xp | 8758 posts

Alura Scuba Team Scuba Team

11/05/2023

Hola Vinzet, 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! :)