NFT.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" />

    <!--
    - 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="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>
          </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>

<body>

       <!--
        - #HERO
      -->
      <div class="container">
        <div class="hero-content">
          <h1 class="h1 section-title" style = "white-space:nowrap; text-align:left">
            Tietra<span style="color: #224057;display: contents;"> Card</span>
          </h1>

          <p class="section-text" style="padding: 35px 0px 35px 0px; text-align:left" >
            Role / Services: <span style="color: #224057;display: contents;"> UI / UX Design</span>
          </p>
          

    <!--
    - #About
  -->
  <img style="border-radius: 20px; height: 100%; width: 100%; object-fit: contain"class="image1" src="./assets/images/nft_image.png" alt="Image">
    <section
      class="section service has-shape"
      id="services"
      aria-label="service">
      <div class="container">
        <div class="title-wrapper">
    <div class="service1" align="left">
      <h2 class="h2 section-title" style="text-align:left">
        <!-- --> Tietra <span style="color:#224057;display: contents;">Cards</span>&nbsp;
      </h2>
      &nbsp;
      <!-- First Paragraph -->
      <div class="column">
        <span class="column-1" style="font-weight: 500;font-size: 21px;line-height: 25px;letter-spacing: 0.14em;text-transform: uppercase;color:#121212;">Problem</span>
        </div>
      <p class="section-text" style="padding: 25px 0px 0px 0px; font-size:16px; text-align:left">
        A Filipino startup company decided to partner with us as they lack someone who can do the design for the NFT project they have on their plate.
        This partnership was a referral from another previous client since they have seen how we work together.
      </p>&nbsp;
      <!-- Second -->
      <div class="column">
        <span class="column-1" style="font-weight: 500;font-size: 21px;line-height: 25px;letter-spacing: 0.14em;text-transform: uppercase;color:#121212;">They had a page but the issue was:</span>
        </div>
      <p class="section-text" style="padding: 25px 0px 0px 0px; font-size:16px; text-align:left">
        The website does not follow a specific color palette identity 
        they describe it as a plain, long, and boring website there was no section for the contents
      </p>
          </div>
          
          <h2 class="h2 section-title" style="text-align:right">
            <img src="./assets/images/nft_about.png" alt="service icon" width="480" height="480">
          </h2>           
        </div>
</div></section>
 

    <!--
    - #Solution
  -->

    <section class="section solution" id="solution" aria-label="solution">
      <div class="container">
        <div class="title-wrapper">
           <div class="solution-content">
          <h1 class="h1 section-title2">Vulputate <font color="white">fringilla eget</font><br> quam nisi eu proin dui<br> nunc, scelerisque.</h1>
          <br>
          <p class="section-text3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis at a feugiat egestas<br> laoreet et nullam.
          Vulputate habitant fames gravida pulvinar et nascetur. Amet ut tellus<br> integer pellentesque varius tellus nam amet. </p>
    

          <img src="./assets/images/ABOUT-US_7.png" width="600" height="800" style="margin-top:-250px">
     
    </div>
    <br>
    <br>
    <br>
    <br>

</div>
</div>
</section>
</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>