Gallery

Showcase your latest works by creative professionals across industries.

Gallery #1

About Us

We always welcome keen to learn folks to our team

The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.

Learn More

HTML:

              
                <div class="container space-2 space-3--lg">
                  <div class="row justify-content-lg-between align-items-lg-center">
                    <div class="col-lg-5 mb-9 mb-lg-0">
                      <!-- Title -->
                      <div class="mb-5">
                        <span class="u-label u-label--sm u-label--purple mb-3">About Us</span>
                        <h2 class="h3">We always welcome keen to learn folks to our team</h2>
                        <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                        <p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                      </div>
                      <!-- End Title -->

                      <a class="btn btn-sm btn-primary" href="https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/">Learn More <span class="fa fa-angle-right ml-2"></span></a>
                    </div>

                    <div class="col-lg-6">
                      <!-- Cubeportfolio -->
                      <div class="cbp"
                           data-layout="mosaic"
                           data-animation="quicksand"
                           data-x-gap="15"
                           data-y-gap="15"
                           data-load-more-selector="#cubeLoadMore"
                           data-load-more-action="auto"
                           data-load-items-amount="4"
                           data-media-queries='[
                          {"width": 1500, "cols": 4},
                          {"width": 1100, "cols": 4},
                          {"width": 800, "cols": 3},
                          {"width": 480, "cols": 2},
                          {"width": 400, "cols": 2}
                      ]'>
                        <!-- Item -->
                        <div class="cbp-item">
                          <div class="cbp-caption">
                            <img src="../assets/img/380x227/img1.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="cbp-item">
                          <div class="cbp-caption">
                            <img src="../assets/img/380x360/img1.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="cbp-item">
                          <div class="cbp-caption">
                            <img src="../assets/img/380x360/img2.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Item -->

                        <!-- Item -->
                        <div class="cbp-item">
                          <div class="cbp-caption">
                            <img src="../assets/img/380x227/img2.jpg" alt="Image Description">
                          </div>
                        </div>
                        <!-- End Item -->
                      </div>
                      <!-- End Cubeportfolio -->
                    </div>
                  </div>
                </div>

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/cubeportfolio/css/cubeportfolio.min.css">

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.cubeportfolio.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of cubeportfolio
                  $.HSCore.components.HSCubeportfolio.init('.cbp');
                });
              </script>

Gallery #2

HTML:

              
                <!-- Images Carousel -->
                <div class="js-slick-carousel u-slick u-slick--gutters-3 mb-9"
                     data-infinite="true"
                     data-slides-show="1"
                     data-slides-scroll="1"
                     data-center-mode="true"
                     data-center-padding="200px"
                     data-pagi-classes="text-center u-slick__pagination mt-5 mb-0"
                     data-responsive='[{
                       "breakpoint": 992,
                       "settings": {
                         "centerPadding": "120px"
                       }
                     }, {
                       "breakpoint": 768,
                       "settings": {
                         "centerPadding": "80px"
                       }
                     }, {
                       "breakpoint": 554,
                       "settings": {
                         "centerPadding": "50px"
                       }
                     }]'>
                  <div class="js-slide my-3">
                    <img class="img-fluid" src="../assets/img/1200x600/img2.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide my-3">
                    <img class="img-fluid" src="../assets/img/1200x600/img3.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide my-3">
                    <img class="img-fluid" src="../assets/img/1200x600/img4.jpg" alt="Image Description">
                  </div>
                  <div class="js-slide my-3">
                    <img class="img-fluid" src="../assets/img/1200x600/img5.jpg" alt="Image Description">
                  </div>
                </div>
                <!-- End Images Carousel -->

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/slick-carousel/slick/slick.css">

JS library and initialization:

            
              <!-- JS Implementing Plugins -->
              <script src="assets/vendor/slick-carousel/slick/slick.js"></script>

              <!-- JS Implementing Plugins -->
              <script src="assets/js/components/hs.slick-carousel.js"></script>

              <!-- JS Plugins Init. -->
              <script>
                $(document).on('ready', function () {
                  // initialization of slick carousel
                  $.HSCore.components.HSSlickCarousel.init('.js-slick-carousel');
                });
              </script>