<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.css">
<section class="project-area">
<div class="container">
<div class="row grid">
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/1.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/1.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/2.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/2.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/3.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/3.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/4.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/4.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/4.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/4.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/1.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/1.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/2.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/2.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="grid-item mouse-move">
<a href="#">
<img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/3.jpg" alt="Project">
</a>
<div class="grid-hover">
<h3>Local SEO Marketing</h3>
<span>Creative Design</span>
</div>
<div class="grid-hover-link">
<a href="#"><span class="fa fa-link"></span></a>
<a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/3.jpg"><span class="fa fa-arrows-alt"></span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollup/2.4.1/jquery.scrollUp.js"></script>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:400,400i,500,600,700,800");
.project-area .section-title h2 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding-bottom: 3.5rem;
}
@media (max-width: 767px) {
.project-area .section-title h2 {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
}
.grid > [class*=col-] {
padding-left: 0 !important;
padding-right: 0 !important;
}
.grid-item {
position: relative;
}
.grid-item img {
width: 100%;
}
.grid-item:hover .grid-hover-link {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
.grid-hover {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.grid-hover::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(254, 72, 76, 0.9);
z-index: -1;
}
.grid-hover h3 {
position: relative;
margin: -3.125rem 0 0.25rem;
text-align: center;
}
@media (min-width: 992px) and (max-width: 1199px) {
.grid-hover h3 {
font-size: 1.3125rem;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.grid-hover h3 {
font-size: 1.25rem;
margin: -2.5rem 0 0.25rem;
}
}
.grid-hover span {
font-weight: 500;
position: relative;
display: block;
padding-bottom: 20px;
}
.grid-hover-link {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
padding-top: 5rem;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
@media (min-width: 768px) and (max-width: 991px) {
.grid-hover-link {
padding-top: 5.625rem;
}
}
.grid-hover-link a {
display: inline-block;
width: 45px;
height: 45px;
line-height: 45px;
border: 1px solid #ffffff;
text-align: center;
margin: 0 0.5rem;
}
.grid-hover-link a:hover {
background-color: #ffffff;
}
.grid-hover-link a:hover span::before {
color: #fe484c;
}
.grid-hover-link a span {
display: inline-block;
line-height: 1;
}
.mouse-move {
overflow: hidden;
perspective: 1600px;
}
.mouse-move .grid-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: rotate3d(1, 0, 0, 90deg);
transform: rotate3d(1, 0, 0, 90deg);
pointer-events: none;
}
.mouse-move.in-top .grid-hover {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: in-top 0.3s ease 0s 1 forwards;
animation: in-top 0.3s ease 0s 1 forwards;
}
.mouse-move.in-right .grid-hover {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-animation: in-right 0.3s ease 0s 1 forwards;
animation: in-right 0.3s ease 0s 1 forwards;
}
.mouse-move.in-bottom .grid-hover {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: in-bottom 0.3s ease 0s 1 forwards;
animation: in-bottom 0.3s ease 0s 1 forwards;
}
.mouse-move.in-left .grid-hover {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: in-left 0.3s ease 0s 1 forwards;
animation: in-left 0.3s ease 0s 1 forwards;
}
.mouse-move.out-top .grid-hover {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: out-top 0.3s ease 0s 1 forwards;
animation: out-top 0.3s ease 0s 1 forwards;
}
.mouse-move.out-right .grid-hover {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: out-right 0.3s ease 0s 1 forwards;
animation: out-right 0.3s ease 0s 1 forwards;
margin-left: 1px;
}
.mouse-move.out-bottom .grid-hover {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: out-bottom 0.3s ease 0s 1 forwards;
animation: out-bottom 0.3s ease 0s 1 forwards;
}
.mouse-move.out-left .grid-hover {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: out-left 0.3s ease 0s 1 forwards;
animation: out-left 0.3s ease 0s 1 forwards;
}
@keyframes in-top {
from {
transform: rotate3d(-1, 0, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-right {
from {
transform: rotate3d(0, -1, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-bottom {
from {
transform: rotate3d(1, 0, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes in-left {
from {
transform: rotate3d(0, 1, 0, 90deg);
}
to {
transform: rotate3d(0, 0, 0, 0deg);
}
}
@keyframes out-top {
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(-1, 0, 0, 104deg);
}
}
@keyframes out-right {
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(0, -1, 0, 104deg);
}
}
@keyframes out-bottom {
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(1, 0, 0, 104deg);
}
}
@keyframes out-left {
from {
transform: rotate3d(0, 0, 0, 0deg);
}
to {
transform: rotate3d(0, 1, 0, 104deg);
}
}
.grid-hover h3{
color: #fff;
position: relative;
font-size: 1.5rem;
position: relative;
margin: 6rem 0 0.25rem;
text-align: center;}
@media (min-width: 992px) and (max-width: 1199px) {
.grid-hover h3 {
font-size: 1.3125rem;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.grid-hover h3 {
font-size: 1.25rem;
margin: -2.5rem 0 0.25rem;
}
}
.grid-hover span {
font-weight: 500;
position: relative;
display: block;
padding-bottom: 20px;
color: #fff;
text-align: center;
}
.grid-hover-link{display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.fa{color: #fff;}
(function ($) {
"use strict";
/*------------------------------------
Search Option
------------------------------------- */
$('.search-btn-area .input-group').hide();
$(".main-search").on('click', function(event) {
event.preventDefault();
$('.search-btn-area .input-group').animate( {
height: 'toggle',
});
});
/*---------------------
Selectize
---------------------*/
if($('select').length){
$('select').selectize();
}
/*--------------------------
Scroll Sticky
---------------------------- */
var windows = $(window);
var Header = $(".header-bottom");
if (Header.length) {
windows.on('scroll', function() {
var scroll = windows.scrollTop();
if (scroll > 200) {
$(".header-bottom").addClass('stick');
}
else {
$(".header-bottom").removeClass('stick');
}
});
}
if ($(window).width() < 992) {
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
}
/*--------------------------
Intro Title Text Effect
---------------------------- */
var str = 'SEO OPTIMIZATION';
var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.intro-title').each(function (i) {
$(this).delay(100 * i).css({
display: 'inline',
opacity: 0
}).animate({
opacity: 1
}, 300);
});
/*--------------------------
Services Area
---------------------------- */
$('.service-single').on('mouseenter', function() {
$('.service-single.active').removeClass('active');
$(this).addClass('active');
});
/*--------------------------
ScrollUp
---------------------------- */
if(('#scrollUp').length) {
$.scrollUp( {
scrollText: '<i class="fas fa-angle-up"></i>', easingType: 'linear', scrollSpeed: 900, animation: 'fade'
});
}
/*--------------------------
Mouse Move
---------------------------- */
var nodes = [].slice.call(document.querySelectorAll('.mouse-move'), 0);
var directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };
var classNames = ['in', 'out'].map((p) => Object.values(directions).map((d) => `${p}-${d}`)).reduce((a, b) => a.concat(b));
var getDirectionKey = (ev, node) => {
var { width, height, top, left } = node.getBoundingClientRect();
var l = ev.pageX - (left + window.pageXOffset);
var t = ev.pageY - (top + window.pageYOffset);
var x = (l - (width/2) * (width > height ? (height/width) : 1));
var y = (t - (height/2) * (height > width ? (width/height) : 1));
return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;
}
class Item {
constructor(element) {
this.element = element;
this.element.addEventListener('mouseover', (ev) => this.update(ev, 'in'));
this.element.addEventListener('mouseout', (ev) => this.update(ev, 'out'));
}
update(ev, prefix) {
this.element.classList.remove(...classNames);
this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);
}
}
nodes.forEach(node => new Item(node));
/*----------------------------
Venobox Popup
------------------------------ */
$('.venobox').venobox( {
border: '3px', titleattr: 'data-title', numeratio: true, infinigall: true
});
/*---------------------
Counter
---------------------*/
var timer = $('.timer');
if(timer.length) {
timer.appear(function () {
timer.countTo();
})
}
/*---------------------
Clients carousel
---------------------*/
var BlogSlider=$('.blog-slider');
BlogSlider.owlCarousel( {
items: 3,
loop:true,
nav:true,
margin: 30,
dots:false,
autoplay:false,
navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"],
responsive: {
0: {
items: 1,
autoplay:true,
}
, 768: {
items: 2
}
, 992: {
items: 2
}
, 1200: {
items: 3
}
}
});
$('.blog-slider .owl-nav').removeClass('disabled');
$('.blog-slider .owl-nav').on('click', function(event) {
$(this).removeClass('disabled');
});
/*---------------------
Blog carousel
---------------------*/
var Blog=$('.single-news-slider');
Blog.owlCarousel( {
items: 1,
loop:true,
nav:true,
margin: 0,
dots:false,
autoplay:true,
navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"]
});
$('.single-news-slider .owl-nav').removeClass('disabled');
$('.single-news-slider .owl-nav').on('click', function(event) {
$(this).removeClass('disabled');
});
/*---------------------
Blog carousel
---------------------*/
var ClientLogo=$('.client-logo-slider');
ClientLogo.owlCarousel( {
items: 4,
loop:true,
nav:true,
margin: 100,
dots:false,
autoplay:true,
responsive: {
0: {
items: 1,
margin: 0
}
, 768: {
items: 2
}
, 992: {
items: 3
}
, 1200: {
items: 4
}
}
});
/*---------------------
LoadMore Projects
---------------------*/
if(('.project-one .grid').length) {
jQuery('.project-one .grid').loadMoreResults({
tag: {
name: 'div',
'class': 'col-md-3'
},
button: {
'class': 'btn',
text: 'Load More Project'
},
displayedItems: 8,
showItems: 1
});
}
/*---------------------
Video
---------------------*/
$(".cd-popup-trigger").on("click", function(p) {
p.preventDefault(), $(".cd-popup").addClass("is-visible")
}), $(".cd-popup").on("click", function(p) {
($(p.target).is(".cd-popup-close") || $(p.target).is(".cd-popup")) && (p.preventDefault(), $(this).removeClass("is-visible"))
});
/*---------------------
WOW
---------------------*/
if ($('.wow').length) {
var wow = new WOW({
mobile: false
});
wow.init();
};
/*---------------------
icheck
---------------------*/
var inputCheckBox = $('.form-check');
if (inputCheckBox.length) {
inputCheckBox.iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
}
/*---------------------
Mail Ajax
---------------------*/
if($('.contact-form').length) {
var form = $('#ajax-contact');
var formMessages = $('.form-messages');
$(form).submit(function(e) {
e.preventDefault();
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}).done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$(this).find("input").val("");
$(form).trigger("reset");
}).fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message couldn\'t be sent.');
}
});
});
}
})(jQuery);
