Gente,
Eu fiz desse jeito, será que tá certo?
Visualmente parece bom, mas não sei se é gambiara.
produtos.html
<main class="principal">
<ul class="produtos">
<li class="produtos-item">
<h2>cabelo</h2>
<img src="cabelo.jpg" alt="" />
<p class="produto-descricao">
Na tesoura ou máquina, como o cliente preferir.
</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li class="produtos-item">
<h2>barba</h2>
<img src="barba.jpg" alt="" />
<p class="produto-descricao">
Corte e desenho profissional de barba.
</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li class="produtos-item">
<h2>cabelo+barba</h2>
<img src="cabelo+barba.jpg" alt="" />
<p class="produto-descricao">Pacote completo de cabelo e barba.</p>
<p class="produto-preco">R$ 35,00</p>
</li>
</ul>
</main>css para a página de produtos max-width: 480px
.produtos {
display: flex;
flex-direction: column;
gap: .75rem;
align-items: center;
width: auto;
}
.produtos-item {
width: 85%;
}contato.html
<main>
<form>
<label for="nomesobrenome">Nome</label>
<input
type="text"
id="nomesobrenome"
class="input-padrao"
placeholder="nome"
required
/>
<label for="email">Email</label>
<input
type="email"
id="email"
class="input-padrao"
placeholder="email@dominio.com.br"
required
/>
<label for="telefone">Telefone</label>
<input
type="tel"
id="telefone"
class="input-padrao"
placeholder="(xx) x xxxx-xxxx"
required
/>
<label for="mensagem">Mensagem</label>
<textarea
cols="60"
rows="10"
id="mensagem"
class="input-padrao"
required
></textarea>
<fieldset>
<legend>Como prefere o nosso contato?</legend>
<label for="radio-email"
><input
type="radio"
name="contato"
value="email"
id="radio-email"
/>Email</label
>
<label for="radio-telefone"
><input
type="radio"
name="contato"
value="telefone"
id="radio-telefone"
/>Telefone</label
>
<label for="radio-whatsapp"
><input
type="radio"
name="contato"
value="whatsapp"
id="radio-whatsapp"
/>Whatsapp</label
>
</fieldset>
<fieldset>
<legend>Qual horário prefere ser atendido?</legend>
<select>
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label>
<input type="checkbox" class="checkbox" checked /> Gostaria de receber
nossas novidades por e-mail?
</label>
<input type="submit" value="Enviar Formulário" class="enviar" />
</form>
<table>
<thead>
<tr>
<th>Dia</th>
<th>horário</th>
</tr>
</thead>
<tbody>
<tr>
<td>Segunda</td>
<td rowspan="3">8h ~ 20h</td>
</tr>
<tr>
<td>Quarta</td>
</tr>
<tr>
<td>Sexta</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Bahia</td>
</tr>
</tfoot>
</table>
</main>css
form, table {
width: auto;
margin: .75rem auto;
}
form {
padding: 1rem;
}
.enviar {
padding: 1rem 1rem;
width: 100%;
}
