Skip to content

Instantly share code, notes, and snippets.

@qls0ulp

qls0ulp/index.html

Created December 25, 2019 16:35
Show Gist options
  • Save qls0ulp/a5d676a74a8ddd647c1ae7d15338ec12 to your computer and use it in GitHub Desktop.
Save qls0ulp/a5d676a74a8ddd647c1ae7d15338ec12 to your computer and use it in GitHub Desktop.
Download ZIP
rNNWxYY
Raw
index.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta id='descriptionTag' name="description" content="This is a description for the site.">
<title>t✨artistiK</title>
<link id="favicon" rel="icon" href="https://heyleia.com/images/favicon.png">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<script src="https://heyleia.com/js/analytics.js"></script>
<link href="https://site.live/css/bootstrap.min.css" rel="stylesheet">
<link href='https://heyleia.com/css/sweetalert.css' rel='stylesheet'>
<script src='https://heyleia.com/js/swal.min.js'></script>
<link href='https://fonts.googleapis.com/css?family=Lato&amp;display=swap' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Poppins:800,800i&display=swap' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Lato:900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i&display=swap" rel="stylesheet">
<style id='fontFamilyStyle'>
h1, h2, h3, h4, h5, h6 {
font-family: 'Lato', sans-serif;
}
p, span, label, a, button, strong, div, em {
font-family: 'Open Sans', sans-serif;
}
</style>
<link href='https://heyleia.com/css/leia.css' rel='stylesheet'>
</head>
<body>
<div id='mainMenu'>
<button class='menuButton' id="trigger-overlay" onclick="document.getElementById('menuOverlaySection').className = 'overlay overlay-contentpush open'">
<i class="openMenuIcon fa fa-bars" aria-hidden="true"></i>
</button>
<div id='menuOverlaySection' class="overlay overlay-contentpush">
<div id='menuOuter' class='outerGrid'>
<div id='menuInnerGrid' class='innerGridTable'>
<div class='innerTableContent'>
<button id='close-menu' class="overlay-close" onclick="document.getElementById('menuOverlaySection').className = 'overlay overlay-contentpush'">
<i class="closeMenuIcon fa fa-times" aria-hidden="true"></i>
</button>
<a id='menuTitle' class='page-scroll' href='#'>t✨artistiK</a>
<ul id="menuItems" class="nav navbar-nav">
<li class='menuItemLi'>
<a id="aboutMenuItem" class="menuItemA" href="#about">About</a>
</li>
<li class='menuItemLi'>
<a id="featuresMenuItem" class="menuItemA" href="#features">Features</a>
</li>
<li class='menuItemLi'>
<a id="galleryMenuItem" class="menuItemA" href="#gallery">Gallery</a>
</li>
<li class='menuItemLi'>
<a id="testimonialsMenuItem" class="menuItemA" href="#testimonial">Testimonials</a>
</li>
<li class='menuItemLi'>
<a id="teamMenuItem" class="menuItemA" href="#team">Team</a>
</li>
<li class='menuItemLi'>
<a id="blogMenuItem" class="menuItemA" href="#blog">Blog</a>
</li>
<li class='menuItemLi'>
<a id="contactMenuItem" class="menuItemA" href="#contact">Contact</a>
</li>
<li class='menuItemLi'>
<a id="shopMenuItem" class="menuItemA" href="/shop">Shop</a>
</li>
<li class='menuItemLi'>
<a id="bookMenuItem" class="menuItemA" href="/book">Book</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<style>
#mainMenu {
word-break: break-word;
}
#mainMenu .floatingToolbox {
z-index: 10000 !important;
}
#trigger-overlay {
margin: 50px;
color: white;
font-size: 30px;
background: rgba(0,0,0,0);
border: none;
}
#close-menu {
background: transparent;
cursor: pointer;
color: white;
font-size: 30px;
z-index: 1;
}
#menuOverlaySection {
width: 100%;
height: 100%;
background: rgba(87,187,144,0.6);
overflow-y: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
#menuOverlaySection::-webkit-scrollbar {
width: 0 !important;
}
#menuOuter {
width: 100%;
height: 100%;
}
#menuInnerGrid {
position: absolute;
}
#menuTitle {
width: 100%;
text-align: center;
font-size: 36px;
color: white;
z-index: 1;
line-height: normal;
margin-right: 30px;
margin-bottom: 30px;
margin-top: -30px;
text-decoration: none;
}
.overlay ul li {
height: auto;
}
#menuItems {
height: auto;
}
.nav>li>a:hover {
color: black;
}
.menuItemLi a {
font-size: 24px;
font-weight: bold;
text-align: center;
color: white;
margin-top: 10px;
}
@media only screen and (max-width : 1050px) {
#menuItems {
margin-left: 0;
}
.menuItemLi a {
margin-top: 45px;
}
}
@media only screen and (max-width : 800px) {
#menuTitle {
margin-top: 20px;
}
.menuItemLi a {
margin-top: 30px;
}
}
@media only screen and (max-width : 767px) {
#menuOverlaySection {
height: fit-content;
padding-bottom: 20px;
}
#menuTitle {
text-align: center;
font-size: 22px;
margin-top: 0;
width: 80%;
margin-left: 10%;
}
#menuItems {
margin-top: 20px;
}
.menuItemLi a {
margin-top: 0;
}
}
</style>
</div>
<script>
$(document).ready(function() {
$('nav').fadeIn();
});
</script>
<header>
<video playsinline webkit-playsinline autoplay muted loop id='headerBackgroundVideo'>
<source src='/img/digital-0iBn3-UiCD6-KPFT9-MxWTs-kSxiQ.mp4' type='video/mp4'>
</video>
<div class='sectionOverlay' id='headerOverlay' style='background: rgba(0, 0, 0, 0.3)'></div>
<div id='outerHeader' class='noCustomElement'>
<div id='headerContainer' class='noCustomElement'>
<div id='headerContent' class='noCustomElement'>
<div class='row noCustomElement'>
<div id='iconWrap' class='col-sm-4 col-sm-offset-4'>
<i class="headerIcon animate fas fa-adjust"></i>
</div>
</div>
<div class='row noCustomElement'>
<div id='titleSubtitleBox' class='col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 noCustomElement'>
<div id='headerTitleWrap'><h1 id='headerTitle' class='headerTitles animate'>t✨artistiK</h1></div>
<div id='headerSubtitleWrap'><h3 id='headerSubtitle' class='headerSubtitles animate'>Let's get productive.</h3></div>
</div>
</div>
</div>
</div>
<style type='text/css'>
#headerContent {
color: white;
overflow: hidden;
word-break: break-word;
}
#iconWrap {
text-align: center;
}
.headerIcon {
font-size: 140px;
text-shadow: 1px 1px 1px rgb(87,187,144);
}
#titleSubtitleBox {
text-align: center;
}
#headerTitleWrap {
margin: 40px 0;
}
#headerTitle {
font-size: 100px;
text-transform: uppercase;
letter-spacing: .15em;
animation-delay: 0.3s;
margin: 20px 0;
}
#headerSubtitle {
font-size: 24px;
animation-delay: 0.6s;
}
@keyframes pop-in {
0% {
opacity: 0;
transform: translateY(-12rem) scale(.8);
-webkit-transform: translateY(-12rem) scale(.8);
}
100% {
opacity: 1;
transform: none;
-webkit-transform: none;
}
}
.animate {
animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
opacity: 0;
}
header .customTitle {
font-size: 30px;
display: block;
}
header .customParagraph {
font-size: 20px;
display: block;
}
header .customLink,
header .customLink a {
color: white;
font-size: 20px;
display: block;
width: 100%;
}
header .customLink:hover {
opacity: 0.5;
text-decoration: none;
}
header .customIcon {
font-size: 36px;
text-shadow: 1px 1px 1px rgb(87,187,144);
}
header .customTitle,
header .customParagraph,
header .customLink,
header .customIcon,
header .customButton,
header .customImage,
header .customEmbed {
margin: 10px 0;
}
header #iconWrap .customTitle,
header #iconWrap .customParagraph,
header #iconWrap .customLink,
header #iconWrap .customIcon,
header #iconWrap .customButton,
header #iconWrap .customImage,
header #iconWrap .customEmbed {
margin: 20px 0 0;
}
header #headerTitleWrap .customTitle,
header #headerTitleWrap .customParagraph,
header #headerTitleWrap .customLink,
header #headerTitleWrap .customIcon,
header #headerTitleWrap .customButton,
header #headerTitleWrap .customImage,
header #headerTitleWrap .customEmbed,
header #headerSubtitleWrap .customTitle,
header #headerSubtitleWrap .customParagraph,
header #headerSubtitleWrap .customLink,
header #headerSubtitleWrap .customIcon,
header #headerSubtitleWrap .customButton,
header #headerSubtitleWrap .customImage,
header #headerSubtitleWrap .customEmbed {
margin: 0;
}
@media only screen and (max-width : 1024px) {
#headerTitle {
letter-spacing: .05em;
}
}
@media only screen and (max-width : 800px) {
#headerTitle {
font-size: 48px;
}
#headerSubtitle {
font-size: 18px;
}
}
@media only screen and (max-width : 767px) {
header .customTitle {
font-size: 25px;
}
header .customParagraph {
font-size: 16px;
}
header .customLink a {
font-size: 16px;
}
header #iconWrap .customImage {
padding: 0 15px;
}
}
@media only screen and (max-width : 360px) {
.headerIcon {
font-size: 100px;
}
}
</style>
</div>
<style>
header {
height: 100%;
}
@media only screen and (max-width: 767px) {
#headerTitle {
font-size: 40px;
}
}
</style>
</header>
<section id='about'>
<div class='sectionOverlay' id='aboutOverlay' style='background: rgba(0, 0, 0, 0)'></div>
<div id='outerAbout' class='outerSection noCustomElement'>
<div id='aboutContainer' class='sectionContainer noCustomElement'>
<div id='aboutContent' class='sectionContent container-fluid noCustomElement'>
<div class='row noCustomElement'>
<div class='col-sm-8 col-sm-offset-2 noCustomElement'>
<div id='aboutTitleWrap'><h2 id='aboutTitle'>About Us</h2></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-lg-6 col-lg-offset-3 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 noCustomElement'>
<div id='aboutParagraph1Wrap'><p id='aboutParagraph1' class='aboutParagraph'>We are one of the the top digital creation solutions in the area. We have been giving high caliber, intensely evaluated digital creation solutions to all who come to us for years. In that time, we have found out about client administration and the benefit of realizing our customers needs. We adore driving by ordinary and perceiving how extraordinary we can become together!</p></div>
<div id='aboutParagraph2Wrap'><p id='aboutParagraph2' class='aboutParagraph'>While other digital creation solutions endeavor to be less inclined to service their customers with intimacy and integrity, we specialize in results that are community oriented, affable, and pioneering. We submerge ourselves in your solution to increase profound understanding into your operational and vital potential, working with you to co-make arrangements explicitly for you.</p></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-sm-8 col-sm-offset-2 noCustomElement'>
<div id='aboutButtons'><div><a class='aboutButton'>Learn More</a></div></div>
</div>
</div>
</div>
</div>
<style>
#about {
color: black;
}
#about .aboutImageBg {
color: white;
}
#aboutContent {
text-align: center;
}
#aboutTitleWrap {
margin-bottom: 60px;
}
#aboutTitle {
font-size: 48px;
text-transform: uppercase;
margin: 10px 0;
}
.aboutParagraph {
line-height: 2;
}
#aboutButtons {
margin: 48px 0;
}
.aboutButton {
color: black;
padding: 6px 42px;
border: 2px solid black;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
transition: 0.3s;
display: inline-block;
}
.aboutButton:focus {
color: black;
}
#about .aboutImageBg .aboutButton {
color: white;
border-color: white;
}
.aboutButton:hover {
color: white;
background-color: rgba(87,187,144,0.5);
text-decoration: none;
}
#about .customTitle {
font-size: 40px;
display: block;
}
#about .customParagraph {
font-size: 14px;
text-align: justify;
text-align-last: center;
display: block;
}
#about .customLink {
color: black;
font-size: 16px;
display: block;
width: 100%;
}
#about .aboutImageBg .customLink {
color: white;
}
#about .customLink:hover {
opacity: 0.5;
text-decoration: none;
}
#about .customIcon {
font-size: 36px;
}
#about .customTitle,
#about .customParagraph,
#about .customLink,
#about .customIcon,
#about .customButton,
#about .customImage,
#about .customEmbed {
margin: 10px 0;
}
#about #aboutTitleWrap .customTitle,
#about #aboutTitleWrap .customParagraph,
#about #aboutTitleWrap .customLink,
#about #aboutTitleWrap .customIcon,
#about #aboutTitleWrap .customButton,
#about #aboutTitleWrap .customImage,
#about #aboutTitleWrap .customEmbed {
margin: 30px 0 0;
}
#about #aboutParagraph1Wrap .customTitle,
#about #aboutParagraph1Wrap .customParagraph,
#about #aboutParagraph1Wrap .customLink,
#about #aboutParagraph1Wrap .customIcon,
#about #aboutParagraph1Wrap .customButton,
#about #aboutParagraph1Wrap .customImage,
#about #aboutParagraph1Wrap .customEmbed {
margin: 0 0 10px;
}
#about #aboutParagraph2Wrap .customTitle,
#about #aboutParagraph2Wrap .customParagraph,
#about #aboutParagraph2Wrap .customLink,
#about #aboutParagraph2Wrap .customIcon,
#about #aboutParagraph2Wrap .customButton,
#about #aboutParagraph2Wrap .customImage,
#about #aboutParagraph2Wrap .customEmbed {
margin: 0;
}
#about #aboutButtons .customTitle,
#about #aboutButtons .customParagraph,
#about #aboutButtons .customLink,
#about #aboutButtons .customIcon,
#about #aboutButtons .customButton,
#about #aboutButtons .customImage,
#about #aboutButtons .customEmbed {
margin: 20px 0 0;
}
@media only screen and (max-width : 800px) {
#aboutTitle {
font-size: 40px;
}
.aboutParagraph {
text-align: center;
line-height: 1.75;
}
#about .customTitle {
font-size: 36px;
}
#about .customParagraph {
text-align: center;
line-height: 1.75;
}
}
</style>
</div>
<style>
#aboutContainer {
background: rgb(255,255,255);
}
</style>
</section>
<section id='features'>
<div class='sectionOverlay' id='featuresOverlay' style='background: rgba(0 ,0, 0, 0.5)'></div>
<div id='outerFeatures' class='outerSection noCustomElement'>
<div id='featuresContainer' class='sectionContainer featuresImageBg noCustomElement'>
<div id='featuresContent' class='sectionContent container-fluid noCustomElement'>
<div class='row noCustomElement'>
<div id='featuresTop' class='col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 noCustomElement'>
<div id='featuresTitleWrap'><h2 id='featuresTitle' class='featuresTitles'>Our Features</h2></div>
<div id='featuresTitleHrWrap'><hr id='featuresTitleHr'></div>
<div id='featuresSubtitleWrap'><h4 id='featuresSubtitle' class='featuresSubtitles'></h4></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-sm-10 col-sm-offset-1 noCustomElement'>
<div id='featuresRowContainer' class='noCustomElement'>
<!-- featuresTemplate start --><div class='features3 row noCustomElement'>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Calculated</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon fas fa-balance-scale'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>Taking the time to fully understand how to proceed is atop our list of priorities.</p></div>
</div>
</div>
</div>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Reliable</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon fa fa-lock'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>You can count on us to make sure your project is completed with care.</p></div>
</div>
</div>
</div>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Observant</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon fas fa-eye'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>We keep a close eye on every component of our work to ensure nothing is left out.</p></div>
</div>
</div>
</div>
</div><div class='features3 row noCustomElement'>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Diverse</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon fas fa-adjust'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>Our backgrounds afford us the ability to see things from a number of different perspectives.</p></div>
</div>
</div>
</div>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Personable</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon far fa-handshake'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>We pride ourselves on being people people, and always work to provide a comfortable experience.</p></div>
</div>
</div>
</div>
<div class='featuresTemplate outerGrid col-sm-4 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='featuresHeaderWrap'><h5 class='featuresHeader'>Effective</h5></div>
<div class='featuresHrWrap'><hr class='featuresHr'></div>
<div class='featuresIcons'><i class='featuresIcon fas fa-money-bill-alt'></i></div>
<div class='featuresTextWrap'><p class='featuresText'>We always maximize our resources to work hard and come in under budget every time.</p></div>
</div>
</div>
</div>
</div><!-- featuresTemplate end -->
</div>
</div>
</div>
</div>
</div>
<style>
#features {
color: black;
}
#features .featuresImageBg {
color: white;
}
#featuresContent {
text-align: center;
}
#featuresTitleWrap {
margin-bottom: 30px;
}
#featuresTitle {
font-size: 40px;
}
#featuresTitleHr {
border: 1px solid rgb(87,187,144);
}
#features .featuresImageBg #featuresTitleHr {
border-color: white;
}
#featuresSubtitleWrap {
margin: 30px 0 50px;
}
#featuresSubtitle {
font-size: 22px;
letter-spacing: .09em;
}
.features3 {
display: flex;
}
.featuresTemplate {
margin-top: 28px;
}
.featuresHeader {
font-size: 28px;
}
.featuresHr {
border: 3px double rgb(87,187,144);
width: 60%;
}
#features .featuresImageBg .featuresHr {
border-color: white;
}
.featuresIcon {
font-size: 50px;
margin-top: 0;
}
.featuresTextWrap {
margin: 18px auto;
}
.featuresTextWrap {
width: 60%;
}
#features .customTitle {
font-size: 40px;
display: block;
}
#features #featuresRowContainer .customTitle {
font-size: 28px;
}
#features .customParagraph {
font-size: 18px;
display: block;
}
#features #featuresRowContainer .customParagraph {
font-size: 14px;
}
#features .customLink {
color: black;
font-size: 18px;
display: block;
width: 100%;
}
#features #featuresRowContainer .customLink {
font-size: 14px;
}
#features .featuresImageBg .customLink {
color: white;
}
#features .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#features .customIcon {
font-size: 32px;
}
#features .customTitle,
#features .customParagraph,
#features .customLink,
#features .customIcon,
#features .customButton,
#features .customImage,
#features .customEmbed {
margin: 10px 0;
}
#features #featuresTitleWrap .customTitle,
#features #featuresTitleWrap .customParagraph,
#features #featuresTitleWrap .customEmbed {
margin: 15px 0 10px;
}
#features #featuresTitleWrap .customIcon,
#features #featuresTitleWrap .customButton,
#features #featuresTitleWrap .customImage,
#features #featuresTitleHrWrap .customIcon,
#features #featuresTitleHrWrap .customButton,
#features #featuresTitleHrWrap .customImage,
#features .featuresHeaderWrap .customIcon,
#features .featuresHeaderWrap .customButton {
margin: 10px 0 0;
}
#features .featuresHeaderWrap .customTitle {
margin: 15px 0 0;
}
#features .featuresHrWrap .customTitle,
#features .featuresHrWrap .customParagraph,
#features .featuresHrWrap .customLink,
#features .featuresHrWrap .customEmbed {
margin: 0 0 15px;
}
#features .featuresHrWrap .customIcon,
#features .featuresHrWrap .customButton,
#features .featuresHrWrap .customImage {
margin: 0 0 20px;
}
#features .featuresIcons .customTitle,
#features .featuresIcons .customParagraph,
#features .featuresIcons .customLink,
#features .featuresIcons .customEmbed {
margin: 15px 0 10px;
}
#features .featuresIcons .customIcon,
#features .featuresIcons .customButton,
#features .featuresIcons .customImage {
margin: 20px 0 0;
}
#features .featuresTextWrap .customTitle,
#features .featuresTextWrap .customParagraph,
#features .featuresTextWrap .customLink,
#features .featuresTextWrap .customIcon,
#features .featuresTextWrap .customButton,
#features .featuresTextWrap .customImage,
#features .featuresTextWrap .customEmbed {
margin: 0 0 10px;
}
@media only screen and (max-width : 1050px) {
.featuresHeader {
font-size: 22px;
}
#features #featuresRowContainer .customTitle {
font-size: 22px;
}
}
@media only screen and (max-width : 800px) {
.featuresTextWrap {
width: 80%;
}
}
@media only screen and (max-width : 767px) {
.features3 {
display: initial;
margin: 0;
}
#featuresSubtitleWrap {
margin-bottom: 50px;
}
.featuresTemplate {
margin-top: 50px;
}
}
@media only screen and (max-width : 360px) {
#featuresTitle {
font-size: 30px;
}
#features .customTitle {
font-size: 30px;
}
}
</style>
</div>
<style>
#featuresContainer {
background: url('/img/digitalcreation-ngRoD-01xIZ-KoxUe-pXpyx-MVpzF.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
</style>
</section>
<section id='gallery'>
<script>
// script start
$.browser = {}; $.support.opacity = true;
// script end
</script>
<script src='/lib/fancybox/jquery.fancybox-1.3.4.pack.js?v=1571452735'></script>
<script src='/lib/fancybox/jquery.easing-1.3.pack.js'></script>
<script src='/lib/fancybox/jquery.mousewheel-3.0.4.pack.js'></script>
<link href='/lib/fancybox/jquery.fancybox-1.3.4.css' rel='stylesheet'>
<div class='sectionOverlay' id='galleryOverlay' style='background: rgba(0, 0, 0, 0)'></div>
<div id='outerGallery' class='outerSection noCustomElement'>
<div id='galleryContainer' class='sectionContainer noCustomElement'>
<div id='galleryContent' class='sectionContent container-fluid noCustomElement'>
<div class='row noCustomElement'>
<div class='col-md-10 col-md-offset-1 col-sm-12 col-xs-12 noCustomElement'>
<div id='galleryTitleWrap'>
<h2 id='galleryTitle' class='galleryTitles'>Our Photos</h2>
</div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-md-10 col-md-offset-1 col-sm-12 noCustomElement'>
<div id='galleryBottom' class='row noCustomElement'>
<div class='outerGrid col-sm-3 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div id='categoryButtonContainer'>
<div id='categoryButtonRow' class='buttons4 noCustomElement'>
<div class='categoryButtonContainer noCustomElement'>
<div class='categoryButtonWrap noCustomElement'><a id='allCategoriesBtn' class='categoryButton allCategoryButton categoryButtonSelected' data-filter="all">All Categories</a></div>
</div>
<div class='categoryButtonContainer noCustomElement'>
<div class='categoryButtonWrap noCustomElement'><a class='categoryButton' data-filter="category1">Category 1</a></div>
</div>
<div class='categoryButtonContainer noCustomElement'>
<div class='categoryButtonWrap noCustomElement'><a class='categoryButton' data-filter="category2">Category 2</a></div>
</div>
<div class='categoryButtonContainer noCustomElement'>
<div class='categoryButtonWrap noCustomElement'><a class='categoryButton' data-filter="category3">Category 3</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='galleryImgSectionOuter' class='outerGrid col-sm-9 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div id='galleryRowContainer' class='noCustomElement'>
<!-- galleryTemplate start --><div class='gallery3 row'>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category1">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-hxC0d-hdAyI-Do91x-ZCbMX-62ulq.jpg" class='fancybox innerTableContent' title='Photo 1'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-hxC0d-hdAyI-Do91x-ZCbMX-62ulq.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 1</h4>
</div>
</a>
</div>
</div>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category2">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-ixCOn-IvaKm-3rG4g-O7LOz-8n2Zz.jpg" class='fancybox innerTableContent' title='Photo 2'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-ixCOn-IvaKm-3rG4g-O7LOz-8n2Zz.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 2</h4>
</div>
</a>
</div>
</div>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category3">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-PVsA7-Zjvbx-Ykiyv-LsdSm-9gkKu.jpg" class='fancybox innerTableContent' title='Photo 3'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-PVsA7-Zjvbx-Ykiyv-LsdSm-9gkKu.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 3</h4>
</div>
</a>
</div>
</div>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category1">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-aJYSi-Oh46h-1VGmw-3BXc0-Jnim5.jpg" class='fancybox innerTableContent' title='Photo 4'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-aJYSi-Oh46h-1VGmw-3BXc0-Jnim5.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 4</h4>
</div>
</a>
</div>
</div>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category2">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-Lmcvx-NM6le-ezBYv-iQGp3-3i4RA.jpg" class='fancybox innerTableContent' title='Photo 5'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-Lmcvx-NM6le-ezBYv-iQGp3-3i4RA.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 5</h4>
</div>
</a>
</div>
</div>
<div class="categoryFilter outerGrid col-sm-4 col-xs-12 noCustomElement category3">
<div class='innerGridTable galleryImage noCustomElement'>
<a rel='scrollGroup' href="/img/digitalcreation-uaoTC-kepDQ-cQcY2-63r8S-dgikL.jpg" class='fancybox innerTableContent' title='Photo 6'>
<img class='galleryImages zoom img-fluid' src="/img/digitalcreation-uaoTC-kepDQ-cQcY2-63r8S-dgikL.jpg">
<div class="galleryOverlay overlayFade overlayFadeToggle noCustomElement">
<h4 class="galleryText">Photo 6</h4>
</div>
</a>
</div>
</div>
</div><!-- galleryTemplate end -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#gallery {
color: black;
}
#gallery .galleryImageBg {
color: white;
}
#galleryContent {
word-wrap: break-word;
text-align: center;
}
#galleryTitle {
font-size: 50px;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: .065em;
}
#galleryBottom {
display: flex;
}
.categoryButtonContainer {
display: inline-block;
}
.categoryButton {
color: black;
border: 1px solid black;
cursor: pointer;
display: inline-block;
padding: 6px 32px;
margin-bottom: 10px;
border-radius: 20px;
text-transform: uppercase;
text-decoration: none;
transition: 0.3s;
}
#gallery .galleryImageBg .categoryButton {
color: white;
border-color: white;
}
.categoryButton:focus {
color: white;
}
.categoryButton:hover {
color: white;
text-decoration: none;
background-color: rgba(0,0,0,0.5);
}
.categoryButtonSelected {
color: white;
text-decoration: none;
background-color: rgb(0,0,0);
}
#gallery .galleryImageBg .categoryButton:hover,
#gallery .galleryImageBg .categoryButton:focus,
#gallery .galleryImageBg .categoryButtonSelected {
color: white;
border-color: white;
}
.categoryFilter {
margin-top: 10px;
padding: 0 5px;
}
.galleryImages {
height: 250px;
width: 100%;
border-radius: 2px;
object-fit: cover;
display: block;
}
#gallery .galleryImageBg .galleryImages {
border: 1px solid white;
}
.galleryImages:hover {
opacity: 0.8;
}
.galleryOverlay {
position: absolute;
transition: all .3s ease;
opacity: 0;
transition: 0.9s;
z-index: 1100;
}
.fancybox:hover .galleryOverlay {
opacity: 1;
}
.galleryText {
color: white;
text-shadow: 1px 1px rgb(87,187,144);
position: absolute;
bottom: 0;
left: 47%;
transform: translate(-50%,-50%);
font-size: 20px;
}
.overlayFade {
height: 100%;
width: 99%;
top: 0;
padding-right: 0;
}
.galleryTextGone {
display: none;
}
#fancybox-title {
color: white;
margin-left: 0 !important;
padding: 0 !important;
background-color: rgb(87,187,144);
}
#fancybox-title-over {
text-align: center;
border: 2px solid white;
}
#fancybox-content {
border: 2px solid white !important;
background: white;
}
#fancybox-close {
right: -35px;
}
#fancybox-right {
right: -20px;
}
#fancybox-bg-nw,
#fancybox-bg-ne,
#fancybox-bg-sw,
#fancybox-bg-se {
display: none;
}
/* * * * * * * * * */
#gallery .customTitle {
font-size: 40px;
letter-spacing: .065em;
display: block;
}
#gallery .customParagraph {
font-size: 18px;
display: block;
}
#gallery .customLink {
color: black;
font-size: 18px;
display: block;
width: 100%;
}
#gallery .galleryImageBg .customLink {
color: white;
}
#gallery .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#gallery .customIcon {
font-size: 32px;
}
#gallery .customTitle,
#gallery .customParagraph,
#gallery .customLink,
#gallery .customIcon,
#gallery .customButton,
#gallery .customImage,
#gallery .customEmbed {
margin: 10px 0;
}
@media only screen and (max-width : 1050px) {
.galleryImages {
height: 220px;
}
}
@media only screen and (max-width : 800px) {
#galleryTitle {
font-size: 40px;
}
.galleryImages {
height: 190px;
}
}
@media only screen and (max-width : 767px) {
#galleryTitle {
font-size: 36px;
letter-spacing: 0.03em;
}
#galleryImgSectionOuter {
margin-top: 40px;
}
.galleryImages {
height: 320px;
}
.galleryTitleOuter {
margin-bottom: 70px;
}
#galleryBottom {
display: initial;
}
.fancybox:hover .galleryOverlay {
opacity: 0;
}
#gallery .customTitle {
font-size: 36px;
letter-spacing: .03em;
}
}
</style>
<script>
// script start
$(document).ready(function(){
setCategoryClicks();
});
var setCategoryClicks = function() {
$(".categoryButton").unbind();
$('.categoryButton').click(function(){
// let offsetHeight = document.getElementById('galleryRowContainer').offsetHeight.toString() + 'px';
var value = $(this).attr('data-filter');
// $('#galleryRowContainer').css({'min-height':offsetHeight});
// setTimeout(function(){
// $('#galleryRowContainer').animate({'min-height':'0'});
// },3000)
if (value === 'all') {
$('.categoryFilter').show('1000');
$(this).addClass('categoryButtonSelected');
$('.categoryButton').not(this).removeClass('categoryButtonSelected');
} else if ($(this).hasClass('categoryButtonSelected')) {
$('.categoryFilter').show('1000');
$(this).removeClass('categoryButtonSelected');
$('.allCategoryButton').addClass('categoryButtonSelected');
}
else {
$('.categoryFilter').not('.' + value).hide('3000');
$('.categoryFilter').filter('.' + value).show('3000');
$('.allCategoryButton').removeClass('categoryButtonSelected');
$('.categoryButton').not(this).removeClass('categoryButtonSelected');
$(this).toggleClass('categoryButtonSelected');
}
});
$(".zoom").hover(function(){
$(this).addClass('transition');
}, function(){
$(this).removeClass('transition');
});
$("a[rel=scrollGroup]").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'outside',
'type' : 'image',
'titleFormat' : function(title) {
return '<span id="fancybox-title-over">' + title + '</span>';
}
});
}
// script end
</script>
</div>
<style>
#galleryContainer {
background: rgb(255,255,255);
}
</style>
</section>
<section id='testimonial'>
<div class='sectionOverlay' id='testimonialsOverlay' style='background: rgba(0 ,0, 0, 0.5)'></div>
<div id='outerTestimonial' class='outerSection noCustomElement'>
<div id='testimonialContainer' class='sectionContainer testimonialImageBg noCustomElement'>
<div id='testimonialContent' class='sectionContent container-fluid noCustomElement'>
<div id='testimonialTop' class="row noCustomElement">
<div class='col-md-offset-2 col-md-8 col-sm-10 col-sm-offset-1 text-center noCustomElement'>
<div id='testimonialTitleWrap'><h2 id='testimonialTitle' class='testimonialTitles'>Our Testimonials</h2></div>
<div id='testimonialHrWrap'><hr id='testimonialHr'></div>
<div id='testimonialSubtitleWrap'><h4 id='testimonialSubtitle' class='testimonialSubtitles'></h4></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 noCustomElement'>
<div class="carousel slide noCustomElement" data-ride="carousel" id="quote-carousel" data-keyboard="false">
<ol id='testimonialIndicatorContainer' class="carousel-indicators"><li data-target='#quote-carousel' data-slide-to='0' class='active'></li><li data-target='#quote-carousel' data-slide-to='1'></li><li data-target='#quote-carousel' data-slide-to='2'></li></ol>
<div id='testimonialRowContainer' class="carousel-inner noCustomElement">
<!-- testimonialTemplate start --><div class='item testimonial1 row active'>
<div class='col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 text-center noCustomElement'>
<blockquote class='testimonialCard'>
<div class="testimonialParaWrap row noCustomElement">
<div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 noCustomElement">
<div class='testimonialIcons'><i class="testimonialIcon testimonialIconQuote fas fa-quote-left"></i></div>
<div class='testimonialParagraphWrap'><p class='testimonialParagraph'>Never had a better experience than working with this team. Such a great job, guys. Keep it up!</p></div>
</div>
</div>
<div class="row noCustomElement">
<div class="col-sm-12 noCustomElement">
<div class='testimonialImage'><img class='testimonialImages' src="/img/v8Gdk-bjCsK-WhV5M-vrNf9-lBZe6.png"></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-sm-12 noCustomElement'>
<div class='blockquoteSourceWrap'><p class='blockquoteSource'>Jordan</p></div>
</div>
</div>
</blockquote>
</div>
</div><div class='item testimonial1 row'>
<div class='col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 text-center noCustomElement'>
<blockquote class='testimonialCard'>
<div class="testimonialParaWrap row noCustomElement">
<div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 noCustomElement">
<div class='testimonialIcons'><i class="testimonialIcon testimonialIconQuote fas fa-quote-left"></i></div>
<div class='testimonialParagraphWrap'><p class='testimonialParagraph'>Wow, what an experience. Such a great team here. Highly recommend to anyone looking at this site right now!</p></div>
</div>
</div>
<div class="row noCustomElement">
<div class="col-sm-12 noCustomElement">
<div class='testimonialImage'><img class='testimonialImages' src="/img/Mp4uD-9lRGz-0l58D-LFDlF-WSp6g.png"></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-sm-12 noCustomElement'>
<div class='blockquoteSourceWrap'><p class='blockquoteSource'>Tom</p></div>
</div>
</div>
</blockquote>
</div>
</div><div class='item testimonial1 row'>
<div class='col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 text-center noCustomElement'>
<blockquote class='testimonialCard'>
<div class="testimonialParaWrap row noCustomElement">
<div class="col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 noCustomElement">
<div class='testimonialIcons'><i class="testimonialIcon testimonialIconQuote fas fa-quote-left"></i></div>
<div class='testimonialParagraphWrap'><p class='testimonialParagraph'>These guys were great! I absolutely loved every aspect of using their services. Way to go team.</p></div>
</div>
</div>
<div class="row noCustomElement">
<div class="col-sm-12 noCustomElement">
<div class='testimonialImage'><img class='testimonialImages' src="/img/tiOJX-Dpbit-NLqhh-WhdRX-91UmN.png"></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-sm-12 noCustomElement'>
<div class='blockquoteSourceWrap'><p class='blockquoteSource'>Brooke</p></div>
</div>
</div>
</blockquote>
</div>
</div><!-- testimonialTemplate end -->
</div>
<a data-slide="prev" data-target="#quote-carousel" class="testimonialCarouselIcons left carousel-control"><i class="testimonialCarouselIcon fas fa-chevron-left"></i></a>
<a data-slide="next" data-target="#quote-carousel" class="testimonialCarouselIcons right carousel-control"><i class="testimonialCarouselIcon fas fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<style>
#testimonial {
color: black;
}
#testimonial .testimonialImageBg {
color: white;
}
#testimonialContent {
word-wrap: break-word;
padding-bottom: 160px;
}
#testimonialTitle {
font-size: 45px;
margin-bottom: 15px;
letter-spacing: .075em;
}
#testimonialHr {
border: 2px solid rgb(87,187,144);
width: 25%;
}
#testimonial .testimonialImageBg #testimonialHr {
border-color: white;
}
#testimonialSubtitleWrap {
margin-bottom: 20px;
}
#testimonialSubtitle {
font-size: 22px;
letter-spacing: .075em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
}
#quote-carousel .carousel-control {
background: none;
color: rgb(87,187,144);
font-size: 35px;
text-shadow: none;
margin-top: 30px;
}
#testimonial .testimonialImageBg #quote-carousel .carousel-control {
color: white;
}
#quote-carousel .carousel-control.left {
left: -12px;
top: 80px;
}
#quote-carousel .carousel-control.right {
right: -12px;
top: 80px;
}
#quote-carousel .carousel-indicators {
bottom: -95px;
}
#quote-carousel .carousel-indicators li {
background: rgba(87,187,144,0.3);
height: 30px;
width: 30px;
border-radius: 50%;
margin: 10px 4px 0;
}
#quote-carousel .carousel-indicators .active {
background: rgb(87,187,144);
}
#testimonial .testimonialImageBg #quote-carousel .carousel-indicators .active {
background: white;
}
.testimonialCarouselIcons {
cursor: pointer;
}
#quote-carousel img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.item blockquote {
border-left: none;
margin: 0;
}
.testimonialCardBottom {
display: flex;
margin-top: 24px;
}
.item blockquote img {
margin-bottom: 10px;
border: 3px solid white;
}
#testimonial .testimonialImageBg .item blockquote img {
border-color: white;
}
blockquote p:before {
display: none;
}
.testimonialCard {
color: white;
margin-top: 20px;
background-color: rgba(87,187,144,0.7);
border-radius: 10px;
padding: 15px;
}
#testimonial .testimonialImageBg .testimonialCard {
background-color: rgba(0,0,0,0.5);
border: 2px solid white;
}
.testimonialParaWrap {
margin-bottom: 20px;
}
.testimonialParagraph {
font-size: 18px;
}
.testimonialIconQuote {
font-size: 30px;
margin-bottom: 5px;
}
.testIconLeft {
margin-bottom: 12px;
}
.blockquoteSource {
color: white;
font-size: 14px;
display: block;
}
/* * * * * * * * */
#testimonial .customTitle {
font-size: 45px;
letter-spacing: .075em;
display: block;
}
#testimonial .testimonialCard .customTitle {
font-size: 24px;
letter-spacing: normal;
}
#testimonial .customParagraph {
font-size: 20px;
display: block;
}
#testimonial .testimonialCard .customParagraph {
font-size: 18px;
letter-spacing: normal;
}
#testimonial .customLink {
color: black;
font-size: 20px;
display: block;
width: 100%;
}
#testimonial .testimonialCard .customLink {
font-size: 18px;
}
#testimonial .featuresImageBg .customLink,
#testimonial .testimonialCard .customLink {
color: white;
}
#testimonial .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#testimonial .customIcon {
font-size: 32px;
}
#testimonial .customTitle,
#testimonial .customParagraph,
#testimonial .customLink,
#testimonial .customIcon,
#testimonial .customButton,
#testimonial .customImage,
#testimonial .customEmbed {
margin: 10px 0;
}
#testimonial #testimonialTitleWrap .customIcon,
#testimonial #testimonialTitleWrap .customButton,
#testimonial #testimonialTitleWrap .customImage,
#testimonial #testimonialHrWrap .customIcon,
#testimonial #testimonialHrWrap .customButton,
#testimonial #testimonialHrWrap .customImage,
#testimonial .blockquoteSourceWrap .customTitle,
#testimonial .blockquoteSourceWrap .customParagraph,
#testimonial .blockquoteSourceWrap .customLink,
#testimonial .blockquoteSourceWrap .customIcon,
#testimonial .blockquoteSourceWrap .customButton,
#testimonial .blockquoteSourceWrap .customImage,
#testimonial .blockquoteSourceWrap .customEmbed {
margin: 0;
}
#testimonial .testimonialParagraphWrap .customTitle,
#testimonial .testimonialParagraphWrap .customParagraph,
#testimonial .testimonialParagraphWrap .customLink,
#testimonial .testimonialParagraphWrap .customIcon,
#testimonial .testimonialParagraphWrap .customButton,
#testimonial .testimonialParagraphWrap .customImage,
#testimonial .testimonialParagraphWrap .customEmbed,
#testimonial .testimonialImage .customTitle,
#testimonial .testimonialImage .customParagraph,
#testimonial .testimonialImage .customLink,
#testimonial .testimonialImage .customIcon,
#testimonial .testimonialImage .customButton,
#testimonial .testimonialImage .customImage,
#testimonial .testimonialImage .customEmbed {
margin: 0 0 10px;
}
@media (max-width: 767px) {
#testimonialTitle {
font-size: 32px;
}
#testimonialSubtitle {
font-size: 20px;
}
.testimonialCardBottom {
display: initial;
}
#quote-carousel .carousel-indicators {
bottom: -110px;
}
#testimonial .customTitle {
font-size: 32px;
}
}
</style>
<script>
// script start
$(document).ready(function() {
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
// script end
</script>
</div>
<style>
#testimonialContainer {
background: url('/img/digitalcreation-cduWv-vGLaZ-OB43E-KVVnu-Njo5h.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
</style>
<script>
// script start
$(document).ready(function() {
setTimeout(function() {
initializeCarousel();
}, 3000);
});
var initializeCarousel = function() {
if (window.parent === window.self) {
$('#quote-carousel').data('bs.carousel').options.interval = 6000;
} else {
//$('#quote-carousel').data('bs.carousel').options.interval = 10000;
$('#quote-carousel').carousel('pause');
setInterval(function() {
$('#quote-carousel').carousel('pause');
}, 10000);
}
}
// script end
</script>
</section>
<section id='team'>
<div class='sectionOverlay' id='teamOverlay' style='background: rgba(0, 0, 0, 0)'></div>
<div id='outerTeam' class='outerSection noCustomElement'>
<div id='teamContainer' class='sectionContainer noCustomElement'>
<div id='teamContent' class='sectionContent container-fluid noCustomElement'>
<div class='row'>
<h2 id='teamTitle' class='teamTitles'>Our Team</h2>
</div>
<div class='row noCustomElement'>
<div class='col-lg-10 col-lg-offset-1 col-sm-12 noCustomElement'>
<div id='teamRowContainer' class='noCustomElement'>
<!-- teamTemplate start --><div class='team4 row noCustomElement'>
<div class='teamTemplate outerGrid col-md-3 col-sm-3 col-sm-offset-0 col-xs-10 col-xs-offset-1 noCustomElement'>
<div class='teamTemplateInner innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberImage'><img class='teamMemberImages' src='/img/team/MatthewWilson.jpg'/></div>
<div class='teamMemberInfoRow row noCustomElement'>
<div class='teamMemberInfoOuter outerGrid col-lg-10 col-md-9 col-sm-8 col-xs-10 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberNameWrap'><h3 class="teamMemberName">Matthew Wilson</h3></div>
<div class='teamMemberTitleWrap'><h3 class="teamMemberTitle">Chief Executive Officer</h3></div>
</div>
</div>
</div>
<div class='teamIconOuter outerGrid col-lg-2 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-2 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamIcons'><i class="teamIcon fab fa-linkedin"></i></div>
</div>
</div>
</div>
</div>
<div class='row noCustomElement'>
<div class='teamMemberTextWrap col-sm-12'>
<p class='teamMemberText'>Matthew, our founder and director, boasts years of industry expertise and an inspirational commitment to our vision. Without leadership like this, we would not be who we are today.</p>
</div>
</div>
</div>
</div>
</div>
<div class='teamTemplate outerGrid col-md-3 col-sm-3 col-sm-offset-0 col-xs-10 col-xs-offset-1 noCustomElement'>
<div class='teamTemplateInner innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberImage'><img class='teamMemberImages' src='/img/team/LindseyCampbell.jpg'/></div>
<div class='teamMemberInfoRow row noCustomElement'>
<div class='teamMemberInfoOuter outerGrid col-lg-10 col-md-9 col-sm-8 col-xs-10 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberNameWrap'><h3 class="teamMemberName">Lindsay Campbell</h3></div>
<div class='teamMemberTitleWrap'><h3 class="teamMemberTitle">Marketing Director</h3></div>
</div>
</div>
</div>
<div class='teamIconOuter outerGrid col-lg-2 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-2 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamIcons'><i class="teamIcon fab fa-linkedin"></i></div>
</div>
</div>
</div>
</div>
<div class='row noCustomElement'>
<div class='teamMemberTextWrap col-sm-12'>
<p class='teamMemberText'>Lindsay’s creativity and brand thinking helped make the company’s mark on the industry. Since joining the company in 2014, her leadership has driven the team to incredible success.</p>
</div>
</div>
</div>
</div>
</div>
<div class='teamTemplate outerGrid col-md-3 col-sm-3 col-sm-offset-0 col-xs-10 col-xs-offset-1 noCustomElement'>
<div class='teamTemplateInner innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberImage'><img class='teamMemberImages' src='/img/team/AlexKing.jpg'/></div>
<div class='teamMemberInfoRow row noCustomElement'>
<div class='teamMemberInfoOuter outerGrid col-lg-10 col-md-9 col-sm-8 col-xs-10 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberNameWrap'><h3 class="teamMemberName">Alex King</h3></div>
<div class='teamMemberTitleWrap'><h3 class="teamMemberTitle">Project Manager</h3></div>
</div>
</div>
</div>
<div class='teamIconOuter outerGrid col-lg-2 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-2 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamIcons'><i class="teamIcon fab fa-linkedin"></i></div>
</div>
</div>
</div>
</div>
<div class='row noCustomElement'>
<div class='teamMemberTextWrap col-sm-12'>
<p class='teamMemberText'>Alex’s dedication to her position is second to none. She is well respected by her team as well as the entire industry. She has been meeting deadlines and getting things done right with us since 2012.</p>
</div>
</div>
</div>
</div>
</div>
<div class='teamTemplate outerGrid col-md-3 col-sm-3 col-sm-offset-0 col-xs-10 col-xs-offset-1 noCustomElement'>
<div class='teamTemplateInner innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberImage'><img class='teamMemberImages' src='/img/team/EmilyYoung.jpg'/></div>
<div class='teamMemberInfoRow row noCustomElement'>
<div class='teamMemberInfoOuter outerGrid col-lg-10 col-md-9 col-sm-8 col-xs-10 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamMemberNameWrap'><h3 class="teamMemberName">Emily Young</h3></div>
<div class='teamMemberTitleWrap'><h3 class="teamMemberTitle">Lead Developer</h3></div>
</div>
</div>
</div>
<div class='teamIconOuter outerGrid col-lg-2 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-1 col-xs-2 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div class='teamIcons'><i class="teamIcon fab fa-linkedin"></i></div>
</div>
</div>
</div>
</div>
<div class='row noCustomElement'>
<div class='teamMemberTextWrap col-sm-12'>
<p class='teamMemberText'>Emily is a certified computer engineer and has won numerous awards in the field. She has over fifteen years experience as an engineer in a variety of technical platforms.</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- teamTemplate end -->
</div>
</div>
</div>
</div>
</div>
<style>
#team {
color: black;
}
#team .teamImageBg {
color: white;
}
#teamContent {
word-wrap: break-word;
text-align: center;
}
#teamTitle {
font-size: 45px;
width: 100%;
color: white;
background: rgb(87,187,144);
margin: 0 0 40px;
padding: 20px;
text-transform: uppercase;
letter-spacing: .09em;
}
#team .teamImageBg #teamTitle {
background: transparent;
}
.team4 {
display: flex;
margin: 0;
}
.teamTemplate {
margin-top: 30px;
}
.teamTemplateInner {
width: 90%;
}
.teamMemberImage {
margin-bottom: 25px;
}
.teamMemberImages {
width: 100%;
height: 250px;
object-fit: cover;
}
#team .teamImageBg .teamMemberImages {
border: 1px solid white;
}
.teamMemberInfoRow {
display: flex;
text-align: left;
}
.teamMemberName {
font-size: 20px;
margin: 6px 0;
font-weight: bold;
}
.teamMemberTitle {
font-size: 18px;
margin: 6px 0;
}
.teamIconOuter {
padding-left: 0;
}
.teamIcon {
color: rgb(87,187,144);
font-size: 32px;
cursor: pointer;
transition: 0.4s;
}
#team .teamImageBg .teamIcon {
color: white;
}
.teamIcon:hover {
opacity: 0.6;
}
.teamMemberText {
margin: 20px auto 0;
}
/* * * * * * * * */
#team .customTitle {
font-size: 40px;
letter-spacing: .09em;
display: block;
}
#team #teamRowContainer .customTitle {
font-size: 20px;
letter-spacing: normal;
}
#team .customParagraph {
font-size: 18px;
display: block;
}
#team #teamTitleWrap .customParagraph,
#team .teamMemberImage .customParagraph,
#team .teamMemberTextWrap .customParagraph {
text-align: justify;
text-align-last: center;
}
#team #teamRowContainer .customParagraph {
font-size: 14px;
}
#team .customLink {
color: black;
font-size: 18px;
display: block;
width: 100%;
}
#team #teamRowContainer .customLink {
font-size: 14px;
}
#team #teamTitleWrap .customLink,
#team .teamImageBg .customLink {
color: white;
}
#team .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#team .customIcon {
font-size: 32px;
}
#team .customTitle,
#team .customParagraph,
#team .customLink,
#team .customIcon,
#team .customButton,
#team .customImage,
#team .customEmbed {
margin: 10px 0;
}
#team #teamTitleWrap .customIcon,
#team #teamTitleWrap .customButton,
#team #teamTitleWrap .customImage,
#team .teamMemberImage .customIcon,
#team .teamMemberImage .customButton,
#team .teamMemberImage .customImage,
#team .teamMemberTextWrap .customTitle,
#team .teamMemberTextWrap .customParagraph,
#team .teamMemberTextWrap .customLink,
#team .teamMemberTextWrap .customIcon,
#team .teamMemberTextWrap .customButton,
#team .teamMemberTextWrap .customImage,
#team .teamMemberTextWrap customEmbed {
margin: 10px 0 0;
}
#team .teamMemberNameWrap .customIcon,
#team .teamMemberNameWrap .customButton,
#team .teamMemberNameWrap .customImage {
margin: 0;
}
#team .teamMemberTitleWrap .customTitle,
#team .teamMemberTitleWrap .customParagraph,
#team .teamMemberTitleWrap .customLink,
#team .teamMemberTitleWrap .customIcon,
#team .teamMemberTitleWrap .customButton,
#team .teamMemberTitleWrap .customImage,
#team .teamMemberTitleWrap customEmbed {
margin: 0;
}
@media only screen and (max-width : 1050px) {
.teamTemplate {
padding: 0;
}
.teamMemberName {
font-size: 18px;
}
.teamMemberTitle {
font-size: 16px;
}
.teamIconOuter {
padding-left: 5px;
}
#team #teamRowContainer .customTitle {
font-size: 18px;
}
}
@media only screen and (max-width : 800px) {
.teamMemberInfoRow {
margin-left: 5px;
}
#teamTitle {
font-size: 32px;
}
.teamMemberName {
font-size: 14px;
}
.teamMemberTitle {
font-size: 12px;
}
.teamIconOuter {
padding-left: 10px;
}
.teamIcon {
font-size: 26px;
}
#team #teamRowContainer .customTitle {
font-size: 14px;
}
}
@media only screen and (max-width : 767px) {
#teamTitleOuter {
text-align: center;
}
.team4 {
display: initial;
}
.teamMemberImages {
height: auto;
width: 100%;
}
.teamMemberName {
font-size: 20px;
}
.teamMemberTitle {
font-size: 18px;
}
.teamIcon {
font-size: 32px;
}
.teamIconOuter {
padding-left: 10px;
}
.teamMemberText {
font-size: 18px;
width: 100%;
}
#team #teamRowContainer .customTitle {
font-size: 20px;
}
#team #teamRowContainer .customParagraph,
#team #teamRowContainer .customLink {
font-size: 18px;
}
}
@media only screen and (max-width : 360px) {
#teamTitle {
font-size: 36px;
}
#team .customTitle {
font-size: 36px;
}
}
</style>
</div>
<style>
#teamContainer {
background: rgb(255,255,255);
}
</style>
</section>
<section id='blog'>
<div class='sectionOverlay' id='blogOverlay' style='background: rgba(0 ,0, 0, 0.5)'></div>
<div id='outerBlog' class='outerSection noCustomElement'>
<div id='blogContainer' class='sectionContainer blogImageBg noCustomElement'>
<div id='blogContent' class='sectionContent container-fluid noCustomElement'>
<div class='row noCustomElement'>
<div id='blogTop' class='col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 noCustomElement'>
<div id='blogTitleWrap'><h2 id='blogTitle' class='blogTitles'>Blog</h2></div>
<div id='blogTitleHrWrap'><hr id='blogTitleHr'></div>
</div>
</div>
<div id='noPostBlog' class='row noCustomElement' style='display: none'>
<div id='noPostBlogInner' class='col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 noCustomElement'>
<div id='noPostBlogIconWrap' class='blogIcons'><i class="noPostBlogIcon fas fa-rss-square"></i></div>
<div id='noPostBlogTitleWrap'><h2 id='noPostBlogTitle'>There is no content here yet, but check back soon!</h2></div>
</div>
</div>
<div class='row noCustomElement'>
<div class='col-lg-10 col-lg-offset-1 col-sm-12 col-sm-12 noCustomElement'>
<div id='blogRowContainer' class='noCustomElement'>
<!-- blogTemplate start --><div class='blog4 row'></div><!-- blogTemplate end -->
</div>
</div>
</div>
</div>
</div>
<style>
#blog {
color: black;
}
#blog .blogImageBg {
color: white;
}
#blogContent {
text-align: center;
}
#noPostBlog {
margin-top: 50px;
}
#noPostBlogInner {
border: 1px solid black;
border-radius: 3px;
padding: 15px;
}
#blog .blogImageBg #noPostBlogInner {
border-color: white;
}
.noPostBlogIcon {
font-size: 42px;
}
#noPostBlogTitle {
font-size: 30px;
letter-spacing: .035em;
}
#blogTitle {
font-size: 40px;
}
#blogTitleHr {
border: 1px solid black;
width: 20%;
}
#blog .blogImageBg #blogTitleHr {
border-color: white;
}
.posts4 {
display: flex;
}
.postOuter {
margin: 30px 0 0;
}
.blogPostLinkWrap {
width: 100%;
text-decoration: none !important;
}
.postInner {
border: 1px solid black;
padding: 20px 10px 20px;
border-radius: 20px;
cursor: pointer;
}
.postInner:hover {
background-color: rgba(87,187,144,0.1);
}
#blog .blogImageBg .postInner {
border-color: white;
}
#blog .blogImageBg .postInner:hover {
background-color: rgba(255,255,255,0.3);
}
.blogIcon {
font-size: 42px;
margin: 5px 0 10px;
}
#blog .blogImageBg .blogIcon {
color: white;
}
.blogImages {
width: 200px;
height: 200px;
border-radius: 3px;
object-fit: cover;
}
#blog .blogImageBg .blogImages {
border: 2px solid white;
}
#blogHr {
border: 2px solid rgb(87,187,144);
width: 50%;
}
.postTitle {
color: black;
font-size: 20px;
}
#blog .blogImageBg .postTitle {
color: white;
}
/* * * * * * * * */
#blog .customTitle {
font-size: 30px;
letter-spacing: .035em;
display: block;
}
#blog #noPostBlogTitleWrap .customTitle {
font-size: 30px;
letter-spacing: normal;
}
#blog .customParagraph {
font-size: 18px;
display: block;
}
#blog .customLink {
color: black;
font-size: 18px;
display: block;
width: 100%;
}
#blog .blogImageBg .customLink {
color: white;
}
#blog .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#blog .customIcon {
font-size: 36px;
}
#blog .customTitle,
#blog .customParagraph,
#blog .customLink,
#blog .customIcon,
#blog .customButton,
#blog .customImage,
#blog .customEmbed {
margin: 10px 0;
}
#blog #blogTitleWrap .customIcon,
#blog #blogTitleWrap .customButton,
#blog #blogTitleWrap .customImage {
margin: 10px 0 0;
}
#blog #blogTitleHrWrap .customIcon,
#blog #blogTitleHrWrap .customButton,
#blog #blogTitleHrWrap .customImage {
margin: 0;
}
#blog #noPostBlogIconWrap .customTitle,
#blog #noPostBlogIconWrap .customParagraph,
#blog #noPostBlogIconWrap .customLink,
#blog #noPostBlogIconWrap .customIcon,
#blog #noPostBlogIconWrap .customButton,
#blog #noPostBlogIconWrap .customImage,
#blog #noPostBlogIconWrap .customEmbed {
margin: 20px 0 0;
}
@media only screen and (max-width : 991px) {
.posts4 {
display: initial;
margin: 0;
}
.blogImages {
width: 280px;
height: 280px;
}
}
@media only screen and (max-width : 800px) {
.postTitle {
font-size: 18px;
}
}
@media only screen and (max-width : 767px) {
.postOuter {
margin-left: 0;
margin-right: 0;
}
}
</style>
</div>
<style>
#blogContainer {
background: url('/img/digitalcreation-7ZEg9-Q8dBU-OwbZN-1nOvg-S62oj.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
</style>
<script>
// script start
$(document).ready(function() {
setTimeout(function() {
checkBlogStatus();
}, 1000);
});
var checkBlogStatus = function() {
if (document.getElementsByClassName('blogPost').length === 0 || (document.getElementsByClassName('blogPost').length === 1 && document.getElementsByClassName('blogPost')[0].innerHTML.trim() === '')) {
document.getElementById('noPostBlog').style.display = '';
}
}
// script end
</script>
</section>
<section id='contact'>
<div class='sectionOverlay' id='contactOverlay' style='background: rgba(0, 0, 0, 0)'></div>
<div id='outerContact' class='outerSection noCustomElement'>
<div id='contactContainer' class='sectionContainer noCustomElement'>
<div id='contactContent' class='sectionContent container-fluid noCustomElement'>
<div class='row noCustomElement'>
<div id='contactTitleWrap' class='col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2'>
<h2 id='contactTitle' class='contactTitles'>Message Us</h2>
</div>
</div>
<div id='contactInfoRow' class='row noCustomElement'>
<div class='col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 noCustomElement'>
<div id='contactMainRow' class='row noCustomElement'>
<div class='outerGrid col-sm-6 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div id='contactMapWrap' class='innerTableContent noCustomElement'>
<div><iframe id='contactMap' src="https://maps.google.com/maps?width=100%&amp;height=400&amp;hl=en&amp;q=1100%20congress%20Austin%20TX+(My%20Business%20Name)&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"><a href="https://www.maps.ie/map-my-route/">Create a route on google maps</a></iframe></div>
</div>
</div>
</div>
<div class='outerGrid col-sm-6 col-xs-12 noCustomElement'>
<div class='innerGridTable noCustomElement'>
<div class='innerTableContent noCustomElement'>
<div id='contactInfoTextWrap noCustomElement'>
<div id='contactEmailWrap'><p id='contactEmailInner' class='contactInfoText'>email@example.com</p></div>
<div id='contactPhoneNumber'><p id='contactPhoneInner' class='contactInfoText'>(123) 456-7890</p></div>
</div>
<form id='contactForm'>
<div id='contactRowContainer' class='noCustomElement'>
<!-- inputTemplate start --><div class='input2 row'>
<div class='contactInputWrap contactTemplate form-group col-sm-6 col-xs-12 noCustomElement'>
<input id='contactName' type='text' class='contactFormInput form-control' placeholder='Name'>
</div>
<div class='contactInputWrap contactTemplate form-group col-sm-6 col-xs-12 noCustomElement'>
<input id='contactEmail' type='text' class='contactFormInput form-control' placeholder='Email'>
</div>
</div><div class='input2 row'>
<div class='contactInputWrap contactTemplate form-group col-sm-6 col-xs-12 noCustomElement'>
<input id='contactPhone' type='text' class='contactFormInput form-control' placeholder='Phone'>
</div>
<div class='contactInputWrap contactTemplate form-group col-sm-6 col-xs-12 noCustomElement'>
<input id='contactSubject' type='text' class='contactFormInput form-control' placeholder='Subject'>
</div>
</div><!-- inputTemplate end -->
</div>
<div class='form-row row noCustomElement'>
<div class='contactInputWrap form-group col-sm-12 col-xs-12 noCustomElement'>
<textarea placeholder='Type Your Message Here' id='contactMessage' class='contactFormInput form-control'></textarea>
</div>
</div>
<div class='form-row row noCustomElement'>
<div class='contactInputWrap form-group col-sm-12 col-xs-12 noCustomElement'>
<div id='contactButtons'><a class='contactButton' onclick='submitContactForm()'>Submit</a></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
#contact {
color: black;
}
#contact .contactImageBg {
color: white;
}
#contactContent {
word-wrap: break-word;
}
#contactTitleWrap {
text-align: center;
margin-bottom: 60px;
}
#contactTitle {
font-size: 55px;
}
#contactMainRow {
display: flex;
}
#contactMap {
border-radius: 5px;
height: 400px;
width: 100%;
padding: 2px;
box-shadow: 0 2px 2px 2px rgb(87,187,144);
}
#contact .contactImageBg #contactMap {
box-shadow: 0 2px 2px 2px white;
}
.contactInfoText {
font-size: 16px;
}
#contactEmailInner {
margin: 0;
}
#contactEmailWrap,
#contactPhoneNumber {
text-align: center;
}
#contactPhoneNumber {
margin-bottom: 40px;
}
#contactPhoneInner {
margin-bottom: 0;
}
.contactFormInput {
border: none;
box-shadow: 0 2px 2px 1px rgb(87,187,144);
border-radius: 10px;
}
.contactFormInput:hover {
background-color: rgba(87,187,144,0.1);
}
.contactFormInput::placeholder {
color: black;
}
#contact .contactImageBg .contactFormInput {
box-shadow: 0 2px 2px 1px white;
}
#contact .contactImageBg .contactFormInput:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
#contact .contactImageBg .contactFormInput:hover::placeholder {
color: white;
}
#contactMessage {
height: 90px;
resize: none;
}
#contactButtons {
text-align: right;
}
.contactButton {
color: black;
padding: 6px 42px;
border-radius: 25px;
box-shadow: 0 2px 2px 1px rgb(87,187,144);
text-decoration: none;
cursor: pointer;
transition: 0.5s;
display: inline-block;
}
.contactButton:focus {
color: black;
}
.contactButton:hover {
color: white;
background-color: rgb(87,187,144);
text-decoration: none;
}
#contact .contactImageBg .contactButton,
#contact .contactImageBg .contactButton:focus {
color: black;
background-color: white;
box-shadow: 0 2px 2px 1px white;
}
#contact .contactImageBg .contactButton:hover {
color: black;
opacity: 0.6;
}
/* * * * * * * * */
#contact .customTitle {
font-size: 40px;
display: block;
}
#contact .customParagraph {
font-size: 16px;
display: block;
}
#contact .customLink {
color: black;
font-size: 16px;
display: block;
width: 100%;
}
#contact .contactImageBg .customLink {
color: white;
}
#contact .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#contact .customIcon {
font-size: 30px;
}
#contact .customTitle,
#contact .customParagraph,
#contact .customLink,
#contact .customIcon,
#contact .customButton,
#contact .customImage,
#contact .customEmbed {
margin: 10px 0;
}
#contact #contactTitleWrap .customIcon,
#contact #contactTitleWrap .customButton,
#contact #contactTitleWrap .customImage {
margin: 0 0 10px;
}
@media only screen and (max-width : 767px) {
#contactTitleWrap {
margin-bottom: 30px;
}
#contactTitle {
font-size: 40px;
}
#contactMainRow {
display: initial;
}
#contactEmailInner {
margin-top: 30px;
}
#contactButtons {
text-align: center;
margin-top: 20px;
}
}
</style>
</div>
<style>
#contactContainer {
background: rgb(255,255,255);
}
</style>
</section>
<div id='footer'>
<h4 class='pageFooter' id='footerFour'>&copy; t✨artistiK</h4>
</div>
<div id='newsletterOuter' delay="20000" style='display:none' class='noCustomElement'>
<div id='newsOverlaySection' class='noCustomElement'>
<div class='row innerTableContent noCustomElement'>
<div id='newsletterBorder' class='col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1 noCustomElement'>
<button id='closeNewsletterButton' class='newsletterClose' onclick='document.getElementById("newsletterOuter").style.display = "none"'>
<i class="newsletterCloseIcon fa fa-times" aria-hidden="true"></i>
</button>
<div id='newsletterBanner' class='noCustomElement'>
<div id='newsletterTitleWrap'><h3 id='newsletterTitle' class='newsletterTitles'>NEWSLETTER</h3></div>
<div id='newsletterHrWrap'><hr id='newsletterHr'></div>
<div id='newsletterSubtitle1Wrap'><h4 id='newsletterSubtitle1' class='newsletterSubtitles'>Don't miss a beat, enter your email and be the first to know about great savings!</h4></div>
<form id='newsletterForm' class='noCustomElement'>
<div class='noCustomElement'>
<div id='newsletterRowContainer'>
<input id='newsletterInput' type='email' class='form-control' placeholder='EMAIL ADDRESS'>
<a id='newsletterButton' class='newsletterButton' onclick='submitNewsletter()'>START SAVING!</a>
</div>
</div>
<div id='newsletterSubtitle2Wrap'><h4 id='newsletterSubtitle2' class='newsletterSubtitles'>Why wait? Sign up today!</h4></div>
</form>
</div>
</div>
</div>
</div>
<style>
#newsLetterOuter {
word-break: break-word;
}
#closeNewsletterButton {
position: absolute;
top: 40px;
right: 40px;
border: none;
font-size: 26px;
background: transparent;
cursor: pointer;
color: white;
transition: 0.4s;
}
#closeNewsletterButton:hover {
opacity: 0.6;
}
#newsOverlaySection {
display: table;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
text-align: center;
}
#newsletterBorder {
background-color: white;
border-radius: 4px;
padding: 30px;
}
#newsletterBanner {
padding: 20px 10px;
background: rgba(87,187,144,0.8);
border-radius: 4px;
}
#newsletterTitle {
color: white;
font-size: 60px;
margin: 10px 0;
}
#newsletterHr {
border: 3px double white;
margin: 10px auto 20px;
width: 20%;
}
#newsletterSubtitle1 {
color: white;
font-size: 16px;
width: 60%;
margin: 0 auto;
}
#newsletterInput {
font-size: 12px;
text-align: center;
width: 60%;
margin: 30px auto 10px;
border: 1px solid white;
color: rgb(87,187,144);
letter-spacing: 0.15em;
}
#newsletterInput::placeholder {
color: rgb(87,187,144);
}
#newsletterInput:focus {
box-shadow: 0 0 3px white;
}
#newsletterButton {
color: rgb(87,187,144);
font-size: 17px;
padding: 12px 38px;
margin: 10px 0;
text-decoration: none;
background: white;
border: 2px solid white;
border-radius: 15px;
cursor: pointer;
transition: 0.5s;
display: inline-block;
}
#newsletterButton:focus {
color: rgb(05,50,50);
}
#newsletterButton:hover {
color: white;
background: rgb(87,187,144);
}
#newsletterSubtitle2 {
color: white;
font-size: 30px;
letter-spacing: 0.15em;
margin: 25px 0;
}
/* * * * * * * * */
#newsletterOuter .customTitle {
font-size: 40px;
display: block;
}
#newsletterOuter .customParagraph {
font-size: 18px;
display: block;
}
#newsletterOuter .customLink {
font-size: 18px;
display: block;
width: 100%;
}
#newsletterOuter .customLink:hover {
opacity: 0.6;
text-decoration: none;
}
#newsletterOuter .customIcon {
font-size: 28px;
}
#newsletterOuter .customTitle,
#newsletterOuter .customParagraph,
#newsletterOuter .customLink,
#newsletterOuter .customIcon,
#newsletterOuter .customButton,
#newsletterOuter .customImage,
#newsletterOuter .customEmbed {
margin: 10px 0;
}
#newsletterOuter .customTitle,
#newsletterOuter .customParagraph,
#newsletterOuter .customLink,
#newsletterOuter .customIcon {
color: white;
}
@media only screen and (max-width : 500px) {
#closeNewsletterButton {
top: 30px;
right: 30px;
}
#newsletterBorder {
padding: 20px;
}
#newsletterTitle {
font-size: 35px;
margin-top: 35px;
}
#newsletterInput {
width: 90%;
}
}
</style>
</div>
</body>
<script id='generalJS'>
$(document).ready(function() {
loadLeiaAd();
initializeSmoothScroll();
if (window.self !== window.top) {
if (document.getElementById('menuOverlaySection')) {
document.getElementById('menuOverlaySection').style.height = window.parent.innerHeight.toString() + 'px';
}
if (document.getElementById('menuBorder')) {
document.getElementById('menuBorder').style.maxHeight = window.parent.innerHeight.toString() + 'px';
}
if (window.orientation !== undefined && document.getElementById('headerBackgroundVideo')) {
updateBgimageSizes();
window.addEventListener('orientationchange', function() {
updateBgimageSizes();
});
}
} else if (document.getElementById('newsletterOuter') && document.getElementById('newsletterOuter').getAttribute('enabled') === 'true') {
var time = parseInt(document.getElementById('newsletterOuter').getAttribute('delay'));
if (time > 0) {
setTimeout(function() {
$('#newsletterOuter').css('opacity', '0');
$('#newsletterOuter').css('display', '');
$('#newsletterOuter').animate({opacity: '1'}, 1000);
}, time);
}
}
});
var initializeSmoothScroll = function() {
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1000);
});
}
var updateBgimageSizes = function() {
document.getElementById('headerBackgroundVideo').style.height = document.getElementById('headerContainer').offsetHeight.toString() + 'px';
}
var loadLeiaAd = function() {
$.ajax({
url: 'https://heyleia.com/php/getAdStatus.php',
type: 'GET',
data: {'domain': window.location.hostname},
success: function(type) {
if (type === 'ad') {
addLeiaAd();
}
},
error: function(err) {
console.log(err);
}
});
}
var addLeiaAd = function() {
var img = document.createElement('img');
var tag = document.createElement('a');
img.id = 'leiaAdLogo';
tag.id = 'leiaAdLogoA';
img.setAttribute('src', 'https://heyleia.com/images/poweredBy.png');
if (window.self === window.top && window.location.search !== '?site=live') {
tag.setAttribute('href', 'https://heyleia.com/direct?src=site');
tag.setAttribute('target', '_blank');
} else {
img.onclick = function() {
if (window.location.search === '?site=live') {
swal('Remove Leia Ad', 'You can remove this ad by upgrading to Leia Pro for less than $0.99 per month! This includes hosting and everything else you need for your site.', 'info');
} else {
swal({
title: 'Remove Leia Ad',
text: 'You can remove this ad by upgrading to Leia Pro for less than $0.99 per month! This includes hosting and everything else you need for your site.',
type: 'info',
icon: 'info',
closeOnClickOutside: true,
showCancelButton: true,
buttons: {
cancel: 'Not Now',
submit: {
text: 'Learn More',
value: 'learn',
}
},
closeOnConfirm: true
}).then(function(isConfirm) {
if (isConfirm == 'learn') {
window.open('https://heyleia.com/upgrade', '_blank');
}
});
}
}
}
tag.appendChild(img);
document.body.appendChild(tag);
}
var mainColor = 'rgb(87,187,144)';
var applyFancyTop = function(top) {
if (document.getElementById('fancyStyle')) {
document.getElementById('fancyStyle').parentElement.removeChild(document.getElementById('fancyStyle'));
}
var style = document.createElement('style');
style.id = 'fancyStyle';
var txt = document.createTextNode('#fancybox-wrap {top: ' + top.toString() + 'px !important;}');
style.appendChild(txt);
document.body.appendChild(style);
}
var addedSpinner = false;
var submitContactForm = function() {
swal("Are you sure you want to submit this message?", {
buttons: {
no: {
text: "Cancel",
value: "Cancel",
className: 'swal-button swal-button--cancel',
closeModal: false,
},
yes: {
text: "Submit",
value: "ok"
},
},
title: 'Confirmation',
type: 'info',
icon: 'info'
}).then((value) => {
if (value === 'Cancel') {
swal.close();
} else {
var spinner = document.createElement('div');
var outer = document.createElement('div');
outer.id = 'spinnerLoading';
spinner.className = 'spinnerLoading';
outer.style.background = 'rgba(0,0,0,0.7)';
outer.style.borderRadius = '20px';
outer.style.position = 'fixed';
outer.style.left = ((window.innerWidth - 205) / 2).toString() + 'px';
outer.style.width = '205px';
outer.style.top = '30%';
outer.style.height = '205px';
outer.style.zIndex = '10000';
spinner.style.marginLeft = '42.5px';
spinner.style.marginTop = '42.5px';
outer.appendChild(spinner);
document.body.appendChild(outer);
if (!addedSpinner) {
addedSpinner = true;
addSpinnerStyle();
}
var dataObj = {}
if (document.getElementById('contactName')) {
dataObj['name'] = document.getElementById('contactName').value;
}
if (document.getElementById('contactEmail')) {
dataObj['email'] = document.getElementById('contactEmail').value;
}
if (document.getElementById('contactPhone')) {
dataObj['phone'] = document.getElementById('contactPhone').value;
}
if (document.getElementById('contactCompany')) {
dataObj['company'] = document.getElementById('contactCompany').value;
}
if (document.getElementById('contactStreet')) {
dataObj['street'] = document.getElementById('contactStreet').value;
}
if (document.getElementById('contactCity')) {
dataObj['city'] = document.getElementById('contactCity').value;
}
if (document.getElementById('contactState')) {
dataObj['state'] = document.getElementById('contactState').value;
}
if (document.getElementById('contactSubject')) {
dataObj['subject'] = document.getElementById('contactSubject').value;
}
if (document.getElementById('contactMessage')) {
dataObj['message'] = document.getElementById('contactMessage').value;
}
$.ajax({
url: 'https://heyleia.com/php/clientContact.php',
data: dataObj,
type: 'POST',
success: function(data) {
document.getElementById('spinnerLoading').parentElement.removeChild(document.getElementById('spinnerLoading'));
if (data === 'success') {
swal("Success", "You have successfully submitted your message! We will contact you at our earliest convenience.", "success");
document.body.className = '';
} else {
swal("Uh Oh!", data, "error");
document.body.className = '';
}
},
error: function(err) {
console.log(err);
document.getElementById('spinnerLoading').parentElement.removeChild(document.getElementById('spinnerLoading'));
swal("Uh Oh!", "There was a problem. Please try again later.", "error");
document.body.className = '';
}
});
}
});
}
var submitNewsletter = function() {
var spinner = document.createElement('div');
var outer = document.createElement('div');
outer.id = 'spinnerLoading';
spinner.className = 'spinnerLoading';
outer.style.background = 'rgba(0,0,0,0.7)';
outer.style.borderRadius = '20px';
outer.style.position = 'fixed';
outer.style.left = ((window.innerWidth - 205) / 2).toString() + 'px';
outer.style.width = '205px';
outer.style.top = '30%';
outer.style.height = '205px';
outer.style.zIndex = '10000';
spinner.style.marginLeft = '42.5px';
spinner.style.marginTop = '42.5px';
outer.appendChild(spinner);
document.body.appendChild(outer);
if (!addedSpinner) {
addedSpinner = true;
addSpinnerStyle();
}
var dataObj = {
email: document.getElementById('newsletterInput').value
}
$.ajax({
url: 'https://heyleia.com/php/clientNewsletter.php',
data: dataObj,
type: 'POST',
success: function(data) {
document.getElementById('spinnerLoading').parentElement.removeChild(document.getElementById('spinnerLoading'));
if (data === 'success') {
swal("Success", "You have successfully subscribed to our mailing list!", "success").then(function() {
document.getElementById('newsletterOuter').style.display = 'none';
});
document.body.className = '';
} else {
swal("Uh Oh!", data, "error");
document.body.className = '';
}
},
error: function(err) {
console.log(err);
document.getElementById('spinnerLoading').parentElement.removeChild(document.getElementById('spinnerLoading'));
swal("Uh Oh!", "There was a problem. Please try again later.", "error");
document.body.className = '';
}
});
}
var addSpinnerStyle = function() {
var style = document.createElement('style');
style.appendChild(document.createTextNode(".spinnerLoading {border: 16px solid #f3f3f3; /* Light grey */border-top: 16px solid #3498db; /* Blue */border-radius: 50%;width: 120px;height: 120px;animation: spin 2s linear infinite;}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}"));
document.body.appendChild(style);
};
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment