index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="./css/lightbox.min.css" />
    <link rel="stylesheet" href="./css/utilities.css" />
    <link rel="stylesheet" href="./css/styles.css" />
    <title>KodeLedger</title>
  </head>
  <body id="home">
    <!-- navbar and hero -->
    <header class="hero">
      <div id="navbar" class="navbar top">
        <h1 class="logo">
          <span class="text-primary"><i class="fas fa-book-open"></i> Kode</span
          >Ledger
        </h1>
        <nav>
          <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#cases">Cases</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="content">
        <h1>The Sky is the Limit</h1>
        <p>We Provide World Class Financial Assistance</p>
        <a href="#about" class="btn">
          <i class="fas fa-chevron-right"></i> Read More</a
        >
      </div>
    </header>
    <main>
      <!-- About Icons -->
      <section id="about" class="icons bg-light">
        <div class="flex-items">
          <div>
            <i class="fas fa-university fa-2x"></i>
            <div><h3>Investment Banking</h3></div>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum,
              soluta.
            </p>
          </div>
          <div>
            <i class="fas fa-book-reader fa-2x"></i>
            <div><h3>Portfolio Manager</h3></div>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum,
              soluta.
            </p>
          </div>
          <div>
            <i class="fas fa-pencil-alt fa-2x"></i>
            <div><h3>Tax and Custodial</h3></div>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum,
              soluta.
            </p>
          </div>
        </div>
      </section>
      <!-- About Solutions  -->
      <section class="solutions flex-columns">
        <div class="row">
          <div class="column">
            <div class="column-1">
              <img
                src="./images/home/people.jpg"
                alt="Companies People or Employee"
              />
            </div>
          </div>
          <div class="column">
            <div class="column-2 bg-primary">
              <h4>What are you looking for</h4>
              <h2>We provide bespoke solutions</h2>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Accusamus voluptate illum molestiae culpa quaerat at.
              </p>
              <a href="#" class="btn btn-outline">
                <i class="fas fa-chevron-right"></i> Read More
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Cases Section -->
      <section id="cases" class="cases flex-grid section-padding">
        <header class="section-header">
          <h4>This is what we do</h4>
          <h2>Business Cases</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis,
            necessitatibus!
          </p>
        </header>
        <div class="row">
          <div class="column">
            <a
              href="./images/cases/cases1.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases1.jpg" alt="Case1"
            /></a>
            <a
              href="./images/cases/cases2.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases2.jpg" alt="Case2" />
            </a>
          </div>
          <div class="column">
            <a
              href="./images/cases/cases3.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases3.jpg" alt="Case3" />
            </a>
            <a
              href="./images/cases/cases4.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases4.jpg" alt="Case4"
            /></a>
          </div>
          <div class="column">
            <a
              href="./images/cases/cases5.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases5.jpg" alt="Case5" />
            </a>
            <a
              href="./images/cases/cases6.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases6.jpg" alt="Case6"
            /></a>
          </div>
          <div class="column">
            <a
              href="./images/cases/cases7.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases7.jpg" alt="Case7"
            /></a>
            <a
              href="./images/cases/cases3.jpg"
              data-lightbox="cases"
              data-title="Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ullam, sequi!"
            >
              <img src="./images/cases/cases3.jpg" alt="Case3"
            /></a>
          </div>
        </div>
      </section>

      <!-- Blog Section -->
      <section id="blog" class="blog flex-columns flex-reverse">
        <div class="row">
          <div class="column">
            <div class="column-1">
              <img src="./images/home/blog.jpg" alt="Blog image" />
            </div>
          </div>
          <div class="column">
            <div class="column-2 bg-secondary">
              <h4>June 11, 2024</h4>
              <h2>Blog Post One</h2>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Accusamus voluptate illum molestiae culpa quaerat at.
              </p>
              <a href="blog.html" class="btn btn-outline">
                <i class="fas fa-chevron-right"></i> Read Our Blog
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- Team Section -->
      <section id="team" class="team section-padding">
        <header class="section-header">
          <h4>Who we are</h4>
          <h2>Our Professional Team</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. In, vel.
          </p>
        </header>
        <div class="flex-items">
          <div>
            <img src="./images/team/person1.jpg" alt="person1" />
            <h4>Alden Rye</h4>
            <p>President & CEO</p>
          </div>
          <div>
            <img src="./images/team/person2.jpg" alt="person2" />
            <h4>Catrice Dominique</h4>
            <p>VP for Operation</p>
          </div>
          <div>
            <img src="./images/team/person3.jpg" alt="person3" />
            <h4>Benjamin Cruz</h4>
            <p>Chief Technology Officer</p>
          </div>
        </div>
      </section>

      <!-- Contact Section -->
      <section id="contact" class="contact flex-columns">
        <div class="row">
          <div class="column">
            <div class="column-1">
              <img src="./images/home/contact.jpg" alt="Contact Us Image" />
            </div>
          </div>
          <div class="column">
            <div class="column-2 bg-light">
              <h2>Request Callback</h2>
              <form action="process.php" class="callback-form">
                <div class="form-control">
                  <label for="name"></label>
                  <input
                    type="text"
                    name="name"
                    id="name"
                    placeholder="Enter name"
                  />
                </div>
                <div class="form-control">
                  <label for="phone"></label>
                  <input
                    type="text"
                    name="phone"
                    id="phone"
                    placeholder="Enter phone number"
                  />
                </div>
                <input type="submit" value="Send" id="submit" class="btn" />
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- Footer -->
    <footer class="footer bg-dark">
      <div class="social">
        <a href="#"><i class="fab fa-facebook fa-2x"></i></a>
        <a href="#"><i class="fab fa-x-twitter fa-2x"></i></a>
        <a href="#"><i class="fab fa-youtube fa-2x"></i></a>
        <a href="#"><i class="fab fa-linkedin fa-2x"></i></a>
      </div>
      <p>Copyright &copy; 2024 KodeLedger WD103P</p>
    </footer>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
      integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="./js/lightbox.min.js"></script>

    <script>
      const navbar = document.getElementById("navbar");
      let scrolled = false;

      window.onscroll = function () {
        if (window.pageYOffset > 100) {
          navbar.classList.remove("top");
          if (!scrolled) {
            navbar.style.transform = "translateY(-70px)";
          }

          setTimeout(function () {
            navbar.style.transform = "translateY(0)";
            scrolled = true;
          }, 200);
        } else {
          navbar.classList.add("top");
          scrolled = false;
        }
      };

      // Smooth Scrolling
      $("#navbar a, .btn").on("click", function (e) {
        if (this.hash !== "") {
          e.preventDefault();

          const hash = this.hash;

          $("html, body").animate(
            {
              scrollTop: $(hash).offset().top - 100,
            },
            800
          );
        }
      });
    </script>
  </body>
</html>