index.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" />
  <title>Homepage| ACES opensource | Easily build your Webpages</title>
  <link rel="stylesheet" href="assets/css/home.css" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <link rel="shortcut icon" type="image/x-icon" href="assets/img/brand_kwickerhub/g83.png" />
  <!-- fontawesome cdn -->
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

  <!-- slider -->
  <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
</head>

<body>
  <div class="row">
    <div class="col-md-12">
      <!-- <div class="container"> -->
      <nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
        <div class="container headerNav">
          <a class="navbar-brand logo" href="https://kwickerhub.com/"><img
              src="assets/img/brand_kwickerhub/kwickerhub.png" /></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- making this section no longer visible -->
            <ul style="visibility: hidden" class="navbar-nav mx-auto mb-2 mb-lg-0">
              <li class="nav-item dropdown me-3 active" aria-current="page">
                <a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  Templates
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li>
                    <a class="dropdown-item" href="#">Another action</a>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item me-3">
                <a class="nav-link text-white" href="#">Pricing</a>
              </li>
              <li class="nav-item me-3">
                <a class="nav-link text-white" href="#">Enterprises</a>
              </li>

              <li class="nav-item me-3">
                <a class="nav-link text-white" href="#">Jobs</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link text-white dropdown-toggle" href="#" id="navbarDropdown" role="button"
                  data-bs-toggle="dropdown" aria-expanded="false">
                  More
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li>
                    <a class="dropdown-item" href="#">Another action</a>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </li>
                </ul>
              </li>
            </ul>
            <div class="d-flex">
              <a href="pages/login.html"><button class="btn me-2" id="white-btn">Log in</button></a>
              <a href="pages/signup.html"><button class="btn" id="blue-btn">Sign up</button></a>
            </div>
          </div>
        </div>
      </nav>
      <!-- </div> -->
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="banner w-100 vh-100">
        <div class="container">
          <div
            class="text-white text-content d-flex flex-column align-items-start align-self-center justify-content-start">
            <h1 class="bannar-heading text-start">DESIGN. DEVELOP.</h1>
            <p class="banner-p text-start">
              We can help make your idea come alive. You can design complex
              UI/UX designs with little or no knowledge. You can also
              build/develope Sites, Web Apps, Mobile Apps with little
              technical skills. Come build 'Kwicker'
            </p>
            <div>
              <a href="pages/dashboard.html">
                <button class="banner-btn">
                  Explore<span class="ms-3 mt-5"><i class="fa fa-sign-in-alt"></i></span>
                </button>
              </a>
            </div>
            <br />
            <br />
          </div>
        </div>
      </div>
    </div>
  </div>

  <br />
  <br />
  <br />
  <div class="row">
    <div class="col-md-12">
      <div class="container">
        <div class="section-one">
          <div class="text-center">
            <p class="p-1">Design and Develop</p>
            <p class="p-2">
              We are bridging the gap between Frontend developers and
              designers. You can easily convert your idea into lines of code.
            </p>
          </div>
        </div>
        <div>
          <img class="img-fluid w-100 vh-30" src="assets/img/hubpeople.png" alt="People in KwickerHub" />
        </div>
      </div>
    </div>
  </div>
  <div class="section-two">
    <div class="container">
      <div class="text-center">
        <p class="p-1">
          Over 250,000 people & companies will make millions of apps with
          Kwicker
        </p>
      </div>
      <div class="text-center mt-5">
        <div class="row">
          <div class="col-md-3">
            <p class="p-2 text-center">GitHub</p>
          </div>
          <div class="col-md-2">
            <p class="p-2 text-center">A1in1</p>
          </div>
          <div class="col-md-2">
            <p class="p-2 text-center">RootHub</p>
          </div>
          <div class="col-md-2">
            <p class="p-2 text-center">ZOOM</p>
          </div>
          <div class="col-md-3">
            <p class="p-2 text-center">Public</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-three">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="image-one">
            <img class="img-fluid" style="background-color: #fff" src="assets/img/kwickerhub_collaborate.jpg"
              alt="image" />
          </div>
        </div>
        <div class="col-md-6">
          <div class="testimony">
            <p class="testimony-text">
              “<span class="testimony-coloured-1">Kwicker makes you faster in devlopment</span><br />
              it is easy to use and in very few minutes, people can easily
              create amazing web-Applications.”
            </p>
            <div class="d-flex">
              <img height="40px" width="55px" class="img-fluid rounded-circle" src="assets/img/profile_icon2.png"
                alt="woman image" />
              <p class="testimony-person">Ntem, Kenyor, A1in1 Companies</p>
            </div>
          </div>
          <div class="testimony">
            <p class="testimony-text">
              “<span class="testimony-coloured-2">We were amazed at how easy it was to make our app</span><br />
              in a few hours without knowing how to code, this App has
              increased our workflow..”
            </p>
            <div class="d-flex">
              <img height="40px" width="55px" class="img-fluid rounded-circle" src="assets/img/Ellipse (7).png"
                alt="woman image" />
              <p class="testimony-person">
                Kelly Consuegra, Marves Industries
              </p>
            </div>
          </div>
          <div class="testimony">
            <p class="testimony-text">
              “<span class="testimony-coloured-3">
                It is a tool worth relating with </span><br />
              It just helps me increase my efficiency.”
            </p>
            <div class="d-flex">
              <img height="40px" width="55px" class="img-fluid rounded-circle" src="assets/img/Ellipse (6).png"
                alt="woman image" />
              <p class="testimony-person">Icogrowser, Roynek-T Industries</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="section-four">
    <div class="container">
      <div class="box">
        <div class="m-5 box-sub">
          <div class="row">
            <div class="col-md-6">
              <p class="testimony-coloured-1 box-p">Faster Build</p>
              <h2 class="box-p2">Building is now faster</h2>
              <p class="box-p3">
                You can convert your idea into computer programs and lines of
                code.
              </p>
            </div>
            <div class="col-md-6">
              <!-- <img class="img-fluid" src="assets/img/kwickerhub_maintain.png" alt=""> -->
              <img class="img-fluid" src="assets/img/kwickerhub_maintain.png" alt="" />
            </div>
          </div>
        </div>
        <div class="m-5 box-sub">
          <div class="row">
            <div class="col-md-6">
              <img class="img-fluid"
                src="assets/img/163-1631766_unique-and-responsive-designs-responsive-web-design-mockup 1.png" alt="" />
            </div>
            <div class="col-md-6">
              <p class="testimony-coloured-2 box-p">Build with ease</p>
              <h2 class="box-p2">Different Screen-Sizes</h2>
              <p class="box-p3">
                Manage different screen resolutions with Kwicker and make your
                design work more interesting
              </p>
            </div>
          </div>
        </div>
        <div class="m-5 box-sub">
          <div class="row">
            <div class="col-md-6">
              <p class="testimony-coloured-3 box-p">Stay connected</p>
              <h2 class="box-p2">Interact and Connect</h2>
              <p class="box-p3">
                You can make co-workers and collaborate with another person on
                your project. Your work is private and secured other wise you
                chooze to share your product link.
              </p>
            </div>
            <div class="col-md-6">
              <img class="img-fluid" src="assets/img/windows-FUGfBZDQOwI-unsplash 1.png" alt="" />
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <footer class="py-5">
          <div class="row">
            <div class="col-6 col-md-2 mb-3">
              <h5>Navigation</h5>
              <ul class="nav flex-column">
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
              </ul>
            </div>

            <div class="col-6 col-md-2 mb-3">
              <h5>Features</h5>
              <ul class="nav flex-column">
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Projects</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Team</a></li>
              </ul>
            </div>

            <div class="col-6 col-md-2 mb-3">
              <h5>Support</h5>
              <ul class="nav flex-column">
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Contact</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQ</a></li>
                <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Customer Care</a></li>
              </ul>
            </div>

            <div class="col-md-5 offset-md-1 mb-3">
              <form>
                <h5>Subscribe to our newsletter</h5>
                <p>Monthly digest of what's new and exciting from us.</p>
                <div class="d-flex flex-column flex-sm-row w-100 gap-2">
                  <label for="newsletter1" class="visually-hidden">Email address</label>
                  <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
                  <button class="btn btn-primary" type="button">Subscribe</button>
                </div>
              </form>
            </div>
          </div>

          <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
            <p>© 2022 Kwicker, Inc. All rights reserved.</p>
            <ul class="list-unstyled d-flex">
              <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24">
                    <use xlink:href="#twitter"></use>
                  </svg></a></li>
              <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24">
                    <use xlink:href="#instagram"></use>
                  </svg></a></li>
              <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24">
                    <use xlink:href="#facebook"></use>
                  </svg></a></li>
            </ul>
          </div>
        </footer>
      </div>
    </div>
  </div>

  <!-- Option 1: Bootstrap Bundle with Popper a -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
    integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
    integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
    crossorigin="anonymous"></script>

  <script>
    var nav = document.querySelector("nav");
    window.addEventListener("scroll", function () {
      if (window.pageYOffset > 100) {
        nav.classList.add("bg-dark", "shadow");
      } else {
        nav.classList.remove("bg-dark", "shadow");
      }
    });
  </script>
  <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>

</html>