Webleb - UI Elements - Atv.Alberto

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Clínica Vida</title>
  <link rel="stylesheet" href="style-v2.css">
</head>
<body>

<div class="container">
    <header>
      <h1>Clínica Vida</h1>
      <p>Cuidamos da sua saúde com atenção e carinho.</p>
    </header>

<div class="colunas">
      
      <div class="col-esq">
        <h2>Nossos serviços</h2>
        <ul>
          <li>Consultas</li>
          <li>Exames
            <ul>
              <li>Exame de sangue</li>
              <li>Raio-X</li>
            </ul>
          </li>
          <li>Vacinas</li>
        </ul>
        <br>

<h2>Horários de atendimento</h2>
        <table>
          <tr>
            <th>Dia</th>
            <th>Horário</th>
          </tr>
          <tr>
            <td>Segunda a Sexta</td>
            <td>08h – 18h</td>
          </tr>
          <tr>
            <td>Sábado</td>
            <td>08h – 12h</td>
          </tr>
        </table>
      </div>

<div class="col-dir">
        <h2>Agende sua visita</h2>
        
        <form>
          <label>Nome completo</label><br>
          <input type="text" name="nome" placeholder="Seu nome"><br><br>

<label>Serviço desejado</label><br>
          <select name="servico">
            <option>Consulta</option>
            <option>Exame de sangue</option>
            <option>Raio-X</option>
            <option>Vacinas</option>
          </select><br><br>

<label>Data preferida</label><br>
          <input type="date" name="data"><br><br>

<label>Observações</label><br>
          <input name="obs" rows="4" placeholder="Conte-nos como podemos ajudar"/><br><br>

<div style="margin-top: 5px;">
            <button type="submit" class="btn-enviar">Enviar</button>
            <button type="reset" class="btn-limpar">Limpar</button>
          </div>
        </form>
      </div>

</div>

<footer>
      <span>© 2026 Clínica Vida — Campus Monteiro</span>
      <a href="#">Site da OMS</a>
    </footer>
</div>

</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f0f4f8;
  padding: 20px;
}

.container {
  width: 860px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid #d0d7de;
}

header {
  background-color: #1a365d;
  color: #ffffff;
  padding: 20px;
}

header h1 {
  font-size: 24px;
  margin-bottom: 8px;
}

header p {
  font-size: 14px;
}

.colunas {
  display: flex;
  padding: 20px;
}

.col-esq {
  width: 45%;
  float: left;
}

.col-dir {
  width: 55%;
  margin-left: 20px;
}

h2 {
  color: #2b6cb0;
  font-size: 16px;
  margin-bottom: 10px;
}

ul {
  margin-left: 20px;
}

li {
  font-size: 14px;
  color: #2d3748;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #cbd5e0;
  padding: 6px;
  font-size: 13px;
  color: #2d3748;
}

th {
  background-color: #ebf8ff;
  color: #2b6cb0;
}

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

label {
  font-size: 13px;
  font-weight: bold;
  color: #2d3748;
}

input[type="text"], input[type="date"], select, textarea {
  width: 95%;
  padding: 6px;
  border: 1px solid #cbd5e0;
  border-radius: 3px;
  margin-top: 3px;
}

button {
  padding: 6px 12px;
  cursor: pointer;
}

.btn-enviar {
  background-color: #dd6b20;
  color: white;
  border: none;
}

.btn-limpar {
  background-color: #e2e8f0;
  border: 1px solid #cbd5e0;
  color: #4a5568;
}

footer {
  background-color: #1a365d;
  color: white;
  padding: 10px 20px;
  font-size: 12px;
}

footer a {
  color: #feebc8;
  float: right;
}

JS