index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>home</title>
    <link href="styles.css" rel="stylesheet">
</head>
<body>

    <nav class="navigation container">
        <div class="nav-brand">I AM DEVELOPER</div>
        <ul class="list-non-bullet nav-pills">
            <li class="list-item-inline">
                <a class="link link-active" href="index.html">Home</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="projects.html">Projects</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="Blogs.html">Blogs</a>
            </li>
        </ul>
    </nav>
    
    <header class="hero">
        <img class="hero-img margin-md" src="images/hero.svg" alt="">
        <h1 class="hero-heading">I am Vaibhav Gaur <span class="heading-inverted">Web Developer</span></h1>
    </header>


    <section class="section ow">
        <div class="container container-center">
            <h1>Technologies</h1>
            <p>I am familiar with HTML5, CSS3, Git, Javascript, NodeJS, ReactJS and Web Hosting.</p>
        </div>     
    </section>

    <section class="section">
        <div class="container container-center">
            <h1>Projects</h1>
            <p>I like to showcase my work and thus, you can see my projects hosted online and check the source code if you like.</p>
            <a class="link link-primary " href="projects.html">See Projects</a>
        </div>
    </section>


    <section class="section ow">
        <div class="container container-center">
            <h1>Blogs</h1>
            <p>I am also working on some technical and non technical blogs. I like to document my journey.</p>
            <a class="link link-primary " href="/">See Blogs</a>
        </div>     
    </section>    

    <footer class="footer">
        <div class="footer-header">💻 Connect with me 💻 </div>
        <ul class="social-links list-non-bullet">
            <li class="list-item-inline">
                <a class="link" href="https://twitter.com/vaibhavishappy">Twitter</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="https://www.linkedin.com/in/vaibhavgaur5/">LinkedIn</a>
            </li>
            <li class="list-item-inline">
                <a class="link" href="https://github.com/VaibhavGaur05">GitHub</a>
            </li>
        </ul>
    </footer>


</body>
</html>