<html>
<head>
    <title>Full Page Navigation</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
    
    <link rel="stylesheet" href="style.css">


</head>
<body>
    <nav>
        <ul id="navbar">
            <li>
                <a href="#home">
                    home
                </a>
            </li>
            <li>
                <a href="#features">
                    features
                </a>
            </li>
            <li>
                <a href="#pricing">
                    pricing
                </a>
            </li>
            <li>
                <a href="#download">
                    download
                </a>
            </li>
            <li>
                <a href="#contact">
                    contact
                </a>
            </li>
        </ul>
        
        <i class="fas fa-bars" id="icon" onclick="navigation()"></i>

    </nav>

    <script type="text/javascript">
        function navigation(){
            var icon=document.getElementById("icon");
            var navbar=document.getElementById("navbar");

            if(icon.classList.contains('fa-bars')){
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
                navbar.style.left = '0';
            }
            else{
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
                navbar.style.left = '-100%';
            }

        }

    </script>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #202020;
}

ul{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(
        45deg,
        #9e4dff,
        #c44fff
        );
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: -100%;
    transition:left 1s;
}
li{
    display: block;
    width: 100%;
    text-align: center;
}
li:not(:last-child){
    margin-bottom: 40px;
}

ul a{
    display: inline-block;
    text-decoration: none;
    text-transform: capitalize;
    color: white;
    font-family: 'Poppins',sans-serif;
    font-size: 30px;
    width: 35%;
    border-radius: 40px;
    transition: 0.3s;
    padding: 3px 0;
}

ul a:hover{
    background-color: white;
    color: #c44fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 15px rgba(0,0,0,0.05);
}

i.fas{
    position: fixed;
    height: 50px;
    width: 50px;
    display: inline-block;
    background-color: white;
    color: #c44fff;
    top: 30px;
    right: 30px;
    text-align: center;
    font-size: 30px;
    padding: 10px 0;
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(0,0,0,0.1);
    cursor: pointer;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.