From 2888e5826850da3ece0adf5a19ffc2b0bee0fe82 Mon Sep 17 00:00:00 2001 From: Rick Date: Fri, 26 Jan 2024 17:45:07 -0300 Subject: [PATCH] =?UTF-8?q?organizando=20o=20arquivo=20styles.css=20em=20v?= =?UTF-8?q?=C3=A1rios=20arquivos=20organizados=20por=20fun=C3=A7=C3=A3o=20?= =?UTF-8?q?ou=20local=20da=20p=C3=A1gina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/styles/contato-footer-scroll.css | 163 ++ assets/styles/experiencia-projetos.css | 278 +++ assets/styles/global.css | 19 + assets/styles/header.css | 90 + assets/styles/intro-sobre.css | 123 + assets/styles/media-query/query1085px.css | 157 ++ .../styles/media-query/query1343-1085px.css | 154 ++ assets/styles/media-query/query2560px.css | 683 ++++++ assets/styles/media-query/query485px.css | 293 +++ assets/styles/media-query/query710px.css | 41 + assets/styles/mobile-menu.css | 27 + assets/styles/vars.css | 22 + index.html | 17 +- style.css | 2068 ----------------- 14 files changed, 2065 insertions(+), 2070 deletions(-) create mode 100644 assets/styles/contato-footer-scroll.css create mode 100644 assets/styles/experiencia-projetos.css create mode 100644 assets/styles/global.css create mode 100644 assets/styles/header.css create mode 100644 assets/styles/intro-sobre.css create mode 100644 assets/styles/media-query/query1085px.css create mode 100644 assets/styles/media-query/query1343-1085px.css create mode 100644 assets/styles/media-query/query2560px.css create mode 100644 assets/styles/media-query/query485px.css create mode 100644 assets/styles/media-query/query710px.css create mode 100644 assets/styles/mobile-menu.css create mode 100644 assets/styles/vars.css delete mode 100644 style.css diff --git a/assets/styles/contato-footer-scroll.css b/assets/styles/contato-footer-scroll.css new file mode 100644 index 0000000..09fa854 --- /dev/null +++ b/assets/styles/contato-footer-scroll.css @@ -0,0 +1,163 @@ +.contato { + padding:150px 0 200px 0 ; + } + + .contato span { + color: var(--verde-principal); + } + + .contato h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .colunas { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 0 7%; + align-items: center; + } + + .colunaE { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .colunaE h3 { + color: #FFF; + text-align: center; + font-size: 17px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .btn6 { + display: flex; + align-items: center; + justify-content: center; + width: 240px; + height: 40px; + margin-top: 15px; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: color 0.5s ease, var(--transicao-botao-hover); + text-decoration: none; + } + + .btn6 h4 { + color: #FFF; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: center; + transition: color 0.5s ease; + } + + .btn6:hover { + border-radius: 19.5px; + background-color: #1ee61e; + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn6:hover h4 { + color: var(--verde-darkL); + font-weight: 600; + } + + .sociais { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 460px; + height: 150px; + border-radius: 43px; + background: var(--verde-secundario); + margin-top: 40px; + padding-bottom: 20px; + } + + .sociais h3 { + font-size: 19px; + font-style: normal; + font-weight: 600; + line-height: normal; + padding-bottom: 20px; + ; + } + + .redes { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + } + + .redes a { + cursor: pointer; + } + + #gith, + #linkd, + #beh, + #linkk { + width: 50px; + height: 50px; + margin-left: 20px; + margin-right: 20px; + justify-content: center; + align-items: center; + transition: transform 0.5s ease; + } + + .redes img:hover { + transform: scale(1.3); + } + + #avaRick { + display: flex; + width: 350px; + padding: 16.884px 23.052px 0px 21.828px; + justify-content: center; + align-items: center; + } + + footer { + padding-top: 200px; + margin-bottom: 15px; + } + + footer h3 { + font-size: 17px; + color: white; + font-weight: 600; + text-align: center; + } + + footer span { + color: var(--verde-principal); + } + + ::-webkit-scrollbar { + width: 12px; + } + + ::-webkit-scrollbar-thumb { + background-color: var(--verde-secundario); + border-radius: 6px; + } + + ::-webkit-scrollbar-track { + background-color: transparent; + } \ No newline at end of file diff --git a/assets/styles/experiencia-projetos.css b/assets/styles/experiencia-projetos.css new file mode 100644 index 0000000..8020b50 --- /dev/null +++ b/assets/styles/experiencia-projetos.css @@ -0,0 +1,278 @@ +.experiencia { + display: flex; + flex-direction: column; + margin: 0 7%; + align-items: center; + padding: 200px 0; + justify-content: center; + align-self: center; + } + + .experiencia h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .experiencia span { + color: var(--verde-principal); + } + + .experiencia h3 { + color: white; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: normal; + line-height: normal; + margin-bottom: 20px; + margin-top: 5px; + } + + .habilidades { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + row-gap: 40px; + justify-content: center; + } + + .btn2 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 180px; + height: 53px; + border-radius: 30px; + background: var(--verde-quaternario); + transition: var(--transicao-botao-hover); + text-decoration: none; + margin-left: 20px; + } + + .btn2 img { + width: 37px; + height: 37px; + color: white; + } + + .btn2 h2 { + color: #FFF; + font-size: 19px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-align: center; + padding-left: 10px; + } + + .btn2:hover { + background: var(--verde-seis); + } + + .meus-projetos { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 7%; + padding: 100px 0 50px 0; + align-items: center; + } + + .meus-projetos span { + color: var(--verde-principal); + } + + .meus-projetos h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 20px; + } + + .meus-projetos h3 { + color: white; + text-align: center; + font-size: 22px; + font-style: normal; + font-weight: normal; + line-height: normal; + margin-bottom: 20px; + } + + .projetos { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding-bottom: 45px; + align-items: flex-start; + justify-content: center; + } + + .box-projeto { + width: 370px; + height: 450px; + border-radius: 27px; + background: var(--verde-sete); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 15px; + padding: 0 15px; + } + + .box-projeto h2 { + color: #FFF; + text-align: center; + font-size: 20px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .box-projeto p { + color: #FFF; + text-align: center; + font-size: 16.5px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding-top: 20px; + } + + .botoes { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + } + + .btn3 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 170px; + height: 42px; + border-radius: 30px; + background: white; + cursor: pointer; + transition: var(--transicao-botao-hover2); + text-decoration: none; + margin-top: 15px; + } + + .btn3 h2 { + color: var(--verde-oito); + font-size: 15px; + font-style: normal; + font-weight: 600; + padding-top: 21px; + } + + .btn3:hover { + background: var(--verde-dark); + } + + .btn3:hover h2 { + color: white; + } + + .btn4 { + margin-left: 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 150px; + height: 42px; + border-radius: 30px; + background: white; + cursor: pointer; + transition: var(--transicao-botao-hover2); + text-decoration: none; + margin-top: 15px; + } + + .btn4 h2 { + color: var(--verde-oito); + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-align: center; + padding-top: 21px; + } + + .btn4:hover { + background: var(--verde-dark); + } + + .btn4:hover h2 { + color: white; + } + + .box-projeto h4 { + color: #FFF; + text-align: center; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 10px; + } + + .img_projeto { + width: 350px; + height: 200px; + border-radius: 15px; + } + + .btn5 { + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 33px; + flex-shrink: 0; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: var(--transicao-botao-hover3); + text-decoration: none; + margin-bottom: 45px; + } + + .btn5:hover { + transform: scale(1.2); + border-radius: 19.5px; + background-color: #1ee61e; + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn5 h2 { + color: #FFF; + font-size: 17px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: center; + transition: var(--transicao-botao-hover4); + padding-top: 20px; + } + + .btn5:hover h2 { + color: var(--verde-darkL); + font-weight: 600; + } \ No newline at end of file diff --git a/assets/styles/global.css b/assets/styles/global.css new file mode 100644 index 0000000..5b618a5 --- /dev/null +++ b/assets/styles/global.css @@ -0,0 +1,19 @@ +* { + font-family: var(--Poppins); + margin: 0; + padding: 0; +} + +body { + background: var(--bg-degrade); + overflow-x: hidden; +} + +a { + transition: 0.3s; + text-decoration: none; +} + +li { + list-style: none; +} \ No newline at end of file diff --git a/assets/styles/header.css b/assets/styles/header.css new file mode 100644 index 0000000..470c067 --- /dev/null +++ b/assets/styles/header.css @@ -0,0 +1,90 @@ +.mobile-menu { + display: none; + cursor: pointer; +} + +.mobile-menu div { + width: 32px; + height: 2px; + background: white; + margin: 8px; + transition: 0.3s; +} + +.menu { + position: fixed; + z-index: 1000; + display: flex; + flex-direction: row; + height: 11vh; + width: 100%; + background-color: var(--bg-menu); + backdrop-filter: blur(3px); +} + +.content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + row-gap: 3px; + height: 64px; + width: 100%; + position: fixed; +} + +#logo { + padding-top: 35px; + display: flex; + color: var(--verde-principal); + text-decoration: none; + font-size: 20px; + font-weight: 600; + justify-content: center; + align-items: center; + transition: color 0.5s ease; + margin-left: 5%; + margin-top: 10px; + margin-bottom: 20px; +} + +#logo:visited { + color: var(--verde-principal); +} + +#logo:hover { + color: white; +} + +#logo>span { + color: var(--verde-secudario); + font-size: 25px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +header span { + color: #ffffff; + font-size: 16.5px; + font-style: normal; + font-weight: bold; + line-height: normal; + transition: color 0.5s ease; +} + +header span:hover { + color: var(--verde-principal); +} + +.paginas { + display: flex; + justify-content: center; + align-items: center; + margin-right: 5%; + margin-top: 20px; +} + +#link-pags { + margin-left: 18px; +} \ No newline at end of file diff --git a/assets/styles/intro-sobre.css b/assets/styles/intro-sobre.css new file mode 100644 index 0000000..3026bcf --- /dev/null +++ b/assets/styles/intro-sobre.css @@ -0,0 +1,123 @@ +.intro { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-left: 7%; + margin-right: 7%; + padding-top: 210px; + align-items: center; + } + + .intro h1 { + color: #FFF; + font-size: 45px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .intro span { + color: var(--verde-principal); + } + + .saudacao h2 { + color: var(--verde-terciario); + font-family: 'Poppins', sans-serif; + font-size: 28px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .imagem-intro img { + width: 410px; + height: 410px; + } + + .sobre { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 210px; + padding-bottom: 210px; + margin-left: 7%; + margin-right: 7%; + align-items: center; + } + + .imagem-sobre img { + width: 400px; + height: 400px; + } + + .sobre h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 30px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-left: 30px; + padding-right: 30px; + } + + .sobre span { + color: var(--verde-principal); + } + + .sobre p { + color: #FFF; + text-align: center; + font-size: 1.2vw; + font-style: normal; + font-weight: 400; + line-height: 1.3; + } + + .sobre h1 { + font-size: 27px; + font-weight: normal; + text-align: center; + } + + .sobre-titulo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .h2s { + margin-bottom: 20px; + } + + .btn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + padding-left: 10%; + width: 140px; + height: 33px; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: background-color 0.5s ease, color 0.5s ease, width 0.5s ease, height 0.5s ease; + text-decoration: none; + } + + .btn:hover { + background-color: var(--verde-cinco); + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn h2 { + color: #FFF; + font-size: 18px; + font-style: normal; + line-height: normal; + text-align: center; + padding-left: 10px; + transition: color 0.5s ease; + } \ No newline at end of file diff --git a/assets/styles/media-query/query1085px.css b/assets/styles/media-query/query1085px.css new file mode 100644 index 0000000..e5304eb --- /dev/null +++ b/assets/styles/media-query/query1085px.css @@ -0,0 +1,157 @@ +@media screen and (max-width: 1085px) { + body { + overflow-x: hidden; + } + + #logo { + display: flex; + margin-top: 10px; + margin-bottom: 32px; + } + + .paginas { + position: absolute; + top: 10.3vh; + right: 0; + margin-left: 0; + margin-right: 0; + width: 50vh; + height: 55vh; + border-bottom-left-radius: 20px; + background-color: var(--bg-menu); + flex-direction: column; + align-items: center; + justify-content: start; + + transform: translateX(100%); + transition: transform 0.3s ease-in; + } + + .paginas li { + padding-top: 50px; + margin-left: 0; + opacity: 0; + } + + header span { + font-size: 20px; + } + + .mobile-menu { + display: block; + margin-top: 10px; + margin-right: 30px; + } + + .imagem-intro img { + display: flex; + width: 270px; + height: 270px; + padding-top: 20px; + } + + .sobre { + display: flex; + flex-direction: column; + margin-left: 15%; + margin-right: 15%; + } + + .sobre-titulo { + padding-top: 20px; + } + + .imagem-sobre { + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + padding-top: 90px; + padding-bottom: 50px; + } + + .sobre h1 { + padding-top: 30px; + font-size: 23px; + } + + .sobre p { + font-size: 18px; + } + + .h2s { + padding-top: 75px; + } + + .btn { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .btn h2 { + font-size: 18px; + } + + #projeto-titulo { + display: flex; + justify-content: center; + align-items: center; + } + + .box-projeto { + margin-bottom: 20px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 0; + margin-right: 20px; + } + + .box-projeto .nome-projeto { + font-size: 25px; + } + + .box-projeto h3 { + font-size: 16px; + } + + .box-projeto p { + color: #FFF; + text-align: center; + font-size: 15.5px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding: 20px 15px 0 15px; + } + + .btn5 { + padding-bottom: 0; + margin-top: -30px; + } + + .colunas { + display: flex; + flex-direction: column-reverse; + margin: 0 15%; + } + + #avaRick { + width: 250px; + padding-bottom: 20px; + } + + .sociais { + width: 400px; + border-radius: 50px; + } + + .sociais h3 { + padding-bottom: 0; + margin-bottom: 20px; + } + + } \ No newline at end of file diff --git a/assets/styles/media-query/query1343-1085px.css b/assets/styles/media-query/query1343-1085px.css new file mode 100644 index 0000000..b868aca --- /dev/null +++ b/assets/styles/media-query/query1343-1085px.css @@ -0,0 +1,154 @@ +@media screen and (max-width: 1343px) and (min-width: 1085px) { + body { + overflow-x: hidden; + } + + #logo { + display: flex; + margin-top: 10px; + margin-bottom: 32px; + } + + .paginas { + position: absolute; + top: 10.3vh; + right: 0; + margin-left: 0; + margin-right: 0; + width: 50vh; + height: 55vh; + border-bottom-left-radius: 20px; + background-color: var(--bg-menu); + flex-direction: column; + align-items: center; + justify-content: start; + + transform: translateX(100%); + transition: transform 0.3s ease-in; + } + + .paginas li { + padding-top: 50px; + margin-left: 0; + opacity: 0; + } + + header span { + font-size: 20px; + } + + .mobile-menu { + display: block; + margin-top: 10px; + margin-right: 30px; + } + + .sobre { + display: flex; + flex-direction: column; + margin-left: 15%; + margin-right: 15%; + } + + .sobre-titulo { + padding-top: 20px; + } + + .imagem-sobre { + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + padding-top: 90px; + padding-bottom: 50px; + } + + .sobre h1 { + padding-top: 30px; + font-size: 23px; + } + + .sobre p { + font-size: 18px; + } + + .h2s { + padding-top: 75px; + } + + .btn { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .btn h2 { + font-size: 18px; + } + + #projeto-titulo { + display: flex; + justify-content: center; + align-items: center; + } + + .box-projeto { + margin-bottom: 20px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 0; + margin-right: 20px; + } + + .box-projeto p { + color: #FFF; + text-align: center; + + font-size: 15.5px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding-top: 20px; + padding-left: 15px; + padding-right: 15px; + } + + .box-projeto .nome-projeto { + font-size: 25px; + } + + .box-projeto h3 { + font-size: 16px; + } + + .btn5 { + padding-bottom: 0; + margin-top: -30px; + } + + .colunas { + display: flex; + flex-direction: column-reverse; + margin-left: 15%; + margin-right: 15%; + } + + #avaRick { + width: 250px; + padding-bottom: 20px; + } + + .sociais { + width: 400px; + border-radius: 50px; + } + + .sociais h3 { + padding-bottom: 0; + margin-bottom: 20px; + } + + } \ No newline at end of file diff --git a/assets/styles/media-query/query2560px.css b/assets/styles/media-query/query2560px.css new file mode 100644 index 0000000..cb83f52 --- /dev/null +++ b/assets/styles/media-query/query2560px.css @@ -0,0 +1,683 @@ +@media screen and (min-width: 2560px) { + + h1, + h2, + h3, + p { + + } + + body { + background: linear-gradient(to bottom, #000000, #033d16); + overflow-x: hidden; + } + + a { + transition: 0.3s; + text-decoration: none; + } + + li { + list-style: none; + } + + .menu { + position: fixed; + z-index: 1000; + display: flex; + flex-direction: row; + height: 11vh; + width: 100%; + background-color: var(--bg-menu); + backdrop-filter: blur(3px); + } + + .content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + row-gap: 3px; + height: 64px; + width: 100%; + position: fixed; + } + + #logo { + display: flex; + color: var(--verde-principal); + text-decoration: none; + font-size: 40px; + font-weight: 600; + justify-content: center; + align-items: center; + transition: color 0.5s ease; + margin-left: 5%; + margin-top: 2.5%; + margin-bottom: 20px; + } + + #logo:visited { + color: var(--verde-principal); + } + + #logo:hover { + color: white; + } + + #logo>span { + color: var(--verde-secundario); + font-size: 45px; + font-style: normal; + font-weight: 600; + line-height: normal; + } + + header span { + color: #ffffff; + font-size: 30px; + font-style: normal; + font-weight: bold; + line-height: normal; + transition: color 0.5s ease; + } + + header span:hover { + color: var(--verde-principal); + } + + .paginas { + display: flex; + justify-content: center; + align-items: center; + margin-right: 5%; + margin-top: 3.3%; + } + + #link-pags { + margin-left: 18px; + } + + .intro { + display: flex; + flex-direction: row; + justify-content: space-between; + margin-left: 7%; + margin-right: 7%; + padding-top: 210px; + align-items: center; + } + + .intro h1 { + color: #FFF; + font-size:60px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .intro span { + color: var(--verde-principal); + } + + .saudacao h2 { + color: #25A025; + + font-size: 40px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .imagem-intro img { + width: 610px; + height: 610px; + } + + .sobre { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: 210px; + padding-bottom: 210px; + margin-left: 7%; + margin-right: 7%; + align-items: center; + } + + .imagem-sobre img { + width: 600px; + height: 600px; + } + + .sobre h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 50px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-left: 30px; + padding-right: 30px; + } + + .sobre span { + color: var(--verde-principal); + } + + .sobre p { + color: #FFF; + text-align: center; + font-size: 1.3vw; + font-style: normal; + font-weight: 400; + line-height: 1.3; + } + + .sobre h1 { + font-size: 47px; + font-weight: normal; + text-align: center; + } + + .sobre-titulo { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .h2s { + margin-bottom: 20px; + } + + .btn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; + padding-left: 10%; + width: 240px; + height: 50px; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: background-color 0.5s ease, color 0.5s ease, width 0.5s ease, height 0.5s ease; + text-decoration: none; + } + + .btn:hover { + background-color: #187618; + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn i{ + font-size: 25px; + } + + .btn h2 { + color: #FFF; + font-size: 35px; + font-style: normal; + line-height: normal; + text-align: center; + padding-left: 10px; + transition: color 0.5s ease; + } + + .experiencia { + display: flex; + flex-direction: column; + margin-left: 7%; + margin-right: 7%; + align-items: center; + padding-top: 200px; + padding-bottom: 200px; + justify-content: center; + align-self: center; + } + + .experiencia h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 50px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .experiencia span { + color: var(--verde-principal); + } + + .experiencia h3 { + color: white; + text-align: center; + font-size: 40px; + font-style: normal; + font-weight: normal; + line-height: normal; + margin-bottom: 20px; + margin-top: 5px; + } + + .habilidades { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + row-gap: 40px; + justify-content: center; + } + + .btn2 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 280px; + height: 75px; + border-radius: 30px; + background: var(--verde-quaternario); + transition: var(--transicao-botao-hover); + text-decoration: none; + margin-left: 20px; + } + + .btn2 img { + width: 50px; + height: 50px; + color: white; + } + + .btn2 h2 { + color: #FFF; + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-align: center; + padding-left: 10px; + } + + .btn2:hover { + background: var(--verde-seis); + } + + .meus-projetos { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 7%; + margin-right: 7%; + padding-top: 100px; + padding-bottom: 50px; + align-items: center; + } + + .meus-projetos span { + color: var(--verde-principal); + } + + .meus-projetos h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 50px; + font-style: normal; + font-weight: 700; + line-height: normal; + margin-bottom: 20px; + } + + .meus-projetos h3 { + color: white; + text-align: center; + font-size: 35px; + font-style: normal; + font-weight: normal; + line-height: normal; + margin-bottom: 20px; + } + + .nome-projeto{ + margin-top: 30px; + margin-bottom: 30px; + } + + .projetos { + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding-bottom: 45px; + align-items: flex-start; + justify-content: center; + } + + .box-projeto { + width: 670px; + height: 790px; + border-radius: 27px; + background: var(--verde-sete); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 15px; + margin-top: 40px; + } + + .box-projeto h2 { + color: #FFF; + text-align: center; + + font-size: 38px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .img_projeto { + width: 650px; + height: 330px; + border-radius: 20px; + } + + .box-projeto p { + color: #FFF; + text-align: center; + + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding-top: 35px; + padding-left: 5px; + padding-right: 5px; + } + + .botoes { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + justify-content: center; + gap: 20px; + } + + .btn3 { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 270px; + height: 62px; + border-radius: 30px; + background: white; + cursor: pointer; + transition: var(--transicao-botao-hover2); + text-decoration: none; + margin-top: 45px; + } + + .btn3 h2 { + color: var(--verde-oito); + font-size: 30px; + font-style: normal; + font-weight: 600; + padding-top: 21px; + } + + .btn3:hover { + background: var(--verde-dark); + } + + .btn3:hover h2 { + color: white; + } + + .btn4 { + margin-left: 5px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 250px; + height: 62px; + border-radius: 30px; + background: white; + cursor: pointer; + transition: var(--transicao-botao-hover2); + text-decoration: none; + margin-top: 45px; + } + + .btn4 h2 { + color: var(--verde-oito); + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: normal; + text-align: center; + padding-top: 21px; + } + + .btn4:hover { + background: var(--verde-dark); + } + + .btn4:hover h2 { + color: white; + } + + .box-projeto h4 { + color: #FFF; + text-align: center; + + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-top: 50px; + } + + .btn5 { + display: flex; + align-items: center; + justify-content: center; + width: auto; + max-width: 500px; + height: 60px; + flex-shrink: 0; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: var(--transicao-botao-hover3); + text-decoration: none; + margin-bottom: 45px; + padding-left: 20px; + padding-right: 20px; + } + + .btn5:hover { + transform: scale(1.2); + border-radius: 19.5px; + background-color: #1ee61e; + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn5 h2 { + color: #FFF; + font-size: 30px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: center; + transition: var(--transicao-botao-hover4); + padding-top: 20px; + width: 100%; + } + + .btn5:hover h2 { + color: var(--verde-darkL); + font-weight: 600; + } + + .contato { + padding-top: 150px; + padding-bottom: 200px; + } + + .contato span { + color: var(--verde-principal); + } + + .contato h2 { + color: var(--verde-secundario); + text-align: center; + font-size: 50px; + font-style: normal; + font-weight: 700; + line-height: normal; + } + + .colunas { + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin-left: 7%; + margin-right: 7%; + align-items: center; + } + + .colunaE { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 40px; + } + + .colunaE h3 { + color: #FFF; + text-align: center; + + font-size: 35px; + font-style: normal; + font-weight: 500; + line-height: normal; + } + + .btn6 { + display: flex; + align-items: center; + justify-content: center; + width: 340px; + height: 50px; + margin-top: 25px; + border-radius: 19.5px; + background: var(--verde-quaternario); + box-shadow: 0px 4px 1px 0px #FFF; + cursor: pointer; + transition: color 0.5s ease, var(--transicao-botao-hover); + text-decoration: none; + } + + .btn6 h4 { + color: #FFF; + font-size: 35px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-align: center; + transition: color 0.5s ease; + } + + .btn6:hover { + border-radius: 19.5px; + background-color: #1ee61e; + box-shadow: 0px 3px 1px 0px #FFF; + } + + .btn6:hover h4 { + color: var(--verde-darkL); + font-weight: 600; + } + + .sociais { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 660px; + height: 250px; + border-radius: 50px; + background: var(--verde-secundario); + margin-top: 50px; + } + + .sociais h3 { + font-size: 35px; + font-style: normal; + font-weight: 600; + line-height: normal; + padding-bottom: 20px; + + ; + } + + .redes { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + } + + .redes a { + cursor: pointer; + } + + #gith, + #linkd, + #beh, + #linkk { + width: 90px; + height: 90px; + margin-left: 20px; + margin-right: 20px; + justify-content: center; + align-items: center; + transition: transform 0.5s ease; + } + + .redes img:hover { + transform: scale(1.3); + } + + #avaRick { + display: flex; + width: 550px; + padding: 16.884px 23.052px 0px 21.828px; + justify-content: center; + align-items: center; + } + + footer { + padding-top: 200px; + margin-bottom: 15px; + } + + footer h3 { + font-size: 28px; + color: white; + font-weight: 600; + text-align: center; + + } + + footer span { + color: var(--verde-principal); + + } + } \ No newline at end of file diff --git a/assets/styles/media-query/query485px.css b/assets/styles/media-query/query485px.css new file mode 100644 index 0000000..b39e0a2 --- /dev/null +++ b/assets/styles/media-query/query485px.css @@ -0,0 +1,293 @@ +@media screen and (max-width: 485px) { + + body { + padding: 0; + } + + .menu, + .content, + .intro, + .sobre, + .experiencia, + .meus-projetos, + .contato, + footer { + margin: 0; + padding: 0; + } + + .intro h1, + .sobre h2, + .experiencia h2, + .meus-projetos h2, + .contato h2, + footer h3 { + font-size: 24px; + } + + .imagem-intro img, + .imagem-sobre img, + .box-projeto, + .sociais { + width: 100%; + } + + .btn, + .btn2, + .btn3, + .btn4, + .btn5, + .btn6 { + width: 80%; + display: flex; + justify-content: center; + align-items: center; + } + + .btn img { + padding-left: 10px; + } + + .btn h2, + .btn2 h2, + .btn3 h2, + .btn4 h2, + .btn5 h2, + .btn6 h2 { + font-size: 16px; + } + + .menu { + display: flex; + align-items: center; + justify-content: space-evenly; + margin-right: 10%; + height: 10vh; + } + + .mobile-menu { + margin-right: 1%; + } + + .paginas { + top: 6.8vh; + right: -5px; + height: 50vh; + width: 80vw; + margin-left: 0; + margin-right: 5px; + border-bottom-left-radius: 20px; + justify-content: start; + align-items: center; + transform: translateX(110%); + } + + .paginas li { + padding-top: 50px; + margin-left: 0; + } + + #logo { + margin-right: 30%; + } + + .intro { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .saudacao { + display: flex; + flex-direction: column; + margin-left: 0%; + margin-right: 0%; + padding-top: 100px; + padding-bottom: 10px; + justify-content: center; + align-items: center; + } + + .saudacao h2 { + font-size: 20px; + margin-top: 5px; + + text-align: center; + } + + .imagem-intro img { + display: flex; + width: 200px; + height: 200px; + padding-top: 20px; + } + + .sobre { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 15%; + margin-right: 15%; + } + + .imagem-sobre { + display: flex; + width: 230px; + height: 230px; + padding-top: 90px; + padding-bottom: 0; + } + + .h2s { + padding-top: 10px; + } + + .sobre-titulo { + padding-top: 0; + } + + .sobre h1 { + font-size: 23px; + } + + .sobre p { + font-size: 18px; + } + + .btn { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + } + + .btn h2 { + font-size: 18px; + } + + .experiencia { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .experiencia .tituloxp { + padding-top: 75px; + } + + .habilidades { + margin-bottom: 50px; + } + + .btn2 { + margin-left: 0; + width: 60%; + } + + .meus-projetos { + padding-top: 80px; + } + + .projetos { + flex-direction: column; + } + + #projeto-titulo { + font-size: 22px; + } + + .btn5 { + font-size: 17px; + width: 60%; + } + + .box-projeto { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 300px; + margin-right: 0; + padding-right: 0; + margin-left: 0; + padding-left: 0; + padding-top: 10px; + padding-bottom: 10px; + } + + .box-projeto h3 { + color: #FFF; + text-align: center; + + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding-top: 8px; + padding-left: 8px; + padding-right: 10px; + } + + .projetos br { + display: none; + } + + .nome-projeto { + font-size: 15px; + } + + .img_projeto { + width: 270px; + height: 160px; + border-radius: 15px; + } + + .sociais { + display: flex; + width: 270px; + border-radius: 30px; + padding-bottom: 10px; + } + + #gith, + #linkd, + #beh, + #linkk { + margin-left: 2px; + margin-right: 2px; + width: 40px; + height: 40px; + } + + #gith:hover, + #linkd:hover, + #beh:hover, + #linkk:hover { + width: 50px; + height: 50px; + } + + .contato { + padding-top: 90px; + } + + .contato br { + display: none; + } + + footer { + margin-top: 40px; + margin-bottom: 20px; + } + + footer h3 { + font-size: 15px; + color: white; + font-weight: 600; + text-align: center; + + } + + } \ No newline at end of file diff --git a/assets/styles/media-query/query710px.css b/assets/styles/media-query/query710px.css new file mode 100644 index 0000000..3a60b00 --- /dev/null +++ b/assets/styles/media-query/query710px.css @@ -0,0 +1,41 @@ +@media screen and (max-width: 710px) { + .imagem-intro img { + display: flex; + width: 250px; + height: 250px; + padding-top: 20px; + } + + .saudacao h2 { + font-size: 25px; + } + + .intro h1 { + font-size: 40px; + } + + .box-projeto { + width: 370px; + height: 450px; + border-radius: 27px; + background: var(--verde-sete); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 15px; + } + + .box-projeto p { + color: #FFF; + text-align: center; + + font-size: 15.5px; + font-style: normal; + font-weight: 500; + line-height: normal; + padding-top: 20px; + padding-left: 15px; + padding-right: 15px; + } + } \ No newline at end of file diff --git a/assets/styles/mobile-menu.css b/assets/styles/mobile-menu.css new file mode 100644 index 0000000..db7956b --- /dev/null +++ b/assets/styles/mobile-menu.css @@ -0,0 +1,27 @@ +.paginas.active { + transform: translateX(0); + } + + @keyframes paginasFade { + from { + opacity: 0; + transform: translateX(50px); + } + + to { + opacity: 1; + transform: translateX(0); + } + } + + .mobile-menu.active .line1 { + transform: rotate(-45deg) translate(-8px, 8px); + } + + .mobile-menu.active .line2 { + opacity: 0; + } + + .mobile-menu.active .line3 { + transform: rotate(45deg) translate(-5px, -7px); + } \ No newline at end of file diff --git a/assets/styles/vars.css b/assets/styles/vars.css new file mode 100644 index 0000000..2b19418 --- /dev/null +++ b/assets/styles/vars.css @@ -0,0 +1,22 @@ +:root{ + --bg-degrade: linear-gradient(to bottom, #000000, #010904, #010b04, #033d16); + --bg-menu: rgba(0, 0, 0, 0.689); + + --verde-principal: #0FD90F; + --verde-secundario: #09A424; + --verde-terciario: #25A025; + --verde-quaternario: #218B21; + --verde-cinco: #187618; + --verde-seis: #087c08; + --verde-sete: #088B1F; + --verde-oito: #005200; + --verde-dark: #021602; + --verde-darkL: rgb(18, 48, 11); + + --Poppins: 'Poppins', sans-serif; + + --transicao-botao-hover: background-color 0.5s ease, width 0.5s ease, height 0.5s ease; + --transicao-botao-hover2: background-color 0.5s ease, border 0.5s ease, color 0.5s ease; + --transicao-botao-hover3: color 0.5s ease, background-color 0.5s ease, transform 0.5s ease; + --transicao-botao-hover4: color 0.5s ease, font-weight 0.5s ease; +} \ No newline at end of file diff --git a/index.html b/index.html index 4476477..704e523 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,21 @@ rickreisme | Portfólio - - + + + + + + + + + + + + + + @@ -23,6 +35,7 @@ +