AboutUs.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="#home" class="navbar-link" data-nav-link>About Us</a>
            </li>

            <li class="navbar-item">
              <a href="Works.html" 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
      -->
          <div class="container">
            <div class="hero-content">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

        <!--
        - #ABOUT
      -->

        <section class="section about" id="about" aria-label="about">
		  
            <div class="about-content">
              <h1 class="h1 title">
                Get to know <span class ="cologic-text" style="color:#ff6600;display: contents;">Cologic!</span>
              </h1> <br>
              <hr>
              <div class="container">
                
              <p class="section-text">
                Discover why our brand exists, what we can offer for your business, and a few intriguing truths hidden behind the screen.
              </p>
              <br>
              <!-- <a style = "margin-left:10px;" href ="#" class="btn btn-outline">More About Us</a> -->
            </div>
              <div class = "img-container">
              <figure class="ABOUT-US_6 has-shape">
                <img
                  src="./assets/images/ABOUT-US_6.png"
                  width="500"
                  height="611"
                  loading="lazy"
                  alt="ABOUT-US_6"
                  class="w-100"
                />
  
                <!-- <img
                  src="./assets/images/banner-shape.svg"
                  width="108"
                  height="86"
                  loading="lazy"
                  alt=""
                  class="shape"
                /> -->
              </figure>
            </div>
          </div>
          <div class="wrapper1">
            <div class="float-left">
              <h4 class="h4 section-title1">
                <p class = "number" style = "font-size: 20px; color:#ff6600;">①</p>
              <span style="color:#ff6600;display: contents;">Our Story</span> began a <br>long time ago when <br>we had a dream
              </h4>
              <p>
                To create a better world where the
                <br>people, not just the products or services
                <br>get noticed.
            </p>
            </div>
    
            <div class="float-center">
            </div>
    
            <div class ="float-right">
              <h4 class="h4 section-title1">
                <p class = "number" style = "font-size: 20px; color:#ff6600;">②</p>
              Our <span style="color:#ff6600;display: contents;">ALL IN ONE</span> Goal,<br> Mission and Vision is<br> simple
              </h4>
              <p class = "text-right" style="padding-left:50px;">
              To make your brand stand out from the crowd
              <br>so you can focus on what matters most:
              <br>running your business.
              </p>
            </div>
          </div>
          <div class="about-content">
            <div class = "why-img">
            <img src="./assets/images/ABOUT-US_3.png" style="max-width:100%;height:auto;">
          </div>
            </div>
          
           <div class = "why-title">
            <h4 class="h4 section-title1">
            Why Choose <span style="color:#ff6600;display: contents;">Cologic</span><br> and Listen to Us?
            </h4> </div>
            <br>
            <div class="row">
            <div class="column" style="float:left">
            <img src="./assets/images/check-mark-icon-free-png.png" style="width:30px; height:30px">
            </div>
            <div class="column">
            <p style="padding-left:50px;">
              We Always choose Value. We create with passion,<br> intelligence, and wonder, and we always aim for quality.
            </p>
            </div>
            </div>
            <br>
            <div class="row">
            <div class="column" style="float:left">
            <img src="./assets/images/check-mark-icon-free-png.png" style="width:30px; height:30px">
            </div>
            <div class="column">
            <p style="padding-left:50px;">
              Our time is as valuable to us as it is to our clients,<br> thus we strive to deliver results with speed.
            </p>
            </div>
            </div>
            <br>
            <div class="row">
            <div class="column" style="float:left">
            <img src="./assets/images/check-mark-icon-free-png.png" style="width:30px; height:30px">
            </div>
            <div class="column">
            <p style="padding-left:50px;">
               We personally walk you thru our tested systematized process<br> that combines methods in designs and marketing.
            </p>
            </div>
            </div>
      
  
             <div class="about-content3">
              <h1 class="h1 section-title2">Not sure what service <br> fits for your current <font color="white"> <br>Brand needs?</font><br></h1>
              <br>
              <p class="section-text3">Let's connect and get a <font color="white">FREE consultation,</font> audits and resources that will <br> surely help growing your business
                and establish online presence.</p>
                
              <br>
              <br>
              <form>
              <input form = "email" name = "" placeholder="Your Email Address">
              <button><i class="fa fa-envelope" aria-hidden="true" style = "font-size: 20px;"></i></button>
              </form>

	
              <img class="black-phone" src="./assets/images/ABOUT-US_7.png" width="600" height="800" style="margin-top:-200px">
                
	      </div>
	       </section>
	       </div>
	       <br>
	       <br>
	       <br>
	       <br>
	       <br>
	       <br>
	      <!--
        - #Let's Get Started
          -->
              <div class="letsgetstarted-container">
             <div class="container" style="text-align:center">
              <div class="title-wrapper">
               <div class = "text-ready" 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>
            
              
          <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>
     

               <!--
                  - 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>