[Proyecto] Resultado final | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas | Alura Latam

2
respuestas

por Estudiante

| 95.4k xp | 59 posts

<!DOCTYPE html>
<html lang="es">
<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="./css/style.css">
    <title>Contacto</title>
</head>
<body>
   <main>

         <header class="row_items">
             <h1>
                <img src="./img/logo.png" alt="logo">
             </h1>
             <nav>
                <a href="index.html">Home</a> 
                <a href="productos.html">Productos</a>
                <a href="contactos.html">Contacto</a>
             </nav>
         </header>

         <section class="col_items col_items_contacto">

          <form action="#" method="get" class="col_items">

            <label for="campoNombre">Nombre</label>
            <input type="text" name="nombre" id="campoNombre" required pattern="^[a-zA-Z ]+$">

            <label for="campoApellido">Apellido</label>
            <input type="text" name="apellido" id="campoApellido" required pattern="^[a-zA-Z ]+$">

            <label for="campoCorreo">Correo Electrónico</label>
            <input type="email" name="email" id="campoCorreo" required  placeholder="email@domain.com">

            <label for="campoTelefono">Telefono</label>
            <input type="tel" name="telefono" id="campoTelefono" required pattern="[0-9]{8}">

            <label for="campoMensaje">Mensaje</label>
            <textarea name="mensaje" id="campoMensaje" cols="70" rows="10"></textarea>

            <fieldset class="col_items separador">
                <legend>¿Como le guitaría que lo contactemos?</legend>

                 <label for="radioEmail">
                    <input type="radio" name="opcionContacto"  id="radioEmail" value="Email">
                    Correo Electrónico
                </label>

                <label for="radioEmail">
                    <input type="radio" name="opcionContacto"  id="radioTelefono" value="Telefono">
                    Telefono
                </label>

                <label for="radioWhatsapp">
                    <input type="radio" name="opcionContacto"  id="radioWhatsapp" value="Whatsapp" checked>
                    Whatsapp
                </label>

            </fieldset> 

            <fieldset class="col_items separador">

                <legend>
                    <p>En cuál horario prefiere ser atendido?</p>
                </legend>

                <select name="atencion" id="campoAtencion" class="separador">
                    <option value="manana">Mañana</option>
                    <option value="tarde">Tarde</option>
                    <option value="noche">Noche</option>
                </select>
            </fieldset>

            <label for="campoOpcion" class="separador">
                <input type="checkbox" name="checkbox" id="campoOpcion">
                Le gustaría recibir novedades sobre la Barbería alura
            </label> 


            <input type="submit" value="enviar" class="enviar">
          </form>

          <table class="separador">
            <thead>
                <tr>
                    <th>Dias</th>
                    <th>Horarios</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Lunes</td>
                    <td>8h - 20h</td>
                </tr>
                <tr>
                    <td>Miércoles</td>
                    <td>8h - 20h</td>
                </tr>
                <tr>
                    <td>Viernes</td>
                    <td>8h - 20h</td>
                </tr>
            </tbody>
          </table>

         </section>

         <footer>
            <img src="./img/logo-blanco.png" alt="logo blanco">
            <p>&copy; Barberia alura - 2023</p>
        </footer>

    </main>
</body>
</html>

2 respuestas

por Estudiante

| 95.4k xp | 59 posts

14/04/2023

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

main{
    display: flex;
    flex-flow: column nowrap; 
    width: 100%;
}

.row_items{
    display: flex;
    flex-flow: row nowrap;

}

.col_items{
    display: flex;
    flex-flow: column nowrap;
}


header{
    justify-content: space-around;
    padding: 10px 0;
    background-color: #f0f3f4;
}

header nav{
    margin-top: 8%;
}
nav a {
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 15px;
    color: #000;
    font-weight: bold;
    transition-delay: 0.1s;
}

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

}


section{
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

section ul li {
  margin-right: 20px;
  text-align: center;
  list-style-type: none;
  padding: 20px 10px;
  border: 2px solid black;
  border-radius: 10px;
  transition-delay: 0.1s;
}

section ul li:hover {
    border-color: #c78c19;

}

section ul li:active {
    border-color: #088c19;
}

section ul li h2 {
    text-transform: capitalize;


}

section ul li:hover h2{
    font-size: 33px;
    color: #c78c19;
}

section ul li:active h2{
    font-size: 33px;
    color: #088c19;
}

.descripcion{
  font-size: 16px;
}

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


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

footer p{
    color:  #f0f3f4;
    font-size: 0.7em;
    margin: 1.3em;
}

/* contactos */

.col_items_contacto{
    width: 40%;
    justify-content: space-between;
    margin: 0 15%;
}

section form {
    padding: 2em 0;
}

section form input {
    padding: 0.5em 0.7em;
    margin: 0.5em 0 1.5em 0;
}

section form textarea {
    padding: 0.5em 0.7em;
    margin: 0.5em 0 1.5em 0;
}

.separador{
   margin: 0.5em 0;
}

#campoAtencion{
    width: 25%;
}

.enviar{
    border: 2px solid #c78c19;
    color:#c78c19;
    background-color: #fff;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
    text-transform: capitalize;
    transition: 1s all;
}

.enviar:hover{
    background-color:#c78c19;
    color: #000;
    transform: scale(1.05);
}

thead{
    color: #000;
    font-weight: bold;
    background-color: #c78c19;
    padding: 0.5em 0;
}

td,th{
    padding: 0.5em 0;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #f0f3f4;
}

por Rafaela Rocha

| 2876.2k xp | 8758 posts

Alura Scuba Team Scuba Team

17/04/2023

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