diff --git a/img/foto.png b/img/foto.png new file mode 100644 index 0000000..465a905 Binary files /dev/null and b/img/foto.png differ diff --git a/img/imagem.jpg b/img/imagem.jpg new file mode 100644 index 0000000..2059536 Binary files /dev/null and b/img/imagem.jpg differ diff --git a/img/layout-do-projeto.jpg b/img/layout-do-projeto.jpg new file mode 100644 index 0000000..6f616a0 Binary files /dev/null and b/img/layout-do-projeto.jpg differ diff --git a/img/logo brn.png b/img/logo brn.png new file mode 100644 index 0000000..5e57769 Binary files /dev/null and b/img/logo brn.png differ diff --git a/img/perfil (1).png b/img/perfil (1).png new file mode 100644 index 0000000..72686ed Binary files /dev/null and b/img/perfil (1).png differ diff --git a/img/perfil (2).png b/img/perfil (2).png new file mode 100644 index 0000000..6e45fbe Binary files /dev/null and b/img/perfil (2).png differ diff --git a/img/perfil 3.png b/img/perfil 3.png new file mode 100644 index 0000000..22169a4 Binary files /dev/null and b/img/perfil 3.png differ diff --git a/img/pessoa.png b/img/pessoa.png new file mode 100644 index 0000000..f743e9c Binary files /dev/null and b/img/pessoa.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c2ae57c --- /dev/null +++ b/index.html @@ -0,0 +1,212 @@ + + + + + + + + + + + + + + + Portfólio Front End + + + +
+
+ + + + + + + + + + +
+ +
+ + + +
+ +
+
+ +
+
+
+
+
+

TRANSFORME IDEIAS EM REALIDADE DIGITAL.

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi magni consectetur optio + nesciunt ea eius error? Quo temporibus at nihil rem alias laudantium, ad excepturi, eaque + earum tempore voluptatum architecto?

+ +
+ +
+ foto-alvaro +
+
+
+
+ +
+
+

MINHAS ESPECIALIDADES.

+
+ +
+ +

webSite

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit + eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam, + expedita sed. Eaque, quas corporis?

+
+ +
+ +

Loja online

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit + eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam, + expedita sed. Eaque, quas corporis?

+
+ +
+ +

Blog

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa neque earum reprehenderit + eveniet tempora eos aliquam quo totam nostrum accusamus vel, ipsam enim omnis numquam, + expedita sed. Eaque, quas corporis?

+
+ +
+
+
+
+
+
+ +
+ +
+ +
+

MUITO PRAZER, SOU ÁLVARO SOUZA. +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta accusamus quibusdam + praesentium a voluptatum atque repellat aspernatur vero nobis quod maxime rerum quisquam + aliquid, quam autem fugiat asperiores voluptatem recusandae.

+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident in atque itaque, + asperiores dolore quia praesentium voluptas eveniet quae. Obcaecati quidem eum, quos quaerat + optio omnis? Ut dolorum eos et.

+
+ + + +
+ +
+
+
+
+ +
+
+ +

MEU PORTFÓLIO.

+ +
+
+
Projeto 01
+
+
+
Projeto 02
+
+
+
Projeto 03
+
+
+
+
+ +
+
+

FALE COMIGO.

+ +
+ + + + +
+
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/menu.js b/menu.js new file mode 100644 index 0000000..2e8fa0e --- /dev/null +++ b/menu.js @@ -0,0 +1,15 @@ +let btnMenu = document.getElementById('btn-menu') +let menu = document.getElementById('menu-mobile') +let overlay = document.getElementById('overlay-menu') + +btnMenu.addEventListener('click', ()=> { + menu.classList.add('abrir-menu') +}) + +menu.addEventListener('click', ()=> { + menu.classList.remove('abrir-menu') +}) + +overlay.addEventListener('click', ()=> { + menu.classList.remove('abrir-menu') +}) diff --git a/style.css b/style.css new file mode 100644 index 0000000..7498f82 --- /dev/null +++ b/style.css @@ -0,0 +1,470 @@ +/*ESTILO GERAL*/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background-color: #000; + height: 100vh; +} + +header { + padding: 40px 4%; +} + +.flex { + display: flex; +} + +header>.interface { + display: flex; + justify-content: space-between; + align-items: center; +} + +header a { + color: #6e6464; + text-decoration: none; + display: inline-block; + transition: .2s; +} + +header nav.menu-desktop a:hover { + color: #fff; + transform: scale(1.05); +} + +header nav ul { + list-style-type: none; +} + +header nav li { + display: inline-block; + padding: 0 40px; +} + +button { + padding: 10px 40px; + font-size: 18px; + font-weight: 600px; + background-color: #00ff08; + border: 0; + border-radius: 30px; + cursor: pointer; + transition: .2s; +} +/* ESTILO DO MENU MOBILE */ + +.btn-abrir-menu i { + color: #00ff08; + font-size: 40px; +} + +.menu-mobile { + background-color: #000; + height: 100vh; + position: fixed; + top: 0; + right: 0; + z-index: 99999; + width: 0%; + overflow: hidden; + transition: .2s; +} + +.menu-mobile.abrir-menu { + width: 70%; +} + +.menu-mobile.abrir-menu ~ .overlay-menu { + display: block; +} + +.menu-mobile .btn-fechar { + padding: 20px 5%; +} + +.menu-mobile .btn-fechar { + color: #00ff08; + font-size: 30px; +} + +.menu-mobile nav ul { + text-align: right; +} + +.menu-mobile nav ul li a { + color: #ffffff; + font-size: 20px; + font-weight: 300; + padding: 20px 8%; + display: block; +} + +.menu-mobile nav ul li a:hover { + background-color: #00ff08; + color: #000; +} + +.overlay-menu { + background-color: #000000a7; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 88888; + display: none; +} + +/*ESTILO DO TOPO DO SITE*/ + +h2.titulo { + color: #ffffff; + font-size: 38px; + text-align: center; +} + +h2.titulo span { + color: #00ff08; +} + +button:hover, +form .btn-enviar input:hover { + box-shadow: 0px 0px 8px #00ff08; + transform: scale(1.05); +} + +section.topo-do-site { + padding: 40px 4%; +} + +section.topo-do-site .flex { + align-items: center; + justify-content: center; + gap: 90px; +} + +.topo-do-site h1 { + color: #ffffff; + font-size: 42px; + line-height: 40px; +} + +.topo-do-site .txt-topo-site h1 span { + color: #00ff08; +} + +.topo-do-site .txt-topo-site p { + color: #ffffff; + margin: 40px 0; +} + +.topo-do-site .img-topo-site img { + position: relative; + animation: flutuar 2s ease-in-out infinite alternate; + border-radius: 30px; +} + +@keyframes flutuar { + 0% { + top: 0; + } + + 100% { + top: 30px; + } +} + +section.especialidades { + padding: 40px 4%; +} + +section.especialidades .flex { + gap: 60px; +} + +.especialidades .especialidades-box { + color: #ffffff; + padding: 40px; + border-radius: 20px; + margin-top: 45px; + transition: 1.2s; +} + +.especialidades .especialidades-box:hover { + transform: scale(1.05); + box-shadow: 0 0 8px #ffffff62; +} + +.especialidades .especialidades-box i { + font-size: 70px; + color: #00ff08; +} + +.especialidades .especialidades-box h3 { + font-size: 28px; + margin: 15px 0; +} + +/*ESTILO DO SOBRE*/ + +section.sobre { + padding: 50px 4%; +} + +section.sobre .flex { + align-items: center; + gap: 60px; +} + +.sobre .txt-sobre { + color: #ffffff; +} + +.sobre .txt-sobre h2 { + font-size: 40px; + line-height: 40px; + margin-bottom: 30px; +} + +.sobre .txt-sobre h2 span { + color: #00ff08; + display: block; +} + +.sobre .txt-sobre p { + margin: 20px 0; + text-align: justify; +} + +.sobre .txt-sobre .btn-social button { + width: 60px; + height: 60px; + border-radius: 30px; + border: none; + background-color: #00ff08; + font-size: 30px; + cursor: pointer; + margin: 0 5px; + transition: .2s; +} + +/*ESTILO DO PORTFÓLIO*/ + +section.portfolio { + padding: 80px 4%; + box-shadow: 0 0 40px 10px #1c1d1d; +} + +section.portfolio .flex { + justify-content: space-around; + margin-top: 60px; +} + +.img-port { + width: 360px; + height: 460px; + background-size: cover; + background-position: 100% 0%; + transition: 8s; + border-radius: 40px; + cursor: pointer; + position: relative; +} + +.img-port:hover { + background-position: 100% 100%; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: #000000B8; + border-radius: 40px; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + font-weight: 600; + color: #ffffff; + opacity: 0; + transition: .5s; +} + +.overlay:hover { + opacity: 1; +} + +/* ESTILO DO FORMULARIO DE CONTATO*/ +section.formulario { + padding: 80px 4%; +} + +form { + max-width: 500px; + margin: 0 auto; + display: flex; + justify-content: center; + flex-direction: column; + gap: 10px; + margin-top: 40px; +} + +form input, +form textarea { + width: 100%; + background-color: #242424; + border: 0; + outline: 0; + padding: 20px 15px; + border-radius: 15px; + color: #ffffff; + font-size: 18px; +} + +/* form input::placeholder { + color: #00ff08; +} */ + +form textarea { + resize: none; + max-height: 200px; +} + +form .btn-enviar { + margin: 10px; + text-align: center; +} + +form .btn-enviar input { + width: 120px; + background-color: #00ff08; + color: #000; + font-weight: 700; + transition: .2s; + cursor: pointer; +} + +/* ESTILO DO RODAPÉ */ +footer { + padding: 60px 4%; + box-shadow: 0 0 40px 10px #1c1d1d; +} + +footer .flex { + justify-content: space-between; +} + +footer .line-footer { + padding: 20px 0; +} + +.borda { + border-top: 2px solid #00ff08; +} + +footer .line-footer p i { + color: #00ff08; + font-size: 22px; +} + +footer .line-footer p a { + color: #ffffff; +} + +@media screen and (max-width: 1020px) { + + /* CLASSES GERAIS */ + .menu-desktop, .btn-contato { + display: none; + } + + .flex { + flex-direction: column; + } + + h2.titulo { + font-size: 34px; + line-height: 30px; + } + + /* CABEÇALHO */ + menu-desktop, + .btn-contato { + display: none; + } + + /* TOPO DO SITE */ + section.topo-do-site .flex { + gap: 40px; + } + + section.topo-do-site { + padding: 20px 8%; + } + + .topo-do-site h1 { + font-size: 30px; + } + + .topo-do-site .img-topo-site img { + width: 100%; + } + + /* ESPCIALIDADES */ + selection.especialidades { + padding: 40px 8%; + } + + /* SOBRE */ + section.sobre { + padding: 80px 8%; + } + + .sobre .txt-sobre h2 { + font-size: 34px; + line-height: 35px; + text-align: center; + } + + .btn-social { + text-align: center; + } + + .img-sobre img { + width: 100%; + } + + /* PORTFÓLIO */ + section.portfolio { + padding: 80px 8%; + } + + .img-port { + width: 100%; + max-width: 360px; + margin: 0 auto; + } + + section.portfolio .flex { + gap: 60px; + } + + /* RODAPÉ */ + footer .flex { + flex-direction: column; + gap: 30px; + } + + footer .line-footer { + text-align: center; + } +} \ No newline at end of file