"services - circle"
Bootstrap 4.1.1 Snippet by Pawan Pandey

<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="//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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> <section class="services" id="services"> <div class="container"> <div class="row"> <div class="col-12"> <div class="services-circle"> <div class="services-subcircle" data-circle-index="0"><i class="fas fa-user-tie"></i> </div> <div class="services-subcircle active" data-circle-index="1"><i class="far fa-id-card"></i> </div> <div class="services-subcircle" data-circle-index="2"><i class="fas fa-charging-station"></i> </div> <div class="services-subcircle" data-circle-index="3"><i class="far fa-building"></i> </div> <div class="services-subcircle" data-circle-index="4"><i class="fas fa-brain"></i> </div> <div class="services-subcircle" data-circle-index="5"><i class="fas fa-box-open"></i> </div> <div class="services-subcircle" data-circle-index="6"><i class="fas fa-award"></i> </div> <div class="services-subcircle" data-circle-index="7"><i class="fas fa-archive"></i> </div> <div class="services-content-wrapper"> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">PERSONNEL IMPROVEMENT</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item active"><span class="title"><a class="underlined-link" href="./service-detail.html">BRANDING</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">HIGH TECHNOLOGY</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">CORPORATE WORK</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">PROFESSIONAL SKILLS</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">QUICK SUPPORT</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">CUSTOMER HAPPINESS</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> <div class="services-content-item"><span class="title"><a class="underlined-link" href="./service-detail.html">HIGH PRODUCTIVITY</a></span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> </div> </div> </div> </div> </section>
.services { background: #fff; background-image: url("../img/services_bg.png"); background-repeat: no-repeat; background-position: bottom; margin-top: 30px; padding-top: 35px; } .services-circle { display: block; border-radius: 50%; position: relative; width: 80%; height: 0; padding-bottom: 80%; margin: 70px auto; border: 1px solid #e1e1e1; box-sizing: content-box; } .services-circle::before, .services-circle::after { display: none; content: ''; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #e1e1e1; border-radius: 50%; } .services-circle::before { width: 450px; height: 450px; opacity: .6; } .services-circle::after { width: 550px; height: 550px; opacity: .4; } .services-subcircle { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 1; margin: auto; color: #fff; box-shadow: 0px 11px 18px 0 rgba(0, 0, 0, 0.05); background-color: #fff; border-radius: 50%; transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; width: 60px; height: 60px; left: 0; right: 0; top: 0; bottom: 0; position: absolute; } .services-subcircle i { font-size: 1.8em; color: #a5a5a5; } .services-subcircle:hover, .services-subcircle.active { box-shadow: 0px 11px 13px 0 rgba(31, 136, 104, 0.4); background-color: #1f8868; } .services-subcircle:hover i, .services-subcircle.active i { color: #fff; } .services-content-wrapper { width: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; top: 0; right: 0; bottom: 0; left: 0; margin: auto; position: absolute; padding: 0 65px; } .services-content-item { display: none; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; z-index: 2; } .services-content-item.active { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-animation: focus-in-contract 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: focus-in-contract 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; -webkit-animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; animation: fade-in 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both; } .services-content-item span.title { font-weight: 900; letter-spacing: 3.2px; color: #1f8868; line-height: normal; margin-bottom: 0; font-size: 14px; text-align: center; } .services-content-item span.title a { color: #1f8868; font-size: inherit; } .services-content-item p.description { display: none; margin: 0; color: #757575; letter-spacing: .3px; line-height: 1.88; text-align: center; font-size: 12px; } .services-boxes { display: block; width: 100%; padding-top: 30px; } .services-boxes-heading { display: block; text-align: center; max-width: 100%; } .services-boxes-heading-wrapper { padding-bottom: 145px; } .services-boxes-heading span.title { display: block; font-weight: 700; color: #838383; letter-spacing: .44px; font-size: 18px; } .services-boxes-heading span.title.big { display: block; letter-spacing: .72px; font-size: 28px; word-break: break-word; } .services-boxes-heading span.title--primary { color: #1f8868; } .services-boxes-heading span.title--italic { font-style: italic; } .services-boxes-heading span.subtitle { display: block; font-size: 14px; color: #b3b3b3; letter-spacing: 2.8px; margin-top: 20px; } @supports ((display: -ms-grid) or (display: grid)) { .services-boxes-content { display: -ms-grid; display: grid; -ms-grid-rows: auto; grid-template-rows: auto; margin-top: -115px; grid-gap: 15px; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } @media (min-width: 576px) { .services-boxes-content { grid-gap: 30px; -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 768px) { .services-boxes-content { margin-top: -150px; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } } @supports not ((display: -ms-grid) or (display: grid)) { .services-boxes-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; margin-top: -115px; } @media screen and (min-width: 768px) { .services-boxes-content { margin-top: -150px; } } } .services-boxes-content-wrapper { display: block; width: 100%; background: #ffffff; } .services-boxes-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background: #ffffff; padding: 20px; box-shadow: 0px 7px 43px 0 rgba(0, 0, 0, 0.07); cursor: pointer; transition: .2s ease-in-out; } @supports ((display: -ms-grid) or (display: grid)) { .services-boxes-item { width: unset; } } @supports not ((display: -ms-grid) or (display: grid)) { .services-boxes-item { width: calc(50% - 30px); } .services-boxes-item:not(:nth-last-child(-n+2)) { margin-bottom: 30px; } .services-boxes-item + .services-boxes-item { margin-left: 30px; } .services-boxes-item:nth-child(2n + 1) { margin-left: 0; } @media screen and (min-width: 768px) { .services-boxes-item { width: calc(33.3% - 30px); } .services-boxes-item:not(:nth-last-child(-n+2)) { margin-bottom: unset; } .services-boxes-item:not(:nth-child(-n+3)) { margin-top: 30px; } .services-boxes-item + .services-boxes-item { margin-left: 30px; } .services-boxes-item:nth-child(3n + 1) { margin-left: 0; } } } .services-boxes-item:not(.no-hover) > * { transition: .2s ease-in-out; } .services-boxes-item:not(.no-hover):hover { background: #1f8868; box-shadow: 0px 12px 16px 0 rgba(31, 136, 104, 0.55); } .services-boxes-item:not(.no-hover):hover .services-boxes-item-icon, .services-boxes-item:not(.no-hover):hover span.title, .services-boxes-item:not(.no-hover):hover p.description { color: #fff; } .services-boxes-item-icon { font-size: 2em; color: #1f8868; margin-bottom: 20px; } .services-boxes-item span.title { font-size: 14px; font-weight: 700; color: #050505; letter-spacing: 2.8px; margin-bottom: 20px; } .services-boxes-item p.description { display: block; text-align: center; margin: 0; font-size: 13px; color: #757575; letter-spacing: .3px; line-height: 1.71; } @media (min-width: 576px) { .services-circle { padding-bottom: unset; display: block; margin: 150px auto; width: 350px; height: 350px; } .services-circle::before, .services-circle::after { display: block; } .services-content-item span.title { margin-bottom: 20px; line-height: 1; } .services-content-item p.description { display: block; } } .services { margin-top: 60px; padding-top: 65px; } .services-circle { margin: 180px auto; width: 510px; height: 510px; } .services-circle::before { width: 640px; height: 640px; } .services-circle::after { width: 750px; height: 750px; } .services-subcircle:nth-child(2n+1) { width: 72px; height: 72px; } .services-content-item span.title { font-size: 16px; margin-bottom: 40px; } .services-content-item p.description { font-size: 16px; }
jQuery(function($) { "use strict"; var _extends = Object.assign || function(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // parallax effect var parallaxEffect = function parallaxEffect(container, els) { var moveX, moveY; if (container && els) { container.addEventListener("mousemove", function(e) { moveX = (e.clientX * -1) / 20; moveY = (e.clientY * -1) / 20; els.forEach(function(el, index) { if (index % 2 != 0) { moveX = -1 * moveX; moveY = -1 * moveY; } el.style.transform = "translate3d(" + moveX + "px," + moveY + "px,0)"; }); }); } }; // isScrolledIntoView var isScrolledIntoView = function isScrolledIntoView(el) { var rect = el.getBoundingClientRect(), elemTop = rect.top, elemBottom = rect.bottom, isVisible; // Only completely visible elements return true: isVisible = elemTop >= -50 && elemBottom <= window.innerHeight / 2; return isVisible; }; // active class toggle methods var removeClasses = function removeClasses(nodes, value) { if (nodes) return nodes.forEach(function(node) { return node.classList.contains(value) && node.classList.remove(value); }); else return false; }; var addClass = function addClass(nodes, index, value) { return nodes ? nodes[index].classList.add(value) : 0; }; var App = { initHeroSlider: function initHeroSlider() { // hero slider var heroSliderOptions = { dots: false, arrows: false, swipe: window.innerWidth <= 576, responsive: [ { breakpoint: 576 } ] }; $(".hero-right-carousel").on("breakpoint", function( e, slick, breakpoint ) { if (window.innerWidth <= 576) slick.slickSetOption("swipe", true, false); else slick.slickSetOption("swipe", false, false); }); $(".hero-right-carousel").on("swipe", function(slick, dir) { setTimeout(function() { $(".hero-left-carousel").slick("slickGoTo", dir.currentSlide); }, 500); }); var heroSliderPrev = $(".hero-carousel-navigation-btn.next"); var heroSliderNext = $(".hero-carousel-navigation-btn.prev"); if (heroSliderPrev) { heroSliderPrev.on("click", function() { $(".hero-left-carousel").slick("slickNext"); setTimeout(function() { $(".hero-right-carousel").slick("slickNext"); }, 500); }); } if (heroSliderNext) { heroSliderNext.on("click", function() { $(".hero-left-carousel").slick("slickPrev"); setTimeout(function() { $(".hero-right-carousel").slick("slickPrev"); }, 500); }); } $(".hero-left-carousel").slick(_extends({}, heroSliderOptions)); $(".hero-right-carousel").slick(_extends({}, heroSliderOptions)); }, initServicesCircle: function initServicesCircle() { // services circle var circles = document.querySelectorAll(".services-subcircle"); var circleContents = document.querySelectorAll(".services-content-item"); var parent = document.querySelector(".services-circle"); if (parent) { var spreadCircles = function spreadCircles() { // spread the subcircles around the circle parent = document .querySelector(".services-circle") .getBoundingClientRect(); var centerX = 0; var centerY = 0; Array.from(circles) .reverse() .forEach(function(circle, index) { var angle = index * (360 / circles.length); var x = centerX + (parent.width / 2) * Math.cos((angle * Math.PI) / 180); var y = centerY + (parent.height / 2) * Math.sin((angle * Math.PI) / 180); circle.style.transform = "translate3d(" + parseFloat(x).toFixed(5) + "px," + parseFloat(y).toFixed(5) + "px,0)"; }); }; spreadCircles(); var resizeTimer = void 0; window.addEventListener("resize", function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { spreadCircles(); }, 50); }); circles.forEach(function(circle, index) { var circlesToggleFnc = function circlesToggleFnc() { var index = circle.dataset.circleIndex; if (!circle.classList.contains("active")) { removeClasses(circles, "active"); removeClasses(circleContents, "active"); addClass(circles, index, "active"); addClass(circleContents, index, "active"); } }; circle.addEventListener("click", circlesToggleFnc, true); circle.addEventListener("mouseover", circlesToggleFnc, true); }); } }, initBlogCarousel: function initBlogCarousel() { // blog carousel $(".blog-carousel-wrapper").slick({ centerMode: true, slidesToShow: 3, slideToScroll: 1, variableWidth: true, arrows: false, dots: true }); }, initResponsiveMenu: function initResponsiveMenu() { // responsive menu var responsiveMenu = document.querySelector(".responsive-menu"); if (responsiveMenu) { document.querySelectorAll(".nav-trigger").forEach(function(el) { return el.addEventListener("click", function() { if (responsiveMenu.classList.contains("active")) { responsiveMenu.classList.remove("active"); document.body.classList.remove("no-scroll"); } else { responsiveMenu.classList.add("active"); document.body.classList.add("no-scroll"); } }); }); var subLinkToggles = document.querySelectorAll(".sublinks-toggle"); subLinkToggles.forEach(function(el) { el.addEventListener("click", function() { var subLinks = el.nextElementSibling; if (subLinks.classList.contains("submenu-show")) { subLinks.classList.remove("submenu-show"); el.classList.remove("menu-opened"); } else { removeClasses(subLinkToggles, "menu-opened"); subLinkToggles.forEach(function(c) { if (c.nextElementSibling.classList.contains("submenu-show")) { c.nextElementSibling.classList.remove("submenu-show"); } }); subLinks.classList.add("submenu-show"); el.classList.add("menu-opened"); } }); }); } }, initHomeHeroParallax: function initHomeHeroParallax() { // homepage hero parallax var homeHero = document.getElementsByClassName("hero-wrapper")[0]; var homeHerorectangles = document.querySelectorAll(".hero-rectangle"); parallaxEffect(homeHero, homeHerorectangles); }, initMainHeroParallax: function initMainHeroParallax() { // main hero parallax var mainHero = document.getElementsByClassName("main-hero")[0]; var mainHerorectangles = document.querySelectorAll( ".main-hero-rectangle" ); parallaxEffect(mainHero, mainHerorectangles); }, initSectionRectangles: function initSectionRectangles() { // section title rectangles fill effect var titleRectangles = document.querySelectorAll(".title-rectangle"); if (titleRectangles) { window.addEventListener("scroll", function(e) { removeClasses(titleRectangles, "fill"); titleRectangles.forEach(function(rect) { if (isScrolledIntoView(rect)) rect.classList.add("fill"); }); }); } }, initContactFormToggle: function initContactFormToggle() { // contact form toggle var contactFormBtn = document.getElementsByClassName( "contact-form-box-pulse" )[0]; var contactFormWrapper = document.querySelector(".contact-form-box"); if (contactFormBtn && contactFormWrapper) { contactFormBtn.addEventListener("click", function() { if (contactFormWrapper.classList.contains("form-active")) { contactFormWrapper.classList.remove("form-active"); } else { contactFormWrapper.classList.add("form-active"); window.scroll({ top: window.pageYOffset + contactFormWrapper.getBoundingClientRect().top - 30, behavior: "smooth" }); } }); } }, initBrandVideoToggle: function initBrandVideoToggle() { // brand video toggle var brandVideoBtn = document.querySelector(".brand-video-btn"); var brandVideoSection = document.querySelector(".brand-video"); var brandVideoContainer = document.querySelector(".video-container"); var brandVideoOverlay = document.querySelector(".overlay"); var brandVideoClose = document.querySelector(".video-container-close"); if (brandVideoBtn && brandVideoSection && brandVideoContainer) { brandVideoBtn.addEventListener("click", function() { var showBrandVideo = function showBrandVideo() { var video = brandVideoContainer.querySelector("iframe") || brandVideoContainer.querySelector("video source"); video.src = video.dataset.src; if (video.tagName == "SOURCE") brandVideoContainer.querySelector("video").load(); document.body.classList.add("no-scroll-video"); brandVideoSection.classList.add("video-opened"); brandVideoOverlay.classList.add("overlay--active"); }; if (!brandVideoSection.classList.contains("video-opened")) { showBrandVideo(); } }); brandVideoClose.addEventListener("click", function() { var hideBrandVideo = function hideBrandVideo() { var video = brandVideoContainer.querySelector("iframe") || brandVideoContainer.querySelector("video source"); video.src = ""; if (video.tagName == "SOURCE") brandVideoContainer.querySelector("video").pause(); document.body.classList.remove("no-scroll-video"); brandVideoSection.classList.remove("video-opened"); brandVideoOverlay.classList.remove("overlay--active"); }; if (brandVideoSection.classList.contains("video-opened")) { hideBrandVideo(); } }); } }, initAsideCarousel: function initAsideCarousel() { // Aside carousel var asideCarousel = $(".page-aside-carousel"); if (asideCarousel) { var asideCarouselNavNext = $(".page-aside-carousel-nav.next"); var asideCarouselNavPrev = $(".page-aside-carousel-nav.prev"); $(asideCarousel).slick({ slide: ".page-aside-carousel-item", slidesToShow: 1, slideToScroll: 1, dots: false, arrows: false, autoplay: true, autoplaySpeed: 3000, zIndex: 1 }); asideCarouselNavNext.on("click", function() { return asideCarousel.slick("slickNext"); }); asideCarouselNavPrev.on("click", function() { return asideCarousel.slick("slickPrev"); }); } }, initTabsNav: function initTabsNav() { // tabs nav responsive var tabsToggle = document.querySelectorAll(".mobile-tab-toggle-btn"); var tabsNav = document.querySelector(".nav-tabs-wrapper"); var tabsContent = document.querySelector(".nav.nav-tabs"); if (tabsNav && tabsContent) { tabsToggle.forEach(function(tabsToggleBtn) { return tabsToggleBtn.addEventListener("click", function() { if (tabsContent.classList.contains("show-me")) tabsContent.classList.remove("show-me"); else tabsContent.classList.add("show-me"); }); }); var links = tabsContent.querySelectorAll(".nav-item.nav-link"); links.forEach(function(link, i) { link.addEventListener("click", function() { window.scroll({ top: window.pageYOffset + document .querySelector(".tab-pane.active.show .grid-gallery-wrapper") .getBoundingClientRect().top - 30, behavior: "smooth" }); tabsContent.classList.remove("show-me"); if (i == 0) tabsContent.scrollTop = 0; else if (i == links.length - 1) tabsContent.scrollTop = tabsContent.scrollHeight - tabsContent.clientHeight; else tabsContent.scrollTop = link.offsetTop - 75; }); }); } }, initReferencesCarousel: function initReferencesCarousel() { //references carousel var referencesWrapper = $(".references-wrapper"); referencesWrapper.slick({ dots: false, arrows: false, autoplay: true, autoplaySpeed: 3000, slidesToShow: 1, slidesToScroll: 1, mobileFirst: true, responsive: [ { breakpoint: 767, settings: "unslick" }, { breakpoint: 576, settings: { slidesToShow: 2, slidesToScroll: 2 } } ] }); window.addEventListener("resize", function() { if (window.innerWidth < 768) referencesWrapper.slick("resize"); }); }, truncateBlogListItems: function truncateBlogListItems() { $(".blog-list-item-description").each(function() { var textArray = $(this) .text() .split(" "); while ($(this).prop("scrollHeight") > $(this).prop("offsetHeight")) { textArray.pop(); $(this).text(textArray.join(" ") + "..."); } }); $(window).on("resize", function() { truncateBlogListItems(); }); }, contactForm: function() { $('form#contact-us').submit(function() { $('form#contact-us .error').remove(); var hasError = false; $('.requiredField').each(function() { if($.trim($(this).val()) == '') { var labelText = $(this).prev('label').text(); $(this).parent().append('<span class="error">'+labelText+' This field is required</span>'); $(this).addClass('inputError'); hasError = true; } else if($(this).hasClass('email')) { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; if(!emailReg.test($.trim($(this).val()))) { $(this).parent().append('<span class="error"> Please enter a valid email address</span>'); $(this).addClass('inputError'); hasError = true; } } }); if(!hasError) { var formInput = $(this).serialize(); $.post('contacts.php',formInput, function(data){ $('form#contact-us').slideUp("fast", function() { $(this).before('<p class="tick"><strong>Thank You! </strong> Your mail has arrived. The return will be made as soon as possible..</p>'); }); }); } return false; }); } }; App.initHeroSlider(); App.initServicesCircle(); App.initBlogCarousel(); App.initResponsiveMenu(); App.initHomeHeroParallax(); App.initMainHeroParallax(); App.initSectionRectangles(); App.initContactFormToggle(); App.initBrandVideoToggle(); App.initAsideCarousel(); App.initTabsNav(); App.initReferencesCarousel(); App.truncateBlogListItems(); App.contactForm(); });

Related: See More


Questions / Comments: