work.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>View My Work</title>
        
        <!--Meta data-->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Icon-->
        <link rel="icon" type="image/png" href="">
        <!--Google Fonts-->
        <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=Poppins&display=swap" rel="stylesheet">
        <!--Fontawesome-->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
        <!--CSS Styles-->
        <link rel="stylesheet" href="css/main.css">
        <!--JQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

    <body>
        <header>
            <div class="menu-btn">
                <div class="btn-line"></div>
                <div class="btn-line"></div>
                <div class="btn-line"></div>
            </div>

            <nav class="menu">
                <div class="menu-branding">
                    <div class="portrait">

                    </div>
                </div>

                <ul class="menu-nav">
                    <li class="nav-item">
                        <a href="index.html" class="nav-link">Home</a>
                    </li>
                    
                    <li class="nav-item">
                        <a href="about.html" class="nav-link">About Me</a>
                    </li>
                    
                    <li class="nav-item current">
                        <a href="work.html" class="nav-link">My Work</a>
                    </li>
                    
                    <li class="nav-item">
                        <a href="contact.html" class="nav-link">How To Reach Me</a>
                    </li>
                </ul>
            </nav>
        </header>

        <main id="work">
            <h1 class="lg-heading">
                My
                <span class="text-secondary">Work</span>
            </h1>
            <h2 class="sm-heading">Check out some of my conceptual projects...</h2>

            <div class="projects">
                <div class="item">
                    <a href="https://friendly-goldwasser-893e03.netlify.app/">
                        <img src="images/projects/project1.png" alt="">
                    </a>

                    <a href="https://friendly-goldwasser-893e03.netlify.app/" class="btn-light">
                        <i class="fas fa-eye"></i>Project
                    </a>

                    <a href="https://github.com/Tapialj/Seth-concept" class="btn-dark">
                        <i class="fab fa-github"></i>Github
                    </a>
                </div>

                <div class="item">
                    <a href="https://admiring-lamport-c02eb9.netlify.app">
                        <img src="images/projects/project2.png" alt="">
                    </a>

                    <a href="https://admiring-lamport-c02eb9.netlify.app" class="btn-light">
                        <i class="fas fa-eye"></i>Project
                    </a>

                    <a href="https://github.com/Tapialj/Salon-concept" class="btn-dark">
                        <i class="fab fa-github"></i>Github
                    </a>
                </div>

                <div class="item">
                    <a href="https://epic-brahmagupta-a004d7.netlify.app">
                        <img src="images/projects/project3.png" alt="">
                    </a>

                    <a href="https://epic-brahmagupta-a004d7.netlify.app" class="btn-light">
                        <i class="fas fa-eye"></i>Project
                    </a>

                    <a href="https://github.com/Tapialj/My-Portfolio" class="btn-dark">
                        <i class="fab fa-github"></i>Github
                    </a>
                </div>

                <!--<div class="item">
                    <a href="#">
                        <img src="images/projects/project5.png" alt="">
                    </a>

                    <a href="#" class="btn-light">
                        <i class="fas fa-eye"></i>Project
                    </a>

                    <a href="#" class="btn-dark">
                        <i class="fab fa-github"></i>Github
                    </a>
                </div>-->
            </div>
        </main>

        <footer id="main-footer">
            Copyright &copy; 2021
        </footer>

        <script src="js/main.js"></script>
    </body>
</html>