Ir ao conteúdo

vinicius kern

Membro Júnior
 Perfil  Explorar Conteúdo

  • Posts

    4

  • Cadastrado em

  • Última visita

 Tipo de conteúdo 

Tudo que vinicius kern postou

  1. vinicius kern
    Olá adriano, muito obrigado por responder. Então, eu tentei aqui e ele foi um pouco para baixo só.
  2. vinicius kern
    <>Olá pessoal, estou fazendo um projeto de estudos e simplesmente o <footer> fica fixo em baixo do <header> e eu não sei o porque disso. Eu realmente não qeria usar o position para colocar ele no final da pagina por questões de responsividade. Alguem poderia me ajudar a ver o que está acontecendo? CÓDIGO INDEX: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <!-- Somehow I got an error, so I comment the title, just uncomment to show --> <!-- <title>Sidebar Menu with sub-menu | CodingNepal</title> --> <link rel="stylesheet" href="css/menu.css"> <link rel="stylesheet" href="css/estilo.css"> <link rel="stylesheet" href="css/imgs.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <header> <figure id="logosite"> <a href="index.html"> <img id='logo' src="imagens/logo.png" alt="logo" title="Subir para o topo da página"> </a> </figure> <div id="redes"> <a href="#"> <img class="facebook" src="imagens/logoface.png" alt="logoface" title="Facebook" width="75px"> </a> <a href="#"> <img class="twiter" src="imagens/logotwiter.png" alt="logotwiter" title="Twiter" width="75px"> </a> <a href="#"> <img class="linkedin" src="imagens/logolinkedin.png" alt="logolinkedin" title="Linkedin" width="75px"> </a> </div> </header> <body> <div class="btn"> <span class="faz fa-bars"></span> </div> <nav class="menu"> <div class="text">Menu</div> <ul> <li class="active"><a href="index.php">Home</a></li> <li> <a class="sub1-btn">Sobre o Covid-19? <span class="faz fa-caret-down first"></span> </a> <ul class="sub1-show"> <li><a href="paginas/sobre.html">o que é?</a></li> <li><a href="paginas/transmicao.php">Transmissão</a></li> <li><a href="paginas/sintomas.php">Sintomas</a></li> <li><a href="paginas/prevencao.php">Prevenção</a></li> </ul> </li> <li> <a class="sub2-btn">Reeduque-se <span class="faz fa-caret-down second"></span> </a> <ul class="sub2-show"> <li><a href="paginas/alimentacao.php">Dicas de Alimentação</a></li> <li><a href="paginas/esportes.php">Dicas de Esportes</a></li> <li><a href="paginas/cuidados.php">Cuidados ao Sair de Casa</a></li> </ul> </li> <li><a href="paginas/mitos.php">Caçadores de Mitos</a></li> <li><a href="paginas/SobreApp.php">App Coronavírus</a></li> <li><a href="paginas/noticias.php">Ultimas Notícias</a></li> <li><a href="paginas/formulario.php">Ajude nas Pesquisas</a></li> </ul> </nav> <script> $('.btn').click(function(){ $(this).toggleClass("click"); $('.menu').toggleClass("show"); }); $('.sub1-btn').click(function(){ $('nav ul .sub1-show').toggleClass("show"); $('nav ul .first').toggleClass("rotate"); }); $('.sub2-btn').click(function(){ $('nav ul .sub2-show').toggleClass("show1"); $('nav ul .second').toggleClass("rotate"); }); $('nav ul li').click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); </script> <section id="meio"> <div class="div1"> <div class="header1">aqui vai o titulo </div> <p>aqui vai o scmskdcmlskdmclksd Limite da cidade, da paciência, da corda. Acorda! Vai fazer alguma coisa da vida. No Aurélio é o que representa para alguém motivo de estímulo, de amor a vida. Não tenho. Talvez consiga comprar um dia. Quando t em sol é sempre mais legal.O diferente é igual. Penso que Schopenhauer faz muito sentido e Baudelaire é completamente louco. Tudo acaba. Quanto antes melhor. Não gosto de cicatrizes. e Baudelaire é completamente louco. Tudo acaba. Quanto antes melhor. Não gosto de cicatrizes. .</p> </div> </section> <footer> <h1>aqui fica o rodapé</h1> </footer> </body> </html> CÓDIGO CSS: @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; user-select: none; font-family: 'Poppins', sans-serif; } body{ background-color: #4b5a81; height: 100%; } header{ background-color: black; width:100%; height:160px; } .div1{ background-color: black; position: absolute; top: 60%; left: 50%; width: 70%; transform: translate(-50%,-50%); color: white; z-index: -1; text-align: center; border-radius: 5px; box-shadow: 0 0 1em black; } .div1 .header1{ font-size: 45px; font-weight: 600; } .div1 p{ font-size: 30px; font-weight: 500; } footer{ background-color: black; height:100px; width: 100%; }
  3. vinicius kern
    Obrigado amigo, limpei o cache, mas no final o problema era com o fato de eu estar editando os arquivos com final .php, mesmo assim muito obrigado
  4. vinicius kern
    Olá, fiz uma aula em que aprendemos a fazer um menu com HTML, CSS e JS. O menu ficou pronto ai o professor deixou uma <div> onde podemos colocar outros conteúdos, porém depois de criar o menu eu não consegui editar mais nada de conteudo que coloquei no site, queria mudar ela de lugar e parece que a pagina já está pré estilizada, me ajudem, pois eu não consigo estilizar nada no css, parece que não aceita. segue em anexo a index e o arquivo css. desde já agradeço. Código da index: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/menu.css"> <link rel="stylesheet" type="text/css" href="css/estilo.css"> <link rel="stylesheet" type="text/css" href="css/corpo.css"> <script src="https://code.jquery.com/jquery-3.4.1.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> </head> <body> <div class="btn"> <span class="faz fa-bars"></span> </div> <nav class="menu"> <div class="text">Menu</div> <ul> <li class="active"><a href="index.php">Home</a></li> <li> <a class="sub1-btn">Sobre o Covid-19? <span class="faz fa-caret-down first"></span> </a> <ul class="sub1-show"> <li><a href="paginas/sobre.php">o que é?</a></li> <li><a href="paginas/transmicao.php">Transmissão</a></li> <li><a href="paginas/sintomas.php">Sintomas</a></li> <li><a href="paginas/prevencao.php">Prevenção</a></li> </ul> </li> <li> <a class="sub2-btn">Reeduque-se <span class="faz fa-caret-down second"></span> </a> <ul class="sub2-show"> <li><a href="paginas/alimentacao.php">Dicas de Alimentação</a></li> <li><a href="paginas/esportes.php">Dicas de Esportes</a></li> <li><a href="paginas/cuidados.php">Cuidados ao Sair de Casa</a></li> </ul> </li> <li><a href="paginas/mitos.php">Caçadores de Mitos</a></li> <li><a href="paginas/SobreApp.php">App Coronavírus</a></li> <li><a href="paginas/noticias.php">Ultimas Notícias</a></li> <li><a href="paginas/formulario.php">Ajude nas Pesquisas</a></li> </ul> </nav> <script> $('.btn').click(function(){ $(this).toggleClass("click"); $('.menu').toggleClass("show"); }); $('.sub1-btn').click(function(){ $('nav ul .sub1-show').toggleClass("show"); $('nav ul .first').toggleClass("rotate"); }); $('.sub2-btn').click(function(){ $('nav ul .sub2-show').toggleClass("show1"); $('nav ul .second').toggleClass("rotate"); }); $('nav ul li').click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); </script> <div class="content"> <div class="header">e se escrver outra coisa </div> <p>HTML CSS & Javascript (Full Tutorial)</p> </div> </body> </html> código css: @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; user-select: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .btn{ position: absolute; top: 15px; left: 45px; height: 45px; width: 45px; text-align: center; background: #1b1b1b; border-radius: 3px; cursor: pointer; transition: left 0.4s ease; } .btn.click{ left: 260px; } .btn span{ color: white; font-size: 28px; line-height: 45px; } .btn.click span:before{ content: '\f00d'; } .menu{ position: fixed; width: 250px; height: 100%; left: -250px; background: #1b1b1b; transition: left 0.4s ease; } .menu.show{ left: 0px; } .menu .text{ color: white; font-size: 25px; font-weight: 600; line-height: 65px; text-align: center; background: #1e1e1e; letter-spacing: 1px; } nav ul{ background: #1b1b1b; height: 100%; width: 100%; list-style: none; } nav ul li{ line-height: 60px; border-top: 1px solid rgba(255,255,255,0.1); } nav ul li:last-child{ border-bottom: 1px solid rgba(255,255,255,0.05); } nav ul li a{ position: relative; color: white; text-decoration: none; font-size: 18px; padding-left: 40px; font-weight: 500; display: block; width: 100%; border-left: 3px solid transparent; } nav ul li.active a{ color: cyan; background: #1e1e1e; border-left-color: cyan; } nav ul li a:hover{ background: #1e1e1e; } nav ul ul{ position: static; display: none; } nav ul .sub1-show.show{ display: block; } nav ul .sub2-show.show1{ display: block; } nav ul ul li{ line-height: 42px; border-top: none; } nav ul ul li a{ font-size: 17px; color: #e6e6e6; padding-left: 80px; } nav ul li.active ul li a{ color: #e6e6e6; background: #1b1b1b; border-left-color: transparent; } nav ul ul li a:hover{ color: cyan!important; background: #1e1e1e!important; } nav ul li a span{ position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 22px; transition: transform 0.4s; } nav ul li a span.rotate{ transform: translateY(-50%) rotate(-180deg); } .content{ position: absolute; top: 10%; left: 100%; background-color:blue; transform: translate(-50%,-50%); color: #202020; z-index: -1; text-align: center; } .content .header{ font-size: 45px; font-weight: 600; } .content p{ font-size: 30px; font-weight: 500; } index.txt css.txt

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!