├── about.html ├── assets ├── Imagem.png ├── github.png ├── instagram.png ├── linkedin.png ├── twitch.png └── twitter.png ├── index.html └── styles └── style.css /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Sobre mim 9 | 10 | 11 | 12 | 13 |

14 | 18 |

19 | 20 |

21 |

22 |

Sobre mim

23 |

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti 24 | atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, 25 | similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. 26 |

27 |

28 | Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est 29 | eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas 30 | assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum 31 | necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum 32 | rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut 33 | perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat 34 | cupidatat non.

35 |

36 |

Foto da Joana Santos programando

37 |

38 | 39 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /assets/Imagem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/Imagem.png -------------------------------------------------------------------------------- /assets/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/github.png -------------------------------------------------------------------------------- /assets/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/instagram.png -------------------------------------------------------------------------------- /assets/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/linkedin.png -------------------------------------------------------------------------------- /assets/twitch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/twitch.png -------------------------------------------------------------------------------- /assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alura-cursos/Portifolio-HTML-e-CSS-Curso4/21c3117455b7290caf6b1793b26683245e9206d5/assets/twitter.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Portifolio 9 | 10 | 11 | 12 | 13 |

14 | 18 |

19 |

20 |

21 |

Eleve seu negócio digital a outro nívelcom um Front-end de qualidade! 23 |

24 |

Olá! Sou Joana Santos, desenvolvedora 25 | Front-end com especialidade em React, HTML e 26 | CSS. Ajudo pequenos negócios e designers a 27 | colocarem em prática boas ideias. Vamos 28 | conversar?

29 |

30 |

Acesse minhas redes

33 | Github 34 | 35 | 36 |

37 | linkedin 38 | 39 | 40 |

41 | Twitch 42 | 43 |

44 |

45 |

Foto da Joana Santos programando

46 |

47 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap'); 2 | 3 | :root { 4 | --cor-primaria: #000000; 5 | --cor-secundaria: #F6F6F6; 6 | --cor-terciaria: #22D4FD; 7 | --cor-hover: #272727; 8 | 9 | --fonte-primaria: 'Krona One', sans-serif; 10 | --fonte-secundaria: 'Montserrat', sans-serif; 11 | } 12 | *{ 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | body{ 18 | box-sizing: border-box; 19 | background-color: var(--cor-primaria); 20 | color: var(--cor-secundaria); 21 | } 22 | .cabecalho{ 23 | padding: 2% 0% 0% 15%; 24 | } 25 | .cabecalho__menu{ 26 | display: flex; 27 | gap: 80px; 28 | } 29 | .cabecalho__menu__link{ 30 | font-family: var(--fonte-secundaria); 31 | font-size: 1.5rem; 32 | font-weight: 600; 33 | color: var(--cor-terciaria); 34 | text-decoration: none; 35 | } 36 | .apresentacao{ 37 | padding: 5% 15%; 38 | display: flex; 39 | align-items: center; 40 | justify-content: space-between; 41 | } 42 | .apresentacao__conteudo{ 43 | width: 615px; 44 | display: flex; 45 | flex-direction: column; 46 | gap: 40px; 47 | } 48 | 49 | .apresentacao__conteudo__titulo{ 50 | font-size: 2.25rem; 51 | font-family: var(--fonte-primaria); 52 | } 53 | .titulo-destaque{ 54 | color: var(--cor-terciaria); 55 | } 56 | .apresentacao__conteudo__texto{ 57 | font-size: 1.5rem; 58 | font-family: var(--fonte-secundaria); 59 | } 60 | 61 | .apresentacao__links{ 62 | display: flex; 63 | flex-direction: column; 64 | justify-content: space-between; 65 | align-items: center; 66 | gap: 32px; 67 | } 68 | .apresentacao__links__subtitulo{ 69 | font-family: var(--fonte-primaria); 70 | font-weight: 400; 71 | font-size: 1.5rem; 72 | } 73 | .apresentacao__links__link{ 74 | display: flex; 75 | justify-content: center; 76 | gap: 16px; 77 | border: 2px solid var(--cor-terciaria); 78 | width: 378px; 79 | text-align: center; 80 | border-radius: 8px; 81 | font-size: 1.5rem; 82 | font-weight: 600; 83 | padding: 21.5px 0; 84 | text-decoration: none; 85 | color: var(--cor-secundaria); 86 | font-family: var(--fonte-secundaria); 87 | } 88 | .apresentacao__links__link:hover{ 89 | background-color: var(--cor-hover); 90 | } 91 | .rodape{ 92 | color: var(--cor-primaria); 93 | background-color: var(--cor-terciaria); 94 | padding: 24px; 95 | text-align: center; 96 | font-family: var(--fonte-secundaria); 97 | font-size: 1.5rem; 98 | font-weight: 400; 99 | } --------------------------------------------------------------------------------