├── README.md
├── assets
├── css
│ └── style.css
└── images
│ ├── game-of-thrones.png
│ └── logo.png
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Módulo 3 - Trilha HTML
2 |
3 | **Título:** Recriando Wikipedia, com um layout melhor :)
4 |
5 | ## Objetivo
6 | Este desafio consiste em treinar você com relação a estrutura do site, e também aplicar conhecimentos adiquiridos sobre semântica e acessibilidade.
7 |
8 | ## Desafio
9 | Neste repositório tem uma estrutura básica já pré-montada de um layout simples com um pouco de CSS aplicado. Apenas para deixar mais apresentável.
10 |
11 | Fiquem a vontade para criar da forma que desejarem, e sobre os temas que quiserem. O intuito aqui é divertir, e ao mesmo tempo aprender com o desafio.
12 |
13 | Sigam as intruções da chamada do vídeo. Acredito que por lá, ficará mais fácil de entenderem como proceder.
14 |
15 | ## Links úteis
16 | - [Download do NVDA](https://www.nvaccess.org/download/)
17 | - [Wikipedia](https://pt.wikipedia.org/)
18 |
19 |
20 |
--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | body, html {
2 | margin: 0;
3 | padding: 0;
4 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5 | }
6 | ul { list-style: none; padding-left: 5px; }
7 | a { color:blue; text-decoration: none;}
8 | .bar {
9 | background-color: #f9f9fb;
10 | padding:15px;
11 | border-top: solid 1px #cdcdcd;
12 | border-bottom: solid 1px #cdcdcd;
13 | }
14 | .content {
15 | max-width: 1440px;
16 | margin: auto;
17 | grid-gap: 3rem;
18 | display: grid;
19 | gap: 3rem;
20 | grid-template-areas: "sidebar main anchors";
21 | grid-template-columns: minmax(0,15rem) minmax(0,2.5fr) minmax(0,15rem);
22 | padding-left: 1rem;
23 | padding-right: 1rem;
24 | }
25 | .footer {
26 | min-height: 100px;
27 | border-top: solid 1px #cdcdcd;
28 | }
29 | .anchors {
30 | border-left: solid 1px #cdcdcd;
31 | padding-left: 15px;
32 | }
33 | .sidebar {
34 | border-right: solid 1px #cdcdcd;
35 | }
36 | figure {
37 | text-align: center;
38 | }
--------------------------------------------------------------------------------
/assets/images/game-of-thrones.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitalinnovationone/trilha-html-modulo-3/dfa8811a07aeeaa212ccf97eaedcccffc8e5b816/assets/images/game-of-thrones.png
--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/digitalinnovationone/trilha-html-modulo-3/dfa8811a07aeeaa212ccf97eaedcccffc8e5b816/assets/images/logo.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Página Principal
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
Neste Artigo
34 |
37 |
38 |