search

brunorafaelleao / PraticasHMTLCSS

MIT License
0 stars 0 forks source link

Modelo - Site que usa imagem, vídeo e formulário #1

Open brunorafaelleao opened 1 month ago

brunorafaelleao commented 1 month ago 
<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Viagem dos Sonhos</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>Pacotes</li>
          <li>Taxa</li>
          <li>Contato</li>
        </ul>
      </nav>
      <h1>Venha realizar a viagem dos seus sonhos</h1>
    </header>
    <section>
      <h2>Conheça nossos pacotes</h2>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
        dapibus eu mi a varius. Vestibulum ante ipsum primis in faucibus orci
        luctus et ultrices posuere cubilia curae; Donec in erat vehicula,
        blandit justo vitae, convallis sem. Quisque pharetra nunc eu ex
        tincidunt fermentum. Aenean hendrerit sem nec ornare pretium. Mauris
        venenatis ultricies ultricies. Mauris lacus urna, auctor eu quam a,
        placerat lobortis nibh. In sit amet ornare turpis. Nam quis nisl semper,
        pharetra risus vel, blandit nisi. Fusce scelerisque ligula eu mauris
        faucibus, nec tristique mauris commodo. Fusce convallis erat quis mi
        malesuada, at pharetra tellus vulputate. Praesent sollicitudin blandit
        pellentesque. Mauris faucibus semper nisl, pretium pretium justo finibus
        a.
        <br /><br /><a href="https://www.lipsum.com/feed/html" target="_blank"
          >Link</a
        >
      </p>
      <hr />
      <figure>
        <img
          src="img//nossos-pacotes/gramado.jpeg"
          alt="imagem de chalé Gramado"
        />
        <figcaption>Chalé em Gramado</figcaption>
      </figure>
      <figure>
        <img
          src="img/nossos-pacotes/porto-seguro.jpeg"
          alt="Praia em Porto Seguro"
        />
        <figcaption>Praia em Porto Seguro</figcaption>
      </figure>
      <figure>
        <img
          src="img/nossos-pacotes/rio-de-janeiro.jpeg"
          alt="Rio de Janeiro visto do alto"
        />
        <figcaption>Rio de Janeiro visto do alto</figcaption>
      </figure>
    </section>
    <video controls>
      <source src="videos/rabbit320.mp4" type="video/mp4" />
      <source src="videos/video_rabbit320.webm" type="video/webm" />
    </video>
    <section>
      <h2>Taxas e Serviços</h2>
      <p>Veja nossas taxas e serviços</p>
      <table border="">
        <caption>
          Descrição dos serviços respectivos valores
        </caption>
        <thead>
          <tr>
            <th>Serviços</th>
            <th>Valor</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Reserva de Hotel</td>
            <td>R$ 150,00</td>
          </tr>
          <tr>
            <td>Compra de Passagem</td>
            <td>R$ 100,00</td>
          </tr>
          <tr>
            <td>Aluguel de carros</td>
            <td>R$ 50,00</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Serviço</td>
            <td>Valor</td>
          </tr>
        </tfoot>
      </table>
    </section>
    <section>
      <h2>Orçamento</h2>
      <form action="" method="get">
        <fieldset>
          <legend>Dados da Viagem</legend>
          <label for="">Nome:</label><br />
          <input type="text" name="nome" /><br /><br />
          <label>Email:</label><br />
          <input type="email" name="email" /><br /><br />
          <label>Data de ida</label><br />
          <input type="date" name="dataIda" /><br /><br />
          <label>Data de volta</label><br />
          <input type="date" name="dataVolta" /><br /><br />
          <label>Quantidade de pessoas</label><br />
          <input type="number" name="qtdPessoas" /><br /><br />
        </fieldset>

        <fieldset>
          <legend>Quais serviços contratar?</legend>
          <label>
            <input type="checkbox" name="passagens" value="Passagens" />Compra
            de Passagens
          </label>
          <label>
            <br /><input
              type="checkbox"
              name="hospedagem"
              value="Hospedagem"
            />Reserva de Hospedagem
          </label>
          <label for="">
            <br /><input
              type="checkbox"
              name="veiculos"
              value="Veículo"
            />Reserva de Veículos
          </label>
        </fieldset>

        <label>Comentário</label><br />
        <textarea name="comentario" rows="5"></textarea><br /><br />

        <button>Salvar</button>
      </form>
    </section>
    <footer>
      <p>Desenvolvido por Bruno Leão</p>
    </footer>
  </body>
</html>