CodePen Embed - Alpinejs

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

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css" />

    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lora:400,700|Nunito:400,700"
      rel="stylesheet"
    />
    <script
      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.8/dist/alpine.js"
      defer
    ></script>
    <script
      defer
      src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
    ></script>

    <link
      href="images/favicon_32.ico"
      rel="shortcut icon"
      type="image/x-icon"
    />
    <link href="images/favicon_256.ico" rel="apple-touch-icon" />
  </head>
  <body
    x-data="images()"
    x-init="fetch('https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=yellow+flowers&image_type=photo')
.then(response => response.json())
.then(response => { images = response.hits })"
  >
    <!-- Header section -->
    <header class="navigation">
      <div class="container navigation-content">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="index.html"
            ><img
              src="https://godwinekuma.github.io/we-connect/images/logo-white.svg"
              alt="weconnect logo"
              height="50"
              class="navbar-brand-image"
            />
            PictureGram</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
        </nav>
      </div>
    </header>
    <!-- Header section /-->

    <!-- Hero Section -->
    <div>
      <section class="hero">
        <div class="container">
          <div class="d-flex flex-column align-items-center">
            <h1 class="display-4" style="text-align:center; color:white">
              Search for images.
            </h1>
            <h2 class="" style="text-align:center; color:white">
              Pixel perfect images can be found here.
            </h2>
            <div class="input-group">
              <input
                type="text"
                class="form-control"
                placeholder="search images"
                x-model="q"
                aria-label="Text input with segmented dropdown button"
              />
              <select class="custom-select" x-model="image_type">
                <option selected>choose image type</option>
                <option value="all">All</option>
                <option value="photo">Photo</option>
                <option value="illustration">Illustration</option>
                <option value="vector">Vector</option>
              </select>
              <div class="input-group-append">
                <button
                  class="btn btn-primary"
                  type="button"
                  x-on:click="getImages()"
                >
                  Search
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="photos" class="my-5">
        <template x-for="image in images" :key="image.id">
          <img x-bind:src="image.webformatURL" alt="image.tags[0]" />
        </template>
      </section>
    </div>
    <script>
      function images() {
        return {
          images: [],
          q: "",
          image_type: "",
          getImages: async function() {
            console.log("params", this.q, this.image_type);
            const response = await fetch(
              `https://pixabay.com/api/?key=15819227-ef2d84d1681b9442aaa9755b8&q=${
                this.q
              }&image_type=${this.image_type}`
            );
            const data = await response.json();
            this.images = data.hits;
          }
        };
      }
    </script>
  </body>
</html>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Nunito", sans-serif;
}
h1 {
  font-size: 66px;
  color: #fff;
  margin-bottom: 26px;
}
h2 {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0;
  line-height: 46px;
  margin-bottom: 54px;
}
p,
a,
span {
  font-family: "Lora", serif;
}
a:hover {
  text-decoration: none;
}
.navigation {
  position: absolute;
  width: 100%;
}
.business-navigation {
  background-color: #0078d7;
}
.navbar-brand {
  color: #fff !important;
  font-weight: 700;
}
.nav-color {
  color: #0078d7 !important;
}
.sign-in-link {
  color: #fff !important;
  font-size: 18px;
}
.sign-up-link {
  background-color: #0078d7;
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
  padding: 10px 10px 10px;
  text-align: center;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  cursor: pointer;
}
.business-sign-up-link {
  background-color: #fff;
  color: #0078d7;
  font-size: 18px;
  letter-spacing: 0;
  padding: 10px 10px 10px;
  text-align: center;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  cursor: pointer;
}
.hero {
  background-color: #0078d7;
  background-image: url("https://godwinekuma.github.io/we-connect/images/hero_banner.jpg");
  background-position: center center;
  background-size: cover;
  padding: 100px 0 150px;
}

.search-bar {
  padding: 11px 15px;
  width: 300px;
  border: none;
  outline: none;
}
.business-search-bar {
  padding: 11px 15px;
  border: none;
  outline: none;
}

.search-submit {
  display: inline-block;
  background-color: #fff;
  color: #0078d7;
  text-align: center;
  width: 60px;
  padding: 11px 15px;
}
.mobile-search-submit {
  display: inline-block;
  background-color: #fff;
  color: #0078d7;
  text-align: center;
  padding: 11px 15px;
}

.primary-heading {
  color: #0078d7;
  text-align: center;
  font-size: 45px;
}
.sign-in {
  min-height: 100vh;
  width: 100%;
  background-color: #0078d7;
  padding: 7.5% 0 7.5% 0;
}
.sign-up {
  min-height: 100vh;
  width: 100%;
  background-color: #0078d7;
  padding: 2% 0 7.5% 0;
}
.sign-up .home-link,
.sign-in .home-link {
  margin-bottom: 20px;
}
.sign-up-form,
.sign-in-form {
  background-color: #fff;
  padding: 25px;
  width: 400px;
}
.form-control {
  border-radius: 0px !important;
  outline: none;
}

.dashboard-navigation {
  width: 15%;
  background-color: #0078d7;
  color: #fff;
  position: fixed;
  height: 100vh;
}
.dashboard-navigation .nav-link {
  padding: 25px 15px;
  color: rgba(255, 255, 255, 0.8);
}
.dashboard-navigation .nav-link:hover {
  color: #fff;
  border-left: 2px solid #fff;
}
.dashboard-navigation .nav-link:active {
  color: #fff;
  border-left: 2px solid #fff;
}
.dashboard-main {
  width: 85%;
  margin-left: 15%;
  color: #333b4d;
}
.open-menu {
  display: none;
}
.navbar-profile-image {
  height: 30px;
  width: 30px;
}
.dashboard-main-content {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.dashboard-reviews {
  background-color: #fff;
}
.card {
  border-radius: 0px !important;
}
.card-name {
  color: #0078d7;
  font-size: 0.8rem;
}
.card-title {
  font-size: 0.9rem;
}
.card-text {
  font-size: 1rem;
}
.business-contact-details {
  background-color: #0078d7;
}
.business-contact-details p {
  color: #fff !important;
}
.business-contact-heading {
  color: #fff !important;
}
.profile-summary {
  position: relative;
  min-height: 300px;
  padding-left: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
}
.profile-summary-content {
  bottom: 10px;
  position: absolute;
  left: 0;
  right: 0;
}
.company-logo {
  border-radius: 4px;
}
.profile-tabs .nav-item {
  border: none;
  margin-right: 0px;
  padding: 15px 30px;
  letter-spacing: 0.2px;
  background-color: #eee;
  font-weight: bold;
  cursor: pointer;
  border-radius: 0;
  text-align: center;
  color: #333b4d;
}
.user-profile-content input,
.user-profile-content select,
.user-profile-content textarea,
.tab-pane input,
.tab-pane textarea {
  background-color: #eee !important;
}
.btn {
  border-radius: 0px;
}
.business-listing {
  background-color: #f5f5f5;
}
.particular-business {
  height: 200px;
}
.particular-details {
  background-color: #fff;
  overflow: hidden;
}
.particular-details a {
  color: #0078d7 !important;
}
.particular-image {
  object-fit: cover;
}
.mobile-search-form {
  height: 300px;
  display: none;
}
.visible-search {
  display: block !important;
  background-color: #0078d7;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.body-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.close-button {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #fff !important;
}
.business-details-heading {
  color: #0078d7 !important;
}
.index-mobile-search-submit {
  display: none !important;
}
.nav-tabs .active {
  color: #fff !important;
  background-color: #0078d7 !important;
}

@media (max-width: 768px) {
  .sign-up-form,
  .sign-in-form {
    width: 300px;
  }
  .dashboard-navigation {
    width: 50%;
    display: none;
  }
  .dashboard-main {
    width: 100%;
    margin-left: 0px;
  }
  .dashboard-reviews {
    margin-left: 0px !important;
  }
  .company-name {
    display: none;
  }
  .dashboardNav {
    display: block;
  }
  .dashboardContent {
    margin-left: 50%;
  }
  .open-menu {
    display: inline-block;
  }
  .particular-image {
    width: 35% !important;
  }
  .particular-details {
    width: 65% !important;
  }
  .particular-details p {
    display: none;
  }
  .business-search-form {
    margin-left: 0px !important;
  }
  .business-search-form .search-bar {
    display: none;
  }
  .navbar-brand {
    font-size: 15px !important;
  }
  .navbar-brand-image {
    height: 25px;
  }
  .navbar-toggler {
    background-color: #fff !important;
  }
  .sign-up-nav {
    margin-top: 10px;
  }
  .index-mobile-search-submit {
    display: inline-block !important;
  }
  .search-submit {
    display: inline-block;
    background-color: #fff;
    color: #0078d7;
    text-align: center;
    width: 35px;
    padding: 5px;
    margin-left: -20px;
  }
  .profile-tabs .nav-item {
    width: 100% !important;
  }
  .business-contact-details {
    padding: 5px;
  }
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;

  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 10px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}
@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}
@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}
@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

This Pen is owned by Godwin Ekuma on CodePen.

See more by @godwinekuma on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.