<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js"></script> <section class="projects-section"> <div class="outer-container"> <div class="projects-carousel owl-carousel owl-theme"> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/1.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/2.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/3.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/4.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/5.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/6.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> <div class="project-block"> <div class="inner-box"> <div class="image"> <img src="http://steelthemes.com/demo/html/consoul/images/gallery/7.jpg" alt="" /> <div class="overlay-box"> <div class="overlay-inner"> <div class="title">Financial Planning</div> <h3><a href="project-single.html">Capital Management</a></h3> </div> </div> </div> </div> </div> </div> </div> </section>

.projects-section{ position:relative; padding-top:90px; } .projects-section .owl-carousel .owl-stage-outer{ padding:20px 0px; } .projects-section .outer-container{ position:relative; padding:0px 50px; } .projects-section .outer-container .owl-dots{ display:none; } .projects-section .outer-container .owl-nav{ position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:-1; } .projects-section .outer-container .owl-nav .owl-prev{ position:absolute; content:''; left:-50px; top:20px; color:#ffffff; width:50px; bottom:20px; font-size:24px; text-align:center; background-color:#161a33; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .projects-section .outer-container .owl-nav .owl-prev span{ top:50%; position:relative; } .projects-section .outer-container .owl-nav .owl-next{ position:absolute; content:''; right:-50px; top:20px; color:#ffffff; width:50px; bottom:20px; font-size:24px; text-align:center; background-color:#161a33; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .projects-section .outer-container .owl-nav .owl-next span{ top:50%; position:relative; } .projects-section .outer-container .owl-nav .owl-prev:hover, .projects-section .outer-container .owl-nav .owl-next:hover{ background-color:#f97534; } .project-block{ position:relative; z-index:99; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .project-block .inner-box{ position:relative; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .project-block:hover{ transform: scaleY(1.07); } .project-block .inner-box .image{ position:relative; } .project-block .inner-box .image img{ position:relative; width:100%; display:block; } .project-block .inner-box .image .overlay-box{ position:absolute; content:''; left:0px; top:0px; width:100%; height:100%; display:block; opacity:0; z-index:1; -webkit-transition: all 900ms ease; -ms-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: right; -o-transform-origin: left; transform-origin: left; -ms-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background-color: rgba(22,26,51,0.90); } .project-block .inner-box:hover .image .overlay-box{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } .project-block .inner-box .image .overlay-box .overlay-inner{ position:absolute; left:0px; bottom:0px; width:100%; padding:25px 28px; background-color:#f97534; } .project-block .inner-box .image .overlay-box .title{ position:relative; color:#ffffff; font-size:15px; font-weight:400; padding-left:40px; } .project-block .inner-box .image .overlay-box .title:before{ position:absolute; content:''; left:0px; top:10px; width:30px; height:1px; background-color:rgba(255,255,255,0.30); } .project-block .inner-box .image .overlay-box h3{ position:relative; font-size:20px; font-weight:700; line-height:1.3em; margin-top:8px; } .project-block .inner-box .image .overlay-box h3 a{ position:relative; color:#ffffff; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; } .project-block .inner-box .image .overlay-box h3 a:hover{ color:#161a33; } .project-block .inner-box .image .overlay-box .read-more{ position:relative; color:#ffffff; font-size:15px; font-weight:700; margin-top:32px; display:inline-block; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition: all 300ms ease; font-family: 'Playfair Display', serif; } .project-block .inner-box .image .overlay-box .read-more .arrow{ position:relative; margin-left:5px; top:1px; } .project-block .inner-box .image .overlay-box .read-more:hover{ color:#161a33; }

(function($) { "use strict"; //Hide Loading Box (Preloader) function handlePreloader() { if($('.preloader').length){ $('.preloader').delay(200).fadeOut(500); } } //Update Header Style and Scroll to Top function headerStyle() { if($('.main-header').length){ var windowpos = $(window).scrollTop(); var siteHeader = $('.main-header'); var sticky_header = $('.main-header .sticky-header, .header-style-five'); var scrollLink = $('.scroll-to-top'); if (windowpos > 55) { siteHeader.addClass('fixed-header'); sticky_header.addClass("animated slideInDown"); scrollLink.fadeIn(300); } else { siteHeader.removeClass('fixed-header'); sticky_header.removeClass("animated slideInDown"); scrollLink.fadeOut(300); } } } headerStyle(); //Submenu Dropdown Toggle if($('.main-header li.dropdown ul').length){ $('.main-header li.dropdown').append('<div class="dropdown-btn"><span class="fa fa-angle-down"></span></div>'); //Dropdown Button $('.main-header li.dropdown .dropdown-btn').on('click', function() { $(this).prev('ul').slideToggle(500); }); //Disable dropdown parent link $('.main-header .navigation li.dropdown > a,.hidden-bar .side-menu li.dropdown > a').on('click', function(e) { e.preventDefault(); }); } //Hide / Show Pricing Features / Togglw $('.price-block-two .show-btn').on('click', function(e) { e.preventDefault(); $(this).parents('.price-block-two').toggleClass('show-features'); }); //Banner Carousel if ($('.banner-carousel').length) { $('.banner-carousel').owlCarousel({ animateOut: 'slideOutUp', animateIn: 'fadeDown', loop:true, margin:0, nav:true, singleItem:true, smartSpeed: 500, autoHeight: false, autoplay: true, autoplayTimeout:10000, navText: [ '<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1024:{ items:1 }, } }); } // Projects Carousel if ($('.projects-carousel').length) { $('.projects-carousel').owlCarousel({ loop:true, margin:0, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 800:{ items:3 }, 1024:{ items:4 }, 1100:{ items:4 }, 1200:{ items:5 }, 1600:{ items:6 } } }); } // Projects Carousel Two if ($('.projects-carousel-two').length) { $('.projects-carousel-two').owlCarousel({ loop:true, margin:45, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:1 }, 1024:{ items:1 }, 1100:{ items:1 } } }); } //Price Range Slider if($('.price-range-slider').length){ $( ".price-range-slider" ).slider({ range: true, min: 0, max: 90, values: [ 8, 85 ], slide: function( event, ui ) { $( "input.property-amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); } }); $( "input.property-amount" ).val( $( ".price-range-slider" ).slider( "values", 0 ) + " - $" + $( ".price-range-slider" ).slider( "values", 1 ) ); } //Jquery Spinner / Quantity Spinner if($('.quantity-spinner').length){ $("input.quantity-spinner").TouchSpin({ verticalbuttons: true }); } // Projects Carousel Three if ($('.projects-carousel-three').length) { $('.projects-carousel-three').owlCarousel({ loop:true, animateOut: 'slideOutUp', animateIn: 'slideDown', margin:45, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="fas fa-angle-up"></span>', '<span class="fas fa-angle-down"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:1 }, 1024:{ items:1 }, 1100:{ items:1 } } }); } // Three Item Carousel if ($('.three-item-carousel').length) { $('.three-item-carousel').owlCarousel({ loop:true, margin:0, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:2 }, 1024:{ items:3 }, 1100:{ items:3 } } }); } // Client Testimonial Carousel if ($('.client-testimonial-carousel').length) { $('.client-testimonial-carousel').owlCarousel({ loop:true, margin:60, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:3 }, 1100:{ items:3 }, 1200:{ items:3 } } }); } // Testimonial Carousel if ($('.testimonial-carousel').length) { $('.testimonial-carousel').owlCarousel({ loop:true, animateOut: 'slideOutUp', animateIn: 'slideDown', margin:0, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:1 }, 1024:{ items:1 }, 1100:{ items:1 } } }); } // Single Item Carousel if ($('.single-item-carousel').length) { $('.single-item-carousel').owlCarousel({ loop:true, //animateOut: 'slideOutUp', //animateIn: 'slideDown', margin:0, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back-5"></span>', '<span class="flaticon-next"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 800:{ items:1 }, 1024:{ items:1 }, 1100:{ items:1 } } }); } // News Carousel if ($('.news-carousel').length) { $('.news-carousel').owlCarousel({ loop:true, margin:0, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:3 }, 1100:{ items:3 }, 1200:{ items:3 } } }); } // Services Carousel if ($('.services-carousel').length) { $('.services-carousel').owlCarousel({ loop:true, margin:30, nav:false, smartSpeed: 700, autoplay: true, responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1024:{ items:3 }, 1280:{ items:3 } } }); } // Client Carousel if ($('.client-carousel').length) { $('.client-carousel').owlCarousel({ loop:true, margin:0, nav:true, smartSpeed: 700, autoplay: true, navText: [ '<span class="flaticon-back-5"></span>', '<span class="flaticon-next"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:1 }, 1024:{ items:1 }, 1280:{ items:1 } } }); } // Team Carousel if ($('.team-carousel').length) { $('.team-carousel').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-right-arrow"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 800:{ items:2 }, 1024:{ items:3 }, 1100:{ items:3 } } }); } // Product Carousel Slider if ($('.history-carousel .content-carousel').length && $('.history-carousel .thumbs-carousel').length) { var $sync3 = $(".history-carousel .content-carousel"), $sync4 = $(".history-carousel .thumbs-carousel"), flags = false, durations = 500; $sync3 .owlCarousel({ loop:false, items: 1, margin: 0, nav: true, navText: [ '<span class="icon flaticon-left-arrow"></span>', '<span class="icon flaticon-next-1"></span>' ], dots: false, autoplay: true, autoplayTimeout: 5000 }) .on('changed.owl.carousel', function (e) { if (!flags) { flags = false; $sync4.trigger('to.owl.carousel', [e.item.index, durations, true]); flags = false; } }); $sync4 .owlCarousel({ loop:false, margin: 0, items: 1, nav: true, navText: [ '<span class="icon flaticon-left-arrow"></span>', '<span class="icon flaticon-next-1"></span>' ], dots: false, center: false, autoplay: true, autoplayTimeout: 5000, responsive: { 0:{ items:1, autoWidth: false }, 400:{ items:1, autoWidth: false }, 600:{ items:1, autoWidth: false }, 900:{ items:1, autoWidth: false }, 1000:{ items:1, autoWidth: false } }, }) .on('click', '.owl-item', function () { $sync3.trigger('to.owl.carousel', [$(this).index(), durations, true]); }) .on('changed.owl.carousel', function (e) { if (!flags) { flags = true; $sync3.trigger('to.owl.carousel', [e.item.index, durations, true]); flags = false; } }); } // Sponsors Carousel if ($('.sponsors-carousel').length) { $('.sponsors-carousel').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-next-1"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 768:{ items:3 }, 1024:{ items:5 } } }); } // Sponsors Carousel Two if ($('.sponsors-carousel-two').length) { $('.sponsors-carousel-two').owlCarousel({ loop:true, margin:30, nav:true, smartSpeed: 500, autoplay: true, navText: [ '<span class="flaticon-back"></span>', '<span class="flaticon-next-1"></span>' ], responsive:{ 0:{ items:1 }, 600:{ items:2 }, 768:{ items:3 }, 1024:{ items:4 } } }); } //Accordion Box if($('.accordion-box').length){ $(".accordion-box").on('click', '.acc-btn', function() { var outerBox = $(this).parents('.accordion-box'); var target = $(this).parents('.accordion'); if($(this).hasClass('active')!==true){ $(outerBox).find('.accordion .acc-btn').removeClass('active'); } if ($(this).next('.acc-content').is(':visible')){ return false; }else{ $(this).addClass('active'); $(outerBox).children('.accordion').removeClass('active-block'); $(outerBox).find('.accordion').children('.acc-content').slideUp(300); target.addClass('active-block'); $(this).next('.acc-content').slideDown(300); } }); } //Tabs Box if($('.tabs-box').length){ $('.tabs-box .tab-buttons .tab-btn').on('click', function(e) { e.preventDefault(); var target = $($(this).attr('data-tab')); if ($(target).is(':visible')){ return false; }else{ target.parents('.tabs-box').find('.tab-buttons').find('.tab-btn').removeClass('active-btn'); $(this).addClass('active-btn'); target.parents('.tabs-box').find('.tabs-content').find('.tab').fadeOut(0); target.parents('.tabs-box').find('.tabs-content').find('.tab').removeClass('active-tab animated fadeIn'); $(target).fadeIn(0); $(target).addClass('active-tab animated fadeIn'); } }); } //Masonary function enableMasonry() { if($('.masonry-items-container').length){ var winDow = $(window); // Needed variables var $container=$('.masonry-items-container'); $container.isotope({ itemSelector: '.masonry-item', masonry: { columnWidth : 1 }, animationOptions:{ duration:500, easing:'linear' } }); winDow.bind('resize', function(){ $container.isotope({ itemSelector: '.masonry-item', animationOptions: { duration: 500, easing : 'linear', queue : false } }); }); } } enableMasonry(); // //====================================================================// // Sortable Masonary with Filters //====================================================================// // function sortableMasonry() { if($('.sortable-masonry').length){ var winDow = $(window); // Needed variables var $container=$('.sortable-masonry .items-container'); var $filter=$('.filter-btns'); $container.isotope({ filter:'*', masonry: { columnWidth : '.masonry-item.col-lg-6' }, animationOptions:{ duration:500, easing:'linear' } }); // Isotope Filter $filter.find('li').on('click', function(){ var selector = $(this).attr('data-filter'); try { $container.isotope({ filter : selector, animationOptions: { duration: 500, easing : 'linear', queue : false } }); } catch(err) { } return false; }); winDow.bind('resize', function(){ var selector = $filter.find('li.active').attr('data-filter'); $container.isotope({ filter : selector, animationOptions: { duration: 500, easing : 'linear', queue : false } }); }); var filterItemA = $('.filter-btns li'); filterItemA.on('click', function(){ var $this = $(this); if ( !$this.hasClass('active')) { filterItemA.removeClass('active'); $this.addClass('active'); } }); } } sortableMasonry(); //Progress Bar if($('.progress-line').length){ $('.progress-line').appear(function(){ var el = $(this); var percent = el.data('width'); $(el).css('width',percent+'%'); },{accY: 0}); } //Fact Counter + Text Count if($('.count-box').length){ $('.count-box').appear(function(){ var $t = $(this), n = $t.find(".count-text").attr("data-stop"), r = parseInt($t.find(".count-text").attr("data-speed"), 10); if (!$t.hasClass("counted")) { $t.addClass("counted"); $({ countNum: $t.find(".count-text").text() }).animate({ countNum: n }, { duration: r, easing: "linear", step: function() { $t.find(".count-text").text(Math.floor(this.countNum)); }, complete: function() { $t.find(".count-text").text(this.countNum); } }); } },{accY: 0}); } //Custom Seclect Box if($('.custom-select-box').length){ $('.custom-select-box').selectmenu().selectmenu('menuWidget').addClass('overflow'); } //LightBox / Fancybox if($('.lightbox-image').length) { $('.lightbox-image').fancybox({ openEffect : 'fade', closeEffect : 'fade', helpers : { media : {} } }); } //Contact Form Validation if($('#contact-form').length){ $('#contact-form').validate({ rules: { username: { required: true }, email: { required: true, email: true }, phone: { required: true }, website: { required: true }, message: { required: true } } }); } // Scroll to a Specific Div if($('.scroll-to-target').length){ $(".scroll-to-target").on('click', function() { var target = $(this).attr('data-target'); // animate $('html, body').animate({ scrollTop: $(target).offset().top }, 1500); }); } // Elements Animation if($('.wow').length){ var wow = new WOW( { boxClass: 'wow', // animated element css class (default is wow) animateClass: 'animated', // animation css class (default is animated) offset: 0, // distance to the element when triggering the animation (default is 0) mobile: false, // trigger animations on mobile devices (default is true) live: true // act on asynchronously loaded content (default is true) } ); wow.init(); } //Gallery Filters if($('.filter-list').length){ $('.filter-list').mixItUp({}); } /* ========================================================================== When document is Scrollig, do ========================================================================== */ $(window).on('scroll', function() { headerStyle(); }); /* ========================================================================== When document is loading, do ========================================================================== */ $(window).on('load', function() { handlePreloader(); enableMasonry(); sortableMasonry(); }); })(window.jQuery);