Jump to content
MayraAmaral

Meu menu responsivo não funciona e não consigo alinhar a imagem a esquerda do menu

Recommended Posts

HTML

 

<!DOCTYPE hmtl>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DaHora Software</title>
    <link rel="stylesheet" href="css/styles.css">
    
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){

    jQuery("#subirTopo").hide();

    jQuery('a#subirTopo').click(function () {
             jQuery('body,html').animate({
               scrollTop: 0
             }, 800);
            return false;
       });

    jQuery(window).scroll(function () {
             if (jQuery(this).scrollTop() > 200) {
                jQuery('#subirTopo').fadeIn();
             } else {
                jQuery('#subirTopo').fadeOut();
             }
         });
    });
    </script>


</head>
    
<body>
    <header>
        
        <input type="checkbox" id="btn-menu">
        <label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label>
            
        <div class="logo">
            <a href="#"><img src="img/logo.png" width="250" height="150"></a>
        </div>
        
            <nav class="menu"> 
                <ul>
                    <li><a href="#empresa">NOSSA EMPRESA</a></li>
                    <li><a href="#cursos">CURSOS</a></li>
                    <li><a href="#sites">SITES</a></li>
                    <li><a href="#sistemas">SISTEMAS</a></li>
                    <li><a href="#contato">FALE CONOSCO</a></li>
                </ul>
            </nav>
        
    </header>
    
    <div class="empresa">
        <h1 id="empresa"> NOSSA EMPRESA </h1>
    
    </div>
    
    <div class="cursos">
        <h1 id="cursos"> CURSOS </h1>
    
    </div>
    
    <div class="sites">
        <h1 id="sites"> SITES </h1>
    
    </div>
    
    <div class="sistemas">
        <h1 id="sistemas"> SISTEMAS </h1>
    
    </div>
    
    <div class="contato">
        <h1 id="contato"> FALE CONOSCO </h1>
    
    </div>
    
    <footer>
        <a id="subirTopo"> <img src="img/seta.png"” alt=”some text”  width="100" height="100">
            </a>
    </footer>
</body>
</html>

 

CSS

 

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Poppins', sans-serif;
}

header{
    width: 100%;
    height: 150px;
    background-color: black;
}

#btn-menu{
    display: none;
}

header label{
    display: none;
    width: 30px;
    height: 30px;
    padding: 10px;
    border-right: 1px solid green;
}

header label:hover{
    cursor: pointer;
    background: rgba(0,0,0,0.3);
}

.menu ul{
    margin: 0;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    
}

.titulo li a{
    font-family: 'Alfa Slab One', cursive;
    font-size: 50pt;
    text-decoration: none;
    color: darkgreen;
    padding: 50px 50px;
}

.menu li{
    border-right: 1px solid #fff;
}

.menu li a{
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Alfa Slab One', cursive;
    font-size: 12pt;
}

. menu li:hover{
     background: rgba(0,0,0,0.3);
}

a img{
    display: inline-flex;
}

@media (max-width:768px){
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        background-color: #000;
        width: 70%;
        margin-left: -70%;
        transition: all 0.5s;
    }
    
    .menu ul{
        flex-direction: column;
    }
    
    .menu li{
        border-top: 1px solid #fff;
    }
    .logo a{
        justify-content: center;
        align-items: center;
        display: inline-flex;
    }
    
    header{
    height: 50px;
    background-color: black;
    }
    
    #btn-menu:checked - .menu {
        margin-right: 70px;
    }
}

/*
a{
    margin: 20px;
    color: #fff;
    text-decoration:none; 
    font-family: font-family: 'Staatliches', sans-serif;
    font-size: 18pt;
}
*/

.empresa{
    background-color: #fff;
    width: auto;
    height: 500px;
    display: flex;
    padding: 0px 50px;
}

.cursos{
    background-color: #8FBC8F;
    width: auto;
    height: 500px;
    padding: 0px 50px;
}

.sites{
    background-color: #fff;
    width: auto;
    height: 500px;
    padding: 0px 50px;
}

.sistemas{
    background-color: #8FBC8F;
    width: auto;
    height: 500px;
    padding: 0px 50px;
}

.contato{
    background-color: #fff;
    width: auto;
    height: 500px;
    padding: 0px 50px;
}


footer{
    background-color: #000000;
    width: auto;
    height: 200px;
    padding: 0px 50px;
}

#subirTopo {
    background-repeat: no-repeat;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    padding: 0px;
    position: fixed;
}

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By kikekun
      Olá!
      Eu queria fazer um criador de personagens para colocar na web, e tomei como base este código aqui: https://codepen.io/kristenmay/pen/kkkdBr pra fazer em javascript, mas ainda ta limitado pro que eu quero.
      Preciso de um botão que altere mais de uma imagem ao mesmo tempo (por exemplo: pra fazer com que duas imagens de cabelo apareçam ao mesmo tempo, uma na camada da frente, outra na de trás);  um botão para alterar as cores das imagens (até consegui colocar essa barra de HUE, mas ela só muda a cor da primeira imagem, e quando passa, volta pro padrão (esse vermelho que coloquei em todas pra facilitar). mas o ideal mesmo seria um botão especifico pra o tipo de imagem que esteja sendo mudada, por exemplo... o de cabelos mudaria a cor da imagem entre moreno; castanho claro; castanho escuro; branco; loiro claro; loiro escuro; e ruivo... já o botão de cor da pele mudaria entre branco; pardo; asiatico e negro); e um botão de download para as pessoas baixarem seu personagem criado = P Da pra fazer isso? como eu faço? xD (posso tentar postar o codigo em algum lugar se precisar)

      Ta assim:

    • By 4Unknow
      Boa tarde pessoal.
      Estou criando uma página. Editando na verdade.
      Gostaria de saber se é possível deixar o texto retinho do lado direito igual está ao lado esquerdo.
      Existe alguma forma para fazer isso?
       
      Agradeço pela ajuda.
       
       

    • By adriano.eurich
      Estou tendo dificuldade para entender como é feito o tratamento de mascaras e conversões de data, tenho a pagina cadastro.php onde tem os campos para digitar os dados um deles é a data de nascimento, onde coloquei as mascaras na pagina de script como mostra em anexo, dessa forma ele mostra certo os campos para o cliente digitar no formato 00/00/0000, porem quando envia ao banco ele aparece como mostra em anexo 0000-00-00, e na pagina consulta ele retorna o valor do banco dessa forma também. Gostaria que aparece a mascara na pagina consulta para o cliente digitar da forma certa 00/00/000 e enviasse ao bando sem as mascara se possível, mas que retornasse a pagina de consulta com as mascara certa no formato 00/00/000 
      Obs. Sei que o banco aceita apenas 2019-04-25, qualquer valor inserido em outro formato ele vai entender como 0000-00-00, mas como faria para aparecer na pagina de cadastro.php a mascara 25/04/2019 fosse passado para o banco 2019-04-25 e retorna na consulta.php 25/04/2019.
       
      Cadastro de Cliente
       
      Pagina Cadastro de Cliente.php <!-- Campo Data Nasc --> <div class="input-field col s12"> <i class="material-icons prefix">event_note</i> <input type="text" name="datanasc" id="datanasc" maxlength="10" required> <label for="datanasc"> DataNasc do Cliente</label> </div> -------------------------------------------------------------------------- Pagina create.php <?php session_start(); include_once 'conexao.php'; $nome = filter_input(INPUT_POST, 'nome', FILTER_SANITIZE_SPECIAL_CHARS); $email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL); $telefone = filter_input(INPUT_POST, 'telefone', FILTER_SANITIZE_NUMBER_INT); $cpf = filter_input(INPUT_POST, 'cpf', FILTER_SANITIZE_NUMBER_INT); $datanasc = filter_input(INPUT_POST, 'datanasc', FILTER_VALIDATE_INT); $querySelect = $link->query("select email from tb_clientes"); $array_emails = []; while ($emails = $querySelect->fetch_assoc()): $emails_existentes = $emails['email']; array_push($array_emails, $emails_existentes); endwhile; if(in_array($email,$array_emails)): $_SESSION['msg'] = "<p class='center red-text'>".'Já existe um cliente cadastrado com esse email'."</p>"; header("Location: ../CadCli.php"); else: $queryInsert = $link->query("insert into tb_clientes values(default,'$nome','$email','$telefone','$cpf','$datanasc')"); $affected_rows = mysqli_affected_rows($link); if($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>".'Cadastro efetuado com Sucesso!'."<br>"; header("Location: ../CadCli.php"); endif; endif; ----------------------------------------------------------------------------------------------------- Pagina read.php <?php include_once 'conexao.php'; $querySelect = $link->query("select * from tb_clientes"); while ($registros = $querySelect->fetch_assoc()): $id = $registros['id']; $nome = $registros['nome']; $email = $registros['email']; $telefone = $registros['telefone']; $cpf = $registros['cpf']; $datanasc = $registros['datanasc']; echo "<tr>"; echo "<td>$nome</td><td>$email</td><td>$telefone</td><td>$cpf</td><td>$datanasc</td>"; echo "<td><a href='editar.php?id=$id'><i class='material-icons'>edit</i></a></td>"; echo "<td><a href='banco_de_dados/delCliConfirma.php?id=$id'><i class='material-icons'>delete</i></a></td>"; echo "</tr>"; endwhile; --------------------------------------------------------------------------------------------------------------------- Pagina de Script Jquery <!-- Inicialização Jquery Mascaras --> <script type="text/javascript"> jQuery.noConflict(); jQuery(function($){ $("#datanasc").mask("99/99/9999"); $("#telefone").mask("(099)-99999-9999"); $("#cpf").mask("999 999 999-99"); }); </script>  

    • By Patrick Gabrel
      <html>   <head> <style> body{     background: #ecf0f1; }   #container-main{     margin:40px auto;     width:95%;     min-width:320px;     max-width:960px; }   #container-main h1{     font-size: 40px;     text-shadow:4px 4px 5px #16a085; }   .accordion-container {     width: 100%;     margin: 0 0 20px;     clear:both; }   .accordion-titulo {     position: relative;     display: block;     padding: 20px;     font-size: 24px;     font-weight: 300;     background: #fd0404;     color: rgb(0, 0, 0);     text-decoration: none; } .accordion-titulo.open {     background: #ff0000;     color: #fff; } .accordion-titulo:hover {     background: #1abc9c; }   .accordion-titulo span.toggle-icon:before {     content:"+"; }   .accordion-titulo.open span.toggle-icon:before {     content:"-"; }   .accordion-titulo span.toggle-icon {     position: absolute;     top: 10px;     right: 20px;     font-size: 38px;     font-weight:bold; }   .accordion-content {     display: none;     padding: 20px;     overflow: auto; }   .accordion-content p{     margin:0; }   .accordion-content img {     display: block;     float: left;     margin: 0 15px 10px 0;     width: 50%;     height: auto; }   @media (max-width: 767px) {     .accordion-content {         padding: 10px 0;     } } </style>     <script>         $(function(){ $(".accordion-titulo").click(function(e){   e.preventDefault();   var abra=$(this).next(".accordion-content");   if(abra.css("display")=="none"){ //open        abra.slideDown(250);             $(this).addClass("open"); } else{ //close      abra .slideUp(250); $(this).removeClass("open");     }   }); });     </script> </head> <body> <div id="container-main">   <h1>Os Mitos do Fut</h1>   <div class="accordion-container">   <a href="#" class="accordion-titulo">Messi<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://e0.365dm.com/15/05/660x350/champions-league-barcelona-bayern-munich-soccer-messi_3299830.jpg?20150506214236" alt=""/> <p>                     Biografia de Lionel Messi                     Lionel Messi (1987) é um jogador de futebol argentino que joga no time Barcelona. Foi considerado o melhor jogador do mundo por várias vezes e campeão por três anos consecutivos.                       Lionel Andrés Messi (1987) nasceu em Rosário, na Argentina, no dia 24 de junho de 1987.                     Revelou interesse pelo futebol desde a infância. Jogou num pequeno clube chamado Abanderado Grandoli, localizado perto de sua casa. Aos 7 anos, entrou para jogar no time Newell's Old Boys. Messi enfrentou problemas hormonais que lhe impedia o crescimento de forma natural.                    Por isso, fez tratamento com medicação injetável.                 </p> </div>   </div>   <div class="accordion-container"> <a href="#" class="accordion-titulo">CR7 (C.Ronaldo)<span class="toggle-icon"></span></a> <div class="accordion-content"> <img src="http://www.abc.es/Media/201301/10/cristiano-ronaldo--644x362.jpg" alt=""/> <p>                   </p> </div> </div>   </div> </body> </html>
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.