Home
Imagem-Perfil-Circulo com Efeitos

Efeito Pulsar com HTML e CSS

Imagem post Efeito Pulsar com HTML e CSS

Código HTML Código CSS *{ margin: 0px; padding: 0px; } #containerPai{ background-color: #d6d6d6; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .pulsar{ width: 100px; height: 100px; background-color: blueviolet; border-radius: 50%; position: relative; & span{ width: 100%; height: 100%; background-color: inherit; position: absolute; border-radius: 50%; animation: pulsar 4s infinite; animation-delay: calc(1s * var(–span)); […]

Redirecionar Página com JS

Imagem post Redirecionar páginas com JavaScript

Código HTML com o Js <script> setTimeout(redirecionar, 5000); function redirecionar(){ window.location.href = "https://gustavocampelo.com.br/webhub/" } </script>

Botão com Efeito Cometas

Imagem post Efeito cometa no botão com html e css

Código HTML <div id="botao"> <button>CLIQUE AQUI</button> <div id="cometas"> <span class="cometa" style="–cometaPosicao: 20"></span> <span class="cometa" style="–cometaPosicao: 40"></span> <span class="cometa" style="–cometaPosicao: 58"></span> <span class="cometa" style="–cometaPosicao: 78"></span> <span class="cometa" style="–cometaPosicao: 84"></span> <span class="cometa" style="–cometaPosicao: 14"></span> <span class="cometa" style="–cometaPosicao: 32"></span> <span class="cometa" style="–cometaPosicao: 28"></span> <span class="cometa" style="–cometaPosicao: 64"></span> </div> </div> Código CSS #botao{ width: 220px; height: 60px; position: relative; […]

Troca de Cor com Scroll

Imagem post Efeito Scroll troca de Cor

Código JS utilizado <script> document.addEventListener("scroll", function(){ const containerCor = document.querySelector(".containerCor"); const scrollAtual = window.scrollY; const scrollCor = 300; if(scrollAtual >= scrollCor){ containerCor.style.backgroundColor = "blue" }else{ containerCor.style.backgroundColor = "white" } }) </script>

Slider personalizável tela cheia

Imagem post Slider Customizado Tela cheia

Código CSS para Carousel Widget .swiper-pagination-bullet{ background-color: transparent !important; border: 1px solid black; } .swiper-pagination-bullet-active{ background-color: black !important } .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{ margin-top: -60px; }

Customizando Navegação de Sliders

Imagem postNavegação Customizada de Sliders

Código CSS para cada Container Card selector .elementor-swiper-button{ z-index: 10 !important; } .eicon-chevron-right{ background-color: white; padding: 8px 10px; border-radius: 0px 12px 12px 0px; } .eicon-chevron-left{ background-color: white; padding: 8px 10px; border-radius: 12px 0px 0px 12px } selector .elementor-swiper-button.elementor-swiper-button-next{ top: 97%; left: 100%; } selector .elementor-swiper-button.elementor-swiper-button-prev{ top: 97%; left: calc(100% – 40px); } selector .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{ text-align: […]

Card Hover Flex

Imagem post Card Hover Flex

Código CSS para cada Container Card selector { flex: 1 !important; transition: all .5s } selector:hover { flex: 5 !important; } selector:hover h2{ font-size: 22px !important } selector h2{ font-size: 16px !important; transition: all .5s } selector:hover h3{ font-size: 14px !important } selector h3{ font-size: 12px !important; transition: all .5s }

Menu Slider Tela Cheia

Imagem post Menu Slider

Código HTML Ícone <input type="checkbox" id="nav-control" class="lytbox-nav_control"> <label for="nav-control" class="lytbox-button"> <div class="hamburguer"> <span></span> <span></span> <span></span> </div> </label> <nav class="lytbox-navigation"> </nav> Caixas de ícone /* icone do menu e fechar */ .lytbox-button { –hamburger-color: white; –close-x-color: white; display: block; height: 18px; cursor: pointer; position: relative; z-index: 101; } /* secao em 100% de largura */ .elementor-2164 […]

Tooltip Elementor

Imagem post Tooltip

Código HTML <span class="tooltip-container"> <img src="https://tutoriais.gustavocampelo.com.br/wp-content/uploads/2024/04/question-mark.png" alt="icone tooltip"> <span class="tooltip">Olá, isso é um tooltip!</span> </span> Código CSS selector img { filter: drop-shadow(8px 12px 12px rgba(0, 6, 58, 0.43)); } .tooltip-container { cursor: pointer; position: relative; display: inline-block; width: 60px; vertical-align: middle; } .tooltip { opacity: 0; z-index: 99; color: #FFF; width: 190px; display: block; font-size: […]

Landing Page Figma

Imagem post Carrossel Contínuo

Códigos Header selector.elementor-sticky–effects{ background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } Ícones Neon Blur selector{ filter: blur(200px); } Caixas de ícone selector{ background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 36px; } Contador .elementor-counter-title { text-align: left !important } Carrossel Depoimentos .elementor-testimonial__icon svg { margin: -20px 0px; } span.swiper-pagination-bullet { width: […]

TESTE POPUP

Recupere seu investimento

Depois de passar pelas aulas principais, você estará pronto para conquistar clientes e começar a oferecer serviços. Acredite ou não, com apenas um site, que pode ser criado em cerca de 2 a 3 dias, você já terá a chance de recuperar o investimento feito no curso!