Directory - List

Component #1

  • 1
  • 1
  • 1
  • 1,428 sqft

This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park. The large hatch in the kitchen opens out to a light and open plan living space, perfect for...

                    
                      <!-- Property Item -->
                      <div class="border-bottom pb-5 mb-5">
                        <div class="row">
                          <div id="fancyboxGallery1" class="js-fancybox col-md-4 d-md-flex align-items-md-start flex-md-column mb-5 mb-md-0"
                               data-hs-fancybox-options='{
                                 "selector": "#fancyboxGallery1 .js-fancybox-item"
                               }'>
                            <!-- Gallery -->
                            <a class="js-fancybox-item media-viewer mb-3" href="javascript:;"
                               data-src="../assets/img/1920x1080/img12.jpg"
                               data-caption="Front in frames - image #01">
                              <img class="img-fluid w-100 rounded-lg" src="../assets/img/480x320/img19.jpg" alt="Image Description">

                              <div class="position-absolute top-0 left-0 p-4">
                                <span class="badge badge-success">New</span>
                              </div>

                              <div class="position-absolute bottom-0 right-0 pb-2 pr-2">
                                <span class="btn btn-xs btn-icon btn-light">
                                  <i class="fas fa-images"></i>
                                </span>
                              </div>
                            </a>

                            <img class="js-fancybox-item d-none" alt="Image Description"
                                 data-src="../assets/img/1920x1080/img11.jpg"
                                 data-caption="Front in frames - image #02">
                            <img class="js-fancybox-item d-none" alt="Image Description"
                                 data-src="../assets/img/1920x1080/img14.jpg"
                                 data-caption="Front in frames - image #03">
                            <!-- End Gallery -->
                          </div>

                          <div class="col-md-8">
                            <div class="row">
                              <div class="col-md-7">
                                <h3 class="mb-1">
                                  <a class="text-dark" href="#">Borrett Close, London</a>
                                </h3>
                              </div>
                              <div class="col-md-5 text-md-right">
                                <h3 class="mb-1">
                                  <a href="#">£689,000</a>
                                </h3>
                              </div>
                            </div>
                            <!-- End Row -->

                            <!-- Location -->
                            <div class="mb-3">
                              <a class="font-size-1 text-body" href="#">
                                <i class="fas fa-map-marker-alt mr-1"></i>
                                Borrett Close, London SE17
                              </a>
                            </div>
                            <!-- End Location -->

                            <!-- Icon Blocks -->
                            <ul class="list-inline list-separator font-size-1 mb-3">
                              <li class="list-inline-item">
                                <i class="fas fa-bed text-muted mr-1"></i> 1
                              </li>
                              <li class="list-inline-item">
                                <i class="fas fa-bath text-muted mr-1"></i> 1
                              </li>
                              <li class="list-inline-item">
                                <i class="fas fa-couch text-muted mr-1"></i> 1
                              </li>
                              <li class="list-inline-item">
                                <i class="fas fa-ruler-combined text-muted mr-1"></i> 1,428 sqft
                              </li>
                            </ul>
                            <!-- End Icon Blocks -->

                            <p class="font-size-1">This superb one bedroom flat rests a stones throw from Kennington tube station and Elephant and Castle train station as well as the leafy Paisley Park. The large hatch in the kitchen opens out to a light and open plan living space, perfect for...</p>

                            <div class="row align-items-center">
                              <div class="col-lg mb-2 mb-lg-0">
                                <!-- Media -->
                                <div class="media align-items-center mt-auto">
                                  <div class="avatar avatar-xs avatar-circle mr-2">
                                    <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description" title="Monica Fox">
                                  </div>
                                  <div class="media-body">
                                    <small class="d-block text-muted">Listed on Jan 4, 2019 by</small>
                                    <a class="text-dark" href="#">Monica Fox</a>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </div>

                              <div class="col-lg-auto">
                                <!-- Contacts -->
                                <div class="font-size-1">
                                  <a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
                                    <i class="fas fa-phone mr-1"></i> (0161) 347 8854
                                  </a>
                                  <a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
                                    <i class="fas fa-envelope mr-1"></i> Contact
                                  </a>
                                  <a class="d-inline-block text-body mb-2 mr-4" href="javascript:;">
                                    <i class="fas fa-star mr-1"></i> Save
                                  </a>
                                </div>
                                <!-- End Contacts -->
                              </div>
                            </div>
                            <!-- End Row -->
                          </div>
                        </div>
                      </div>
                      <!-- End Property Item -->
                    
                  
                    
                      <!-- CSS Implementing Plugins -->
                      <link rel="stylesheet" href="../node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css">

                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>

                      <!-- JSFront -->
                      <script src="./assets/js/hs.fancybox.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF FANCYBOX
                          // =======================================================
                          $('.js-fancybox').each(function () {
                            var fancybox = $.HSCore.components.HSFancyBox.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

$125k-$135k yearly Remote
                    
                      <!-- Card -->
                      <div class="card card-bordered card-hover-shadow mb-5">
                        <div class="card-body">
                          <!-- Media -->
                          <div class="d-sm-flex">
                            <div class="media align-items-center align-items-sm-start mb-3">
                              <img class="avatar avatar-sm mr-3" src="../assets/svg/brands/mailchimp.svg" alt="Image Description">
                              <div class="media-body d-sm-none">
                                <h6 class="mb-0">
                                  <a class="text-dark" href="employer.html">Mailchimp</a>
                                  <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                                </h6>
                              </div>
                            </div>
                            
                            <div class="media-body">
                              <div class="row">
                                <div class="col col-md-8">
                                  <h3 class="mb-0">
                                    <a class="text-dark" href="job-overview.html">Senior B2B sales consultant</a>
                                  </h3>
                                  <div class="d-none d-sm-inline-block">
                                    <h6 class="mb-0">
                                      <a class="text-dark" href="employer.html">Mailchimp</a>
                                      <img class="avatar avatar-xss ml-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Review rating" data-toggle="tooltip" data-placement="top" title="Claimed profile">
                                    </h6>
                                  </div>
                                </div>

                                <div class="col-auto order-md-3">
                                  <!-- Checkbbox Bookmark -->
                                  <div class="custom-control custom-checkbox-bookmark">
                                    <input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
                                    <label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
                                      <span class="custom-checkbox-bookmark-default" data-toggle="tooltip" data-placement="top" title="Save this job">
                                        <i class="far fa-star"></i>
                                      </span>
                                      <span class="custom-checkbox-bookmark-active" data-toggle="tooltip" data-placement="top" title="Saved">
                                        <i class="fas fa-star"></i>
                                      </span>
                                    </label>
                                  </div>
                                  <!-- End Checkbbox Bookmark -->
                                </div>

                                <div class="col-12 col-md mt-3 mt-md-0">
                                  <span class="d-block font-size-1 text-body mb-1">$125k-$135k yearly</span>

                                  <span class="badge badge-soft-info mr-2">
                                    <span class="legend-indicator bg-info"></span>Remote
                                  </span>
                                </div>
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>

                        <div class="card-footer">
                          <ul class="list-inline list-separator small text-body">
                            <li class="list-inline-item">Posted 7 hours ago</li>
                            <li class="list-inline-item">Oxford</li>
                            <li class="list-inline-item">Full time</li>
                          </ul>
                        </div>
                      </div>
                      <!-- End Card -->
                    
                  

Component #3

                    
                      <div class="row mx-n2">
                        <div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img28.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">London, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>

                        <div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img8.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">Bristol, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>

                        <div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img29.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">Oxford, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>

                        <div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img11.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">Edinburgh, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>

                        <div class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img10.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">Newcastle, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>

                        <div id="pageHeaderTabEndPoint" class="col-12 col-sm-6 col-lg-3 px-2 mb-3">
                          <!-- Card -->
                          <a class="card card-bordered card-hover-shadow h-100" href="#">
                            <div class="card-body">
                              <div class="media align-items-center">
                                <img class="avatar avatar-sm avatar-circle mr-3" src="../assets/img/480x320/img9.jpg" alt="SVG">

                                <div class="media-body">
                                  <h5 class="text-hover-primary mb-0">Liverpool, UK</h5>
                                </div>

                                <div class="align-self-center text-muted text-hover-primary pl-2 ml-auto">
                                  <i class="fas fa-angle-right"></i>
                                </div>
                              </div>
                            </div>
                          </a>
                          <!-- End Card -->
                        </div>
                      </div>
                      <!-- End Row -->