WDD 130 | S03 - Projeto Site de Rafting: Página Sobre Nós

S03 Tarefa: Site de Rafting – Página Sobre Nós

Visão Geral

A tarefa desta semana apresenta um projeto de site com várias páginas sobre uma empresa de rafting em corredeiras. Ele será usado nas próximas semanas deste curso. Você começará criando uma das páginas do site, chamada "Sobre Nós". Ela oferece uma visão geral da finalidade do site, sua história e outras promoções da empresa.

Instruções

Introdução – Site de Rafting

A tarefa do site de rafting é um projeto que levará várias semanas. Você começará a desenvolver o site criando uma das páginas: "Sobre nós". O site representa uma empresa fictícia de rafting em corredeiras.

Leia a descrição do site de rafting para ter uma visão geral do projeto e conferir exemplos de empresas reais que atuam nesse ramo.

Configuração de Pasta e Arquivo

No VS Code, certifique-se de que o diretório wdd130 esteja aberto e adicione uma subpasta chamada "wwr" (wwr significa white water rafting, ou rafting em corredeiras). Ela conterá todas as páginas e recursos necessários para o site.
Adicione duas subpastas dentro da pasta wwr, chamadas "imagens" e "estilos".

Não se confunda, pois você já tem pastas de nível raiz (wdd130) chamadas imagens e estilos. Essas novas pastas são especificamente para o seu projeto do site de rafting e estão na subpasta do projeto wwr.
Adicione um arquivo chamado "sobre.html" no diretório wwr.

Desenvolva a Estrutura da Página: HTML

Utilize o seguinte wireframe/esboço como guia para desenvolver a estrutura, o layout e o estilo da sua página sobre.html.

No seu documento sobre.html, comece a escrever a estrutura HTML necessária, começando pelo elemento head, com os elementos meta e title obrigatórios.
Adicione uma meta description ao head com conteúdo conciso que resuma de forma atrativa o assunto da página da web.
Adicione um elemento meta author com o conteúdo sendo seu nome completo.
Na tag body pai, adicione os seguintes elementos: header, main e footer.
O elemento header contém 2 (dois) itens:
1. Um logotipo para um site de rafting que você criou ou baixou das opções fornecidas em Exemplos de Logotipos: Site de Rafting.
  
  Avalie Seu Conhecimento
  Lembre-se de que as imagem do seu logotipo e todas as imagens usadas no site precisam estar localizadas em um diretório imagens dentro do diretório wwr. Além disso, todas as imagens devem ser otimizadas (até 100 kB) e possuir um atributo alt apropriado.
2. Um elemento nav com 4 (quatro) tags <a> filhas com conteúdo correspondente. Os valores do atributo href, as referências de página, podem ser definidos agora, mesmo que as páginas ainda não existam.
  - index.html (a futura página inicial do wwr; não confunda com a página inicial do curso.)
  - sobre.html
  - passeios.html
  - contato.html
  Avalie Seu Conhecimento
```
<nav>
  <a href="index.html">Página Inicial</a>
  <a href="sobre.html">Sobre Nós</a> 
  <a href="passeios.html">Passeios</a>
  <a href="contato.html">Fale Conosco</a>
</nav>
```
  ou é possível utilizar uma lista, que é considerada uma prática melhor semanticamente.
```
<nav>
  <ul>
    <li><a href="index.html">Página Inicial</a></li>
    <li><a href="sobre.html">Sobre Nós</a></li>
    <li><a href="passeios.html">Passeios</a></li>
    <li><a href="contato.html">Fale Conosco</a></li>
  </ul>
</nav>
```
O elemento main deve conter os 3 (três) elementos a seguir:
1. Um div com a classe hero, com os seguintes itens:
2. Um elemento section com o seguinte conteúdo:
  - Um elemento h2 com uma seção intitulada "História".
  - Um elemento p com uma breve história da empresa. Não há problema em usar conteúdo aleatório.
3. Um elemento section com o seguinte conteúdo:
  - Um elemento h2 com uma seção intitulada "A aventura está te esperando!".
    
    Na próxima tarefa, você adicionará imagens a esta seção. Por enquanto, o conteúdo dela ficará vazio.
Avalie Seu Conhecimento
```
<main>
  <div class="hero">
    <img src="imagens/..." alt="...">
    <h1>Nome da Empresa de Rafting</h1>
    <article>
      <img src="imagens/..." alt="...">
      <p>Lorem ipsum dolor sit amet consectetur ...</p>
    </article>
  </div>
  <section>
    <h2>História</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing ...</p>
  </section>
  <section>
    <h2>A aventura está te esperando!</h2>
  </section>
</main>
```
Um elemento footer contendo:
- Um elemento de parágrafo p contendo um símbolo de direitos autorais, o ano, o nome da empresa de rafting e seu nome.
- Um elemento nav com uma atribuição de classe de redes-sociais que contém mais 3 (três) elementos img encapsulados por elementos âncora a que direcionam para três redes sociais diferentes. Os links podem ser genéricos.
  Exemplo
```
<nav class="redes-sociais">
  <a href="https://facebook.com">
    <img src="imagens/facebook.svg" alt="Ícone do Facebook">
  </a>
  <a href="https://linkedin.com">
    <img src="imagens/linkedin.svg" alt="Ícone do LinkedIn">
  </a>
  <a href="https://instagram.com">
    <img src="imagens/instagram.svg" alt="Ícone do Instagram">
  </a>
</nav>
```
  Recursos de Ícones de Redes Sociais
  iconfinder.com
  Google Fonts (Icons) (conteúdo em inglês).
- Na tarefa da semana 4, você irá aplicar um estilo ao rodapé para que as três imagens se encaixem no espaço disponível e fiquem organizadas horizontalmente, alinhadas à direita, conforme ilustrado no wireframe.

Exemplo

Confira abaixo um exemplo de como a página aparece renderizada em um navegador até este ponto:

Captura de Tela do HTML da Página Sobre Nós — *Observe que este é apenas um exemplo da página renderizada no navegador usando somente HTML e imagens válidas.*

Escreva o CSS

Crie um arquivo CSS para seu site de rafting chamado "rafting.css" e armazene-o na pasta estilos dentro da pasta wwr.
Vincule o arquivo CSS à sua página sobre.html usando o elemento <link> no <head> do seu documento HTML.
Avalie Seu Conhecimento
```
<link rel="stylesheet" href="estilos/rafting.css">
```
Defina as variáveis CSS no seletor de pseudoclasse :root do documento, localizado no início do seu arquivo rafting.css, utilizando o esquema de cores que preferir. Isso significa escolher cores que combinem bem entre si, proporcionando contraste suficiente quando usadas juntas.
Avalie Seu Conhecimento

O exemplo a seguir serve apenas como referência. Use as cores e fontes que você selecionou e utilizou como referência.
```
:root {
  --cor-primaria: #055a05; /* verde-floresta */
  --cor-secundaria: #f4a261; /* bege médio */
  --cor-destaque1: #264653; /* azul-escuro acinzentado */
  --cor-destaque2: #e9c46a; /* amarelo-claro dourado */
  --fonte-titulo: "Times New Roman", "Georgia", serif;
  --fonte-body: Arial, Helvetica, sans-serif;
}
```
As fontes usadas neste exemplo são fontes serif e sans-serif clássicas, que dão um visual formal e tradicional, e estão geralmente disponíveis em todos os navegadores modernos.

Você usará essas variáveis em suas regras CSS.
Por exemplo, para definir a cor de fundo do cabeçalho como --cor-primaria e a cor da fonte como --cor-destaque2:
```
header {
    background-color: var(--cor-primaria);
    color: var(--cor-destaque2);
  }
```
Redefina as propriedades CSS box-model para 0 (zero) para todos os elementos usando o seletor universal e as seguintes declarações:
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
Estilize todo o texto do elemento body do documento usando a variável fonte-body. Adicione também uma declaração CSS para definir a cor do texto do conteúdo.
```
body {
  font-family: var(--fonte-body);
  color: var(--cor-destaque1);
}
```
Limite a largura da página combinando os elementos header, main e footer, e centralize o conteúdo na tela usando margem auto left-right.
```
header, main, footer {
  width: 840px;
  margin: 0 auto;
}
```
O seletor CSS header, main, footer { seleciona três elementos HTML diferentes simultaneamente, usando uma vírgula para especificar cada dos filhos do corpo do documento.
Estilize os títulos (todos ou apenas aqueles que você estiver usando) declarando os elementos font-family e color (fonte e cor), além do alinhamento do texto conforme indicado no wireframe.
```
h1, h2 {
  font-family: var(--fonte-titulo);
  color: var(--cor-primaria);
  text-align: center;

}
```
Defina alguns estilos básicos e consistentes de margin e padding para os elementos nav, paragraph, section e article
```
nav, p, section, article {
  margin: 16px;
  padding: 8px;
}
```
Remova os sublinhados dos links de imagens de mídia social no elemento footer.
Esse sublinhado padrão em hyperlinks pode atrapalhar a visualização e é desnecessário quando os links são imagens.
```
.redes-sociais a {
    text-decoration: none;
}
```
O seletor descendente (.redes-sociais a) aplica-se apenas às tags de âncora (a) que são filhas de elementos com a classe redes-sociais, e não a todas as tags de âncora.

Personalize o elemento div hero com sobreposição.

A imagem a seguir é um exemplo de sobreposição.

Exemplo da imagem hero com sobreposição — Exemplo de elemento div hero com um título e sobreposição de article.

Estilize o elemento div com a classe hero usando um valor relativo (relative) para que seus elementos filhos, h1 e article, possam ser posicionados acima do valor absoluto (absolute) dentro de div.
Avalie Seu Conhecimento
```
.hero {
  position: relative;
}
```
Estilize a imagem dentro de div class="hero" para preencher toda a largura de div e para que seja um elemento de bloco. Isso é importante porque a imagem é o fundo do elemento div hero e precisa preencher toda a largura de div.
```
.hero img {
    display: block;
    width: 100%;
    height: auto;
  }
```
A imagem deve ser grande o suficiente para preencher o espaço sem ficar pixelada ou distorcida, caso seu tamanho original seja pequeno demais.

Usamos a propriedade height auto para manter a proporção da imagem com base na largura fornecida; neste caso, 100% do contêiner.

Estilize o título h1 usando uma posição absoluta (position: absolute) e decida onde posicioná-lo sobre a imagem para que se ajuste. O exemplo acima utiliza as seguintes declarações CSS:

h1 {
  position: absolute;
  top: 20px;
  width: 100%;
  padding: 16px;
  text-align: center;
  opacity: 0.7;
  background-color: var(--cor-destaque1);
  color: #fff; /* texto branco – certifique-se de que haja contraste suficiente com a cor de fundo */
}

Estilize article usando posicionamento absoluto e um estilo de sua preferência.
Estilize o elemento img dentro de article, posicionando-a à direita e definindo uma margem e uma largura específicas. O CSS para esta imagem é importante, pois precisamos especificar que apenas ela deve aparecer na página. O exemplo acima utiliza o seguinte CSS:
```
.hero article img {
  float: right;
  width: 125px;
}
```
Você pode adicionar outros estilos à imagem, como border, margin, box-shadow, etc., dependendo da sua imagem e do design.
Faça quaisquer correções ou ajustes adicionais no CSS que julgar necessários para que o layout da página fique o mais próximo possível do wireframe apresentado

Ajuda: Captura de Tela da Página de Exemplo

Clique aqui para ver outro exemplo da aparência da página agora.
Sua página terá cores, fontes, conteúdo e imagens diferentes da página de exemplo, mas neste ponto ela deve ter um layout similar.

Teste

Teste seu trabalho continuamente enquanto segue as etapas, carregando a página no seu navegador local usando o Live/Five Server.

Você não precisa estar conectado à Internet enquanto usa um servidor local para testar suas páginas localmente durante o desenvolvimento.
Confirme (commit) e sincronize suas alterações para seu repositório wdd130 habilitado para o GitHub Pages.
Execute a ✔ ferramenta de Auditoria de Página desta tarefa para verificar se você possui o conteúdo básico do documento.
Faça as correções necessárias e certifique-se de confirmar (commit) novamente e sincronizar seu trabalho atualizado sempre que necessário.

Envio

Envie seu URL habilitado para o GitHub Pages no Canvas. Aqui está um exemplo de URL que você precisará enviar.
```
https://seunomedeusuariodogithub.github.io/wdd130/wwr/sobre.html
```