index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />

    <title>Sealk</title>

<!--Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  </head>

  <body>
    <section class="colored-section" id="title">
      
        <!-- Nav Bar -->
        <nav class="navbar navbar-expand-lg navbar-dark">
          <div class="container-fluid">
            <a class="navbar-brand" href="#"
              ><img class="logo-nav" src="images/sealk-logo2.png" alt=""
            width="40" class="d-inline-block align-text-top"/>Sealk</a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNav"
              aria-controls="navbarNav"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                  <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Our Solutions</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Team</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>

      <!-- Title -->
      <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h1 class="big-heading">Sustainable fashion starts with supply chain transparency</h1>
          <p>Sealk is the digital platform that allows end-to-end supply chain traceability for the fashion industry</p>
          <button type="button" class="btn btn-outline-light btn-lg signin-button"># for the Beta version - Free</button>
        </div>
        <div class="col-lg-12 text-center">
          <img class="logo-title" src="images/sealk-logo2.png" alt="sealk-logo">
        </div>
      </div>

    </div>
    </section>

      <!-- Features -->

  <section class="white-section" id="features">

    <div class="container-fluid">
      <h1 class="sections-heading">Our Missions and Values</h1>

      <div class="row">
        <div class="feature-box col-lg-4">
          <i class="icon fas fa-check-circle fa-4x"></i>
          <h3 class="feature-title">Viverra vitae</h3>
          <p>Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Arcu felis bibendum ut tristique et.</p>
        </div>

        <div class="feature-box col-lg-4">
          <i class="icon fas fa-bullseye fa-4x"></i>
          <h3 class="feature-title">Congue eu consequat</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="feature-box col-lg-4">
          <i class="icon fas fa-tshirt fa-4x"></i>
          <h3 class="feature-title">Ac felis donec</h3>
          <p>Convallis a cras semper auctor neque vitae tempus. Sociis natoque penatibus et magnis dis parturient montes nascetur.</p>
        </div>
      </div>

    </div>

  </section>

   <!--Jumbotron-->

   <div class="jumbotron text-center">
    <h1 class="sections-heading">Discover Our Solutions</h1>
    <div class="d-grid gap-2">
      <button type="button" class="btn btn-outline-light btn-lg col-6 mx-auto">Read More</button>
    </div>
    
  </div>
 
  <!-- Call to Action -->

  <section class="colored-section" id="cta">

    <div class="container-fluid">

      <h3 class="big-heading">Join us now</h3>
      <button type="button" class="btn btn-outline-light btn-lg signin-button"># for the Beta version - Free</button>

    </div>

  </section>

  <!-- Footer -->

  <footer class="white-section" id="footer">

    <div class="container-fluid">

    <i class="social-icon fab fa-twitter"></i>
    <i class="social-icon fab fa-facebook-f"></i>
    <i class="social-icon fab fa-instagram"></i>
    <i class="social-icon fas fa-envelope"></i>
    <p>© Copyright 2021 Sealk</p>

    </div>

  </footer>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    ></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->
  </body>
</html>