Objetivos da Aula

Resolver o exercício que nós mostramos na aula passada
Juntar o flexbox e o grid em um projeto prático, para você enxergar onde eles entram

Criando os arquivos

Nós iremos criar uma nova pasta chamada “projetoFlexbox&Grid”, nela iremos criar o flexbox e o css normal.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Projeto Flexbox&Grid</title>
</head>

<body></body>

</html>

Criando a estrutura HTML.

Agora vamos partir para a estrutura em html. Nós vamos começar criando um container, que vai ter dentro um header, um conteúdo principal e um footer.

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Projeto Flexbox&Grid</title>
</head>

<body>
  <div class="container">
    <header class="header"></header>
    <section class="gridContainer"></section>
    <footer class="footer"></footer>
  </div>
</body>

</html>

Nós sabemos que em cima dos grids, nós colocarmos um título e uma descrição. Nós vamos então criar isso agora.

<body>
  <div class="container">
    <header class="header"></header>
		<p class="sectionTitle">BEM VINDO A ONEBITSPORTS!</p>
    <p class="sectionDescription">Aqui é onde você encontra todos os itens mais novos e modernos do seu esporte preferido.</p>
    <section class="gridContainer"></section>
    <footer class="footer"></footer>
  </div>
</body>

Agora, nós vamos colocar nessa nossa pasta a pasta de imagens que iremos usar ⇒ https://drive.google.com/drive/folders/1c-6WO42GHz2QqQQnH1I5TCMVoVEYxyNa?usp=sharing

Tendo as imagens, nós iremos agora colocar no header a logo e uma div que vai ter os 3 botões de navegação.

<div class="header">
	<img src="./imagens/logoOnebitcode.svg" alt="logoOnebitcode" class="logoNavBar">
  <div class="headerBtnGroup">
	  <button class="navBtn">Login</button>
    <button class="navBtn">Registro</button>
    <button class="navBtn">FAQ</button>
  </div>
</div>

Agora iremos fazer a criação de duas divs no nosso nosso “gridContainer”, que será a coluna da esquerda e a coluna da direita.
```
<section class="gridContainer">
	<div class="mainContent"></div>
	<div class="sidebarContent"></div>
</section>
```

Agora, nós vamos criar apenas 1 card na coluna da esquerda, para depois apenas copiar e colar para os outros cards.

<div class="mainContent">
	<div class="categoryCard">
	  <img src="./imagens/boxe.jpg" alt="mainCardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">BOXE</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
</div>

Agora, basta copiarmos esse e ir colar mais 8 vezes, para termos 9 cards, mudando apenas o título dele.

<div class="mainContent">
	<div class="categoryCard">
	  <img src="./imagens/boxe.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">BOXE</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
</div>
	<div class="categoryCard">
	  <img src="./imagens/corssfit.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">CROSSFIT</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/natacao.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">NATAÇÃO</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/roupas.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">ROUPAS</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/basquete.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">BASQUETE</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/corrida.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">CORRIDA</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/surf.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">SURF</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/trilha.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">TRILHA</p>
    <p class="mainCategoryCardDescription">lorem20</p>
	</div>
	<div class="categoryCard">
	  <img src="./imagens/tenis.jpg" alt="cardImg" class="mainCardImg">
	  <p class="mainCategoryCardTitle">TÊNIS</p>
    <p class="mainCategoryCardDescription">lorem20</p>
</div>

Agora precisamos apenas criar um card para o sidebar. Sabemos que em cima dos cards temos um título, então vamos colocar ele antes do card.

<div class="sidebarContent">
	<p>CATEGORIAS EXTRAS</p>
	<div class="sidebarCard">
		<img src="./imagens/bicicletas.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">BICICLETAS</p>
  </div>
</div>

Bom, agora iremos copiar e mudaremos as imagens e o título.

<div class="sidebarContent">
	<p>CATEGORIAS EXTRAS</p>
	<div class="sidebarCard">
		<img src="./imagens/bicicletas.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">BICICLETAS</p>
  </div>
	<div class="sidebarCard">
		<img src="./imagens/esportesNaNeve.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">ESPORTES DE FRIO</p>
  </div>
	<div class="sidebarCard">
		<img src="./imagens/skate.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">SKATE</p>
  </div>
	<div class="sidebarCard">
		<img src="./imagens/futebolAmericano.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">FUTEBOL AMERICANO</p>
  </div>
	<div class="sidebarCard">
		<img src="./imagens/toga.jpg" alt="sidebarCardImg" class="sidebarCardImg">
    <p class="sidebarCardTitle">YOGA</p>
  </div>
</div>

Agora, falta apenas o nosso footer. Nós vamos colocar o footer com uma âncora, que vai levar para o topo, e com uma logo.

<footer class="footer">
	<img src="./imagens/logoOnebitcode.svg" alt="logoOnebitcode" class="logoFooter">
  <a href="" class="footerAnchor">VOLTAR PARA O TOPO</a>
</footer>

Agora, nós vamos colocar um id no nosso título, pois ele vai ser o ponto de volta da nossa âncora, depois vamos colocar esse id dentro do href da âncora.
```
<p class="pageTitle" id="backToTop">BEM VINDO A ONEBITSPORTS!</p>
```

Agora vamos colocar esse id no href e nós vamos ter um a âncora funcionando.

<footer class="footer">
	<img src="./imagens/logoOnebitcode.svg" alt="logoOnebitcode" class="logoFooter">
  <a href="#backToTop" class="footerAnchor">VOLTAR PARA O TOPO</a>
</footer>

Manipulando o css

Com tudo isso feito, nós vamos poder começar a criar a nossa página. Nós vamos fazer o padrão que fizemos até agora, tirar o margin e padding, colocar o box-sizing e uma fonte.
```
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 20px;
}
```