ThosuZ

Olá, pessoal! Estou tentando criar um menu que, quando rola o scroll, ele muda (diminui o height e adiciona um background). Porém, aparentemente, nenhum código js tá funcionando... já tentei bastante coisa. Um dos tutoriais que usei: https://www.anicasagrande.com.br/menu-fixo-no-topo-que-muda-cor-com-rolagem/ Como fiz: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> (function () { var menu = document.getElementById('menuone'); // colocar em cache window.addEventListener('scroll', function () { if (window.scrollY > 50) menu.classList.add('menutwo'); // > 0 ou outro valor desejado else menu.classList.remove('menutwo'); }); })(); </script> <div class="menuone"> <nav class="menufixo"> <div class="menucenter"> <ul class="menu"> <li class="logomenu"><img class="iconmenu" src="images/logotipo-amarelo.png" width="105px" height="100%"/></li> <li class="menulinks"><a class="botoesmenu" href="#">Home</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Serviços</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Portfólio</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Quem somos</a></li> <li class="menulinks"><a class="botoesmenu" href="#">Contato</a></li> </ul> </div> </nav> </div> <div class="menutwo"> <nav class="menususpenso"> <div class="menucentertwo"> <ul class="menut"> <li class="logomenut"><img class="iconmenut" src="images/Isotipo-amarelo.png" width="38px" height="100%"/></li> <li class="menulinkst"><a class="botoesmenut" href="#">Home</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Serviços</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Portfólio</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Quem somos</a></li> <li class="menulinkst"><a class="botoesmenut" href="#">Contato</a></li> </ul> </div> </nav> </div> /* Menu settings before scrolling */ .menuone { display: block; } .menufixo { padding: 1px; margin: 10px -8px -8px -8px; position: fixed; top: 5; left: 2; width: 100%; } .menucenter { width: 1200px; margin: 0 auto; } .menu { text-transform: uppercase; list-style: none; } .logomenu { margin-right: 500px; display: inline-block; } .iconmenu { margin: -15px; } .botoesmenu { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenu:hover { color: #fff; } .menulinks { color: #fff; display: inline-block; margin: 8px; } /* Menu settings after scrolling */ .menutwo { display: block; } .menususpenso { padding: 1px; margin: 0px -8px; position: fixed; top: 5; left: 2; width: 100%; background: #8c05bd; } .menucentertwo { width: 1200px; margin: 0 auto; } .menut { text-transform: uppercase; list-style: none; } .logomenut { margin-right: 500px; display: inline-block; } .iconmenut { margin: -13px; } .botoesmenut { color: #f7c620; font-family: 'Bahnschrift Light', sans-serif; text-decoration: none; transition: color 1s; padding: 10px; } .botoesmenut:hover { color: #fff; } .menulinkst { color: #fff; display: inline-block; margin: 0 8px; } Perdão pelos códigos grandes. Gostaria muito de uma orientação pra conseguir fazer, mas queria muito manter a atual estilização do menu.

Boa tarde, pessoal! Minha dúvida é simples. Gostaria de saber apenas o nome da animação desse site: https://www.think-mario.com/ Quero o nome pra pesquisar sobre e aprender. A animação é quando vamos abaixando o scroll, as coisas vão surgindo, e eu acredito que seja com js. Abraços!

Fiz .fcenter{display:flex} e funcionou, valeu!

Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc"). Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo? HTML: <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS: /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; } Como ficou: Como eu gostaria que ficasse mais ou menos: http://miritigrafica.com.br/#faleconosco