index.html


<html>
    <head>
        <meta name="viewport" content="with=device-width, initial-scale=1.0">
        <title>Personal Portfolio Website</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Lato:ital,wght@0,400;1,300;1,700&family=Oswald:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


    </head>
    <body>
        <section class="header">
            <nav>
                <a href="index.html"><img src="images/logo.png"></a>
                <div class="nav-links" id="navLinks">
                    <i class="fa fa-times" onclick="HideMenu()"></i>
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="about.html">ABOUT</a></li>
                        <li><a href="skill.html">SKILLS</a></li>
                        <li><a href="blog.html">BLOG</a></li>
                        <li><a href="contact.html">CONTACT</a></li>
                    </ul>
                </div>
                <i class="fa fa-bars" onclick="ShowMenu()"></i>
            </nav>
            <div class="text-box">
                <h1>Hi I,m Faizan Afzal!</h1>
                <p>Cyber Security Engineer — Front End Engineer<br> </p>
                <a onclick="href='cv.pdf';" target="_blank" class="hero-btn">Download CV</a>
            </div>
            
        </section>
        

        

        <!-- footer -->
        
        <!-- javascript for toggle menu -->
        <script>
            var navLinks = document.getElementById("navLinks");
            function ShowMenu(){
                navLinks.style.right ="0";
            }
            function HideMenu(){
                navLinks.style.right ="-200";
            }
        </script>

    </body>
</html>