├── aula3 ├── style_pred.css ├── style_id.css ├── style.css ├── estilo.css ├── style_class.css ├── css_externo.html ├── css_inline.html ├── pred.html ├── id.html ├── css_inline-1.html ├── novo.html ├── index.html ├── css_interno.html ├── class.html ├── css_interno1.html └── css_interno-1.html ├── aula6 ├── cristal.jpg ├── style.css └── index.html ├── aula7 ├── img │ └── pumpkin.png ├── style_summary.css ├── style_lista.css ├── index_listas_style.html ├── index_listas.html ├── index_listas_intercaladas.html ├── index.html ├── index_summary_details.html ├── index_lista1.html └── style.css ├── aula6-1 ├── img │ └── favicon.ico ├── style.css └── index.html ├── aula5 ├── style.css ├── aula5_02.html ├── style_font_family.css ├── aula5_01.html ├── style_medida.css ├── aula5_03.html ├── style_medida1.css └── index.html ├── README.md ├── aula1 └── index.html ├── aula4 ├── style_hsl.css ├── style_hexa.css ├── style_nome.css ├── style_rgb.css └── aula4.html ├── aula8 ├── atividade3.txt └── index.html └── aula2 ├── aula2_01.html ├── aula2_02.html ├── aula2_03.html └── aula2_04.html /aula3/style_pred.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | color:yellow; 3 | } -------------------------------------------------------------------------------- /aula6/cristal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hebertphp/DPI_5a_N_2022-2/HEAD/aula6/cristal.jpg -------------------------------------------------------------------------------- /aula7/img/pumpkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hebertphp/DPI_5a_N_2022-2/HEAD/aula7/img/pumpkin.png -------------------------------------------------------------------------------- /aula3/style_id.css: -------------------------------------------------------------------------------- 1 | #corpo{ 2 | color:blue; 3 | } 4 | #tit2{ 5 | color: red; 6 | } 7 | -------------------------------------------------------------------------------- /aula6-1/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hebertphp/DPI_5a_N_2022-2/HEAD/aula6-1/img/favicon.ico -------------------------------------------------------------------------------- /aula5/style.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | /* font-family:audiowide; */ 3 | /* font-family: 'Silkscreen', cursive; */ 4 | } -------------------------------------------------------------------------------- /aula3/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: gray; 3 | } 4 | h1 { 5 | color: red; 6 | margin-left: 20px; 7 | } -------------------------------------------------------------------------------- /aula3/estilo.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: gray; 3 | } 4 | h1,h2 { 5 | color: red; 6 | margin-left: 20px; 7 | text-align: center; 8 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Desenvolvimento para Internet 2 | * **Dia:** Quinta-Feira 3 | * **Período:** Noite 4 | 5 | ## Prof. Hebert Bratefixe Alquimim 6 | 7 | e-mail: [hebert@uni9.pro.br](mailto:hebert@uni9.pro.br) 8 | -------------------------------------------------------------------------------- /aula1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML 6 | 7 | 8 | Linha 1 9 | Linha 2 10 | 11 | -------------------------------------------------------------------------------- /aula7/style_summary.css: -------------------------------------------------------------------------------- 1 | .abobora{ 2 | width: 500px; 3 | } 4 | .imagem{ 5 | display: flex; 6 | gap:20px; 7 | } 8 | .imagem div{/*formatando a div que está dentro da class="imagem" */ 9 | border:1px solid red; 10 | } -------------------------------------------------------------------------------- /aula7/style_lista.css: -------------------------------------------------------------------------------- 1 | .menu{ /* estilizando para a class="menu" */ 2 | list-style-type: upper-roman;/* mudou para algarismo romano maiúsculo*/ 3 | } 4 | ul{ 5 | list-style-type: none;/* retirei todas as marcações da tag UL */ 6 | } -------------------------------------------------------------------------------- /aula4/style_hsl.css: -------------------------------------------------------------------------------- 1 | .cor1{ 2 | background-color:hsla(0,100%,50%,0.5); 3 | } 4 | .cor2{ 5 | background-color: hsla(120,100%,50%,0.2); 6 | } 7 | .cor3{ 8 | background-color: hsla(240,100%,50%,0.1); 9 | color:hsl(0, 0%, 100%); 10 | } -------------------------------------------------------------------------------- /aula8/atividade3.txt: -------------------------------------------------------------------------------- 1 | A atividade está no Google Classroom 2 | Atividade 3 - DPI_5a_N 3 | 4 | Vou deixar o mic desligado 5 | Estarei acompanhando vocês 6 | até às 22hs pelo chat. 7 | 8 | Uma ótima atividade para vocês. 9 | 10 | https://classroom.google.com/ -------------------------------------------------------------------------------- /aula2/aula2_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Aula2 5 | 6 | 7 | 8 |

Avisar que o conteúdo desta página

9 |

está em:
portugês (pt-br)

10 | 11 | -------------------------------------------------------------------------------- /aula3/style_class.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: Verdana, Geneva, Tahoma, sans-serif; 3 | } 4 | .fundo_cinza{ 5 | background-color: gray; 6 | } 7 | .fundo_amarelo{ 8 | background-color: yellow; 9 | } 10 | .texto_azul{ 11 | color:blue; 12 | } 13 | .texto_vermelho{ 14 | color:red; 15 | } -------------------------------------------------------------------------------- /aula3/css_externo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - externo 6 | 7 | 8 | 9 |

Título na cor vermelha, com margem esquerda de 20px

10 |

Esse parágrafo não tem formatação

11 | 12 | -------------------------------------------------------------------------------- /aula3/css_inline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - inline 6 | 7 | 8 |

Título na cor azul, com margem esquerda de 10px

9 |

Esse parágrafo não tem formatação

10 | 11 | -------------------------------------------------------------------------------- /aula3/pred.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Regras de Precedência 6 | 7 | 10 | 11 | 12 |

O título está na cor?

13 | 14 | -------------------------------------------------------------------------------- /aula4/style_hexa.css: -------------------------------------------------------------------------------- 1 | .cor1{ background-color: #ff0000; } 2 | .cor2{ background-color: #00ff00; } 3 | .cor3{ background-color: #0000ff; } 4 | .cor4{ background-color: #ffff00; } 5 | .cor5{ background-color: #808080; } 6 | .cor6{ 7 | background-color: #000000; 8 | color: #ffffff; 9 | } 10 | /* 11 | 00 Mínimo 12 | FF Máximo 13 | Azul #0000FF #00F 14 | cinza #7F7F7F #555 15 | */ -------------------------------------------------------------------------------- /aula3/id.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - id 6 | 7 | 8 | 9 |

Título azul

10 |

Parágrafo azul

11 |

Cabeçalho de nível 2 vermelho

12 |

Conteúdo de um parágrafo azul

13 | 14 | -------------------------------------------------------------------------------- /aula4/style_nome.css: -------------------------------------------------------------------------------- 1 | .cor1{ background-color: red; } 2 | .cor2{ background-color: green; } 3 | .cor3{ background-color: blue; } 4 | .cor4{ background-color: yellow; } 5 | .cor5{ background-color: aquamarine; } 6 | .cor6{ 7 | background-color: black; 8 | color: white; 9 | } 10 | h1{ 11 | background-color: darkslategray; 12 | } 13 | body{ 14 | background-color: lightgray; 15 | }/* comenta */ 16 | -------------------------------------------------------------------------------- /aula3/css_inline-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - inline 6 | 7 | 8 | 9 |

Título na cor azul, com margem esquerda de 10px

10 |

Esse parágrafo não tem formatação

11 | 12 | -------------------------------------------------------------------------------- /aula3/novo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

Sei lá

12 |

Outra linha

13 | 14 | -------------------------------------------------------------------------------- /aula5/aula5_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unidades de Medida2 CSS 5 | 6 | 7 | 8 |

Unidades de Medida

9 |

240px

10 |

15rem

11 |

25vw

12 |

25%

13 | 14 | -------------------------------------------------------------------------------- /aula2/aula2_02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | H1 a H6 5 | 6 | 7 | 8 |

Título de primeira importância

9 |

Título de segunda importância

10 |

Título de terceira importância

11 |

Título de quarta importância

12 |
Título de quinta importância
13 |
Título de sexta importância
14 | 15 | -------------------------------------------------------------------------------- /aula3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS 6 | 7 | 8 | CSS Inline
9 | CSS Interno
10 | CSS Externo
11 | id
12 | class
13 | Precedência
14 | 15 | -------------------------------------------------------------------------------- /aula3/css_interno.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - interno 6 | 15 | 16 | 17 |

Título na cor vermelha, com margem esquerda de 30px

18 |

Esse parágrafo não tem formatação

19 | 20 | -------------------------------------------------------------------------------- /aula5/style_font_family.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | font-size:3rem; 3 | } 4 | h2{ 5 | font-size:2.5rem; 6 | } 7 | .f1{ 8 | font-family: Arial, sans-serif; 9 | } 10 | .f2{ 11 | font-family: Georgia, serif; 12 | } 13 | .f3{ 14 | font-family: 'Courier New', monospace; 15 | } 16 | .f4{ 17 | font-family: 'Brush Script MT', cursive; 18 | } 19 | .f5{ 20 | font-family: papyrus; 21 | } 22 | .f6{ 23 | font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; 24 | } -------------------------------------------------------------------------------- /aula2/aula2_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Comentários 5 | 6 | 7 | 8 |

Título de primeira importância

9 | 10 |

Título de segunda importância

11 |

Título de terceira importância

12 | 16 |
Título de sexta importância
17 | 18 | -------------------------------------------------------------------------------- /aula2/aula2_04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Comentários 5 | 6 | 7 | 8 |

Título de primeira importância

9 | 10 |

Título de segunda importância

11 |

Título de terceira importância

12 | 16 |
Título de sexta importância
17 | 18 | -------------------------------------------------------------------------------- /aula4/style_rgb.css: -------------------------------------------------------------------------------- 1 | .cor1{ background-color: rgb(50%,50%,50%)} /* vermelho */ 2 | .cor2{ background-color: rgb(0, 255, 0); }/* verde */ 3 | .cor3{ background-color: rgb(0%, 0%, 100%); } /* azul */ 4 | .cor4{ background-color: rgb(255, 255, 0); }/* amarela */ 5 | .cor5{ background-color: rgb(128, 128, 128); }/* cinza */ 6 | .cor6{ 7 | background-color: rgb(0, 0, 0); 8 | color: rgb(255, 255, 255); 9 | } 10 | #outracor{ 11 | background-color: rgb(0,255,255); 12 | } 13 | /* 14 | RGB (vermelho, verde, azul) 15 | 0-255 16 | 17 | */ -------------------------------------------------------------------------------- /aula5/aula5_01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unidades de Medida CSS 5 | 6 | 7 | 8 |

Lorem ipsum dolor sit amet.

9 |

Lorem ipsum dolor sit amet.

10 |

Lorem ipsum dolor sit amet.

11 |

Lorem ipsum dolor sit amet.

12 |

Lorem ipsum dolor sit amet.

13 | 14 | -------------------------------------------------------------------------------- /aula7/index_listas_style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | list-style 8 | 13 | 14 | 15 |

list-style

16 | 21 | 22 | -------------------------------------------------------------------------------- /aula5/style_medida.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: hsl(0, 0%, 70%); 3 | } 4 | p{ 5 | text-align: center; 6 | } 7 | .tam1{ 8 | background-color:hsla(60,100%,50%, 0.3); 9 | } 10 | .tam2{ 11 | font-size:12pt; 12 | background-color:hsla(240,100%,50%,0.3); 13 | } 14 | .tam3{ 15 | font-size:100%; 16 | background-color:hsla(120,100%,50%,0.3); 17 | } 18 | .tam4{ 19 | font-size:32px; 20 | background-color: hsla(0,100%,50%,0.3); 21 | } 22 | .tam5{ 23 | font-size: 2rem; 24 | background-color: hsla(300,100%,50%,0.3); 25 | } 26 | span{ 27 | font-size:2rem; 28 | } -------------------------------------------------------------------------------- /aula5/aula5_03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unidades de Medida2 CSS 5 | 6 | 7 | 8 |

Font-family

9 |

Arial - sans-serif
Arial - sans-serif

10 |

Georgia - serif
Georgia - serif

11 |

Courier New - monospace
Courier New - monospace

12 |

Brush Script MT - cursive
Brush Script MT - cursive

13 |

Papyrus - fantasy
Papyrus - fantasy

14 | 15 | -------------------------------------------------------------------------------- /aula5/style_medida1.css: -------------------------------------------------------------------------------- 1 | /* Resetar css */ 2 | *{ 3 | margin:0; 4 | padding:0; 5 | } 6 | .tam1{ 7 | background: hsla(240, 100%, 50%, 0.4); 8 | width: 500px; 9 | height: 240px; 10 | } 11 | .tam2{ 12 | background: hsla(0,100%,50%,0.4); 13 | width: 15rem; 14 | height: 15rem; 15 | } 16 | .tam3{ 17 | background: hsla(120,100%,50%,0.4); 18 | width: 25vw; 19 | /* height: 25vh; */ 20 | } 21 | .tam4{ 22 | background: hsla(60,100%,50%,0.4); 23 | width: 25%; 24 | } 25 | /* 26 | https://source.unsplash.com/XcK3gINysWk 27 | https://source.unsplash.com/xRr9Lz3xfYs/300x300 28 | 29 | */ -------------------------------------------------------------------------------- /aula6/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | #dv1{ 7 | background-color: aquamarine; 8 | width: 300px; 9 | height: 200px; 10 | /* margin:30px; */ 11 | /* padding: 20px; */ 12 | border: 3px solid blue; 13 | } 14 | img{ 15 | width:200px; 16 | } 17 | #dv2{ 18 | background-color: orange; 19 | background-image: url('cristal.jpg'); 20 | background-size:cover; 21 | background-position: 50% 50%;/* center */ 22 | background-repeat: no-repeat; 23 | width:300px; 24 | height: 100px; 25 | /* margin:10px auto; */ 26 | color: #fff; 27 | } 28 | -------------------------------------------------------------------------------- /aula3/class.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - class 6 | 7 | 8 | 9 |

Título azul

10 |

Parágrafo fundo cinza

11 |

Cabeçalho de nível 2 vermelho

12 |

Conteúdo de um parágrafo

13 |

Outro Cabeçalho de nível 2 vermelho

14 |

Outro parágrafo fundo cinza

15 |

Cabeçalho de nível 2 fundo amarelo

16 | 17 | -------------------------------------------------------------------------------- /aula7/index_listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Listas 8 | 9 | 10 |

Listas

11 |

Lista ordenada

12 |
    13 |
  1. Primeiro item
    2. 14 |
  2. Segundo item
    3. 15 |
  3. Terceiro item
    4. 16 |
17 |

Lista não ordenada

18 | 23 | 24 | -------------------------------------------------------------------------------- /aula6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Box Model 8 | 9 | 10 | 11 |
12 | Bola de cristal 13 | 14 |

lorem10

15 |
16 |
17 |

Lorem ipsum dolor sit amet.

18 |
19 | 20 | -------------------------------------------------------------------------------- /aula3/css_interno1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - interno 6 | 20 | 21 | 22 |

Título na cor verde, com margen esquerda de 30px

23 |

Esse parágrafo não tem formatação

24 |

Subtítulo

25 |

Texto

26 |

Outro subtit

27 |

Texto

28 | 29 | -------------------------------------------------------------------------------- /aula6-1/style.css: -------------------------------------------------------------------------------- 1 | /* -- reset da Página -- */ 2 | *{ 3 | margin:0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | .tudo{ 8 | width: 70%;/* 70% da largura do navegador */ 9 | /* height: 300px; */ 10 | border: 1px solid blue; 11 | margin: 0 auto; 12 | } 13 | .tudo img{/* formatar as imagens que estão dentro da classe tudo */ 14 | width: 100%;/* 100% da largura da class="tudo" */ 15 | } 16 | h1{ 17 | background-color: black; 18 | color: #fff; 19 | text-align: center; 20 | height: 50px; 21 | } 22 | .sec1,.sec2{ 23 | background-color: gray; 24 | height: 100vh; 25 | } 26 | nav{ 27 | background-color: #000; 28 | } 29 | nav a{ 30 | color: #fff; 31 | text-decoration: none; 32 | } 33 | nav a:hover{ 34 | background-color: gray; 35 | } -------------------------------------------------------------------------------- /aula5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Página com fontes 8 | 10 | 11 | 12 | 13 | 14 | 15 |

Título

16 |
17 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime, quaerat!

18 | 19 | 20 | -------------------------------------------------------------------------------- /aula3/css_interno-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS - interno 6 | 22 | 23 | 24 |

Título na cor vermelha, com margem esquerda de 30px

25 |

Esse parágrafo não tem formatação

26 |

Outro parágrafo

27 |

Outro texto

28 | 29 | 35 | 36 | -------------------------------------------------------------------------------- /aula7/index_listas_intercaladas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Listas Intercaladas 8 | 9 | 10 |

Listas Intercaladas

11 |
    12 |
  1. Primeiro item
    2. 13 | 17 |
  2. Segundo item
    3. 18 |
      19 |
    1. Sub item 1
      2. 20 | 24 |
    25 |
  3. Terceiro item
    4. 26 |
      27 |
    1. Sub item 1
      2. 28 |
    2. Sub item 2
      3. 29 |
    30 |
31 | 32 | -------------------------------------------------------------------------------- /aula7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | menu 8 | 9 | 10 | 11 |
12 |

Logo 📺

13 | 20 |
21 |
22 |
23 |

Div 1

24 |

Outra coisa

25 |
26 |
27 |

Div 2

28 |
29 |
30 |

Div 3

31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /aula4/aula4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cores 6 | 7 | 8 | 9 |

Cores

10 |

Vermelho

11 |

Verde

12 |

Azul

13 |

Amarelo

14 |

Cinza

15 |

White - Black

16 |

Outracor

17 |

Outra cor sem nada (nem class, nem id)

18 | 19 | 20 | -------------------------------------------------------------------------------- /aula6-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Imagens e Links 8 | 9 | 10 | 11 | 12 | 13 | 19 |

Imagens e Links

20 |
21 | 22 | Imagem com a temática de oceano 23 | imagens aleatorias do sol e dias ensolarados. 24 | 31 |
32 |
33 |

Equipe

34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, provident ex aperiam obcaecati perferendis soluta!

35 |
36 |
37 |

Produtos

38 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, provident ex aperiam obcaecati perferendis soluta!

39 |
40 | 41 | -------------------------------------------------------------------------------- /aula7/index_summary_details.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Listas 8 | 9 | 10 | 11 |

Tags details e summary

12 |
13 | Tag details 14 |

A tag details tem por finalidade...

15 |
16 |
17 | Tag summary 18 |

A tag summary tem por finalidade...

19 |
20 |
21 | Sobre o produto 22 |

Texto sobre o produto

23 | Batman 24 |
25 |
26 | Componentes do grupo: 27 | 32 |
33 | Tag summary 34 |

A tag summary tem por finalidade...

35 |
36 |
37 |
38 | Imagens 39 |

Texto sobre o produto

40 | Batman 41 | Abóbora 42 |
43 |
44 |
45 | Batman 46 |

texto

47 |
48 | 49 |
50 | Abóbora 51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /aula7/index_lista1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Listas 10 | 11 | 12 | 13 | 14 |

Listas

15 |

Listas ordenada < ol>

16 | 17 |
    18 |
  1. ol>li*4[tab] cria uma lista ordenada com 4 itens
    2. 19 |
  2. Item 2
    3. 20 |
  3. Item 3
    4. 21 |
  4. Item 4
    5. 22 |
23 |

Lista de Mercado

24 | 25 | 32 | 33 | 34 |

Menu de restaurante

35 |
    36 |
  1. 🍕Pizza
    2. 37 | 41 |
  2. 🍔Lanche
    3. 42 | 46 |
  3. 🥤Bebida
    4. 47 | 55 |
56 | 57 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /aula8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Formulário 8 | 9 | 10 |
11 |
12 | Cadastro 13 | *
14 | *
15 | *
16 | 17 | 18 |
19 |
20 | Lista de Compras 21 | 22 | Café
23 | Leite
24 | Pão
25 |
26 |
27 | Qual o nome da disciplina de quinta-feira? 28 | PFE
29 | Arquit
30 | Internet da Coisas
31 | Desenv. para Internet
32 |
33 |
34 | Selecione 35 | UF 36 | 42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /aula7/style.css: -------------------------------------------------------------------------------- 1 | /* cria variáveis css */ 2 | /* Declaração de variaveis */ 3 | :root{ 4 | --cor-fundo:hsl(240, 100%, 30%);/* cria a variável --cor-fundo com a cor azul escuro */ 5 | --cor-hover: hsl(0, 0%, 50%);/* cria a variável --cor-hover com a cor cinza*/ 6 | --cor-link: hsl(0, 0%, 100%);/* cria a variável --cor-link com a cor branca*/ 7 | --cor-am:yellow; 8 | 9 | --cor-d1:orange; 10 | --cor-d2:pink; 11 | --cor-d3:blue; 12 | /* --nome-da-var:valor; */ 13 | } 14 | 15 | /* -- reset de página */ 16 | *{ 17 | margin:0;/* zera as margens */ 18 | padding:0;/* zera os epsaçamentos internos */ 19 | box-sizing: border-box;/* calcula a largura e altura dos elementos sem levar em conta, padding e border */ 20 | font-family: Arial, Helvetica, sans-serif;/* família de fontes Arial, Helvetica, sans-serif*/ 21 | } 22 | 23 | /* formata a tag header */ 24 | header{ 25 | height: 60px;/* altura de 60px */ 26 | background-color: var(--cor-fundo);/* aplica o valor da variável --cor-fundo para a cor de fundo */ 27 | display: flex;/* permite colocar os elementos um ao lado do outro, no caso h2 e nav */ 28 | align-items: center;/* alinhamento na vertical centralizado */ 29 | justify-content: space-between;/* coloca os elementos nos cantos */ 30 | padding: 0px 30px;/* espaçamento interno para cima e baixo 0px, direito e esquerda 30px (para o logo e o menu não ficar colado nos cantos) */ 31 | } 32 | 33 | /* formata todos os links, tag a */ 34 | a{ 35 | text-decoration: none;/* retira o sublinhado dos links, tag a */ 36 | color: var(--cor-link);/* aplica o valor da variável --cor-link para a cor do texto */ 37 | } 38 | 39 | /* formata a tag ul que está dentro de nav que está dentro de header */ 40 | header nav ul{ 41 | list-style: none;/* retira os marcadores das listas */ 42 | display: flex;/* permite colocar os elementos um ao lado do outro, no caso as tags li */ 43 | } 44 | 45 | /* formata a tag a que está dentro de li que está dentro de ul que está dentro de nav que está dentro de header */ 46 | header nav ul li a{ 47 | transition: 0.5s;/* cria uma transição de 0.5 segundos */ 48 | padding: 20px 15px;/* espaçamento interno para cima e baixo 20px, direito e esquerda 15px */ 49 | } 50 | 51 | /* formata ao passar o mouse sobre a tag a que está dentro de li que está dentro de ul que está dentro de nav que está dentro de header */ 52 | header nav ul li a:hover{ 53 | background-color: var(--cor-hover);/* aplica o valor da variável --cor-hover para a cor de fundo */ 54 | } 55 | 56 | .container{ 57 | width: 100%; 58 | height: 60vh; 59 | border: 1px solid red; 60 | display: flex; 61 | justify-content: center; /* alinhamento na horizontal justify-content: center|end|start|space-around|space-evenly*/ 62 | align-items: center; /* align-items: center|end; */ 63 | gap: 5px; 64 | flex-wrap: wrap; 65 | background-image: linear-gradient(to top right,var(--cor-am),red,blue); 66 | } 67 | /* formatar todas as div que estão dentro do container */ 68 | .container div{ 69 | width: 250px; 70 | height: 50px; 71 | border: 1px solid blue; 72 | 73 | } 74 | .d1{ 75 | background-color: var(--cor-d1); 76 | display: flex; 77 | justify-content: space-between; 78 | align-items: center; 79 | } 80 | .d2{ 81 | background-color: var(--cor-d2); 82 | } 83 | .d3{ 84 | background-color: var(--cor-d3); 85 | } --------------------------------------------------------------------------------