<!doctype html>
<html lang="pt-br">
<head>
<title>Contato</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="formulario.css">
</head>
<body>
<header>
<div>
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<label for="nome">Nome</label>
<input type="text" id="nome" class="primeiros" required placeholder=" Fulano Silva">
<label for="email">E-mail</label>
<input type="text" id="email" class="primeiros" required placeholder="seuemail@dominio.com">
<label for="whatsapp">Telefone</label>
<input type="text" id="whatsapp" class="primeiros" required placeholder="+XX (XX) XXXXX-XXXX">
<label for="mensagem">Sobre o que gostaria de falar?</label>
<textarea cols="70" rows="10" id="mensagem" required></textarea>
<fieldset>
<legend> Qual a forma de contato?</legend>
<label for="radio-whatsapp"><input type="radio" value="whatsapp" name="contato" id="radio-whatsapp" checked>Whatsapp</label>
<label for="radio-email"><input type="radio" value="email" name="contato" id="radio-email">E-mail</label>
<label for="radio-telefone"><input type="radio" value="telefone" name="contato"id="radio-telefone">Telefone</label>
</legend>
<fieldset>
<legend> Horário para contato</legend>
<select>
<option>00h00 ás 06h00</option>
<option>06h00 ás 12h00</option>
<option>12h00 ás 18h00</option>
<option>18h00 ás 00h00</option>
<option>10h00 ás 18h00(Comercial)</option>
</select>
</fieldset>
<label for="checkbox"><input type="checkbox" id="checkbox" checked>Gostaria de receber novidades via Whatsapp?</label>
<input type="submit" value="Enviar formulário" class="enviar">
</form>
<table>
<thead>
<tr>
<td colspan="3"> Atendimento</td>
</tr>
<tr>
<th>Dia</th>
<th>Horário</th>
<th>Onde</th>
</tr>
<thead>
<tbody>
<tr>
<td>Segunda</td>
<td>24h</td>
<td>Whatsapp</td>
</tr>
<tr>
<td>Terça</td>
<td>24h</td>
<td>Whatsapp</td>
</tr>
<tr>
<td>Quarta</td>
<td>24h</td>
<td>Whatsapp</td>
</tr>
<tr>
<td>Quinta</td>
<td>24h</td>
<td>Whatsapp</td>
</tr>
<tr>
<td>Sexta</td>
<td>24h</td>
<td>Whatsapp</td>
</tr>
<tr>
<td>Sábado</td>
<td>24h</td>
<td>E-mail</td>
</tr>
<tr>
<td>Domingo</td>
<td>24h</td>
<td>E-mail</td>
</tr>
</tbody>
</table>
</main>
<footer>
</footer>
</body>
</html>
main{
width: 940px;
margin: 0 auto;
}
form label{
display: block;
font-size: 20px;
margin: 0 0 15px;
}
.primeiros{
display: block;
font-size: 30px;
margin: 0 0 10px;
border-radio: 10px;
}
form legend{
font-size: 20px;
margin: 10px 0 15px;
}
#checkbox{
margin: 20px 0 10px;
}
.enviar{
width: 30%;
border: none;
border-radius: 20px;
background: red;
color: whitesmoke;
padding: 10px;
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: 0.1s all;
}
.enviar:hover{
background: orange;
transform: scale(1.2)
}
table{
margin: 40px 0;
}
thead{
background: #CCCCCC;
color: white;
font-weight: bold;
}
th,td{
border: 1px solid #000000;
padding: 8px 15px;
text-align: center;
}
