diff --git a/14 - efeito rolagem com mouse hover/images/imagem.jpg b/14 - efeito rolagem com mouse hover/images/imagem.jpg new file mode 100644 index 0000000..2059536 Binary files /dev/null and b/14 - efeito rolagem com mouse hover/images/imagem.jpg differ diff --git a/14 - efeito rolagem com mouse hover/images/imagem2.jpg b/14 - efeito rolagem com mouse hover/images/imagem2.jpg new file mode 100644 index 0000000..f8b1749 Binary files /dev/null and b/14 - efeito rolagem com mouse hover/images/imagem2.jpg differ diff --git a/14 - efeito rolagem com mouse hover/index.html b/14 - efeito rolagem com mouse hover/index.html new file mode 100644 index 0000000..040be52 --- /dev/null +++ b/14 - efeito rolagem com mouse hover/index.html @@ -0,0 +1,16 @@ + + + + + + + Efeito rolagem com Hover + + + +
+ +
+ + + \ No newline at end of file diff --git a/14 - efeito rolagem com mouse hover/style.css b/14 - efeito rolagem com mouse hover/style.css new file mode 100644 index 0000000..a00bf5d --- /dev/null +++ b/14 - efeito rolagem com mouse hover/style.css @@ -0,0 +1,36 @@ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.img-port{ + width: 360px; + height: 660px; + background-size: cover; + background-position: 100% 0%; + border-radius: 20px; + cursor: pointer; +} + +.img-port:hover{ + background-position: 100% 100%; +} + +.site1{ + background-image: url(https://github.com/images/imagem.jpg); + transition: 100s; +} + +.site2{ + background-image: url(https://github.com/images/imagem2.jpg); + transition: 10s; +} \ No newline at end of file diff --git a/15 - Barra de busca personalizada/buscar.js b/15 - Barra de busca personalizada/buscar.js new file mode 100644 index 0000000..9dd7318 --- /dev/null +++ b/15 - Barra de busca personalizada/buscar.js @@ -0,0 +1,12 @@ + +let boxBuscar = document.querySelector('.buscar-box'); +let lupa = document.querySelector('.lupa-buscar'); +let btnFechar = document.querySelector('.btn-fechar'); + +lupa.addEventListener('click', ()=> { + boxBuscar.classList.add('ativar') +}) + +btnFechar.addEventListener('click', ()=> { + boxBuscar.classList.remove('ativar') +}) \ No newline at end of file diff --git a/15 - Barra de busca personalizada/index.html b/15 - Barra de busca personalizada/index.html new file mode 100644 index 0000000..4ca575e --- /dev/null +++ b/15 - Barra de busca personalizada/index.html @@ -0,0 +1,28 @@ + + + + + + + + Barra de busca personalizada + + + +
+
+ +
+ +
+ +
+ +
+ +
+
+ + + + \ No newline at end of file diff --git a/15 - Barra de busca personalizada/style.css b/15 - Barra de busca personalizada/style.css new file mode 100644 index 0000000..2914507 --- /dev/null +++ b/15 - Barra de busca personalizada/style.css @@ -0,0 +1,61 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Outfit",sans-serif; +} + +body{ + height: 100vh; + background-color: #282828; + display: flex; + align-items: center; + justify-content: center; +} + +.buscar-box{ + width: 80px; + height: 80px; + background-color: #fff; + overflow: hidden; + display: flex; + justify-content: space-between; + position: relative; + transition: .5s; +} + +.buscar-box.ativar{ + width: 400px; +} + +.buscar-box .lupa-buscar, .buscar-box .btn-fechar{ + min-width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.buscar-box .btn-fechar i{ + font-size: 20px; + margin-left: 15px; +} + +.buscar-box .lupa-buscar i{ + font-size: 35px; +} + +.buscar-box .input-buscar{ + position: absolute; + left: 80px; + width: calc(100% - 120px); + height: 100%; + line-height: 80px; +} + +.buscar-box .input-buscar input{ + border: 0; + outline: 0; + font-size: 20px; +} \ No newline at end of file diff --git a/16 - efeito hover ripple/efeito.js b/16 - efeito hover ripple/efeito.js new file mode 100644 index 0000000..0cf8cba --- /dev/null +++ b/16 - efeito hover ripple/efeito.js @@ -0,0 +1,10 @@ + +var btn = document.querySelector(".button"); + +btn.onmousemove = function(e){ + var x = e.pageX - btn.offsetLeft; + var y = e.pageY - btn.offsetTop; + + btn.style.setProperty('--eixoX', x + 'px') + btn.style.setProperty('--eixoY', y + 'px') +} \ No newline at end of file diff --git a/16 - efeito hover ripple/index.html b/16 - efeito hover ripple/index.html new file mode 100644 index 0000000..823ae37 --- /dev/null +++ b/16 - efeito hover ripple/index.html @@ -0,0 +1,15 @@ + + + + + + + Efeito Ripple + + + + Inscreva-se + + + + \ No newline at end of file diff --git a/16 - efeito hover ripple/style.css b/16 - efeito hover ripple/style.css new file mode 100644 index 0000000..75e2a05 --- /dev/null +++ b/16 - efeito hover ripple/style.css @@ -0,0 +1,48 @@ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Outfit',sans-serif; +} + +body{ + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.button{ + padding: 60px 100px; + background-color: #282828; + color: #fff; + border-radius: 120px; + text-decoration: none; + position: relative; + overflow: hidden; +} + +.button span{ + font-size: 30px; + position: relative; + z-index: 999999; +} + +.button::before{ + content: ''; + background-color: #fe6600; + width: 0; + height: 0; + position: absolute; + top: var(--eixoY); + left: var(--eixoX); + border-radius: 50%; + transform: translate(-50%,-50%); + transition: width .5s, height .5s; +} + +.button:hover::before{ + width: 1000px; + height: 1000px; +} \ No newline at end of file diff --git "a/17 - P\303\241gina de link/favicon.png" "b/17 - P\303\241gina de link/favicon.png" new file mode 100644 index 0000000..ca359ad Binary files /dev/null and "b/17 - P\303\241gina de link/favicon.png" differ diff --git "a/17 - P\303\241gina de link/index.html" "b/17 - P\303\241gina de link/index.html" new file mode 100644 index 0000000..98cae34 --- /dev/null +++ "b/17 - P\303\241gina de link/index.html" @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + @meunome + + +
+
+ Minha foto do perfil +

@meunome

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis ducimus dolores hic. Iste dolore, temporibus alias sequi delectus illum.

+
+ +
+ + + + + + + + + + + +
+ + +
+ + \ No newline at end of file diff --git "a/17 - P\303\241gina de link/style.css" "b/17 - P\303\241gina de link/style.css" new file mode 100644 index 0000000..239b3d9 --- /dev/null +++ "b/17 - P\303\241gina de link/style.css" @@ -0,0 +1,105 @@ + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Outfit', sans-serif; +} + +html{ + height: 100vh; + font-size: 14px; +} + +body{ + background-color: #282828; + height: 100%; +} + +.container{ + height: 100%; + max-width: 550px; + margin: 0 auto; + display: flex; + flex-direction: column; + justify-content: center; + padding: 20px; + color: #fff; +} + +a{ + text-decoration: none; + color: #fff; +} + +.degrade{ + background: linear-gradient(to right, #FE4701, #FF0054); +} + +/* ESTILO DO HEADER */ + +header{ + text-align: center; + margin-bottom: 40px; +} + +header img{ + max-width: 150px; + margin-bottom: 20px; + border-radius: 50%; +} + +header h1{ + font-size: 2em; + margin-bottom: 10px; + color: #5e5e5e; + font-weight: 300; +} + +/* ESTILO DOS BOTÕES */ + +section.botoes-links{ + display: flex; + flex-direction: column; + gap: 20px; +} + +a.link button{ + width: 100%; + padding: 10px 20px; + display: flex; + align-items: center; + justify-content: space-between; + border: none; + border-radius: 30px; + font-size: 1.2em; + cursor: pointer; + color: #fff; + transition: .2s; +} + +a.link i{ + font-size: 1.5em; +} + +a.link button:hover, footer a.btn-footer:hover{ + transform: scale(1.05); +} + +/* ESTILO DO FOOTER */ + +footer{ + text-align: center; + margin: 30px; +} + +footer a.btn-footer{ + width: 60px; + height: 60px; + display: inline-block; + font-size: 2em; + line-height: 60px; + border-radius: 50%; + margin: 0 10px; + transition: .2s; +} \ No newline at end of file diff --git "a/18 - portf\303\263lio personalizado/images/foto.png" "b/18 - portf\303\263lio personalizado/images/foto.png" new file mode 100644 index 0000000..465a905 Binary files /dev/null and "b/18 - portf\303\263lio personalizado/images/foto.png" differ diff --git "a/18 - portf\303\263lio personalizado/images/imagem.jpg" "b/18 - portf\303\263lio personalizado/images/imagem.jpg" new file mode 100644 index 0000000..2059536 Binary files /dev/null and "b/18 - portf\303\263lio personalizado/images/imagem.jpg" differ diff --git "a/18 - portf\303\263lio personalizado/images/logo.png" "b/18 - portf\303\263lio personalizado/images/logo.png" new file mode 100644 index 0000000..5e57769 Binary files /dev/null and "b/18 - portf\303\263lio personalizado/images/logo.png" differ diff --git "a/18 - portf\303\263lio personalizado/images/pessoa.png" "b/18 - portf\303\263lio personalizado/images/pessoa.png" new file mode 100644 index 0000000..f743e9c Binary files /dev/null and "b/18 - portf\303\263lio personalizado/images/pessoa.png" differ diff --git "a/18 - portf\303\263lio personalizado/index.html" "b/18 - portf\303\263lio personalizado/index.html" new file mode 100644 index 0000000..65c3405 --- /dev/null +++ "b/18 - portf\303\263lio personalizado/index.html" @@ -0,0 +1,192 @@ + + + + + + + + + + + + + + + + + + Agência BRN + + + +
+
+ + + + +
+ + + +
+ +
+ +
+ + +
+
+
+ +
+
+
+
+
+

TRANSFORMANDO IDEIAS EM REALIDADE DIGITAL.

+

Criatividade e inovação andam lado a lado. Com uma combinação única de design impactante, funcionalidade intuitiva e otimização para resultados, estou pronto(a) para criar a presença online dos seus sonhos.

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

MINHAS ESPECIALIDADES.

+
+
+ +

Website

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.

+
+ +
+ +

Loja online

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.

+
+ +
+ +

Blog

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, nulla rem dolore inventore delectus at.

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

MUITO PRAZER, SOU BRUNO RODRIGUES.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. At accusantium ducimus dicta suscipit, neque cumque sunt tenetur totam delectus magnam minus ratione. Quidem sequi velit voluptatibus eos omnis ullam officiis.

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam quidem quae iusto repellendus eaque, ipsum sed voluptate explicabo voluptas, dolorum porro sequi laudantium? Obcaecati quae, dolores illo officiis a numquam.

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

MEU PORTFÓLIO.

+
+
+
Projeto 1
+
+
+
Projeto 2
+
+
+
Projeto 3
+
+
+
+
+ +
+
+

FALA COMIGO.

+ +
+ + + + +
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git "a/18 - portf\303\263lio personalizado/menu.js" "b/18 - portf\303\263lio personalizado/menu.js" new file mode 100644 index 0000000..ba3f087 --- /dev/null +++ "b/18 - portf\303\263lio personalizado/menu.js" @@ -0,0 +1,17 @@ + +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/18 - portf\303\263lio personalizado/style.css" "b/18 - portf\303\263lio personalizado/style.css" new file mode 100644 index 0000000..48e2763 --- /dev/null +++ "b/18 - portf\303\263lio personalizado/style.css" @@ -0,0 +1,477 @@ +/* ESTILO GERAL */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body { + background-color: #000; + height: 100vh; +} + +.interface { + max-width: 1280px; + margin: 0 auto; +} + +.flex { + display: flex; +} + +.btn-contato button { + padding: 10px 40px; + font-size: 18px; + font-weight: 600; + background-color: #00FF08; + border: 0; + border-radius: 30px; + cursor: pointer; + transition: .2s; +} + +h2.titulo { + color: #fff; + 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); +} + +/* ESTILO DO CABEÇALHO */ +header { + padding: 40px 4%; +} + +header>.interface { + display: flex; + align-items: center; + justify-content: space-between; +} + +header a { + color: #5c5c5c; + 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.menu-desktop ul li { + display: inline-block; + padding: 0 40px; +} + +/* ESTILO DO MENU MOBILE */ + +.btn-abrir-menu{ + display: none; +} + +.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: .5s; +} + +.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 i{ + color: #00FF08; + font-size: 30px; +} + +.menu-mobile nav ul{ + text-align: right; +} + +.menu-mobile nav ul li a{ + color: #fff; + 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: #000000df; + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + z-index: 88888; + display: none; +} + +/* ESTILO DO TOPO DO SITE */ +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: #fff; + font-size: 42px; + line-height: 40px; +} + +.topo-do-site .txt-topo-site h1 span { + color: #00FF08; +} + +.topo-do-site .txt-topo-site p { + color: #fff; + margin: 40px 0; +} + +.topo-do-site .img-topo-site img { + position: relative; + animation: flutuar 2s ease-in-out infinite alternate; +} + + +@keyframes flutuar { + 0% { + top: 0; + } + + 100% { + top: 30px; + } +} + +/* ESTILO DAS ESPECIALIDADES */ +section.especiliadades { + padding: 40px 4%; +} + +section.especiliadades .flex { + gap: 60px; +} + +.especiliadades .especialidades-box { + color: #fff; + padding: 40px; + border-radius: 20px; + margin-top: 45px; + transition: .2s; +} + +.especiliadades .especialidades-box:hover { + transform: scale(1.05); + box-shadow: 0 0 20px #ffffff78; +} + +.especiliadades .especialidades-box i { + font-size: 70px; + color: #00FF08; +} + +.especiliadades .especialidades-box h3 { + font-size: 28px; + margin: 15px 0; +} + +/* ESTILO DO SOBRE */ +section.sobre { + padding: 80px 4%; +} + +section.sobre .flex { + align-items: center; + gap: 60px; +} + +.sobre .txt-sobre { + color: #fff; +} + +.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; +} + +.btn-social button { + width: 60px; + height: 60px; + border-radius: 50%; + border: none; + background-color: #00FF08; + font-size: 22px; + cursor: pointer; + margin: 0 5px; + transition: .2s; +} + +/* ESTILO DO PORTFÓLIO */ +section.portfolio { + padding: 80px 4%; + box-shadow: 0 0 40px 10px #ffffff1d; +} + +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; + cursor: pointer; + border-radius: 40px; + 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: #fff; + opacity: 0; + transition: .5s; +} + +.overlay:hover { + opacity: 1; +} + +/* ESTILO DO FORMULÁRIO 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: #fff; + font-size: 18px; +} + +form textarea { + resize: none; + max-height: 200px; +} + +form .btn-enviar { + margin-top: 20px; + text-align: center; +} + +form .btn-enviar input { + width: 120px; + background-color: #00FF08; + color: #000; + font-weight: 700; + cursor: pointer; + transition: .2s; +} + +/* ESTILO DO RODAPÉ */ + +footer { + padding: 40px 4%; + box-shadow: 0 0 40px 10px #ffffff1d; +} + +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: #fff; +} + +@media screen and (max-width: 1020px) { + + /* CLASSES GERAIS */ + .flex { + flex-direction: column; + } + + .topo-do-site .flex{ + flex-direction: column-reverse; + } + + 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%; + } + + /* ESPECIALIDADES */ + section.especiliadades { + 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