WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1630
logicaldata497
Abrir no Editor
Video
Publique Seu Código
0
Recomendado
18 December 2025
Código HTML do jogo Elastic Face
27 February 2025
jogo
HTML
Copy
Home
Action
Another action
Something else here
Another action
About
Code
Services
Action
Another action
Contact
Bootstrap Navbar
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext'); body{ font-family: 'Poppins', sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color: #212112; background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg'); background-position: center; background-repeat: repeat; background-size: 7%; background-color: #fff; overflow-x: hidden; transition: all 200ms linear; } ::selection { color: #fff; background-color: #8167a9; } ::-moz-selection { color: #fff; background-color: #8167a9; } .start-header { opacity: 1; transform: translateY(0); padding: 20px 0; box-shadow: 0 10px 30px 0 rgba(138, 155, 165, 0.15); -webkit-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .start-header.scroll-on { box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15); padding: 10px 0; -webkit-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .start-header.scroll-on .navbar-brand img{ height: 24px; -webkit-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .navigation-wrap{ position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; -webkit-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .navbar{ padding: 0; } .navbar-brand img{ height: 28px; width: auto; display: block; filter: brightness(10%); -webkit-transition : all 0.3s ease-out; transition : all 0.3s ease-out; } .navbar-toggler { float: right; border: none; padding-right: 0; } .navbar-toggler:active, .navbar-toggler:focus { outline: none; } .navbar-light .navbar-toggler-icon { width: 24px; height: 17px; background-image: none; position: relative; border-bottom: 1px solid #000; transition: all 300ms linear; } .navbar-light .navbar-toggler-icon:after, .navbar-light .navbar-toggler-icon:before{ width: 24px; position: absolute; height: 1px; background-color: #000; top: 0; left: 0; content: ''; z-index: 2; transition: all 300ms linear; } .navbar-light .navbar-toggler-icon:after{ top: 8px; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after { transform: rotate(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before { transform: translateY(8px) rotate(-45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { border-color: transparent; } .nav-link{ color: #212121 !important; font-weight: 500; transition: all 200ms linear; } .nav-item:hover .nav-link{ color: #8167a9 !important; } .nav-item.active .nav-link{ color: #777 !important; } .nav-link { position: relative; padding: 5px 0 !important; display: inline-block; } .nav-item:after{ position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; content: ''; background-color: #8167a9; opacity: 0; transition: all 200ms linear; } .nav-item:hover:after{ bottom: 0; opacity: 1; } .nav-item.active:hover:after{ opacity: 0; } .nav-item{ position: relative; transition: all 200ms linear; } .bg-light { background-color: #fff !important; transition: all 200ms linear; } .section { position: relative; width: 100%; display: block; } .full-height { height: 100vh; } .over-hide { overflow: hidden; } .absolute-center { position: absolute; top: 50%; left: 0; width: 100%; margin-top: 40px; transform: translateY(-50%); z-index: 20; } h1{ font-size: 48px; line-height: 1.2; font-weight: 700; color: #212112; text-align: center; } p{ text-align: center; margin: 0; padding-top: 10px; opacity: 1; transform: translate(0); transition: all 300ms linear; transition-delay: 1700ms; } body.hero-anime p{ opacity: 0; transform: translateY(40px); transition-delay: 1700ms; } h1 span{ display: inline-block; transition: all 300ms linear; opacity: 1; transform: translate(0); } body.hero-anime h1 span:nth-child(1){ opacity: 0; transform: translateY(-20px); } body.hero-anime h1 span:nth-child(2){ opacity: 0; transform: translateY(-30px); } body.hero-anime h1 span:nth-child(3){ opacity: 0; transform: translateY(-50px); } body.hero-anime h1 span:nth-child(4){ opacity: 0; transform: translateY(-10px); } body.hero-anime h1 span:nth-child(5){ opacity: 0; transform: translateY(-50px); } body.hero-anime h1 span:nth-child(6){ opacity: 0; transform: translateY(-20px); } body.hero-anime h1 span:nth-child(7){ opacity: 0; transform: translateY(-40px); } body.hero-anime h1 span:nth-child(8){ opacity: 0; transform: translateY(-10px); } body.hero-anime h1 span:nth-child(9){ opacity: 0; transform: translateY(-30px); } body.hero-anime h1 span:nth-child(10){ opacity: 0; transform: translateY(-20px); } h1 span:nth-child(1){ transition-delay: 1000ms; } h1 span:nth-child(2){ transition-delay: 700ms; } h1 span:nth-child(3){ transition-delay: 900ms; } h1 span:nth-child(4){ transition-delay: 800ms; } h1 span:nth-child(5){ transition-delay: 1000ms; } h1 span:nth-child(6){ transition-delay: 700ms; } h1 span:nth-child(7){ transition-delay: 900ms; } h1 span:nth-child(8){ transition-delay: 800ms; } h1 span:nth-child(9){ transition-delay: 600ms; } h1 span:nth-child(10){ transition-delay: 700ms; } body.hero-anime h1 span:nth-child(11){ opacity: 0; transform: translateY(30px); } body.hero-anime h1 span:nth-child(12){ opacity: 0; transform: translateY(50px); } body.hero-anime h1 span:nth-child(13){ opacity: 0; transform: translateY(20px); } body.hero-anime h1 span:nth-child(14){ opacity: 0; transform: translateY(30px); } body.hero-anime h1 span:nth-child(15){ opacity: 0; transform: translateY(50px); } h1 span:nth-child(11){ transition-delay: 1300ms; } h1 span:nth-child(12){ transition-delay: 1500ms; } h1 span:nth-child(13){ transition-delay: 1400ms; } h1 span:nth-child(14){ transition-delay: 1200ms; } h1 span:nth-child(15){ transition-delay: 1450ms; } .nav-item .dropdown-menu { transform: translate3d(0, 10px, 0); visibility: hidden; opacity: 0; max-height: 0; display: block; padding: 0; margin: 0; transition: all 200ms linear; } .nav-item.show .dropdown-menu { opacity: 1; visibility: visible; max-height: 999px; transform: translate3d(0, 0px, 0); } .dropdown-menu { padding: 10px!important; margin: 0; font-size: 13px; letter-spacing: 1px; color: #212121; background-color: #fcfaff; border: none; border-radius: 3px; box-shadow: 0 5px 10px 0 rgba(138, 155, 165, 0.15); transition: all 200ms linear; } .dropdown-toggle::after { display: none; } .dropdown-item { padding: 3px 15px; color: #212121; border-radius: 2px; transition: all 200ms linear; } .dropdown-item:hover, .dropdown-item:focus { color: #fff; background-color: rgba(129,103,169,.6); } @media (max-width: 767px) { h1{ font-size: 38px; } .nav-item:after{ display: none; } .nav-item::before { position: absolute; display: block; top: 15px; left: 0; width: 11px; height: 1px; content: ""; border: none; background-color: #000; vertical-align: 0; } .dropdown-toggle::after { position: absolute; display: block; top: 10px; left: -23px; width: 1px; height: 11px; content: ""; border: none; background-color: #000; vertical-align: 0; transition: all 200ms linear; } .dropdown-toggle[aria-expanded="true"]::after{ transform: rotate(90deg); opacity: 0; } .dropdown-menu { padding: 0 !important; background-color: transparent; box-shadow: none; transition: all 200ms linear; } .dropdown-toggle[aria-expanded="true"] + .dropdown-menu { margin-top: 10px !important; margin-bottom: 20px !important; } }
JS
Copy
(function($) { "use strict"; $(function() { var header = $(".start-style"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 10) { header.removeClass('start-style').addClass("scroll-on"); } else { header.removeClass("scroll-on").addClass('start-style'); } }); }); //Animation $(document).ready(function() { $('body.hero-anime').removeClass('hero-anime'); }); $('body').on('mouseenter mouseleave','.nav-item',function(e){ if ($(window).width() > 750) { var _d=$(e.target).closest('.nav-item');_d.addClass('show'); setTimeout(function(){ _d[_d.is(':hover')?'addClass':'removeClass']('show'); },1); } }); //Switch light/dark $("#switch").on('click', function () { if ($("body").hasClass("dark")) { $("body").removeClass("dark"); $("#switch").removeClass("switched"); } else { $("body").addClass("dark"); $("#switch").addClass("switched"); } }); })(jQuery);