├── arquivos
├── imagem.jpg
├── styles.css
└── index.html
└── projeto
├── img
├── noticia-1.jpg
├── noticia-2.jpg
└── noticia-3.jpg
├── style.css
└── index.html
/arquivos/imagem.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/curso_html_2023/HEAD/arquivos/imagem.jpg
--------------------------------------------------------------------------------
/projeto/img/noticia-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/curso_html_2023/HEAD/projeto/img/noticia-1.jpg
--------------------------------------------------------------------------------
/projeto/img/noticia-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/curso_html_2023/HEAD/projeto/img/noticia-2.jpg
--------------------------------------------------------------------------------
/projeto/img/noticia-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matheusbattisti/curso_html_2023/HEAD/projeto/img/noticia-3.jpg
--------------------------------------------------------------------------------
/arquivos/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #afaaaa;
3 | }
4 |
5 | li {
6 | color: red;
7 | }
8 |
9 | .item {
10 | color: blue;
11 | }
12 |
13 | #meu-titulo {
14 | color: green;
15 | font-size: 50px;
16 | background-color: black;
17 | border: 2px solid red;
18 | margin: 50px;
19 | padding: 50px;
20 | }
21 |
--------------------------------------------------------------------------------
/projeto/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | font-family: Arial, sans-serif;
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | /* Cabeçalho */
8 | header {
9 | background-color: #333;
10 | color: #fff;
11 | display: flex;
12 | justify-content: space-between;
13 | align-items: center;
14 | padding: 10px 20px;
15 | }
16 |
17 | header h1 {
18 | margin: 0;
19 | }
20 |
21 | nav {
22 | display: flex;
23 | justify-content: center;
24 | }
25 |
26 | nav ul {
27 | display: flex;
28 | list-style: none;
29 | gap: 1rem;
30 | }
31 |
32 | nav a {
33 | color: #fff;
34 | text-decoration: none;
35 | }
36 |
37 | /* Conteúdo principal */
38 | .news-container {
39 | display: flex;
40 | flex-wrap: wrap;
41 | justify-content: center;
42 | margin: 1rem 0;
43 | gap: 5rem;
44 | }
45 |
46 | .news-item {
47 | background-color: #fff;
48 | border: 1px solid #333;
49 | box-shadow: rgba(0, 0, 0, 0.34) 4px 6px 8px;
50 | margin: 1.5rem 0;
51 | padding: 1rem;
52 | width: 600px;
53 | display: flex;
54 | flex-direction: column;
55 | gap: 1rem;
56 | }
57 |
58 | .news-item img {
59 | height: 200px;
60 | object-fit: cover;
61 | width: 100%;
62 | margin-bottom: 1rem;
63 | }
64 |
65 | /* Barra lateral */
66 | aside h3 {
67 | margin-bottom: 1.5rem;
68 | }
69 |
70 | aside ul {
71 | display: flex;
72 | flex-direction: column;
73 | gap: 1rem;
74 | list-style-position: inside;
75 | }
76 |
77 | /* Rodapé */
78 |
79 | footer {
80 | padding: 2rem;
81 | background-color: #333;
82 | text-align: center;
83 | color: #fff;
84 | }
85 |
--------------------------------------------------------------------------------
/projeto/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Site de Notícias
4 |
5 |
6 |
7 |
8 | Site de Notícias
9 |
17 |
18 |
19 |
20 | Últimas Notícias
21 |
22 | 
23 | Título da Notícia 1
24 | Resumo da Notícia 1
25 | Leia Mais
26 |
27 |
28 | 
29 | Título da Notícia 2
30 | Resumo da Notícia 2
31 | Leia Mais
32 |
33 |
34 | 
35 | Título da Notícia 3
36 | Resumo da Notícia 3
37 | Leia Mais
38 |
39 |
40 |
49 |
50 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/arquivos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Alguma coisa
9 |
10 |
11 |
12 |
13 |
14 | Minha marca
15 |
19 |
20 |
21 |
22 | Algum título 2
23 | Aqui eu posso escrever um texto maior.
24 | Outro título
25 | Mais um título
26 | Eu tenho um texto e isso é importante.
27 | Eu tenho um texto e isso é importante.
28 |
29 | 
30 | 
33 |
34 | Google
35 |
36 |
37 | Hora de Codar
42 |
43 |
44 |
45 | Lista de tarefas:
46 |
47 | - Lavar o carro
48 | - Estudar com o Matheus
49 | - Entrar para a Comunidade
50 | - Me tornar um programador em menor tempo possível
51 |
52 |
53 | - Fazer a massa
54 | - Assar alguma coisa
55 | - Decorar o bolo
56 | - Colocar a cereja
57 |
58 |
59 |
60 |
61 |
62 | | Nome: |
63 | Profissão: |
64 |
65 |
66 | | Matheus |
67 | Programador |
68 |
69 |
70 | | João |
71 | Engenheiro |
72 |
73 |
74 |
75 | Formulário
76 |
95 |
96 |
97 |
Algum texto
98 |
Algum conteúdo
99 |