transtion | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/html5yCSS3/Producto/Productos.css" />
    <link rel="stylesheet" href="/html5yCSS3/Producto/reset.css" />
    <title>Contacto</title>
</head>

<body>
    <header>
        <div class="caja">
            <h1><img src="/html5yCSS3/Producto/Imagenes/logo.png" alt="logo" /></h1>
            <nav>
                <ul>
                    <li><a href="/html5yCSS3/principal/index.html" target="_blank">Home</a></li>
                    <li><a href="/html5yCSS3/Producto/Producto.html">Productos</a></li>
                    <li><a href="Contacto.html">Pagina de Contacto</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <form>
            <label for="nombreyapellido">Nombre y apellido:</label>
            <input type="text" placeholder="" id="nombreyapellido" class="input-padron" required>

            <label for="correoelectronico">Correo electronico:</label>
            <input type="email" id="correoelectronico" class="input-padron" required placeholder="pepito@gmail.com">

            <label for="telefono">Telefono:</label>
            <input type="tel" id="telefono" class="input-padron" requerid placeholder="+57 30128469698">

            <label for="mensaje">Mensaje:</label>
            <textarea cols="70" rows="8" id="mensaje" class="input-padron" required></textarea>
            <div>
                <fieldset>
                    <legend>Como les gustaria que lo contactemos:</legend>

                    <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" >Telefono</label>



                    <label for="radio-whats"><input type="radio" name="contacto" value="Whats" id="radio-whats" checked>WhatssAp</label>
                </fieldset>
            </div>
            <div>
                <fieldset>
                    <legend>¿Como le gustari que lo contactemos?</legend>
                    <select>
                <option>Mañana</option>
                <option>Tarde</option>
                <option>Noche</option>
            </select>
                </fieldset>
            </div>
            <label><input type="checkbox" class="checkbox" checked>¿Le gustaria la recibir novedades de la barberia alura?</label>


            <input type="submit" value="Enviar Formunlario" class="enviar">
        </form>
    </main>
    <footer>
        <img src="/html5yCSS3/Producto/Imagenes/logo-blanco.png" alt="logo">
        <p class="copyright">
            &copy Copyright Barberia alura 2022</p>
    </footer>
</body>

</html>

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

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

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

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

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

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

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

main form {
    margin: 40px 0;
}

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

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

.checkbox {
    margin: 20px 0;
}

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

.enviar:hover {
    background: darkorange;
    transform: scale(1.2)/*rotate(70deg); */
}