<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="Technology-inner" class="text-center"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-7 technology-section"> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>html</h4> <img src="img/Technology/img-1.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>wordprss</h4> <img src="img/Technology/img-2.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>PHP</h4> <img src="img/Technology/img-3.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> <div class="clearfix"></div> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>magento</h4> <img src="img/Technology/img-4.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>joomla</h4> <img src="img/Technology/img-5.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> <div class="col-md-4 technology-section-inner hvr-bounce-to-bottom"> <h4>drupal</h4> <img src="img/Technology/img-6.png" class="img-responsive"> <div class="hover-show"> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> </div> </div> <div class="col-md-5 tech-rt-sd"> <div class="tech-sec-tl"> <h1>our technology</h1> </div> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p> <a href="#" class="button">View More</a> <img src="img/Technology/right-side.png" class="img-responsive"> </div> </div> </div> </div> </div>

/*/* Bounce To Bottom */ .hvr-bounce-to-bottom{ display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow:0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; position:relative; -webkit-transition-property:color; transition-property:color; -webkit-transition-duration:0.5s; transition-duration: 0.5s; } .hvr-bounce-to-bottom:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #36424a; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin:100% 50%; transform-origin:100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active { color:#fff; cursor:pointer; } .hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } /* Bounce To Bottom-end*/ #Technology-inner .technology-section .technology-section-inner h4{ font-family:"Helvetica CE 55 Roman"; color:#36424a; text-transform:uppercase; font-size:18px; font-weight:300; margin-bottom:30px; } .technology-section-inner{ border:1px solid #F8f8f8; padding:2% 0 5% 0; position:absolute; } .technology-section-inner .hover-show p{ color:#fff; visibility:hidden; opacity:0; } .technology-section-inner:hover .hover-show p{ color:#fff; visibility:visible; opacity:1; } .technology-section-inner .hover-show{ opacity:0; visibility:hidden; margin-top:20px; } .technology-section-inner:hover .hover-show{ visibility:visible; opacity:1; transition:all 0.5s; } #Technology-inner .technology-section .technology-section-inner:hover h4{ color:#FFFFFF; }

var appMaster = { preLoader: function(){ imageSources = [] $('img').each(function() { var sources = $(this).attr('src'); imageSources.push(sources); }); if($(imageSources).load()){ $('.pre-loader').fadeOut('slow'); } }, smoothScroll: function() { // Smooth Scrolling $('a[href*=#]:not([href=#carousel-example-generic])').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }, reviewsCarousel: function() { // Reviews Carousel $('.review-filtering').slick({ slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: false, autoplay: true, autoplaySpeed: 5000 }); }, screensCarousel: function() { // Screens Carousel $('.filtering').slick({ slidesToShow: 4, slidesToScroll: 4, dots: false, responsive: [{ breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 2, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } }] }); $('.js-filter-all').on('click', function() { $('.filtering').slickUnfilter(); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-one').on('click', function() { $('.filtering').slickFilter('.one'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-two').on('click', function() { $('.filtering').slickFilter('.two'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); $('.js-filter-three').on('click', function() { $('.filtering').slickFilter('.three'); $('.filter a').removeClass('active'); $(this).addClass('active'); }); }, animateScript: function() { $('.scrollpoint.sp-effect1').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInLeft');},{offset:'100%'}); $('.scrollpoint.sp-effect2').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInRight');},{offset:'100%'}); $('.scrollpoint.sp-effect3').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInDown');},{offset:'100%'}); $('.scrollpoint.sp-effect4').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeIn');},{offset:'100%'}); $('.scrollpoint.sp-effect5').waypoint(function(){$(this).toggleClass('active');$(this).toggleClass('animated fadeInUp');},{offset:'100%'}); }, revSlider: function() { var docHeight = $(window).height(); var mainSlider = $('.tp-banner').revolution({ delay: 9000, startwidth: 1170, startheight: docHeight, hideThumbs: 10, touchenabled: false, fullWidth: "on", hideTimerBar: "on", fullScreen: "on", onHoverStop: "off", fullScreenOffsetContainer: "" }); }, scrollMenu: function(){ var num = 50; //number of pixels before modifying styles $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('nav').addClass('scrolled'); } else { $('nav').removeClass('scrolled'); } }); }, placeHold: function(){ // run Placeholdem on all elements with placeholders Placeholdem(document.querySelectorAll('[placeholder]')); } }; // AppMaster $(document).ready(function() { appMaster.smoothScroll(); appMaster.reviewsCarousel(); appMaster.screensCarousel(); appMaster.animateScript(); appMaster.revSlider(); appMaster.scrollMenu(); appMaster.placeHold(); });