Scribd Logo
Upload

Welcome to Scribd!

  • treinonavbar

    Uploaded by

    LucasSantiago
    2 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views3 pages

    treinonavbar

    Uploaded by

    LucasSantiago

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="pt-br">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>Document</title>
    <style>
    *{
    margin: 0;
    padding: 0;

    }
    .navbar{
    background-color:antiquewhite ;
    display: flex;
    padding: 30px;
    height: 30px;
    justify-content: space-between;
    align-items: center;
    }
    .lista-desktop{
    display: flex;
    list-style: none;
    gap: 10px;
    margin-left: auto;
    }
    .lista-desktop a{
    text-decoration: none;
    color: black;
    }
    .lista-desktop a:hover{
    background-color:rgb(243, 139, 2)
    ;

    transform: scale(2.01, 0.5);


    }
    .mobile-menu{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 60%;
    background-color: aqua;
    height: 100%;
    }
    .close{
    height: 20px;
    }
    .lista-mobile{

    }
    .flex{
    display: flex;
    }

    .hamburguer{
    display: none;
    }
    @media(max-width:768px){
    .lista-desktop{
    display: none;
    }
    .hamburguer{
    display: block;
    }
    }

    </style>
    </head>
    <body>
    <nav class="navbar">
    <div class="LOGO">
    <h1>LOGO</h1>
    </div>
    <ul class="lista-desktop">
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    <div class="mobile-menu" id="mobile-menuu">
    <button class="close" id="closeButton">
    <i class="far">X</i>
    </button>
    <ul class="lista-mobile">
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    </div>
    <button class="hamburguer" id="hamburguerButton">
    <i class="farbar">=</i>

    </button>

    </nav>
    <div class="page">
    <h1>SEJA BEM VINDO AO SITE</h1>
    </div>

    <script>
    const hamburguerButton = document.querySelector("#hamburguerButton");
    const closeButton = document.querySelector("#closeButton");
    const mobileMenu = document.querySelector("#mobile-menuu");

    hamburguerButton.addEventListener("click", function(){
    mobileMenu.classList.add("flex")
    })

    closeButton.addEventListener("click", function(){
    mobileMenu.classList.remove("flex")
    })

    </script>

    </body>
    </html>

    You might also like