├── igor_lira ├── script.js ├── assets │ ├── foto.git.png │ ├── foto_html.png │ ├── foto-perfil.jpeg │ └── fotoLinkedin.png ├── igor.html └── style.css ├── alefh-003 ├── .vscode │ └── settings.json ├── foto_perfil.png ├── script.js ├── style.css └── alefh.html ├── diogenes-09 ├── foto_perfil.jpg ├── script.js ├── diogenes.html └── styles.css ├── AlexFreitas-000 ├── imagens │ ├── js.png │ ├── css-3.png │ ├── java.png │ ├── mysql.png │ ├── django.png │ ├── node-js.png │ ├── python.png │ ├── biblioteca.png │ └── bootstrap.png ├── main.js ├── style.css └── alexfreitas.html ├── MarianaSantos-000 ├── imagens │ └── fotoperfil.jpg ├── main.js ├── mariana.html └── style.css ├── Rafael_Thomaz-001 ├── styles.css └── rafael.html ├── main ├── header.js ├── search.svg ├── search-bar.svg ├── css │ ├── style.css │ ├── responsividade.css │ ├── colaborador.css │ ├── home.css │ ├── colaboradores.css │ ├── descricao.css │ └── header.css └── script.js ├── igor-000 ├── linkedin.svg ├── github.svg ├── style.css └── igor.html ├── rodrigo-274 ├── rodrigo.html └── styles.css ├── gabriel-204 ├── style.css └── gabriel.html ├── README.md ├── LeticiaLemeHub ├── style.css └── index.html ├── andreKrykhtine ├── andre.css └── andre.html ├── guilhermeOrbolato-001 ├── script.js ├── guilherme.html └── style.css ├── index.html └── victor-22 ├── script.js ├── victor.html └── style.css /igor_lira/script.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /alefh-003/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /alefh-003/foto_perfil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/alefh-003/foto_perfil.png -------------------------------------------------------------------------------- /diogenes-09/foto_perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/diogenes-09/foto_perfil.jpg -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/js.png -------------------------------------------------------------------------------- /diogenes-09/script.js: -------------------------------------------------------------------------------- 1 | document.getElementById("btn-voltar").addEventListener("click", () => { 2 | window.history.back(); 3 | }); -------------------------------------------------------------------------------- /igor_lira/assets/foto.git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/igor_lira/assets/foto.git.png -------------------------------------------------------------------------------- /igor_lira/assets/foto_html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/igor_lira/assets/foto_html.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/css-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/css-3.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/java.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/mysql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/mysql.png -------------------------------------------------------------------------------- /igor_lira/assets/foto-perfil.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/igor_lira/assets/foto-perfil.jpeg -------------------------------------------------------------------------------- /igor_lira/assets/fotoLinkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/igor_lira/assets/fotoLinkedin.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/django.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/django.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/node-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/node-js.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/python.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/biblioteca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/biblioteca.png -------------------------------------------------------------------------------- /AlexFreitas-000/imagens/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/AlexFreitas-000/imagens/bootstrap.png -------------------------------------------------------------------------------- /MarianaSantos-000/imagens/fotoperfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/IgorGazineo/projeto-colaborativo-01/HEAD/MarianaSantos-000/imagens/fotoperfil.jpg -------------------------------------------------------------------------------- /Rafael_Thomaz-001/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | button{ 8 | cursor: pointer; 9 | } 10 | -------------------------------------------------------------------------------- /alefh-003/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('DOMContentLoaded', () => { 2 | document.querySelectorAll('.icons i').forEach((icon, index) => { 3 | setTimeout(() => { 4 | icon.style.opacity = 1; 5 | }, 200 * index); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /main/header.js: -------------------------------------------------------------------------------- 1 | const menuHamburger = document.getElementById("menu-hamburger"); 2 | const menu = document.getElementById("links-header"); 3 | const links = document.querySelectorAll(".link-header"); 4 | 5 | menuHamburger.addEventListener("click", () => { 6 | menuHamburger.classList.toggle("close"); 7 | menu.classList.toggle("expand"); 8 | }); 9 | 10 | links.forEach((link) => { 11 | link.addEventListener("click", () => { 12 | menu.classList.toggle("expand"); 13 | menuHamburger.classList.toggle("close"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /igor-000/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /MarianaSantos-000/main.js: -------------------------------------------------------------------------------- 1 | // Código para mudar as cores dos temas claro e escuro 2 | const seletor = document.querySelector("#selectTheme"); 3 | 4 | seletor.addEventListener("change", function(){ 5 | 6 | if(seletor.value == "light"){ 7 | document.documentElement.setAttribute("modo-light-dark", "light") 8 | } 9 | 10 | else if(seletor.value == "dark"){ 11 | document.documentElement.setAttribute("modo-light-dark", "dark") 12 | } 13 | 14 | else { 15 | document.documentElement.setAttribute("modo-light-dark") 16 | } 17 | 18 | }) -------------------------------------------------------------------------------- /main/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/search-bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /main/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | h1, 8 | h2, 9 | h3, 10 | h4, 11 | p { 12 | cursor: default; 13 | } 14 | 15 | :root { 16 | --color-1: #6ea3c3; 17 | --color-2: #82b2c7; 18 | --color-3: #cfa577; 19 | --color-4: #9fb8b2; 20 | --color-5: #beb7a2; 21 | --color-6: #001b2e; 22 | --color-7: #294c60; 23 | --color-8: #05204a; 24 | --color-9: #1d263b; 25 | --color-10: #223843; 26 | --color-white: #ffffff; 27 | --color-black: #000000; 28 | 29 | scroll-behavior: smooth; 30 | } 31 | 32 | body { 33 | background-color: var(--color-2); 34 | font-family: "Inria Sans", sans-serif; 35 | } 36 | 37 | footer { 38 | background-color: #fff; 39 | text-align: center; 40 | padding: 1rem; 41 | } 42 | -------------------------------------------------------------------------------- /AlexFreitas-000/main.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded',()=>{ 2 | let skill = document.querySelector('.skill') 3 | const skills = [ 4 | "bootstrap.png", 5 | "css-3.png", 6 | "django.png", 7 | "java.png", 8 | "java.png", 9 | "biblioteca.png", 10 | "js.png", 11 | "node-js.png", 12 | "python.png", 13 | ] 14 | let index = 0 15 | 16 | const showSkills = () =>{ 17 | const interval = setInterval(()=>{ 18 | if(index < skills.length){ 19 | skill.src = `./imagens/${skills[index]}` 20 | index = (index + 1) % skills.length 21 | }else{ 22 | clearInterval(interval) 23 | } 24 | },3000) 25 | } 26 | showSkills() 27 | }) -------------------------------------------------------------------------------- /main/css/responsividade.css: -------------------------------------------------------------------------------- 1 | /* @media (max-width: 1100px) { 2 | :root { 3 | font-size: 14px; 4 | } 5 | 6 | #descricao-img { 7 | width: 20rem; 8 | } 9 | } 10 | 11 | @media (max-width: 792px) { 12 | :root { 13 | font-size: 12px; 14 | } 15 | 16 | #descricao-img { 17 | width: 15rem; 18 | } 19 | } 20 | 21 | @media (max-width: 596px) { 22 | :root { 23 | font-size: 10px; 24 | } 25 | 26 | #descricao { 27 | display: block; 28 | text-align: center; 29 | } 30 | 31 | #descricao-conteudo { 32 | width: 100%; 33 | margin: 4rem 0; 34 | } 35 | 36 | #descricao-conteudo p { 37 | margin: 2rem 0; 38 | } 39 | 40 | #descricao-img-div { 41 | display: none; 42 | } 43 | 44 | .colaboradores { 45 | padding: 2rem 1rem; 46 | } 47 | 48 | 49 | } */ 50 | -------------------------------------------------------------------------------- /diogenes-09/diogenes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Apresentação - Colaborador 7 | 8 | 9 | 10 |
11 | Foto de Perfil 12 |

Diógenes Leonardo da Silva Cruz

13 |

14 | Sou iniciante na área de programação e tenho muita vontade de aprender e 15 | crescer na área de desenvolvimento web. Este projeto representa uma 16 | grande oportunidade para colocar em prática meus conhecimentos em HTML, 17 | CSS e JavaScript, além de colaborar com outras pessoas e evoluir a cada 18 | dia. Estou animado em fazer parte dessa jornada! 19 |

20 | 21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /diogenes-09/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Arial, sans-serif; 4 | background: #f2f2f2; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | min-height: 100vh; 9 | } 10 | 11 | .container { 12 | text-align: center; 13 | background: #fff; 14 | padding: 2rem; 15 | border-radius: 12px; 16 | box-shadow: 0 2px 10px rgba(0,0,0,0.1); 17 | max-width: 400px; 18 | width: 90%; 19 | } 20 | 21 | .profile-pic { 22 | width: 256px; 23 | height: 256px; 24 | border-radius: 50%; 25 | object-fit: cover; 26 | margin-bottom: 1rem; 27 | } 28 | 29 | #btn-voltar { 30 | margin-top: 1.5rem; 31 | padding: 0.6rem 1.2rem; 32 | background-color: #007bff; 33 | color: #fff; 34 | border: none; 35 | border-radius: 6px; 36 | cursor: pointer; 37 | transition: background-color 0.3s ease; 38 | text-align: none; 39 | } 40 | 41 | h1 { 42 | font-size: 1.8rem; 43 | color: #333; 44 | } 45 | 46 | p { 47 | font-size: 1rem; 48 | color: #666; 49 | } 50 | -------------------------------------------------------------------------------- /igor-000/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /AlexFreitas-000/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | background-color: #2c3e50; 6 | color: #ecf0f1; 7 | } 8 | 9 | h1, 10 | h2 { 11 | font-size: 48px; 12 | font-family: "Roboto"; 13 | text-align: center; 14 | margin-block: 40px; 15 | } 16 | 17 | p{ 18 | font-family: "Montserrat"; 19 | } 20 | 21 | #logo-header { 22 | font-size: 1.5rem; 23 | font-family: sans-serif; 24 | font-weight: bold; 25 | -webkit-text-stroke: 0.047rem var(--color-7); 26 | cursor: default; 27 | /* color: transparent; */ 28 | /* border-bottom: 0.078rem solid rgba(255, 255, 255, 0.6); */ 29 | text-shadow: 0 0 0.25rem var(--color-white); 30 | text-decoration: none; 31 | margin-left: 16px; 32 | } 33 | 34 | main { 35 | max-width: 960px; 36 | margin: auto; 37 | } 38 | 39 | img{ 40 | width: 160px; 41 | height: 160px; 42 | object-fit: cover; 43 | border-radius: 50%; 44 | display: block; 45 | margin: auto; 46 | border: 1px solid #ecf0f127; 47 | padding: 4px; 48 | } 49 | .skill{ 50 | border-radius: 0; 51 | border: none; 52 | margin: 40px auto; 53 | } 54 | 55 | .contact-icons{ 56 | display: flex; 57 | justify-content: space-evenly; 58 | margin: 40px 0; 59 | } 60 | 61 | .bi{ 62 | font-size: 48px; 63 | } 64 | 65 | @media screen and (max-width: 400px){ 66 | .about-content{ 67 | text-align: center; 68 | padding: 16px; 69 | } 70 | } 71 | 72 | 73 | -------------------------------------------------------------------------------- /main/css/colaborador.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-1: #6ea3c3; 3 | --color-2: #82b2c7; 4 | --color-3: #cfa577; 5 | --color-4: #9fb8b2; 6 | --color-5: #beb7a2; 7 | --color-6: #001b2e; 8 | --color-7: #294c60; 9 | --color-8: #05204a; 10 | --color-9: #1d263b; 11 | --color-10: #223843; 12 | --color-white: #ffffff; 13 | --color-black: #000000; 14 | 15 | scroll-behavior: smooth; 16 | } 17 | 18 | .colaborador { 19 | width: 18rem; 20 | height: 10rem; 21 | display: flex; 22 | align-items: center; 23 | gap: 1.5rem; 24 | padding: 1.05rem; 25 | border-radius: 8px; 26 | box-shadow: 0 0 4px var(--color-7); 27 | } 28 | 29 | .colaborador:hover { 30 | box-shadow: 0 0 6px var(--color-7); 31 | } 32 | 33 | .img-perfil { 34 | width: 5rem; 35 | height: 100%; 36 | border-radius: 8px; 37 | object-fit: cover; 38 | object-position: center; 39 | } 40 | 41 | .colaborador-info { 42 | padding: 0.75rem 0; 43 | } 44 | 45 | .colaborador-title { 46 | color: var(--color-8); 47 | font-size: 0.95rem; 48 | text-align: center; 49 | } 50 | 51 | .colaborador-name, 52 | .colaborador-area { 53 | margin: 0.3rem 0; 54 | font-size: 0.95rem; 55 | color: #353535; 56 | } 57 | 58 | .colaborador-btn { 59 | display: inline-block; 60 | background-color: var(--color-6); 61 | padding: 0.25rem 0.75rem; 62 | text-decoration: none; 63 | color: var(--color-white); 64 | border-radius: 8px; 65 | font-size: 0.85rem; 66 | transition: all 0.2s ease-in; 67 | border: 1.5px solid transparent; 68 | } 69 | 70 | .colaborador-btn:hover { 71 | background-color: var(--color-7); 72 | border-color: var(--color-black); 73 | } 74 | 75 | .not-found { 76 | text-align: center; 77 | list-style: none; 78 | font-size: 2rem; 79 | color: var(--color-2-vermelho); 80 | } 81 | -------------------------------------------------------------------------------- /rodrigo-274/rodrigo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rodrigo Marques Tavares 7 | 8 | 9 | 10 | 11 |
12 |

Rodrigo Marques Tavares

13 |

Olá! Sou um colaborador desse projeto!

14 |
15 | Rodrigo Marques Tavares 16 |

17 | Desenvolvedor Front-end em transição de carreira, combinando 18 | experiência em gestão com habilidades técnicas sólidas em React.js, 19 | TypeScript, JavaScript, Node.js e bancos de dados (MySQL/MongoDB). 20 | Apaixonado por criar interfaces modernas, responsivas e intuitivas, 21 | aplicando conhecimentos em Tailwind CSS, Git/GitHub e Express.js. 22 | Minha trajetória anterior me proporcionou soft skills valiosas, como 23 | liderança, resolução de problemas e trabalho sob pressão, que 24 | enriquecem minha abordagem no desenvolvimento de software. 25 |

26 |
27 |
28 | 29 | GitHub 30 | 31 | 32 | Linkedin 33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /main/css/home.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-1: #6ea3c3; 3 | --color-2: #82b2c7; 4 | --color-3: #cfa577; 5 | --color-4: #9fb8b2; 6 | --color-5: #beb7a2; 7 | --color-6: #001b2e; 8 | --color-7: #294c60; 9 | --color-8: #05204a; 10 | --color-9: #1d263b; 11 | --color-10: #223843; 12 | --color-white: #ffffff; 13 | --color-black: #000000; 14 | } 15 | 16 | #home { 17 | background-image: url("https://images.pexels.com/photos/123335/pexels-photo-123335.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"); 18 | background-repeat: no-repeat; 19 | background-size: cover; 20 | height: 100vh; 21 | width: 100%; 22 | display: flex; 23 | align-items: center; 24 | justify-content: center; 25 | /* margin-bottom: 4rem; */ 26 | } 27 | 28 | #home-conteudo { 29 | text-align: center; 30 | } 31 | 32 | #home-titulo { 33 | width: fit-content; 34 | font-size: 6rem; 35 | font-family: sans-serif; 36 | font-weight: bold; 37 | -webkit-text-stroke: 0.188rem var(--color-7); 38 | cursor: default; 39 | color: transparent; 40 | border-bottom: 0.313rem solid rgba(255, 255, 255, 0.6); 41 | text-shadow: 0 0 1rem var(--color-white); 42 | margin: 0 auto 1rem; 43 | } 44 | 45 | #home-slogan { 46 | font-size: 2rem; 47 | text-shadow: 2px 0px 2px var(--color-white); 48 | color: var(--color-7); 49 | } 50 | 51 | /* #home img { 52 | width: 15rem; 53 | height: 20rem; 54 | object-fit: cover; 55 | object-position: center; 56 | border-radius: 8px; 57 | border: 1.5px solid #44cfcb; 58 | box-shadow: 0 0 4px white; 59 | } */ 60 | 61 | @media (max-width: 690px) { 62 | #home-titulo { 63 | font-size: 4rem; 64 | } 65 | 66 | #home-slogan { 67 | font-size: 1.5rem; 68 | } 69 | } 70 | 71 | @media (max-width: 390px) { 72 | #home-titulo { 73 | font-size: 3rem; 74 | } 75 | 76 | #home-slogan { 77 | margin: 0 1rem; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /gabriel-204/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); 2 | 3 | body { 4 | background-color: rgb(11, 68, 148); 5 | font-family: 'Roboto Condensed', sans-serif; 6 | } 7 | 8 | .detalhes { 9 | margin: 3%; 10 | background-color: rgb(12, 51, 107); 11 | border-radius: 10px; 12 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 13 | color: hsl(0, 0%, 100%); 14 | display: flex; 15 | padding: 5rem; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | 20 | & p { 21 | font-size: 20px; 22 | margin: 10px 0; 23 | text-align: center; 24 | line-height: 1.5; 25 | padding: 0 20rem; 26 | } 27 | } 28 | 29 | .imagem-perfil { 30 | width: 200px; 31 | height: 200px; 32 | border-radius: 50%; 33 | margin-top: 20px; 34 | } 35 | 36 | 37 | 38 | .projetos { 39 | margin: 3%; 40 | color: white; 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: center; 44 | align-items: center; 45 | padding: 3rem; 46 | background-color: rgb(12, 51, 107); 47 | border-radius: 10px; 48 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 49 | 50 | & .dripstore { 51 | text-align: center; 52 | margin: 2rem; 53 | } 54 | 55 | & .leitura-de-nutrientes { 56 | text-align: center; 57 | margin: 2rem; 58 | } 59 | 60 | & p { 61 | font-size: 20px; 62 | padding: 0 20rem; 63 | } 64 | } 65 | 66 | .contatos { 67 | display: flex; 68 | flex-direction: column; 69 | justify-content: center; 70 | align-items: center; 71 | color: aliceblue; 72 | 73 | & .contatos-imagens { 74 | margin-top: 32px; 75 | display: flex; 76 | flex-direction: row; 77 | gap: 10rem; 78 | } 79 | } -------------------------------------------------------------------------------- /alefh-003/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | min-height: 100vh; 6 | background-color: #cbc48b; 7 | 8 | margin: 0; 9 | } 10 | 11 | .card { 12 | border: 2px solid #ccc; 13 | border-radius: 15px; 14 | padding: 30px; 15 | background-color: #fff; 16 | width: 90%; 17 | max-width: 600px; 18 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 19 | font-family: sans-serif; 20 | } 21 | 22 | .card img { 23 | display: block; 24 | margin: 20px auto; 25 | border-radius: 50%; 26 | width: 200px; 27 | } 28 | 29 | .sobre-texto { 30 | font-size: 18px; 31 | line-height: 1.6; 32 | } 33 | 34 | 35 | h1, h2 { 36 | margin-bottom: 10px; 37 | font-size: 22px; 38 | } 39 | 40 | ul { 41 | list-style: none; 42 | padding: 0; 43 | } 44 | 45 | ul li { 46 | margin: 5px 0; 47 | display: flex; 48 | align-items: center; 49 | gap: 10px; 50 | } 51 | 52 | a { 53 | display: inline-block; 54 | margin: 5px 10px 0 0; 55 | text-decoration: none; 56 | color: #0366d6; 57 | } 58 | 59 | a:hover { 60 | text-decoration: underline; 61 | } 62 | 63 | a .fa-github { 64 | color: #000; 65 | } 66 | 67 | .icons { 68 | display: flex; 69 | gap: 20px; 70 | margin-top: 10px; 71 | font-size: 40px; 72 | } 73 | 74 | .icons i { 75 | opacity: 0; 76 | transition: opacity 0.5s ease; 77 | } 78 | 79 | .button-voltar{ 80 | text-align: center; 81 | margin-top: 20px; 82 | } 83 | 84 | .button-voltar a { 85 | display: inline-block; 86 | padding: 10px 20px; 87 | background-color: #000; 88 | color: #fff; 89 | text-decoration: none; 90 | border-radius: 8px; 91 | font-weight: bold; 92 | transition: background-color 0.3s, transform 0.2s; 93 | } 94 | 95 | .button-voltar a:hover { 96 | background-color: #333; 97 | transform: scale(1.05); 98 | } -------------------------------------------------------------------------------- /rodrigo-274/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); 2 | 3 | /* geral */ 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | font-family: Helvetica; 10 | } 11 | 12 | body { 13 | width: 100%; 14 | min-height: 100vh; 15 | background-color: #2b2a2a; 16 | color: #d4d4d4; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | h1 { 23 | font-size: 2.5rem; 24 | margin-bottom: 20px; 25 | text-align: center; 26 | } 27 | 28 | h3 { 29 | margin-bottom: 20px; 30 | text-align: center; 31 | } 32 | 33 | /* principal area */ 34 | 35 | .body-container { 36 | max-width: 800px; 37 | padding: 30px 20px; 38 | border: 1px solid #1d6902d4; 39 | border-radius: 10px; 40 | box-shadow: #1d6902d4 0px 0px 5px; 41 | background-color: #242323; 42 | margin: 5px 10px; 43 | } 44 | 45 | .resume-container { 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-between; 49 | } 50 | .resume-container img { 51 | border-radius: 10px; 52 | margin-right: 30px; 53 | } 54 | 55 | .resume-container p { 56 | line-height: 1.5rem; 57 | text-align: justify; 58 | } 59 | .social-container { 60 | display: flex; 61 | align-items: center; 62 | justify-content: center; 63 | margin-top: 20px; 64 | gap: 20px; 65 | } 66 | 67 | .social-container a { 68 | color: #d4d4d4; 69 | text-decoration: none; 70 | font-size: 1rem; 71 | transition: all 0.3s ease; 72 | } 73 | .social-container a:hover { 74 | color: #1d6902d4; 75 | } 76 | .social-container a i span { 77 | margin-left: 5px; 78 | } 79 | 80 | /* responsive */ 81 | @media (max-width: 596px) { 82 | h1 { 83 | font-size: 1.5rem; 84 | } 85 | .resume-container { 86 | flex-direction: column; 87 | align-items: center; 88 | text-align: center; 89 | margin: 5px 10px; 90 | } 91 | .resume-container img { 92 | margin: 0 0 20px 0; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /igor-000/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | background-color: black; 10 | color: aliceblue; 11 | } 12 | 13 | header { 14 | height: 5rem; 15 | background-color: rgb(29, 218, 218); 16 | display: flex; 17 | align-items: center; 18 | padding: 0 3rem; 19 | } 20 | 21 | header a { 22 | background-color: black; 23 | color: white; 24 | padding: 1rem 2rem; 25 | border-radius: 8px; 26 | text-decoration: none; 27 | font-size: 1.5rem; 28 | font-weight: bold; 29 | transition: all 0.2s ease-in; 30 | } 31 | 32 | header a:hover { 33 | background-color: rgb(14, 81, 239); 34 | } 35 | 36 | main { 37 | display: flex; 38 | align-items: center; 39 | justify-content: center; 40 | gap: 5rem; 41 | margin: 0 3rem; 42 | height: calc(100vh - 5rem); 43 | } 44 | 45 | section { 46 | width: 25rem; 47 | } 48 | 49 | #apresentacao { 50 | text-align: center; 51 | width: 20rem; 52 | } 53 | 54 | #main-img { 55 | width: 100%; 56 | border-radius: 50%; 57 | box-shadow: 0 0 4px white; 58 | margin-bottom: 1.5rem; 59 | background-color: rgb(29, 218, 218); 60 | } 61 | 62 | #redes { 63 | display: flex; 64 | justify-content: center; 65 | gap: 2rem; 66 | } 67 | 68 | .rede img { 69 | width: 100%; 70 | box-shadow: 0 0 4px white; 71 | border-radius: 50%; 72 | } 73 | 74 | .rede:hover img { 75 | box-shadow: 0 0 8px white; 76 | } 77 | 78 | h1 { 79 | font-size: 3rem; 80 | margin: 1rem 0; 81 | text-align: center; 82 | } 83 | 84 | p { 85 | margin: 1rem 0; 86 | text-indent: 1rem; 87 | } 88 | 89 | @media (max-width: 880px) { 90 | :root { 91 | font-size: 12px; 92 | } 93 | } 94 | 95 | @media (max-width: 678px) { 96 | :root { 97 | font-size: 12px; 98 | } 99 | 100 | main { 101 | flex-direction: column; 102 | margin: 6rem 0; 103 | } 104 | 105 | #main-img { 106 | width: 70%; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /igor-000/igor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Igor Dev 8 | 9 | 10 |
11 | Voltar 12 |
13 |
14 |
15 | 20 |
21 | 27 | 30 |
31 |
32 |
33 |

Igor Gazineo

34 |

35 | Olá! Meu nome é Igor e sou o idealizador do DevStart Collaboration — 36 | um projeto criado com o objetivo de dar visibilidade e experiência 37 | prática para desenvolvedores iniciantes, especialmente aqueles que 38 | ainda estão em busca da sua primeira oportunidade no mercado. 39 |

40 |

41 | A ideia nasceu da vontade de criar um ambiente colaborativo e 42 | inclusivo, onde todos possam colocar em prática seus conhecimentos, 43 | aprender em equipe e construir juntos algo significativo. Aqui, cada 44 | dev tem a chance de mostrar seu potencial, contribuir com código real 45 | e se preparar para os desafios do mundo profissional. É um projeto 46 | feito com carinho, por e para devs, e fico muito feliz em poder 47 | contribuir e ver outras pessoas crescendo junto! 48 |

49 |
50 |
51 | 52 | 53 | -------------------------------------------------------------------------------- /igor_lira/igor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Apresentação Igor_Lira 8 | 9 | 10 |
11 |
12 | 13 | Logo linkedin 14 | 15 |
16 |
17 | 18 | Logo git 19 | 20 |
21 | 22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 |

Igor de Andrade Lira

33 |

Sou engenheiro de produção e formado em análise e desenvolvimento de sistemas em transição de carreira para a área de tecnologia, 34 | com foco em desenvolvimento front-end. Tenho conhecimentos em HTML, CSS, JavaScript 35 | e React.js, e estou constantemente aprimorando minhas habilidades técnicas e práticas 36 | por meio de projetos próprios e estudos. Minha formação em engenharia me proporciona uma 37 | base sólida em resolução de problemas, pensamento analítico e trabalho em equipe, que aplico 38 | no desenvolvimento de interfaces funcionais e eficientes. 39 |

40 |
41 | Voltar 42 |
43 | 44 | 45 |
46 |
47 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /main/css/colaboradores.css: -------------------------------------------------------------------------------- 1 | #apresentacao { 2 | background-color: var(--color-2); 3 | border-radius: 8px; 4 | margin: 2rem 0; 5 | padding: 2rem 2rem 4rem; 6 | } 7 | 8 | #apresentacao-title { 9 | font-family: "Inria Sans", sans-serif; 10 | font-weight: bold; 11 | margin: 0 auto; 12 | text-align: center; 13 | font-size: 3rem; 14 | color: var(--color-4-light); 15 | width: 60%; 16 | text-shadow: 3px 2px 1px var(--color-3-dark); 17 | } 18 | 19 | #input-pesquisa-container { 20 | position: relative; 21 | width: 60%; 22 | margin: 2rem auto 3rem; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | #input-pesquisa { 29 | display: block; 30 | width: 100%; 31 | height: 2.2rem; 32 | padding: 0 1rem; 33 | border-radius: 1rem; 34 | border: none; 35 | font-size: 1rem; 36 | } 37 | 38 | #input-pesquisa:focus { 39 | outline: 1.2px solid var(--color-6-azul-escuro); 40 | } 41 | 42 | #input-pesquisa-icone { 43 | position: absolute; 44 | right: 0.2rem; 45 | width: 3rem; 46 | height: 1.75rem; 47 | cursor: pointer; 48 | } 49 | 50 | .colaboradores { 51 | list-style: none; 52 | max-width: 80%; 53 | min-height: 15rem; 54 | margin: 0 auto; 55 | display: flex; 56 | justify-content: center; 57 | align-items: center; 58 | flex-wrap: wrap; 59 | gap: 3rem; 60 | background-color: var(--color-4-light); 61 | border-radius: 8px; 62 | padding: 3rem; 63 | } 64 | 65 | #repositorio { 66 | display: block; 67 | border-radius: 8px; 68 | margin: 3rem auto 6rem; 69 | width: fit-content; 70 | padding: 0.75rem 1.5rem; 71 | background-color: var(--color-8); 72 | color: var(--color-4); 73 | text-decoration: none; 74 | font-size: 1.25rem; 75 | transition: background-color 0.2s ease-in; 76 | } 77 | 78 | #repositorio:hover { 79 | background-color: var(--color-1); 80 | color: var(--color-white); 81 | } 82 | 83 | #repositorio:active { 84 | box-shadow: 0 0 4px #3c3c3c; 85 | } 86 | 87 | @media (max-width: 420px) { 88 | #apresentacao-title { 89 | font-size: 2rem; 90 | } 91 | 92 | .colaboradores { 93 | padding: 0; 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /main/css/descricao.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-1: #6ea3c3; 3 | --color-2: #82b2c7; 4 | --color-3: #cfa577; 5 | --color-4: #9fb8b2; 6 | --color-5: #beb7a2; 7 | --color-6: #001b2e; 8 | --color-7: #294c60; 9 | --color-8: #05204a; 10 | --color-9: #1d263b; 11 | --color-10: #223843; 12 | --color-white: #ffffff; 13 | --color-black: #000000; 14 | } 15 | 16 | #descricao { 17 | padding: 3rem; 18 | height: 100vh; 19 | color: var(--color-10); 20 | background-image: linear-gradient(var(--color-1), var(--color-3)); 21 | } 22 | 23 | #descricao-titulo { 24 | font-size: 2.5rem; 25 | margin: 0 auto 3rem; 26 | border-bottom: 4px solid var(--color-10); 27 | width: fit-content; 28 | } 29 | 30 | #descricao-conteudo-img { 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | gap: 4rem; 35 | } 36 | 37 | #descricao-conteudo { 38 | width: 33rem; 39 | } 40 | 41 | #logo-descrocao { 42 | font-size: 1.5rem; 43 | font-family: sans-serif; 44 | font-weight: bold; 45 | -webkit-text-stroke: 0.047rem var(--color-7); 46 | cursor: default; 47 | color: transparent; 48 | border-bottom: 0.078rem solid rgba(255, 255, 255, 0.6); 49 | text-shadow: 0 0 0.25rem var(--color-white); 50 | } 51 | 52 | #descricao-conteudo p { 53 | text-align: justify; 54 | hyphens: auto; 55 | text-indent: 2rem; 56 | font-size: 1.2rem; 57 | line-height: 1.2; 58 | color: var(--color-3-dark); 59 | } 60 | 61 | #descricao-conteudo p:nth-of-type(1) { 62 | margin-bottom: 2rem; 63 | } 64 | 65 | #descricao-img-div { 66 | width: 20rem; 67 | display: flex; 68 | justify-content: center; 69 | } 70 | 71 | #descricao-img { 72 | width: 100%; 73 | height: 20rem; 74 | object-fit: cover; 75 | object-position: center; 76 | border-radius: 8px; 77 | border: 2px solid var(--color-5); 78 | box-shadow: 0 0 4px var(--color-white); 79 | } 80 | 81 | @media (max-width: 580px) { 82 | #descricao { 83 | display: flex; 84 | align-items: center; 85 | justify-content: center; 86 | flex-direction: column; 87 | } 88 | 89 | #descricao-conteudo { 90 | width: 100%; 91 | } 92 | 93 | #descricao-conteudo p { 94 | font-size: 1.35rem; 95 | } 96 | 97 | #descricao-img-div { 98 | display: none; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /alefh-003/alefh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Álefh Lima - Bem vindo(a)! 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Olá, meu nome é Álefh Lima

15 | Foto de Álefh Lima 16 |
17 |
18 |

Sobre mim

19 |

Sou estudante de Engenharia de Software na Universidade Tecnológica Federal do Paraná (UTFPR), atualmente no 5º período da graduação. Ao longo da minha trajetória acadêmica, venho desenvolvendo habilidades valiosas relacionadas à gestão de projetos de software, além de aprimorar constantemente minhas competências em programação. 20 | Tenho me dedicado ao desenvolvimento de soluções que buscam resolver problemas reais da sociedade. No momento, estou focado em me tornar um desenvolvedor Full Stack: estou estudando React para o front-end e, em seguida, pretendo aprofundar meus conhecimentos em Node.js para o back-end.

21 |
22 |
23 |

Linguagens de Programação e Frameworks

24 |
25 | 26 | 27 | 28 | 29 |
30 |
31 |
32 |

Meus contatos

33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 | Voltar 42 |
43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Projeto Colaborativo 01 👥 2 | 3 | [![GitHub](https://img.shields.io/badge/GitHub-Repositório-blue?style=flat-square&logo=github)](https://github.com/IgorGazineo/projeto-colaborativo-01/) 4 | 5 | Um projeto colaborativo onde cada participante cria sua própria página de apresentação. 6 | 7 | ## 📍 Endereço do Projeto 8 | [https://github.com/IgorGazineo/projeto-colaborativo-01/](https://github.com/IgorGazineo/projeto-colaborativo-01/) 9 | 10 | ## Objetivo 🎯 11 | Cada participante deve criar uma página HTML se apresentando e compartilhando os dados que desejar. O foco é na participação descontraída, sem preocupações excessivas com perfeição técnica. 12 | 13 | ## Como Participar 🚀 14 | 15 | ### Pré-requisitos 16 | - Conta no GitHub 17 | - Git instalado localmente 18 | - Conhecimento básico de HTML 19 | 20 | ### Instruções Passo a Passo 21 | 22 | 1. **Faça um fork do repositório** 23 | 24 | Acesse [https://github.com/IgorGazineo/projeto-colaborativo-01/](https://github.com/IgorGazineo/projeto-colaborativo-01/) e clique em "Fork" 25 | 26 | 2. **Clone seu fork** 27 | 28 | ```bash 29 | git clone https://github.com/SEU-USUARIO/projeto-colaborativo-01 30 | ``` 31 | 32 | 3. **Crie uma branch** 33 | 34 | Use o formato: seunome-identificador (ex: maria-001, joao-002) 35 | 36 | ```bash 37 | git checkout -b seu-nome-001 38 | ``` 39 | 40 | 4. **Crie sua pasta** 41 | 42 | Dentro do projeto, crie uma pasta com o mesmo padrão de nome (ex: maria-001) 43 | 44 | 5. **Desenvolva sua página** 45 | 46 | - Crie um arquivo HTML principal com seu nome (ex: maria.html) 47 | - Adicione CSS/JS se desejar 48 | - ✨ Seja criativo! 49 | 50 | 6. **Envie suas alterações** 51 | 52 | ```bash 53 | git add . 54 | git commit -m "Adiciona página da Maria" 55 | git push origin sua-branch 56 | ``` 57 | 58 | 7. **Abra um Pull Request** 59 | 60 | Volte ao repositório original e clique em "New Pull Request" 61 | 62 | ## Estrutura do Projeto 📂 63 | 64 | ``` 65 | projeto-colaborativo-01/ 66 | ├── maria-001/ 67 | │ ├── maria.html 68 | │ ├── style.css 69 | │ └── script.js 70 | ├── joao-002/ 71 | │ └── joao.html 72 | ├── README.md 73 | └── .gitignore 74 | ``` 75 | 76 | ## Dúvidas? ❓ 77 | 78 | Entre em contato com o mantenedor: 79 | 80 | - [Igor Gazineo no LinkedIn](https://linkedin.com/in/igor-gazineo) 81 | - Ou abra uma [issue no repositório](https://github.com/IgorGazineo/projeto-colaborativo-01/issues) 82 | -------------------------------------------------------------------------------- /LeticiaLemeHub/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | header { 10 | display: flex; 11 | align-items: center; 12 | background-color: #000000; 13 | height: 80px; 14 | } 15 | 16 | body { 17 | background-color: #D9D9D9; 18 | height: 100vh; 19 | width: 100vw; 20 | } 21 | 22 | h1 { 23 | display: flex; 24 | color: white; 25 | font-family: 'Sora'; 26 | font-size: 18px; 27 | margin-left: 30px; 28 | } 29 | 30 | .fantasma { 31 | height: 150px; 32 | margin-top: 40px; 33 | } 34 | 35 | .avatar { 36 | display: flex; 37 | margin-top: -550px; 38 | margin-left: 1080px; 39 | height: 300px; 40 | width: 300px; 41 | border-radius: 50%; 42 | } 43 | 44 | .conteudo__texto { 45 | display: flex; 46 | justify-content: center; 47 | margin-left: 230px; 48 | margin-top: 200px; 49 | flex-direction: column; 50 | } 51 | 52 | .texto__dif { 53 | font-family: 'Sora'; 54 | font-size: 22px; 55 | width: 700px; 56 | color: white; 57 | text-shadow: 58 | -1px 0 #000, 59 | 1px -1px 0 #000, 60 | 1px 1px 0 #000, 61 | -1px 1px 0 #000, 62 | 0px -1px 0 #000, 63 | 0px 1px 0 #000; 64 | 65 | span { 66 | color: #000; 67 | font-weight: 400; 68 | font-size: 22px; 69 | } 70 | } 71 | 72 | h2 { 73 | font-family: 'Sora'; 74 | font-weight: 600; 75 | font-size: 22px; 76 | width: 600px; 77 | 78 | span { 79 | font-weight: 400; 80 | } 81 | } 82 | 83 | p { 84 | color: #000000b2; 85 | font-size: 20px; 86 | width: 800px; 87 | margin-top: 20px; 88 | } 89 | 90 | .redes { 91 | display: flex; 92 | margin-left: 230px; 93 | margin-top: 40px; 94 | height: 70px; 95 | width: 70px; 96 | gap: 31px; 97 | } 98 | 99 | 100 | .botao { 101 | display: flex; 102 | background-color: #000; 103 | text-decoration: none; 104 | color: white; 105 | font-family: 'Sora'; 106 | font-size: 22px; 107 | height: 70px; 108 | width: 200px; 109 | border-radius: 10px; 110 | align-items: center; 111 | justify-content: center; 112 | margin-left: 1350px; 113 | margin-top: 140px; 114 | transition: transform 0.1s ease; 115 | } 116 | 117 | .botao:active { 118 | transform: scale(0.9); 119 | } 120 | 121 | .cursor { 122 | display: inline-block; 123 | width: 1ch; 124 | animation: piscar 0.8s steps(1) infinite; 125 | } 126 | 127 | @keyframes piscar { 128 | 0%, 100% { 129 | opacity: 1; 130 | } 131 | 50% { 132 | opacity: 0; 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /andreKrykhtine/andre.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | a{ 8 | text-decoration: none; 9 | 10 | } 11 | 12 | ul,li{ 13 | list-style: none; 14 | } 15 | 16 | img{ 17 | max-width: 100%; 18 | } 19 | 20 | body{ 21 | background-color: #3b60e4; 22 | } 23 | 24 | .container{ 25 | background-color: #2e4bb3; 26 | font-family: 'Poppins', sans-serif; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: center; 31 | border: #fff solid 2px; 32 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 33 | 0 1px 3px rgba(0, 0, 0, 0.08); 34 | border-radius: 10px; 35 | margin : 2rem; 36 | padding: 2rem; 37 | position: relative; 38 | } 39 | .bntBack{ 40 | background-color: #22398b; 41 | color: #fff; 42 | padding: 0.5rem 2rem; 43 | border-radius: 8px; 44 | border: none; 45 | cursor: pointer; 46 | margin-bottom: 1rem; 47 | font-size: 1rem; 48 | position: absolute; 49 | top: 0.6rem; 50 | left: 2rem; 51 | } 52 | 53 | .bntBack:hover{ 54 | background-color: #fff; 55 | color: #22398b; 56 | } 57 | 58 | .title{ 59 | font-size: 3rem; 60 | color: #fff; 61 | font-weight: bold; 62 | text-align: center; 63 | margin-bottom: 1rem; 64 | } 65 | 66 | .subtitle,.about{ 67 | font-size: 1.5rem; 68 | color: #fff; 69 | font-weight: bold; 70 | margin-bottom: 1rem; 71 | } 72 | 73 | .about{ 74 | margin-top: 5rem; 75 | } 76 | 77 | .content-wrapper { 78 | display: flex; 79 | gap: 20px; /* Espaço entre a imagem e o texto */ 80 | align-items: flex-start; /* Alinha os itens no topo */ 81 | margin-bottom: 20px; 82 | } 83 | 84 | .description{ 85 | font-size: 1.2rem; 86 | color: #fff; 87 | text-align: justify; 88 | margin-top: 1rem; 89 | margin-bottom: 1rem; 90 | font-weight: 500; 91 | } 92 | 93 | .img-perfil{ 94 | width: 20rem; 95 | border-radius: 8px; 96 | margin-bottom: 1rem; 97 | box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 98 | 0 1px 3px rgba(0, 0, 0, 0.08); 99 | } 100 | 101 | .contacts{ 102 | display: flex; 103 | justify-content: center; 104 | gap: 1rem; 105 | margin-top: 1rem; 106 | margin-bottom: 1rem; 107 | font-size: 2.5rem; 108 | 109 | } 110 | 111 | .contacts a{ 112 | color: #fff; 113 | } 114 | 115 | .contacts a:hover{ 116 | color: #ff9f1c; 117 | } 118 | 119 | @media screen and (max-width: 768px) { 120 | .container{ 121 | padding-top: 4rem; 122 | } 123 | .content-wrapper { 124 | flex-direction: column; 125 | } 126 | .about{ 127 | margin-top: 0; 128 | } 129 | } -------------------------------------------------------------------------------- /andreKrykhtine/andre.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Andre 7 | 8 | 9 | 13 | 14 | 15 | 16 |
17 | Voltar 18 |

Olá! Meu nome é Andre Krykhtine

19 | 20 |
21 | foto do Andre 26 | 27 |
28 |

Sobre mim:

29 |

30 | Estou em transição para a área de tecnologia, com foco no 31 | desenvolvimento Web Full Stack. Atualmente, estou aprimorando minhas 32 | habilidades técnicas no curso DevQuest Full Stack, com domínio em 33 | JavaScript, HTML, CSS, TypeScript, React, PostegreSQL, node.js e 34 | Express. Minha trajetória profissional inclui experiências 35 | multidisciplinares como Engenheiro Florestal com 3 anos de 36 | experiência e Cozinheiro Profissional com mais de 3 anos de 37 | experiência, que me proporcionaram competências valiosas, como 38 | resolução ágil de problemas, trabalho em equipe, organização e 39 | otimização de processos. Essas habilidades complementam minha 40 | atuação no desenvolvimento web, permitindo que eu entregue soluções 41 | eficientes e bem estruturadas. Sou um profissional proativo, 42 | criativo e orientado a resultados, comprometido com a qualidade, a 43 | usabilidade e a performance das aplicações. Busco oportunidades para 44 | aplicar e expandir meu conhecimento em projetos desafiadores, 45 | contribuindo para a criação de interfaces práticas e acessíveis. 46 |

47 |
48 |
49 | 50 |

Meus Contatos:

51 | 68 |
69 | 70 | 71 | -------------------------------------------------------------------------------- /gabriel-204/gabriel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gabriel Henrique 7 | 8 | 9 | 10 | 11 |
12 | imagem do perfil 17 |

Gabriel Henrique

18 |

19 | Desenvolvedor Full Stack em ascensão com domínio em React, JavaScript e 20 | TypeScript, pronto para transformar desafios em soluções inovadoras. 21 | Apaixonado por tecnologia e movido a resolução de problemas complexos, 22 | determinado a contribuir com colaboração em equipe em projetos 23 | desafiadores e resolver problemas envolvendo software. Sempre disposto a 24 | ajudar em diversos projetos, buscando aprendizado e crescimento 25 | profissional. 26 |

27 | 28 |
29 |
30 |

Projetos

31 |
32 |

DripStore

33 |

34 | Uma loja de roupas online, com o intuto do usuário comprar produtos de 35 | vestimenta. Fique responsável por desenvolver a parte Destaques.jsx, 36 | onde fiz os ajustes de imagem e a estilização dos contêineres. 37 |

38 |

Repositório: DripStore

39 |
40 |
41 |

Leitura de Nutrientes

42 |

43 | Uma aplicação em que lê o código de barras de um determinado produto e 44 | exibe seus dados nutricionais. 45 |

46 |

Repositórios: Front-End Back-End

47 |
48 |
49 |
50 |

Contatos

51 |
52 | perfil do instagram 53 | perfil do linkedin 54 | perfil do github 55 | perfil do whatsapp 56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /main/css/header.css: -------------------------------------------------------------------------------- 1 | #main-header { 2 | position: absolute; 3 | height: 6rem; 4 | width: 100%; 5 | display: flex; 6 | align-items: center; 7 | justify-content: space-between; 8 | background: transparent; 9 | padding: 0 3rem; 10 | } 11 | 12 | #logo-header { 13 | font-size: 1.5rem; 14 | font-family: sans-serif; 15 | font-weight: bold; 16 | -webkit-text-stroke: 0.047rem var(--color-7); 17 | cursor: default; 18 | color: transparent; 19 | border-bottom: 0.078rem solid rgba(255, 255, 255, 0.6); 20 | text-shadow: 0 0 0.25rem var(--color-white); 21 | } 22 | 23 | #links-header { 24 | display: flex; 25 | align-items: center; 26 | list-style: none; 27 | gap: 2rem; 28 | font-size: 1.25rem; 29 | z-index: 1; 30 | } 31 | 32 | #links-header li { 33 | display: flex; 34 | align-items: center; 35 | justify-content: center; 36 | padding: 0.25rem 0.75rem; 37 | border-radius: 8px; 38 | box-shadow: 0 0 4px var(--color-white); 39 | background-color: var(--color-1); 40 | cursor: pointer; 41 | transition: all 0.2s ease; 42 | } 43 | 44 | #links-header li:hover { 45 | background-color: var(--color-2); 46 | box-shadow: 0 0 8px var(--color-white); 47 | } 48 | 49 | #links-header a { 50 | font-size: 1rem; 51 | color: var(--color-white); 52 | text-decoration: none; 53 | } 54 | 55 | #menu-hamburger { 56 | position: fixed; 57 | right: 2rem; 58 | display: flex; 59 | align-items: center; 60 | justify-content: center; 61 | flex-direction: column; 62 | gap: 8px; 63 | list-style: none; 64 | width: 45px; 65 | background-color: transparent; 66 | padding: 8px; 67 | border-radius: 8px; 68 | cursor: pointer; 69 | display: none; 70 | z-index: 1; 71 | } 72 | 73 | .bar { 74 | width: 100%; 75 | height: 2px; 76 | background-color: var(--color-7); 77 | border-radius: 18px; 78 | transition: all 0.3s ease; 79 | } 80 | 81 | #menu-hamburger.close .bar1 { 82 | transform: translateY(10px) rotate(45deg); 83 | } 84 | 85 | #menu-hamburger.close .bar2 { 86 | opacity: 0; 87 | } 88 | 89 | #menu-hamburger.close .bar3 { 90 | transform: translateY(-10px) rotate(-45deg); 91 | } 92 | 93 | @media (max-width: 840px) { 94 | :root { 95 | font-size: 14px; 96 | } 97 | } 98 | 99 | @media (max-width: 730px) { 100 | :root { 101 | font-size: 12px; 102 | } 103 | 104 | #links-header { 105 | position: fixed; 106 | top: 0; 107 | right: 0; 108 | bottom: 0; 109 | width: 0; 110 | background-color: var(--color-5); 111 | flex-direction: column; 112 | justify-content: center; 113 | align-items: center; 114 | overflow: hidden; 115 | transition: all 0.5s ease-in-out; 116 | } 117 | 118 | #links-header.expand { 119 | width: 90%; 120 | } 121 | 122 | #links-header a { 123 | font-size: 2rem; 124 | color: var(--color-white); 125 | text-decoration: none; 126 | } 127 | 128 | #menu-hamburger { 129 | display: flex; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /igor_lira/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | outline: none; 5 | border: none; 6 | text-decoration: none; 7 | font-family: Arial, Helvetica, sans-serif; 8 | } 9 | /* Header responsivo */ 10 | header { 11 | background-color: rgb(6, 6, 247); 12 | width: 100%; 13 | height: 15vh; 14 | display: flex; 15 | align-items: center; 16 | justify-content: flex-end; 17 | gap: 15px; 18 | padding: 0 10px; 19 | } 20 | 21 | /* Container flexível */ 22 | .container { 23 | background-color: rgb(69, 69, 78); 24 | display: flex; 25 | flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */ 26 | color: rgb(245, 245, 247); 27 | width: 100%; 28 | 29 | } 30 | 31 | /* Imagem com responsividade */ 32 | .sobre-imgem img { 33 | border-radius: 50%; 34 | width: 20vw; /* Usa unidades relativas ao viewport */ 35 | max-width: 200px; /* Limita o tamanho máximo */ 36 | height: auto; /* Mantém a proporção da imagem */ 37 | padding: 20px; 38 | } 39 | 40 | /* Texto responsivo */ 41 | .sobre-texto { 42 | flex: 1 1 300px; /* Permite que o texto cresça e encolha */ 43 | text-align: center; 44 | padding: 20px; 45 | } 46 | 47 | /* Título ajustável */ 48 | .sobre-texto h1 { 49 | font-size: 5vw; /* Tamanho relativo ao viewport */ 50 | max-font-size: 50px; 51 | padding-top: 20px; 52 | } 53 | 54 | /* Parágrafo com tamanho ajustável */ 55 | .sobre-texto p { 56 | padding-top: 20px; 57 | font-size: 2.5vw; 58 | max-font-size: 25px; 59 | padding-bottom: 20px; 60 | text-align: justify; 61 | padding-right: 10px; 62 | } 63 | 64 | /* Botão responsivo */ 65 | .botao a { 66 | display: inline-block; 67 | padding: 15px; 68 | width: 20vw; /* Usa unidades relativas */ 69 | max-width: 150px; /* Limita o tamanho máximo */ 70 | height: auto; 71 | background-color: rgb(37, 37, 241); 72 | border-radius: 10px; 73 | color: white; 74 | font-size: 2vw; 75 | max-width: 150px; 76 | font-weight: bold; 77 | text-align: center; 78 | cursor: pointer; 79 | border: none; 80 | text-decoration: none; 81 | } 82 | 83 | /* Hover do botão */ 84 | .botao a:hover { 85 | background-color: blue; 86 | } 87 | 88 | /* Media queries para ajustes específicos em telas menores */ 89 | @media (max-width: 768px) { 90 | .container { 91 | display: grid; 92 | grid-template-columns: 1, 1px; 93 | text-align: center; 94 | padding: 10px; 95 | 96 | 97 | } 98 | 99 | 100 | .header { 101 | justify-content: center; 102 | height: auto; 103 | padding: 10px; 104 | } 105 | 106 | .sobre-imgem img { 107 | justify-content: center; 108 | width: 40vw; 109 | max-width: 150px; 110 | padding: 10px; 111 | } 112 | 113 | .sobre-texto h1 { 114 | font-size: 8vw; 115 | } 116 | 117 | .sobre-texto p { 118 | font-size: 4vw; 119 | } 120 | 121 | .botao a { 122 | width: 50vw; 123 | max-width: 200px; 124 | font-size: 4vw; 125 | padding: 10px; 126 | } 127 | } 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /LeticiaLemeHub/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | Leticia Leme 13 | 14 | 15 |
16 |

<DevLil>

17 |
18 |
19 |
20 |
21 |
22 |

23 | Olá, Mundo! Meu nome é Leticia.| 24 |

25 |

26 | Sou estudante de 27 | Analise e Desenvolvimento de Sistemas 28 |

29 |

Com foco em Front-End

30 |

31 | Fundadora da comunidade Code & Cafe, um servidor no Discord 32 | acolhedor e colaborativo para quem está começando na 33 | programação.
Minha meta é me tornar uma desenvolvedora 34 | Fullstack e me especializar em UX/UI Design, buscando ser 35 | referência na área e não apenas mais uma no meio da multidão. 36 |

37 |
38 |
39 | 44 | 49 | 54 |
55 |
56 | 60 | 64 | Voltar 65 |
66 |
67 | 68 | 69 | -------------------------------------------------------------------------------- /guilhermeOrbolato-001/script.js: -------------------------------------------------------------------------------- 1 | // Inicializa particles.js 2 | particlesJS("particles-js", { 3 | particles: { 4 | number: { value: 80, density: { enable: true, value_area: 800 } }, 5 | color: { value: "#ffffff" }, 6 | opacity: { value: 0.5, random: true }, 7 | size: { value: 3, random: true }, 8 | line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.3, width: 1 }, 9 | move: { enable: true, speed: 3, direction: "none", random: true } 10 | } 11 | }); 12 | 13 | // Atualiza o horário em tempo real (Horário de Brasília) 14 | function updateBrasiliaTime() { 15 | const options = { 16 | timeZone: 'America/Sao_Paulo', 17 | hour: '2-digit', 18 | minute: '2-digit', 19 | hour12: false 20 | }; 21 | 22 | const now = new Date(); 23 | const formatter = new Intl.DateTimeFormat('pt-BR', options); 24 | const [{ value: hours }, , { value: minutes }] = formatter.formatToParts(now); 25 | 26 | document.querySelector('.time').textContent = `${hours}:${minutes}`; 27 | } 28 | 29 | // Atualiza a cada minuto 30 | setInterval(updateBrasiliaTime, 60000); 31 | updateBrasiliaTime(); 32 | 33 | // Navegação por scroll 34 | const phoneScreen = document.querySelector('.phone-screen'); 35 | const dots = document.querySelectorAll('.dot'); 36 | 37 | phoneScreen.addEventListener('scroll', () => { 38 | const sections = document.querySelectorAll('.screen-section'); 39 | sections.forEach((section, index) => { 40 | const rect = section.getBoundingClientRect(); 41 | if (rect.top >= 0 && rect.top <= window.innerHeight / 2) { 42 | dots.forEach(dot => dot.classList.remove('active')); 43 | dots[index].classList.add('active'); 44 | } 45 | }); 46 | }); 47 | 48 | // Navegação pelos dots 49 | dots.forEach(dot => { 50 | dot.addEventListener('click', () => { 51 | const sectionId = dot.getAttribute('data-section'); 52 | const section = document.getElementById(sectionId); 53 | section.scrollIntoView({ behavior: 'smooth' }); 54 | }); 55 | }); 56 | 57 | // Efeito de clique nos botões neon 58 | document.querySelectorAll('.neon-button').forEach(button => { 59 | button.addEventListener('click', (e) => { 60 | // Efeito visual apenas se não for um link externo 61 | if (button.getAttribute('href') === '#') { 62 | e.preventDefault(); 63 | button.style.transform = 'translateY(1px)'; 64 | button.style.boxShadow = 'none'; 65 | setTimeout(() => { 66 | button.style.transform = 'translateY(-3px)'; 67 | button.style.boxShadow = '0 0 10px currentColor, 0 0 20px currentColor'; 68 | }, 200); 69 | } 70 | }); 71 | }); 72 | 73 | // Simulação de status do iPhone 74 | function updatePhoneStatus() { 75 | // Atualiza sinal (aleatório entre 1-4 barras) 76 | const signals = ['📶', '📶', '📶', '📶']; 77 | document.querySelector('.cellular').textContent = signals[Math.floor(Math.random() * signals.length)]; 78 | 79 | // Atualiza bateria (aleatória entre 80-100%) 80 | const battery = Math.floor(Math.random() * 21) + 80; 81 | document.querySelector('.battery').textContent = `🔋 ${battery}%`; 82 | } 83 | 84 | // Atualiza a cada 3 minutos 85 | setInterval(updatePhoneStatus, 180000); 86 | updatePhoneStatus(); -------------------------------------------------------------------------------- /AlexFreitas-000/alexfreitas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alex Freitas 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | 29 |
30 |
31 |

32 | Olá, me chamo Alex Freitas 33 |

34 | Alex Freitas 41 |

42 |
43 |
44 |

Um pouco sobre mim:

45 |
46 |

47 | Atualmente pós graduando em desenvolvimento web full stack 48 | (MBA - Development Web Fullstack), tenho três anos de 49 | experiência como instrutor de desenvolvimento de sistemas, tendo 50 | passado por enpresas como SUCESU-PB, Senai-PB entre outras. 51 |

52 |

53 | Amo codar, sou facinado pela ideia de desenvolver soluções que 54 | facilitam e automatizam processos que sem a tecnologia são 55 | fadigantes e demoradas. 56 |

57 |
58 |
59 |
60 | 61 |
62 |
63 |

Meus contatos:

64 |
65 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | 85 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /guilhermeOrbolato-001/guilherme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Guilherme Orbolato | Dev Front-end 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 | 16 |
17 |
18 | 9:41 19 |
20 |
21 | 📶 22 | 🛜 23 | 🔋 100% 24 |
25 |
26 | 27 | 28 |
29 |
30 |
31 |
32 |
33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 | Minha foto 42 |

Guilherme Orbolato

43 |

Desenvolvedor Front-end

44 |
45 |

👋 Um pouco sobre mim

46 |

47 | Estou começando minha carreira como desenvolvedor front-end. 48 | Sou apaixonado por tecnologia e design. Adoro criar interfaces incríveis 49 | e explorar novas ferramentas. Amo conversar, aprender e compartilhar conhecimento. 50 | Nos meus momentos livres, gosto de sair com amigos, jogar video game 51 | e tomar um café ☕. 52 |

53 |
54 |
55 |
56 | 57 | 58 |
59 | 67 |
68 |
69 | 70 | 71 |
72 |
73 |
74 |
75 | 76 | 77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | <DevStart /> 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
<DevStart />
26 | 31 | 36 |
37 | 38 |
39 |
40 |
41 |

<DevStart />

42 |

"Quem nunca teve chance, agora tem equipe."

43 |
44 |
45 | 46 |
47 |

Sobre

48 |
49 |
50 |

51 | DevStart é uma iniciativa 52 | colaborativa criada por desenvolvedores em início de carreira que 53 | estão em busca da sua primeira oportunidade no mercado de 54 | trabalho. Aqui, cada participante constrói sua própria página de 55 | apresentação, exercita suas habilidades técnicas, aprende a 56 | colaborar em equipe e ganha experiência prática em um ambiente 57 | real de desenvolvimento. 58 |

59 |

60 | Nosso objetivo é crescer juntos, construir um portfólio sólido e 61 | mostrar que, mesmo sem experiência formal, temos muito a oferecer. 62 | Este projeto é 100% gratuito e feito com muita dedicação e 63 | aprendizado coletivo. 64 |

65 |
66 |
67 | 72 |
73 |
74 |
75 | 76 |
77 | 78 |
79 |

Conheça Nossos Colaboradores

80 |
81 | 86 | Icone de pesquisa 91 |
92 | 103 |
104 | Visite nosso repositório 110 |
111 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /MarianaSantos-000/mariana.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mariana Santos 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 24 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | 35 |
36 | 54 |
55 | 56 | 57 |
58 |
59 |
60 |

Mariana Santos

61 |

Desenvolvedora Full-Stack

62 |
63 | 64 |
65 | 66 |
67 |
68 |
69 | 70 | 71 |
72 |
73 |
74 |

Um pouco sobre mim

75 |

76 | Olá! Meu nome é Mariana Santos! Sou uma estudante de Ciências da 77 | Programação e colaboradora desse projeto. 78 |

79 | 80 |

81 | Programadora Full-Stack com experiência em HTML, CSS, Javascript, 82 | NodeJS e banco de dados MySQL. Entrei recentemente no mundo da 83 | programação e busco oportunidades para desenvolver minhas 84 | habilidades e crescer pessoalmente e profissionalmente. Se busca uma 85 | pessoa dedicada, comprometida e criativa, fale comigo! 86 |

87 |
88 |
89 |
90 | 91 | 92 |
93 |
94 |
95 |

Contatos

96 | 97 | 98 | 103 | 106 | 109 |
110 |
111 |
112 | 113 | 114 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /main/script.js: -------------------------------------------------------------------------------- 1 | const collaboratorsUl = document.querySelector(".colaboradores"); 2 | const inputEl = document.getElementById("input-pesquisa"); 3 | 4 | const collaboratorsInfo = [ 5 | { 6 | name: "Igor Gazineo", 7 | isMale: true, 8 | hasBackButton: true, 9 | path: "../igor-000/igor.html", 10 | picture: 11 | "https://media.licdn.com/dms/image/v2/D4D03AQEQsxrzUhbVkg/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1705305900860?e=1749686400&v=beta&t=rhNEWW401j4BCNHxM5ir0y7l_vE9UC3qnPYY1yIZjdY", 12 | devSpecialization: "full stack", 13 | }, 14 | { 15 | name: "Leticia Leme", 16 | isMale: false, 17 | hasBackButton: true, 18 | path: "../LeticiaLemeHub/index.html", 19 | picture: "https://avatars.githubusercontent.com/u/194449582?v=4", 20 | devSpecialization: "frontend", 21 | }, 22 | { 23 | name: "Andre Krykhtine", 24 | isMale: true, 25 | hasBackButton: true, 26 | path: "../andreKrykhtine/andre.html", 27 | picture: "https://avatars.githubusercontent.com/u/185527961?v=4", 28 | devSpecialization: "frontend", 29 | }, 30 | { 31 | name: "Rodrigo Marques Tavares", 32 | isMale: true, 33 | hasBackButton: false, 34 | path: "../rodrigo-274/rodrigo.html", 35 | picture: "https://avatars.githubusercontent.com/u/157378101?v=4", 36 | devSpecialization: "frontend", 37 | }, 38 | { 39 | name: "Victor Ponce Ferandes", 40 | isMale: true, 41 | hasBackButton: false, 42 | path: "../victor-22/victor.html", 43 | picture: 44 | "https://media.licdn.com/dms/image/v2/D4D03AQF1LhFxdd4qcQ/profile-displayphoto-shrink_800_800/B4DZYiSs7MGwAg-/0/1744332050695?e=1750291200&v=beta&t=79llcLSEuUCBMTzH5AzPVthNT2O4cbRoqWiWHa4MR0A", 45 | devSpecialization: "frontend", 46 | }, 47 | { 48 | name: "Felipe Melo Gomes", 49 | isMale: true, 50 | hasBackButton: false, 51 | path: "https://portfoliofmg.netlify.app/", 52 | picture: 53 | "https://avatars.githubusercontent.com/u/85581543?s=400&u=a2231acbdce15a9430e760d715910d7411067bc4&v=4", 54 | devSpecialization: "full stack", 55 | }, 56 | { 57 | name: "Diogenes Leonardo", 58 | isMale: true, 59 | hasBackButton: true, 60 | path: "../diogenes-09/diogenes.html", 61 | picture: 62 | "https://media.licdn.com/dms/image/v2/D4D03AQF_gfhiWGoBrQ/profile-displayphoto-shrink_800_800/B4DZQGFUIjGkAg-/0/1735268845149?e=1750291200&v=beta&t=Ih11IQ8FVnKR8dn2ED3kNNbypMnsp29sR_Z3s9rl3ic", 63 | devSpecialization: "full stack", 64 | }, 65 | { 66 | name: "Rafael Thomaz", 67 | isMale: true, 68 | hasBackButton: true, 69 | path: "../Rafael_Thomaz-001/rafael.html", 70 | picture: 71 | "https://avatars.githubusercontent.com/u/114960583?s=400&u=02a7cd678769fa7d4b078971439761aced4658d0&v=4", 72 | devSpecialization: "frontend", 73 | }, 74 | { 75 | name: "Gabriel Henrique", 76 | isMale: true, 77 | hasBackButton: false, 78 | path: "../gabriel-204/gabriel.html", 79 | picture: "https://avatars.githubusercontent.com/u/173842653?v=4", 80 | devSpecialization: "full stack", 81 | }, 82 | { 83 | name: "Márcio Freitas", 84 | isMale: true, 85 | hasBackButton: true, 86 | path: "../AlexFreitas-000/alexfreitas.html", 87 | picture: 88 | "https://media.licdn.com/dms/image/v2/D4D03AQF6TwWOIWANJw/profile-displayphoto-shrink_800_800/B4DZV4RmJjHYAc-/0/1741479634363?e=1750291200&v=beta&t=JvUdukmS6rV7n9zkzxo8leEa7y48N60Hpu9bi9FfyA0", 89 | devSpecialization: "full stack", 90 | }, 91 | { 92 | name: "Mariana Santos", 93 | isMale: false, 94 | hasBackButton: true, 95 | path: "../MarianaSantos-000/mariana.html", 96 | picture: "../MarianaSantos-000/imagens/fotoperfil.jpg", 97 | devSpecialization: "full stack", 98 | }, 99 | { 100 | name: "Igor Lira", 101 | isMale: true, 102 | hasBackButton: true, 103 | path: "../igor_lira/igor.html", 104 | picture: "../igor_lira/assets/foto-perfil.jpeg", 105 | devSpecialization: "full stack", 106 | }, 107 | ]; 108 | 109 | const makeAListOfColaborators = ({ 110 | name, 111 | isMale, 112 | hasBackButton, 113 | path, 114 | picture, 115 | devSpecialization, 116 | }) => { 117 | collaboratorsUl.innerHTML += ` 118 |
  • 119 | Foto de ${name} 120 | 121 |
    122 | 123 |

    ${ 124 | isMale ? "Colaborador" : "Colaboradora" 125 | }

    126 |
    ${name}
    127 |
    Área: ${ 128 | devSpecialization ? devSpecialization : "Não informada" 129 | }
    130 | Página pessoal 133 |
    134 | 135 |
    • 136 | `; 137 | }; 138 | 139 | collaboratorsInfo.forEach(makeAListOfColaborators); 140 | 141 | inputEl.addEventListener("keyup", () => { 142 | collaboratorsUl.innerHTML = ""; 143 | const inputValue = inputEl.value.toLowerCase(); 144 | const collaboratorsInfoFiltered = collaboratorsInfo.filter(({ name }) => 145 | name.toLowerCase().includes(inputValue) 146 | ); 147 | collaboratorsInfoFiltered.forEach(makeAListOfColaborators); 148 | 149 | if (!collaboratorsInfoFiltered.length) { 150 | collaboratorsUl.innerHTML = 151 | "
  • Colaborador(a) não encontrado(a).
    • "; 152 | } 153 | }); 154 | -------------------------------------------------------------------------------- /Rafael_Thomaz-001/rafael.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Rafael Thomaz 12 | 13 | 14 | 15 |
    16 |
    17 |
    18 |

    Desenvolvedor Front-End

    19 |
    20 | 23 |
    24 | 25 |
    26 | 27 |
    28 | 29 | 30 | 31 |
    33 | 34 |
    35 | 38 |
    39 | 40 |
    41 |

    Rafael Thomaz

    42 |

    Desenvolvedor Front-End | React

    43 |

    Bem-vindo(a) à minha página !

    44 | 45 |
    46 | 50 | 51 | 55 | 56 |
    57 |
    58 |
    59 | 60 | 61 |
    62 |

    Sobre

    63 |

    Desenvolvedor Front-End desde 2022, com foco 64 | em ReactJS e experiência em HTML, CSS, JavaScript, SQL e Firebase. Apaixonado por tecnologia, criação de 65 | interfaces eficientes e pelo aprendizado contínuo. 66 |

    67 |
    68 | 69 | 70 |
    71 |

    Projetos

    72 |
    73 |
    74 |
    75 | Imagem 1 78 | 80 | 81 | 82 |
    83 | 84 |
    85 | Imagem 2 88 | 90 | 91 | 92 |
    93 | 94 |
    95 | Imagem 3 98 | 100 | 101 | 102 |
    103 | 104 |
    105 | Imagem 4 108 | 110 | 111 | 112 |
    113 | 114 |
    115 | 116 |
    117 |
    118 | 119 |
    121 |

    Contato: (16) 99369-6126

    122 |

    Email: rafael.thomaz005@gmail.com

    123 |
    124 |
    125 | 126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /guilhermeOrbolato-001/style.css: -------------------------------------------------------------------------------- 1 | /* Reset e Estilos Gerais */ 2 | body { 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 6 | background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 7 | background-size: 400% 400%; 8 | animation: gradientBG 15s ease infinite; 9 | overflow: hidden; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | } 15 | 16 | @keyframes gradientBG { 17 | 0% { background-position: 0% 50%; } 18 | 50% { background-position: 100% 50%; } 19 | 100% { background-position: 0% 50%; } 20 | } 21 | 22 | .particles { 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | z-index: 0; 27 | } 28 | 29 | /* --- Celular 3D --- */ 30 | .phone-container { 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | width: 100%; 35 | height: 100vh; 36 | z-index: 1; 37 | position: relative; 38 | } 39 | 40 | .phone { 41 | width: 320px; 42 | height: 95vh; 43 | max-height: 600px; 44 | background: #111; 45 | border-radius: 40px; 46 | position: relative; 47 | box-shadow: 48 | 0 0 0 12px #1a1a1a, 49 | 0 0 0 14px #333, 50 | 0 30px 60px rgba(0, 0, 0, 0.8); 51 | transform: rotateY(10deg); 52 | overflow: hidden; 53 | } 54 | 55 | /* Barra de status estilo iPhone */ 56 | .iphone-status-bar { 57 | position: absolute; 58 | top: 8px; 59 | left: 0; 60 | right: 0; 61 | display: flex; 62 | justify-content: space-between; 63 | padding: 0 20px; 64 | z-index: 100; 65 | color: #000; 66 | font-family: -apple-system, BlinkMacSystemFont, sans-serif; 67 | font-size: 12px; 68 | font-weight: 600; 69 | } 70 | 71 | .status-right { 72 | display: flex; 73 | gap: 2px; 74 | } 75 | 76 | /* Notch do iPhone */ 77 | .iphone-notch { 78 | position: absolute; 79 | top: 0; 80 | left: 50%; 81 | transform: translateX(-50%); 82 | width: 40%; 83 | height: 30px; 84 | background: #000; 85 | border-bottom-left-radius: 15px; 86 | border-bottom-right-radius: 15px; 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | z-index: 90; 91 | } 92 | 93 | .speaker { 94 | width: 60px; 95 | height: 6px; 96 | background: #333; 97 | border-radius: 3px; 98 | } 99 | 100 | .camera { 101 | position: absolute; 102 | right: 20px; 103 | width: 12px; 104 | height: 12px; 105 | background: #222; 106 | border-radius: 50%; 107 | border: 2px solid #444; 108 | } 109 | 110 | .sensor { 111 | position: absolute; 112 | right: 45px; 113 | width: 8px; 114 | height: 8px; 115 | background: #222; 116 | border-radius: 50%; 117 | border: 1px solid #444; 118 | } 119 | 120 | /* Tela do celular */ 121 | .phone-screen { 122 | width: 100%; 123 | height: 100%; 124 | background: #f0f0f0; 125 | border-radius: 30px; 126 | overflow-y: scroll; 127 | scroll-snap-type: y mandatory; 128 | scroll-behavior: smooth; 129 | -webkit-overflow-scrolling: touch; 130 | scrollbar-width: none; 131 | -ms-overflow-style: none; 132 | padding-top: 50px; /* Espaço para a barra de status */ 133 | } 134 | 135 | .phone-screen::-webkit-scrollbar { 136 | display: none; 137 | } 138 | 139 | /* Efeito de reflexo na tela */ 140 | .screen-reflection { 141 | position: absolute; 142 | top: 0; 143 | left: 0; 144 | width: 100%; 145 | height: 100%; 146 | background: linear-gradient( 147 | 135deg, 148 | rgba(255, 255, 255, 0.1) 0%, 149 | rgba(255, 255, 255, 0) 60% 150 | ); 151 | pointer-events: none; 152 | } 153 | 154 | /* Seções */ 155 | .screen-section { 156 | min-height: calc(100vh - 50px); /* Ajuste para a barra de status */ 157 | scroll-snap-align: start; 158 | padding: 30px; 159 | display: flex; 160 | flex-direction: column; 161 | justify-content: center; 162 | align-items: center; 163 | box-sizing: border-box; 164 | } 165 | 166 | /* Perfil */ 167 | .profile { 168 | text-align: center; 169 | width: 100%; 170 | } 171 | 172 | .profile-pic { 173 | width: 150px; 174 | height: 150px; 175 | border-radius: 50%; 176 | border: 3px solid #764ba2; 177 | margin-bottom: 20px; 178 | object-fit: cover; 179 | } 180 | 181 | h1 { 182 | color: #333; 183 | margin: 0; 184 | font-size: 1.8em; 185 | } 186 | 187 | .subtitle { 188 | color: #666; 189 | font-style: italic; 190 | margin-bottom: 30px; 191 | } 192 | 193 | .about { 194 | text-align: center; 195 | margin-top: 20px; 196 | } 197 | 198 | .about h2 { 199 | color: #764ba2; 200 | margin-bottom: 15px; 201 | font-size: 1.4em; 202 | } 203 | 204 | .about p { 205 | color: #555; 206 | line-height: 1.6; 207 | max-width: 90%; 208 | margin: 0 auto; 209 | } 210 | 211 | /* Redes Sociais */ 212 | .social-links { 213 | text-align: center; 214 | width: 100%; 215 | } 216 | 217 | .social-links h2 { 218 | color: #764ba2; 219 | margin-bottom: 25px; 220 | font-size: 1.4em; 221 | } 222 | 223 | .links { 224 | display: flex; 225 | flex-direction: column; 226 | gap: 15px; 227 | width: 100%; 228 | max-width: 280px; 229 | margin: 0 auto; 230 | } 231 | 232 | /* Botões Neon */ 233 | .neon-button { 234 | display: flex; 235 | align-items: center; 236 | justify-content: center; 237 | gap: 10px; 238 | padding: 15px; 239 | background: rgba(0, 0, 0, 0.7); 240 | color: #fff; 241 | border: 2px solid; 242 | border-radius: 30px; 243 | font-weight: bold; 244 | text-decoration: none; 245 | transition: all 0.3s; 246 | } 247 | 248 | .neon-button:hover { 249 | color: #fff; 250 | box-shadow: 251 | 0 0 10px currentColor, 252 | 0 0 20px currentColor; 253 | transform: translateY(-3px); 254 | } 255 | 256 | .neon-button:nth-child(1) { border-color: #0e76a8; } /* LinkedIn */ 257 | .neon-button:nth-child(2) { border-color: #6cc644; } /* GitHub */ 258 | .neon-button:nth-child(3) { border-color: #e1306c; } /* Instagram */ 259 | 260 | /* Indicador de Scroll */ 261 | .scroll-indicator { 262 | position: absolute; 263 | bottom: 15px; 264 | left: 50%; 265 | transform: translateX(-50%); 266 | display: flex; 267 | gap: 10px; 268 | z-index: 10; 269 | } 270 | 271 | .dot { 272 | width: 10px; 273 | height: 10px; 274 | background: rgba(255, 255, 255, 0.5); 275 | border-radius: 50%; 276 | transition: all 0.3s; 277 | cursor: pointer; 278 | } 279 | 280 | .dot.active { 281 | background: white; 282 | transform: scale(1.2); 283 | } 284 | 285 | /* Responsividade */ 286 | @media (max-width: 500px) { 287 | .phone { 288 | width: 95vw; 289 | height: 95vh; 290 | border-radius: 30px; 291 | transform: none; 292 | } 293 | 294 | .iphone-status-bar { 295 | padding: 0 15px; 296 | font-size: 12px; 297 | } 298 | 299 | .screen-section { 300 | padding: 20px; 301 | } 302 | 303 | .profile-pic { 304 | width: 120px; 305 | height: 120px; 306 | } 307 | 308 | .iphone-notch { 309 | width: 50%; 310 | height: 25px; 311 | } 312 | } -------------------------------------------------------------------------------- /victor-22/script.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | 3 | // --- Atualizar ano no rodapé --- 4 | const currentYearSpan = document.getElementById('current-year'); 5 | if (currentYearSpan) { 6 | currentYearSpan.textContent = new Date().getFullYear(); 7 | } 8 | 9 | // --- Menu Mobile (Hamburguer) --- 10 | const menuToggle = document.querySelector('.menu-toggle'); 11 | const mainNav = document.querySelector('.main-nav'); 12 | 13 | if (menuToggle && mainNav) { 14 | menuToggle.addEventListener('click', function() { 15 | mainNav.classList.toggle('active'); // Mostra/esconde o menu 16 | 17 | // Opcional: Mudar o ícone do botão (hamburguer/X) 18 | if (mainNav.classList.contains('active')) { 19 | menuToggle.setAttribute('aria-expanded', 'true'); 20 | // menuToggle.innerHTML = '×'; // Ícone X (opcional) 21 | } else { 22 | menuToggle.setAttribute('aria-expanded', 'false'); 23 | // menuToggle.innerHTML = '☰'; // Ícone Hamburguer (opcional) 24 | } 25 | }); 26 | 27 | // Fechar o menu ao clicar em um link (para SPAs de página única) 28 | const navLinks = mainNav.querySelectorAll('a'); 29 | navLinks.forEach(link => { 30 | link.addEventListener('click', () => { 31 | if (mainNav.classList.contains('active')) { 32 | mainNav.classList.remove('active'); 33 | menuToggle.setAttribute('aria-expanded', 'false'); 34 | // menuToggle.innerHTML = '☰'; // Volta para hamburguer (opcional) 35 | } 36 | }); 37 | }); 38 | } 39 | 40 | // --- Opcional: Adicionar classe ao header ao rolar a página --- 41 | const header = document.querySelector('.main-header'); 42 | if (header) { 43 | window.addEventListener('scroll', function() { 44 | if (window.scrollY > 50) { // Adiciona a classe após rolar 50px 45 | header.classList.add('scrolled'); 46 | } else { 47 | header.classList.remove('scrolled'); 48 | } 49 | }); 50 | } 51 | 52 | 53 | // --- Opcional: Animação de "scroll suave" mais robusta (alternativa ao CSS scroll-behavior) --- 54 | // Se precisar de compatibilidade com navegadores mais antigos ou mais controle 55 | // const smoothScrollLinks = document.querySelectorAll('a[href^="#"]'); 56 | // smoothScrollLinks.forEach(link => { 57 | // link.addEventListener('click', function(e) { 58 | // e.preventDefault(); 59 | // const targetId = this.getAttribute('href'); 60 | // const targetElement = document.querySelector(targetId); 61 | // if (targetElement) { 62 | // const headerOffset = document.querySelector('.main-header')?.offsetHeight || 70; // Ajustar pelo header fixo 63 | // const elementPosition = targetElement.getBoundingClientRect().top; 64 | // const offsetPosition = elementPosition + window.pageYOffset - headerOffset; 65 | 66 | // window.scrollTo({ 67 | // top: offsetPosition, 68 | // behavior: "smooth" 69 | // }); 70 | 71 | // // Fecha o menu mobile se estiver aberto após clicar no link 72 | // if (mainNav && mainNav.classList.contains('active')) { 73 | // mainNav.classList.remove('active'); 74 | // menuToggle.setAttribute('aria-expanded', 'false'); 75 | // } 76 | // } 77 | // }); 78 | // }); 79 | 80 | 81 | // --- Opcional: Adicionar classe 'active' ao link de navegação da seção visível --- 82 | // Requer um pouco mais de lógica com Intersection Observer para melhor performance 83 | // Exemplo simples (pode não ser perfeito em todas as situações): 84 | const sections = document.querySelectorAll('main section[id]'); 85 | const navLi = document.querySelectorAll('.main-nav ul li a'); 86 | 87 | window.addEventListener('scroll', () => { 88 | let current = ''; 89 | const headerOffset = header?.offsetHeight || 70; 90 | 91 | sections.forEach(section => { 92 | const sectionTop = section.offsetTop - headerOffset - 50; // Ajuste extra 93 | if (pageYOffset >= sectionTop) { 94 | current = section.getAttribute('id'); 95 | } 96 | }); 97 | 98 | navLi.forEach(a => { 99 | a.classList.remove('active'); // Limpa a classe de todos 100 | if (a.getAttribute('href') === `#${current}`) { 101 | a.classList.add('active'); // Adiciona classe ao link atual 102 | } 103 | }); 104 | 105 | // Caso especial para o topo da página (link 'Início') 106 | if (pageYOffset < (sections[0].offsetTop - headerOffset - 50)) { 107 | navLi.forEach(a => a.classList.remove('active')); 108 | const homeLink = document.querySelector('.main-nav ul li a[href="#hero"]'); 109 | if (homeLink) homeLink.classList.add('active'); 110 | } 111 | }); 112 | 113 | 114 | console.log("Landing page carregada e scripts executados."); 115 | 116 | }); // Fim do DOMContentLoaded 117 | 118 | 119 | 120 | // Formulário para entrar em contato para mais serviços (inicio) 121 | 122 | 123 | 124 | 125 | document.addEventListener('DOMContentLoaded', function() { 126 | 127 | // [...] Outro código JS que você já tinha (menu, ano, etc.) [...] 128 | 129 | 130 | // --- Controle de Exibição do Formulário de Contato --- 131 | const showFormButton = document.getElementById('show-form-button'); 132 | const contactForm = document.getElementById('contact-form'); 133 | 134 | if (showFormButton && contactForm) { 135 | showFormButton.addEventListener('click', function() { 136 | // Alterna a classe que esconde/mostra o formulário 137 | contactForm.classList.toggle('hidden-form'); 138 | 139 | // Opcional: Esconder o botão "Deixar Mensagem" após clicar 140 | // showFormButton.style.display = 'none'; 141 | 142 | // Opcional: Mudar o texto do botão (se não for escondê-lo) 143 | // if (contactForm.classList.contains('hidden-form')) { 144 | // showFormButton.textContent = 'Deixar uma Mensagem (Formulário)'; 145 | // } else { 146 | // showFormButton.textContent = 'Fechar Formulário'; 147 | // } 148 | 149 | // Opcional: Rolar a página suavemente até o formulário quando ele abrir 150 | if (!contactForm.classList.contains('hidden-form')) { 151 | // Espera um pouco pela animação de transição antes de rolar 152 | setTimeout(() => { 153 | contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' }); 154 | }, 100); // Ajuste o tempo se necessário 155 | } 156 | }); 157 | } 158 | 159 | // [...] Restante do seu código JS [...] 160 | 161 | console.log("Landing page carregada e scripts executados. Controle de formulário adicionado."); 162 | 163 | }); // Fim do DOMContentLoaded 164 | 165 | 166 | // Formulário para entrar em contato para mais serviços (fim) -------------------------------------------------------------------------------- /MarianaSantos-000/style.css: -------------------------------------------------------------------------------- 1 | /* Configurações globais */ 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | 8 | 9 | /* Configurações para os temas claro e escuro */ 10 | :root{ 11 | --background: #ffffff; 12 | --header: #311f2d; 13 | --details: #7f4aec; 14 | --text: #1a202c; 15 | } 16 | 17 | html{ 18 | color-scheme: light; 19 | } 20 | 21 | @media (prefers-color-scheme: dark){ 22 | :root{ 23 | --background: #553b4f; 24 | --header: #e8d8f2; 25 | --details: #a98fbf; 26 | --text: #ffffff; 27 | } 28 | 29 | html{ 30 | color-scheme: dark; 31 | } 32 | } 33 | 34 | [modo-light-dark="light"] { 35 | color-scheme: light; 36 | --background: #ffffff; 37 | --header: #311f2d; 38 | --details: #7f4aec; 39 | --text: #1a202c; 40 | } 41 | 42 | 43 | [modo-light-dark="dark"] { 44 | color-scheme: dark; 45 | --background: #553b4f; 46 | --header: #e8d8f2; 47 | --details: #a98fbf; 48 | --text: #ffffff; 49 | } 50 | 51 | 52 | 53 | /* Fontes */ 54 | .bebas-neue-regular { 55 | font-family: "Bebas Neue", sans-serif; 56 | font-weight: 400; 57 | font-style: normal; 58 | } 59 | 60 | .roboto-condensed-uniquifier{ 61 | font-family: "Roboto Condensed", sans-serif; 62 | font-optical-sizing: auto; 63 | font-weight: weight; 64 | font-style: normal; 65 | } 66 | 67 | 68 | 69 | /* Configurando padrões para os elementos */ 70 | h1{ 71 | font-family: "Bebas Neue"; 72 | font-size: 90px; 73 | margin-left: 100px; 74 | color: var(--text); 75 | } 76 | 77 | h2{ 78 | font-family: "Roboto Condensed"; 79 | color: var(--text); 80 | } 81 | 82 | p{ 83 | font-family: Arial, sans-serif; 84 | font-size: 18px; 85 | color: var(--text); 86 | } 87 | 88 | span{ 89 | font-family: Arial, sans-serif; 90 | } 91 | 92 | header{ 93 | background-color: var(--header); 94 | padding-bottom: 15px; 95 | position: fixed; 96 | top:0; 97 | left: 0.5vw; 98 | right: 0.5vw; 99 | } 100 | 101 | header a{ 102 | text-decoration: none; 103 | font-family: Arial, sans-serif; 104 | } 105 | 106 | header li{ 107 | list-style-type: none; 108 | } 109 | 110 | body{ 111 | background-color: var(--background); 112 | } 113 | 114 | i{ 115 | transition: all 0.3s ease; 116 | } 117 | 118 | i:hover{ 119 | filter: drop-shadow(0 8px 8px rgba(166, 137, 216, 0.7)); 120 | transform: scale(1.05); 121 | } 122 | 123 | li{ 124 | transition: text-decoration 0.3s ease; 125 | } 126 | 127 | li:hover{ 128 | text-decoration: underline; 129 | text-decoration-color: #a98fbf; 130 | text-decoration-thickness: 2px; 131 | } 132 | 133 | 134 | 135 | /* Configurações para o header com a div "head" */ 136 | .head{ 137 | display: flex; 138 | justify-content: space-evenly; 139 | margin: 12px 6px 13px 6px; 140 | position: sticky; 141 | } 142 | 143 | .head a{ 144 | font-size: 19px; 145 | font-weight: bold; 146 | color: var(--background); 147 | } 148 | 149 | 150 | 151 | /* Configurações para a apresentação da colaboradora com a div "inicio" */ 152 | #inicio .container-inicio{ 153 | display: grid; 154 | grid-template-columns: 1fr 1fr; 155 | margin: 90px 100px 50px 120px; 156 | } 157 | 158 | .img-container img{ 159 | width: 400px; 160 | height: auto; 161 | border-radius: 50%; 162 | justify-self: center; 163 | margin-left: 40px; 164 | } 165 | 166 | .container-inicio h1{ 167 | margin-top: 30px; 168 | } 169 | 170 | .container-inicio h2{ 171 | font-size: 50px; 172 | margin-left: 80px; 173 | } 174 | 175 | 176 | 177 | /* Configurações da div "sobremim" */ 178 | #sobremim .sobremim-container{ 179 | margin: 50px 180px 50px 180px; 180 | } 181 | 182 | .sobremim-container h2{ 183 | display: flex; 184 | justify-content: center; 185 | margin-bottom: 20px; 186 | font-size: 36px; 187 | } 188 | 189 | .sobremim-container p{ 190 | font-size: 18px; 191 | } 192 | 193 | 194 | 195 | /* Configurações para os elementos da div "contato" */ 196 | #contatos .contato-container{ 197 | margin: 50px 180px 50px 180px; 198 | } 199 | 200 | .contato-container i{ 201 | font-size: 140px; 202 | margin: 1px 120px 1px; 203 | color: var(--details); 204 | } 205 | 206 | .contato-container h2{ 207 | display: flex; 208 | justify-content: center; 209 | margin-bottom: 20px; 210 | font-size: 36px; 211 | } 212 | 213 | 214 | 215 | /* Configurações para o footer */ 216 | footer{ 217 | background-color: var(--header); 218 | display: grid; 219 | grid-template-columns: 1fr 1fr 1fr; 220 | padding: 20px; 221 | } 222 | 223 | footer p{ 224 | font-size: 20px; 225 | font-weight: bold; 226 | color: var(--background); 227 | } 228 | 229 | .columntwo a{ 230 | display: flex; 231 | justify-content: center; 232 | margin-bottom: 10px; 233 | text-decoration: none; 234 | font-size: 18px; 235 | font-family: Arial, sans-serif; 236 | font-weight: bold; 237 | color: var(--background); 238 | 239 | :hover{ 240 | color: var(--hover); 241 | } 242 | } 243 | 244 | .contacts{ 245 | margin-left: 50px; 246 | } 247 | 248 | .contacts p{ 249 | margin-bottom: 8px; 250 | } 251 | 252 | .contacts span{ 253 | font-size: 14px; 254 | color: var(--background); 255 | } 256 | 257 | .contacts i{ 258 | font-size: 18px; 259 | color: var(--details); 260 | } 261 | 262 | /* Responsividade */ 263 | @media screen and (max-width: 768px) { 264 | /* Ajustando o header */ 265 | .head{ 266 | display: flex; 267 | flex-direction: column; 268 | align-items: center; 269 | } 270 | 271 | .head a{ 272 | font-size: 16px; 273 | } 274 | 275 | 276 | 277 | /* Ajustando a apresentação da colaboradora */ 278 | #inicio .container-inicio{ 279 | grid-template-columns: 1fr; 280 | text-align: center; 281 | margin: 50px 20px; 282 | } 283 | 284 | .img-container img{ 285 | width: 200px; 286 | margin: 0 auto; 287 | } 288 | 289 | .container-inicio h1{ 290 | font-size: 36px; 291 | margin-top: 90px; 292 | } 293 | 294 | .container-inicio h2{ 295 | font-size: 24px; 296 | margin-left: 0; 297 | } 298 | 299 | 300 | 301 | /* Ajustando a seção "Sobre mim" */ 302 | #sobremim .sobremim-container{ 303 | margin: 20px 10px; 304 | } 305 | 306 | .sobremim-container h2{ 307 | font-size: 28px; 308 | } 309 | 310 | .sobremim-container p{ 311 | font-size: 16px; 312 | } 313 | 314 | 315 | 316 | /* Ajustando os contatos */ 317 | #contatos .contato-container{ 318 | margin: 20px 10px; 319 | } 320 | 321 | .contato-container i{ 322 | font-size: 80px; 323 | margin: 10px; 324 | } 325 | 326 | .contato-container h2{ 327 | font-size: 28px; 328 | } 329 | 330 | 331 | 332 | /* Ajustando o footer */ 333 | footer{ 334 | grid-template-columns: 1fr; 335 | text-align: center; 336 | padding: 10px; 337 | } 338 | 339 | footer p{ 340 | font-size: 16px; 341 | } 342 | 343 | .columntwo a{ 344 | font-size: 14px; 345 | } 346 | 347 | .contacts{ 348 | margin: 10px 0; 349 | } 350 | 351 | .contacts p{ 352 | font-size: 14px; 353 | } 354 | 355 | .contacts span{ 356 | font-size: 12px; 357 | } 358 | } -------------------------------------------------------------------------------- /victor-22/victor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Victor Fernandes - Bem-vindo(a)! 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    15 | 16 | 25 | 26 |
    27 |
    28 | 29 |
    30 |
    31 |
    32 |

    Victor Gabriel Ponce Fernandes !

    33 |

    Progrmador Front-End, discente em Tencnólogo em Jogos Digitais e Suporte de TI

    34 |

    Bem-vindo(a) à minha página pessoal. Aqui você encontrará mais sobre mim, minhas paixões e projetos.

    35 | Saiba Mais Sobre Mim 36 | Entre em Contato 37 |
    38 |
    39 | 40 |
    41 |
    42 |

    Sobre Mim

    43 |
    44 |
    45 | victor Fernandes 46 |
    47 |
    48 |

    Olá Sou Colaborador desse Projeto

    49 |

    Programador Front-End tenho uma boa experiência com HTML, CSS e JavaScript.

    50 |

    Já desenvolvi alguns mini projetos acadêmicos e pessoais, e estou sempre buscando aprender mais.

    51 |

    Atualmente estou cursando Tecnólogo em Jogos Digitais e sempre estou busa de novos desafios para conseguir aprimorar as minhas habilidades

    52 |
    53 |
    54 |
    55 |
    56 | 57 |
    58 |
    59 |

    Minhas Habilidades

    60 |
    61 |
    62 |

    Desenvolvimento Web

    63 |

    HTML5, CSS3, JavaScript , React, Node.js...

    64 |
    65 | 66 |
    67 |

    Game Developer

    68 |

    desenvolvo mini projetos de Jogos 2D..

    69 |
    70 | 71 |
    72 |
    73 | 74 |
    75 |
    76 |

    Meus Projetos

    77 |

    Confira alguns dos projetos em que trabalhei ou que desenvolvi para estudo.

    78 |
    79 |
    80 | Nome do Projeto 1 81 |

    Sistema para validar Cartões de Crédito

    82 |

    Um Sistema Simples e didático para conseguir verificar se o seu cartão é verificado ou não verificado.

    83 | Ver Projeto 84 |
    85 |
    86 | Nome do Projeto 2 87 |

    Aplicativo de Clima

    88 |

    Um aplicativo bem introsivo e simples de usar para conseguir verificar o clima.

    89 | Ver Projeto 90 |
    91 |
    92 |
    93 |
    94 | 95 |
    96 |
    97 |

    Entre em Contato

    98 |

    Gostaria de conversar, colaborar ou apenas trocar uma ideia? Me envie uma mensagem!

    99 |
    100 |
    101 |

    Email

    102 | Clique aqui 103 | 104 | 105 | 106 |
    107 |
    108 |

    LinkedIn

    109 | Clique aqui 110 | 111 |
    112 |
    113 |

    GitHub

    114 | clique aqui 115 |
    116 |
    117 | 118 | 119 |
    120 | 121 | 122 | > 123 | 124 |
    125 | 126 |
    127 | 128 |
    129 |

    Preencha seus dados para mais serviços :

    130 | 131 |
    132 | 133 | 134 |
    135 | 136 |
    137 | 138 | 139 |
    140 | 141 |
    142 | 143 |
    144 | 145 |
    146 | 147 | 148 |
    149 | 150 | 151 | 152 | 153 | 154 |
    155 | > 156 | 157 | 158 | 159 | 160 |
    161 |
    162 | 163 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /victor-22/style.css: -------------------------------------------------------------------------------- 1 | /* --- Reset Básico e Configurações Globais --- */ 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | scroll-behavior: smooth; /* Rolagem suave para links internos */ 7 | } 8 | 9 | :root { 10 | /* Defina suas variáveis de cor */ 11 | --primary-color: #007bff; /* Azul exemplo */ 12 | --secondary-color: #6c757d; /* Cinza exemplo */ 13 | --tertiary-color: #28a745; /* Verde exemplo */ 14 | --light-color: #f8f9fa; 15 | --dark-color: #343a40; 16 | --text-color: #212529; 17 | --background-color: #ffffff; 18 | --section-padding: 60px 0; /* Espaçamento padrão das seções */ 19 | } 20 | 21 | body { 22 | font-family: 'Arial', sans-serif; /* Escolha uma fonte melhor (ex: Google Fonts) */ 23 | line-height: 1.6; 24 | color: var(--text-color); 25 | background-color: var(--background-color); 26 | } 27 | 28 | h1, h2, h3 { 29 | margin-bottom: 1rem; 30 | line-height: 1.2; 31 | } 32 | 33 | h1 { font-size: 2.8rem; } 34 | h2 { font-size: 2.2rem; text-align: center; margin-bottom: 2rem; } 35 | h3 { font-size: 1.5rem; } 36 | 37 | p { 38 | margin-bottom: 1rem; 39 | } 40 | 41 | a { 42 | text-decoration: none; 43 | color: var(--primary-color); 44 | transition: color 0.3s ease; 45 | } 46 | 47 | a:hover { 48 | color: darken(var(--primary-color), 10%); 49 | } 50 | 51 | img { 52 | max-width: 100%; 53 | height: auto; 54 | display: block; 55 | } 56 | 57 | ul { 58 | list-style: none; 59 | } 60 | 61 | .container { 62 | max-width: 1100px; 63 | margin: 0 auto; 64 | padding: 0 20px; /* Espaçamento lateral */ 65 | } 66 | 67 | /* --- Cabeçalho e Navegação --- */ 68 | .main-header { 69 | background-color: var(--background-color); 70 | padding: 1rem 0; 71 | position: fixed; /* Fixo no topo */ 72 | width: 100%; 73 | top: 0; 74 | left: 0; 75 | z-index: 1000; 76 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 77 | transition: background-color 0.3s ease; 78 | } 79 | 80 | /* Estilo para quando rolar a página (adicione com JS) */ 81 | /* .main-header.scrolled { background-color: rgba(255, 255, 255, 0.95); } */ 82 | 83 | .main-header .container { 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | } 88 | 89 | .logo { 90 | font-size: 1.5rem; 91 | font-weight: bold; 92 | color: var(--dark-color); 93 | } 94 | 95 | .main-nav ul { 96 | display: flex; 97 | } 98 | 99 | .main-nav ul li { 100 | margin-left: 20px; 101 | } 102 | 103 | .main-nav ul li a { 104 | color: var(--dark-color); 105 | padding: 5px 10px; 106 | font-weight: 500; 107 | position: relative; 108 | } 109 | 110 | .main-nav ul li a::after { /* Efeito de sublinhado no hover */ 111 | content: ''; 112 | position: absolute; 113 | width: 0; 114 | height: 2px; 115 | bottom: -2px; 116 | left: 50%; 117 | transform: translateX(-50%); 118 | background-color: var(--primary-color); 119 | transition: width 0.3s ease; 120 | } 121 | 122 | .main-nav ul li a:hover::after, 123 | .main-nav ul li a.active::after { /* Classe 'active' pode ser adicionada via JS */ 124 | width: 100%; 125 | } 126 | 127 | .menu-toggle { /* Botão de menu para mobile */ 128 | display: none; /* Escondido por padrão */ 129 | background: none; 130 | border: none; 131 | font-size: 1.8rem; 132 | cursor: pointer; 133 | color: var(--dark-color); 134 | } 135 | 136 | /* --- Corpo Principal (Espaçamento do Header Fixo) --- */ 137 | main { 138 | padding-top: 80px; /* Altura aproximada do header */ 139 | } 140 | 141 | /* --- Seção Hero --- */ 142 | .hero-section { 143 | background-color: var(--light-color); /* Cor de fundo suave */ 144 | /* background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('caminho/para/imagem_fundo.jpg') no-repeat center center/cover; */ /* Opção com imagem */ 145 | color: var(--dark-color); /* Mudar para #fff se usar fundo escuro */ 146 | padding: 100px 0; 147 | text-align: center; 148 | min-height: 70vh; /* Altura mínima */ 149 | display: flex; 150 | align-items: center; 151 | justify-content: center; 152 | } 153 | 154 | .hero-content .subtitle { 155 | font-size: 1.4rem; 156 | font-weight: 300; 157 | margin-bottom: 1.5rem; 158 | color: var(--secondary-color); 159 | } 160 | 161 | /* --- Botões CTA (Call to Action) --- */ 162 | .cta-button { 163 | display: inline-block; 164 | padding: 12px 25px; 165 | border-radius: 5px; 166 | font-weight: bold; 167 | text-transform: uppercase; 168 | letter-spacing: 1px; 169 | cursor: pointer; 170 | transition: all 0.3s ease; 171 | margin: 10px 5px; 172 | border: 2px solid transparent; 173 | } 174 | 175 | .cta-button.primary { 176 | background-color: var(--primary-color); 177 | color: #fff; 178 | border-color: var(--primary-color); 179 | } 180 | .cta-button.primary:hover { 181 | background-color: darken(var(--primary-color), 10%); 182 | border-color: darken(var(--primary-color), 10%); 183 | transform: translateY(-2px); /* Efeito sutil ao passar o mouse */ 184 | } 185 | 186 | .cta-button.secondary { 187 | background-color: transparent; 188 | color: var(--primary-color); 189 | border-color: var(--primary-color); 190 | } 191 | .cta-button.secondary:hover { 192 | background-color: var(--primary-color); 193 | color: #fff; 194 | transform: translateY(-2px); 195 | } 196 | 197 | .cta-button.tertiary { /* Para links de projeto */ 198 | background-color: var(--tertiary-color); 199 | color: #fff; 200 | border-color: var(--tertiary-color); 201 | padding: 8px 15px; 202 | font-size: 0.9rem; 203 | } 204 | .cta-button.tertiary:hover { 205 | background-color: darken(var(--tertiary-color), 10%); 206 | border-color: darken(var(--tertiary-color), 10%); 207 | } 208 | 209 | /* --- Seção Sobre Mim --- */ 210 | .about-section { 211 | padding: var(--section-padding); 212 | background-color: var(--background-color); 213 | } 214 | 215 | .about-content { 216 | display: flex; 217 | align-items: center; 218 | gap: 40px; /* Espaço entre imagem e texto */ 219 | } 220 | 221 | .about-image { 222 | flex: 0 0 300px; /* Largura fixa para a imagem */ 223 | text-align: center; 224 | } 225 | 226 | .about-image img { 227 | border-radius: 50%; /* Imagem redonda */ 228 | max-width: 250px; 229 | border: 5px solid var(--light-color); 230 | box-shadow: 0 4px 10px rgba(0,0,0,0.1); 231 | } 232 | 233 | .about-text { 234 | flex: 1; /* O texto ocupa o espaço restante */ 235 | } 236 | 237 | /* --- Seção Habilidades --- */ 238 | .skills-section { 239 | padding: var(--section-padding); 240 | background-color: var(--light-color); /* Fundo diferente para diversificar */ 241 | } 242 | 243 | .skills-grid { 244 | display: grid; 245 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Layout responsivo */ 246 | gap: 30px; 247 | margin-top: 2rem; 248 | } 249 | 250 | .skill-card { 251 | background-color: var(--background-color); 252 | padding: 30px; 253 | border-radius: 8px; 254 | text-align: center; 255 | box-shadow: 0 2px 8px rgba(0,0,0,0.08); 256 | transition: transform 0.3s ease, box-shadow 0.3s ease; 257 | } 258 | 259 | .skill-card:hover { 260 | transform: translateY(-5px); 261 | box-shadow: 0 6px 15px rgba(0,0,0,0.12); 262 | } 263 | 264 | .skill-icon { 265 | font-size: 2.5rem; 266 | color: var(--primary-color); 267 | margin-bottom: 1rem; 268 | } 269 | 270 | .skill-card h3 { 271 | color: var(--primary-color); 272 | margin-bottom: 0.5rem; 273 | } 274 | 275 | /* --- Seção Portfólio --- */ 276 | .portfolio-section { 277 | padding: var(--section-padding); 278 | background-color: var(--background-color); 279 | } 280 | 281 | .portfolio-intro { 282 | text-align: center; 283 | max-width: 600px; 284 | margin: 0 auto 2rem auto; 285 | color: var(--secondary-color); 286 | } 287 | 288 | .portfolio-grid { 289 | display: grid; 290 | grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 291 | gap: 30px; 292 | } 293 | 294 | .portfolio-item { 295 | background-color: var(--light-color); 296 | border-radius: 8px; 297 | overflow: hidden; /* Garante que a imagem não ultrapasse */ 298 | box-shadow: 0 2px 8px rgba(0,0,0,0.08); 299 | transition: transform 0.3s ease, box-shadow 0.3s ease; 300 | display: flex; 301 | flex-direction: column; 302 | } 303 | 304 | .portfolio-item:hover { 305 | transform: translateY(-5px); 306 | box-shadow: 0 6px 15px rgba(0,0,0,0.12); 307 | } 308 | 309 | .portfolio-item img { 310 | width: 100%; 311 | height: 200px; /* Altura fixa para a imagem do projeto */ 312 | object-fit: cover; /* Cobre o espaço sem distorcer */ 313 | } 314 | 315 | .portfolio-item h3 { 316 | margin: 1rem 1rem 0.5rem 1rem; 317 | color: var(--dark-color); 318 | } 319 | 320 | .portfolio-item p { 321 | margin: 0 1rem 1rem 1rem; 322 | flex-grow: 1; /* Faz a descrição ocupar espaço disponível */ 323 | font-size: 0.95rem; 324 | color: var(--secondary-color); 325 | } 326 | 327 | .portfolio-item .cta-button { 328 | margin: 0 1rem 1rem 1rem; 329 | align-self: flex-start; /* Alinha o botão à esquerda */ 330 | } 331 | 332 | 333 | /* --- Seção Contato --- */ 334 | .contact-section { 335 | padding: var(--section-padding); 336 | background-color: var(--light-color); 337 | } 338 | 339 | .contact-section p { 340 | text-align: center; 341 | max-width: 600px; 342 | margin: 0 auto 2.5rem auto; 343 | } 344 | 345 | .contact-options { 346 | display: flex; 347 | justify-content: center; 348 | gap: 40px; 349 | flex-wrap: wrap; /* Quebra linha em telas menores */ 350 | text-align: center; 351 | margin-bottom: 3rem; /* Espaço antes do formulário opcional */ 352 | } 353 | 354 | .contact-option { 355 | flex-basis: 200px; /* Largura base */ 356 | } 357 | 358 | .contact-icon { 359 | font-size: 2rem; 360 | color: var(--primary-color); 361 | margin-bottom: 0.8rem; 362 | } 363 | 364 | .contact-option h3 { 365 | margin-bottom: 0.5rem; 366 | color: var(--dark-color); 367 | } 368 | 369 | .contact-option a { 370 | color: var(--secondary-color); 371 | word-break: break-all; /* Evita que links longos quebrem o layout */ 372 | } 373 | .contact-option a:hover { 374 | color: var(--primary-color); 375 | } 376 | 377 | /* Opcional: Estilos para Formulário de Contato */ 378 | .contact-form { 379 | max-width: 600px; 380 | margin: 2rem auto 0 auto; 381 | background: var(--background-color); 382 | padding: 30px; 383 | border-radius: 8px; 384 | box-shadow: 0 4px 15px rgba(0,0,0,0.1); 385 | } 386 | 387 | .contact-form label { 388 | display: block; 389 | margin-bottom: 5px; 390 | font-weight: bold; 391 | color: var(--dark-color); 392 | } 393 | 394 | .contact-form input, 395 | .contact-form textarea { 396 | width: 100%; 397 | padding: 10px; 398 | margin-bottom: 15px; 399 | border: 1px solid #ccc; 400 | border-radius: 4px; 401 | font-size: 1rem; 402 | } 403 | 404 | .contact-form textarea { 405 | resize: vertical; /* Permite redimensionar verticalmente */ 406 | } 407 | 408 | .contact-form button { 409 | width: 100%; 410 | } 411 | 412 | /* --- Rodapé --- */ 413 | .main-footer { 414 | background-color: var(--dark-color); 415 | color: var(--light-color); 416 | padding: 2rem 0; 417 | text-align: center; 418 | margin-top: auto; /* Empurra para o final se o conteúdo for curto */ 419 | } 420 | 421 | .main-footer p { 422 | margin-bottom: 0.5rem; 423 | } 424 | 425 | .social-links a { 426 | color: var(--light-color); 427 | margin: 0 10px; 428 | font-size: 1.2rem; 429 | transition: color 0.3s ease; 430 | } 431 | 432 | .social-links a:hover { 433 | color: var(--primary-color); 434 | } 435 | 436 | /* --- Responsividade (Exemplo Básico) --- */ 437 | @media (max-width: 768px) { 438 | h1 { font-size: 2.2rem; } 439 | h2 { font-size: 1.8rem; } 440 | 441 | .main-header .container { 442 | position: relative; /* Para posicionar o menu */ 443 | } 444 | 445 | .main-nav { 446 | display: none; /* Esconder menu normal */ 447 | position: absolute; 448 | top: 100%; /* Abaixo do header */ 449 | left: 0; 450 | width: 100%; 451 | background-color: var(--background-color); 452 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 453 | } 454 | 455 | .main-nav.active { /* Classe adicionada via JS */ 456 | display: block; 457 | } 458 | 459 | .main-nav ul { 460 | flex-direction: column; /* Menu vertical */ 461 | padding: 1rem 0; 462 | } 463 | 464 | .main-nav ul li { 465 | margin: 0; 466 | text-align: center; 467 | border-bottom: 1px solid var(--light-color); 468 | } 469 | .main-nav ul li:last-child { 470 | border-bottom: none; 471 | } 472 | 473 | .main-nav ul li a { 474 | display: block; /* Ocupa toda a largura */ 475 | padding: 1rem; 476 | } 477 | .main-nav ul li a::after { 478 | display: none; /* Remover sublinhado no mobile */ 479 | } 480 | 481 | .menu-toggle { 482 | display: block; /* Mostrar botão hamburguer */ 483 | } 484 | 485 | .about-content { 486 | flex-direction: column; /* Imagem acima do texto */ 487 | text-align: center; 488 | } 489 | .about-image { 490 | margin-bottom: 2rem; 491 | flex-basis: auto; /* Resetar base flex */ 492 | } 493 | 494 | .skills-grid, .portfolio-grid { 495 | grid-template-columns: 1fr; /* Uma coluna */ 496 | } 497 | 498 | .contact-options { 499 | flex-direction: column; 500 | gap: 30px; 501 | } 502 | } 503 | 504 | /* --- Animações Sutis (Opcional - pode ser expandido com JS) --- */ 505 | section { /* Animação de fade-in para seções */ 506 | opacity: 0; 507 | transform: translateY(20px); 508 | animation: fadeInSection 0.8s ease-out forwards; 509 | } 510 | 511 | @keyframes fadeInSection { 512 | to { 513 | opacity: 1; 514 | transform: translateY(0); 515 | } 516 | } 517 | 518 | /* Adicione um delay para cada seção aparecer sequencialmente */ 519 | #about { animation-delay: 0.2s; } 520 | #skills { animation-delay: 0.4s; } 521 | #portfolio { animation-delay: 0.6s; } 522 | #contact { animation-delay: 0.8s; } 523 | 524 | /* Certifique-se que a animação só rode uma vez (pode ser melhor controlado com JS Intersection Observer) */ 525 | /* Para simplificar, está aplicado a todas as seções na carga inicial */ 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | /* inicio do código Css para o formulário - */ 535 | 536 | 537 | /* --- Estilos Adicionais para Formulário de Contato --- */ 538 | 539 | .form-trigger { 540 | text-align: center; 541 | margin-top: 2rem; /* Espaço acima do botão */ 542 | margin-bottom: 2rem; /* Espaço abaixo do botão */ 543 | } 544 | 545 | .contact-form { 546 | max-width: 600px; 547 | margin: 2rem auto 0 auto; 548 | background: var(--background-color); /* Fundo branco ou claro */ 549 | padding: 30px; 550 | border-radius: 8px; 551 | box-shadow: 0 4px 15px rgba(0,0,0,0.1); 552 | border: 1px solid #eee; 553 | transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, max-height 0.5s ease-in-out; /* Transição suave */ 554 | opacity: 1; 555 | transform: translateY(0); 556 | overflow: hidden; /* Necessário para a transição de max-height */ 557 | max-height: 1000px; /* Um valor alto o suficiente para o conteúdo */ 558 | } 559 | 560 | /* Classe para esconder o formulário */ 561 | .contact-form.hidden-form { 562 | opacity: 0; 563 | transform: translateY(-20px); 564 | max-height: 0; /* Esconde o formulário colapsando a altura */ 565 | padding-top: 0; /* Remove padding quando escondido */ 566 | padding-bottom: 0; 567 | margin-top: 0; 568 | border: none; 569 | overflow: hidden; /* Garante que o conteúdo não vaze */ 570 | } 571 | 572 | .contact-form h3 { 573 | text-align: center; 574 | margin-bottom: 1.5rem; 575 | color: var(--dark-color); 576 | } 577 | 578 | .form-group { 579 | margin-bottom: 1rem; 580 | } 581 | 582 | .form-group label { 583 | display: block; 584 | margin-bottom: 5px; 585 | font-weight: bold; 586 | color: var(--dark-color); 587 | font-size: 0.95rem; 588 | } 589 | 590 | .form-group input[type="text"], 591 | .form-group input[type="email"], 592 | .form-group input[type="tel"], 593 | .form-group textarea { 594 | width: 100%; 595 | padding: 12px; 596 | border: 1px solid #ccc; 597 | border-radius: 4px; 598 | font-size: 1rem; 599 | transition: border-color 0.3s ease; 600 | } 601 | 602 | .form-group input:focus, 603 | .form-group textarea:focus { 604 | border-color: var(--primary-color); 605 | outline: none; /* Remove o outline padrão */ 606 | box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Adiciona um brilho sutil */ 607 | } 608 | 609 | .form-group textarea { 610 | resize: vertical; /* Permite redimensionar só verticalmente */ 611 | min-height: 80px; 612 | } 613 | 614 | .contact-form button[type="submit"] { 615 | width: 100%; 616 | padding: 15px; /* Botão maior */ 617 | font-size: 1.1rem; 618 | margin-top: 1rem; 619 | } 620 | /* Fim do código Css para o formulário - */ 621 | --------------------------------------------------------------------------------