Works.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--
    - primary meta tags
  -->
    <title>Cologic - Digital product design agency</title>
    <meta name="title" content="dprod - Digital product design agency" />
    <meta
      name="description"
      content="This is a agency html template made by codewithsadee"
    />

    <!--
    - favicon
  -->
    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--
    - custom css link
  -->
    <link rel="stylesheet" href="./assets/css/style.css" />

    <!--
    - google font link
  -->
    <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=Jost:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <!--
    - preload images
  -->
    <link rel="preload" as="image" href="./assets/images/hero-banner.png" />
  </head>

  <body>
    <!--
    - #HEADER
  -->
    <!-- Messenger Chat plugin Code -->
    <div id="fb-root"></div>

    <!-- Your Chat plugin code -->
    <div id="fb-customer-chat" class="fb-customerchat"></div>

    <script>
      var chatbox = document.getElementById("fb-customer-chat");
      chatbox.setAttribute("page_id", "104126445907165");
      chatbox.setAttribute("attribution", "biz_inbox");
    </script>

    <!-- Your SDK code -->
    <script>
      window.fbAsyncInit = function () {
        FB.init({
          xfbml: true,
          version: "v15.0",
        });
      };

      (function (d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
        fjs.parentNode.insertBefore(js, fjs);
      })(document, "script", "facebook-jssdk");
    </script>
    <header class="header" data-header>
      <div class="container">
        <a href="#" class="logo">
          <img
            src="./assets/images/Logo.png"
            width="100"
            height="52"
            alt="cologic logo"
          />
        </a>

        <nav class="navbar" data-navbar>
          <p class="navbar-title">Main Menu</p>

          <ul class="navbar-list">
            <li class="navbar-item">
              <a href="index.html" class="navbar-link" data-nav-link>Home</a>
            </li>

            <li class="navbar-item">
              <a href="AboutUs.html" class="navbar-link" data-nav-link>About Us</a>
            </li>

            <li class="navbar-item">
              <a href="#home" class="navbar-link" data-nav-link>Works</a>
            </li>

            <li class="navbar-item">
              <a href="#blog" class="navbar-link" data-nav-link>Pricing</a>
            </li>
	          <li class="navbar-item">
              <a href="Contact.html" class="navbar-link" id="navbar-contact" data-nav-link>Contact Us</a>
            </li>
          </ul>
        </nav>

        <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
          <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
        </button>

        <a href="Contact.html" class="btn btn-primary">Contact Us</a>

        <div class="overlay" data-nav-toggler data-overlay></div>
      </div>
    </header>
        <!--
        - #HERO
      -->
          <br>
          <br>
          <br>
    <!--
        - OUR RECENT WORKS
      -->
            
               <!--  <div class="about-content"> -->
             
              <h1 class="section-title1">
                Our recent <span style="color:#ff6600;display: contents;">works</span>
              </h1>

              <p class="section-text2">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis at a feugiat egestas
              </p>
            
           
            <br>
            <br>
            <br>
	      <div class="works-img">
		    <img class = "Works1" src="./assets/images/img-works1.png"> <br>
		    <img class = "Works2" src="./assets/images/img-works2.png"> <br>
		    <img class = "Works3" src="./assets/images/img-works3.png">
		</div>

 <!--      <div class="works-content1">
	        	<img src="./assets/images/WORKS-1_13.png"
                width="800"
                align="right"
                style="position:relative;
                margin-top:265px;
                right:150px;
                width: 565px;
                height: 300px;
                border radius:20px;"
            />
            </div>
            
            <br>
            <div class="works-content2">
            <img src="./assets/images/WORKS-1_8.png"
                width="500"
                align="right"
                style="position:relative;
                margin-top:13px;
                right:245px;
                width: 565px;
                height: 456px;
                border radius:20px;"
            />
            <img src="./assets/images/WORKS-1_9.png"
                width="400"
                align="right"
                style="position:relative;
                margin-top:392px;
                right: -200px;
                width: 375px;
                height: 174px;
                border-radius: 20px;"
            />
            </div>

            <br>
            <div class="works-content3">
		    <img src="./assets/images/HOMEPAGE_5.png"
                width="250"
                align="right"
                style="position:relative;
                margin-top:0px;
                right:130px;
                width: 300px;
                height: 370px;
                border radius:20px;"
            />

            <img src="./assets/images/HOMEPAGE_6.png"
                width="500"
                align="right"
                style="position:relative;
                margin-top:35px;
                right:115px;
                width: 600px;
                height: 530px;
                border radius:20px;"
            />
	      </div>
            </div> -->
            <br>
            <br>
          <div>
                     <!--
        - #Let's Get Started
          -->
            <div class="container">
              <div class="letsgetstarted-container">
             <div class="container" style="text-align:center">
              <div class="title-wrapper">
               <div style="text-align:center">Ready to start your journey with us today?
            <h2 class="h2 section-title5">
             Let's get <span style="color:#ff6600;display: contents;">started!</span>
            </h2>
      	    <br>
      	    <button class="btn btn-secondary">BOOK A FREE CONSULTATION CALL</button>
                </div>
                </div>
              </div>
              <br>
              <br>
              </div>
             
               <!--
        - #FOOTER
          -->
          <div class = "footer">
            <a href="#" class="logo">
              <img
                src="./assets/images/Logo.png"
                width="100"
                height="52"
                alt="cologic logo"
              />
            </a>
  
            <a href = "#" class = "links">
            <i class="fa fa-envelope-o" aria-hidden="true" style = "font-size: 20px;"></i>
            <i class="fa fa-facebook" aria-hidden="true" style = "font-size: 20px;"></i>
            <i class="fa fa-linkedin-square" aria-hidden="true" style = "font-size: 20px;"></i></a>
          
   
          <hr>
  
          <p>© ALL RIGHTS RESERVED</p> <p style="text-align:right; margin-top: -30px;">DESIGNED & BUILT BY MYSELF</p>
  
          <br>
      </div>
        </div>
       </div>
        
	  <!--
    - custom js link
  -->
    <script src="./assets/js/script.js" defer></script>

    <!--
    - ionicon link
  -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>