Skip to content

Instantly share code, notes, and snippets.

@Lucas-Severo

Lucas-Severo/index.html

Last active February 25, 2020 13:52
Show Gist options
  • Save Lucas-Severo/a86263d13a7eae49ebb41c076075cc67 to your computer and use it in GitHub Desktop.
Save Lucas-Severo/a86263d13a7eae49ebb41c076075cc67 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lucas-Severo revised this gist Feb 25, 2020. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -74,6 +74,10 @@ nav li a:hover {
    color: white;
    }

    .activated .open {
    display: none;
    }

    @media (max-width: 768px) {
    nav {
    top: -100%;
  2. Lucas-Severo revised this gist Feb 25, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ header {
    }

    nav {
    transition: left 0.4s;
    transition: top 0.6s ease-in;
    }

    nav ul{
    @@ -76,7 +76,7 @@ nav li a:hover {

    @media (max-width: 768px) {
    nav {
    left: 100%;
    top: -100%;
    }
    nav ul {
    display: none;
  3. Lucas-Severo created this gist Feb 25, 2020.
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <!DOCTYPE html>
    <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>navbar</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://kit.fontawesome.com/5773d4ffcc.js" crossorigin="anonymous"></script>
    </head>
    <body>
    <header>
    <h1>logo</h1>
    <nav>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    <div class="open"><i class="fas fa-bars"></i></div>
    <div class="close"><i class="fas fa-times"></i></div>
    </nav>
    </header>

    <script src="js/script.js"></script>
    </body>
    </html>
    11 changes: 11 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    const openButton = document.querySelector(".open");
    const closeButton = document.querySelector(".close");
    const navElement = document.querySelector("nav");

    openButton.addEventListener("click", function(){
    navElement.className = "activated";
    })

    closeButton.addEventListener("click", function() {
    navElement.className = "";
    })
    87 changes: 87 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    * {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    }

    header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-transform: uppercase;
    background-color: #5171A5;
    padding: 30px 0px;
    }

    nav {
    transition: left 0.4s;
    }

    nav ul{
    display: flex;
    list-style: none;
    }

    nav li a{
    text-decoration: none;
    color: black;
    padding: 10px 20px;
    font-size: 20px;
    }

    nav li a:hover {
    color: #3F3047;
    background-color: #e40344;
    }

    .open, .close {
    position: absolute;
    top: 30px;
    right: 70px;
    font-size: 30px;
    cursor: pointer;
    display: none;
    }

    .activated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: black;
    }

    .activated ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    }

    .activated li {
    padding: 30px 0px;
    }

    .activated li a {
    color: white;
    }

    .activated .close {
    display: block;
    color: white;
    }

    @media (max-width: 768px) {
    nav {
    left: 100%;
    }
    nav ul {
    display: none;
    }
    .open {
    display: block;
    }
    }