Digital Design Website Template Using HTML, CSS, and JavaScript (Free Source Code)
A Digital Design Website Template therefore is a fully developed solution to building ultra modern websites for creative design agencies, freelance designers and related businesses.
Here is a free source code which is created in accordance with the best practices of programming, so it can be easily modified and implemented in your projects.
GitHub Source: Digital Design Website Template
Features
- Fully Responsive: The theme is fully responsive, and it works well with all current screen resolutions, mobile, tablet, and desktop.
- Modern Design: It contains visually appealing, neat, and professional design to enable the target visitors to be attracted easily.
- Optimized Performance: The code is simple and has been designed to be compact to save on the amount of time needed to load the page.
- Easy Customization: The HTML, CSS and JavaScript code is also the relatively clean and structured cod so as to allow for clean changes.
- Cross-Browser Compatibility: Designed for compatibility with all the current browsers, including Chrome, Firefox, and Edge.
- SEO-Friendly: The template is created with the aim to optimize Search Engine results by adhering to SEO friendly practices.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Recommended for You
- Modern Law Website Template
- Modern Marketing Agency Website Template
- Responsive Portfolio Design for Scientist
- Neomorphic Portfolio Design for Android App Developers
- Responsive Portfolio Website Design for Web Developer
Video Tutorial
Steps to Build Digital Design Website
Using the Digital Design Website Template Using HTML, CSS, and JavaScript is quite easy. All you need to do is copy and paste the HTML, CSS and JavaScript provided above to the respective file in your project. It’s fully flexible to adjust the colors, the fonts and the layouts depending on your needs in order to come out with your own tailored scheme.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en" class="no-js" >
<head>
<!--- basic page needs -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Digital Design Website Template | JV Codes</title>
<script>
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<!-- CSS -->
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/styles.css">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
</head>
<body id="top">
<!-- preloader -->
<div id="preloader">
<div id="loader">
</div>
</div>
<!-- page wrap -->
<div id="page" class="s-pagewrap">
<!-- # site header -->
<header class="s-header">
<div class="s-header__logo">
<a class="logo" href="index.html">
<img src="images/logo.png" alt="Homepage">
</a>
</div>
<a class="s-header__menu-toggle" href="#0" class="">
<span class="s-header__menu-text">Menu</span>
<span class="s-header__menu-icon"></span>
</a>
<nav class="s-header__nav">
<a href="#0" class="s-header__nav-close-btn" title="close"><span>Close</span></a>
<h3>Infinity.</h3>
<ul class="s-header__nav-list">
<li><a href="#intro" class="smoothscroll">Intro</a></li>
<li><a href="#about" class="smoothscroll">About</a></li>
<li><a href="#services" class="smoothscroll">Services</a></li>
<li><a href="#portfolio" class="smoothscroll">Works</a></li>
<li><a href="#contact" class="smoothscroll">Contact</a></li>
</ul>
<p>
We create stunning, responsive digital design templates using HTML, CSS, and JavaScript, perfect for creatives, agencies, and businesses.
</p>
<ul class="s-header__social">
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);"><path d="M20,3H4C3.447,3,3,3.448,3,4v16c0,0.552,0.447,1,1,1h8.615v-6.96h-2.338v-2.725h2.338v-2c0-2.325,1.42-3.592,3.5-3.592 c0.699-0.002,1.399,0.034,2.095,0.107v2.42h-1.435c-1.128,0-1.348,0.538-1.348,1.325v1.735h2.697l-0.35,2.725h-2.348V21H20 c0.553,0,1-0.448,1-1V4C21,3.448,20.553,3,20,3z"></path></svg>
<span class="u-screen-reader-text">Facebook</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);"><path d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"></path></svg>
<span class="u-screen-reader-text">Twitter</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);"><path d="M11.999,7.377c-2.554,0-4.623,2.07-4.623,4.623c0,2.554,2.069,4.624,4.623,4.624c2.552,0,4.623-2.07,4.623-4.624 C16.622,9.447,14.551,7.377,11.999,7.377L11.999,7.377z M11.999,15.004c-1.659,0-3.004-1.345-3.004-3.003 c0-1.659,1.345-3.003,3.004-3.003s3.002,1.344,3.002,3.003C15.001,13.659,13.658,15.004,11.999,15.004L11.999,15.004z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533,6.111c-0.469-1.209-1.424-2.165-2.633-2.632c-0.699-0.263-1.438-0.404-2.186-0.42 c-0.963-0.042-1.268-0.054-3.71-0.054s-2.755,0-3.71,0.054C7.548,3.074,6.809,3.215,6.11,3.479C4.9,3.946,3.945,4.902,3.477,6.111 c-0.263,0.7-0.404,1.438-0.419,2.186c-0.043,0.962-0.056,1.267-0.056,3.71c0,2.442,0,2.753,0.056,3.71 c0.015,0.748,0.156,1.486,0.419,2.187c0.469,1.208,1.424,2.164,2.634,2.632c0.696,0.272,1.435,0.426,2.185,0.45 c0.963,0.042,1.268,0.055,3.71,0.055s2.755,0,3.71-0.055c0.747-0.015,1.486-0.157,2.186-0.419c1.209-0.469,2.164-1.424,2.633-2.633 c0.263-0.7,0.404-1.438,0.419-2.186c0.043-0.962,0.056-1.267,0.056-3.71s0-2.753-0.056-3.71C20.941,7.57,20.801,6.819,20.533,6.111z M19.315,15.643c-0.007,0.576-0.111,1.147-0.311,1.688c-0.305,0.787-0.926,1.409-1.712,1.711c-0.535,0.199-1.099,0.303-1.67,0.311 c-0.95,0.044-1.218,0.055-3.654,0.055c-2.438,0-2.687,0-3.655-0.055c-0.569-0.007-1.135-0.112-1.669-0.311 c-0.789-0.301-1.414-0.923-1.719-1.711c-0.196-0.534-0.302-1.099-0.311-1.669c-0.043-0.95-0.053-1.218-0.053-3.654 c0-2.437,0-2.686,0.053-3.655c0.007-0.576,0.111-1.146,0.311-1.687c0.305-0.789,0.93-1.41,1.719-1.712 c0.534-0.198,1.1-0.303,1.669-0.311c0.951-0.043,1.218-0.055,3.655-0.055c2.437,0,2.687,0,3.654,0.055 c0.571,0.007,1.135,0.112,1.67,0.311c0.786,0.303,1.407,0.925,1.712,1.712c0.196,0.534,0.302,1.099,0.311,1.669 c0.043,0.951,0.054,1.218,0.054,3.655c0,2.436,0,2.698-0.043,3.654H19.315z"></path></svg>
<span class="u-screen-reader-text">Instagram</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M20.66 6.98a9.932 9.932 0 0 0-3.641-3.64C15.486 2.447 13.813 2 12 2s-3.486.447-5.02 1.34c-1.533.893-2.747 2.107-3.64 3.64S2 10.187 2 12s.446 3.487 1.34 5.02a9.924 9.924 0 0 0 3.641 3.64C8.514 21.553 10.187 22 12 22s3.486-.447 5.02-1.34a9.932 9.932 0 0 0 3.641-3.64C21.554 15.487 22 13.813 22 12s-.446-3.487-1.34-5.02zM12 3.66c2 0 3.772.64 5.32 1.919-.92 1.174-2.286 2.14-4.1 2.9-1.002-1.813-2.088-3.327-3.261-4.54A7.715 7.715 0 0 1 12 3.66zM5.51 6.8a8.116 8.116 0 0 1 2.711-2.22c1.212 1.201 2.325 2.7 3.34 4.5-2 .6-4.114.9-6.341.9-.573 0-1.006-.013-1.3-.04A8.549 8.549 0 0 1 5.51 6.8zM3.66 12c0-.054.003-.12.01-.2.007-.08.01-.146.01-.2.254.014.641.02 1.161.02 2.666 0 5.146-.367 7.439-1.1.187.373.381.793.58 1.26-1.32.293-2.674 1.006-4.061 2.14S6.4 16.247 5.76 17.5c-1.4-1.587-2.1-3.42-2.1-5.5zM12 20.34c-1.894 0-3.594-.587-5.101-1.759.601-1.187 1.524-2.322 2.771-3.401 1.246-1.08 2.483-1.753 3.71-2.02a29.441 29.441 0 0 1 1.56 6.62 8.166 8.166 0 0 1-2.94.56zm7.08-3.96a8.351 8.351 0 0 1-2.58 2.621c-.24-2.08-.7-4.107-1.379-6.081.932-.066 1.765-.1 2.5-.1.799 0 1.686.034 2.659.1a8.098 8.098 0 0 1-1.2 3.46zm-1.24-5c-1.16 0-2.233.047-3.22.14a27.053 27.053 0 0 0-.68-1.62c2.066-.906 3.532-2.006 4.399-3.3 1.2 1.414 1.854 3.027 1.96 4.84-.812-.04-1.632-.06-2.459-.06z"></path></svg>
<span class="u-screen-reader-text">Dribbble</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M7.803 5.731c.589 0 1.119.051 1.605.155.483.103.895.273 1.243.508.343.235.611.547.804.939.187.387.28.871.28 1.443 0 .62-.14 1.138-.421 1.551-.283.414-.7.753-1.256 1.015.757.219 1.318.602 1.69 1.146.374.549.557 1.206.557 1.976 0 .625-.119 1.162-.358 1.613a3.11 3.11 0 0 1-.974 1.114 4.315 4.315 0 0 1-1.399.64 6.287 6.287 0 0 1-1.609.206H2V5.731h5.803zm-.351 4.972c.48 0 .878-.114 1.192-.345.312-.228.463-.604.463-1.119 0-.286-.051-.522-.151-.707a1.114 1.114 0 0 0-.417-.428 1.683 1.683 0 0 0-.597-.215 3.609 3.609 0 0 0-.697-.061H4.71v2.875h2.742zm.151 5.239c.267 0 .521-.023.76-.077.241-.052.455-.136.637-.261.182-.12.332-.283.44-.491.109-.206.162-.475.162-.798 0-.634-.179-1.085-.533-1.358-.355-.27-.831-.404-1.414-.404H4.71v3.39h2.893zm8.565-.041c.367.358.896.538 1.584.538.493 0 .919-.125 1.278-.373.354-.249.57-.515.653-.79h2.155c-.346 1.072-.871 1.838-1.589 2.299-.709.463-1.572.693-2.58.693-.702 0-1.334-.113-1.9-.337a4.033 4.033 0 0 1-1.439-.958 4.37 4.37 0 0 1-.905-1.485 5.433 5.433 0 0 1-.32-1.899c0-.666.111-1.289.329-1.864a4.376 4.376 0 0 1 .934-1.493c.405-.42.885-.751 1.444-.994a4.634 4.634 0 0 1 1.858-.362c.754 0 1.413.146 1.979.44a3.967 3.967 0 0 1 1.39 1.182c.363.493.622 1.058.783 1.691.161.632.217 1.292.171 1.983h-6.431c.001.704.238 1.371.606 1.729zm2.812-4.681c-.291-.322-.783-.496-1.385-.496-.391 0-.714.065-.974.199a1.97 1.97 0 0 0-.62.491 1.772 1.772 0 0 0-.328.628 2.82 2.82 0 0 0-.111.587h3.982c-.058-.624-.272-1.085-.564-1.409zm-3.918-4.663h4.989v1.215h-4.989z"></path></svg>
<span class="u-screen-reader-text">Behance</span>
</a>
</li>
</ul>
</nav>
</header> <!-- end s-header -->
<!-- # site-content -->
<section id="content" class="s-content">
<!-- intro -->
<section id="intro" class="s-intro target-section">
<div class="s-intro__bg rellax" data-rellax-speed="-5"></div>
<div class="row s-intro__content">
<div class="column lg-12 s-intro__content-inner">
<h3 class="s-intro__pretitle">We Are Designers.</h3>
<h1 class="s-intro__title">
Shaping the Future of <br> Digital Design
</h1>
<div class="s-intro__more">
<a class="smoothscroll btn btn--stroke s-intro__more-btn" href="#about">
Learn More
</a>
</div>
</div>
</div>
<ul class="s-intro__social">
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);"><path d="M20,3H4C3.447,3,3,3.448,3,4v16c0,0.552,0.447,1,1,1h8.615v-6.96h-2.338v-2.725h2.338v-2c0-2.325,1.42-3.592,3.5-3.592 c0.699-0.002,1.399,0.034,2.095,0.107v2.42h-1.435c-1.128,0-1.348,0.538-1.348,1.325v1.735h2.697l-0.35,2.725h-2.348V21H20 c0.553,0,1-0.448,1-1V4C21,3.448,20.553,3,20,3z"></path></svg>
<span class="u-screen-reader-text">Facebook</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);">
<path d="M19.633,7.997c0.013,0.175,0.013,0.349,0.013,0.523c0,5.325-4.053,11.461-11.46,11.461c-2.282,0-4.402-0.661-6.186-1.809 c0.324,0.037,0.636,0.05,0.973,0.05c1.883,0,3.616-0.636,5.001-1.721c-1.771-0.037-3.255-1.197-3.767-2.793 c0.249,0.037,0.499,0.062,0.761,0.062c0.361,0,0.724-0.05,1.061-0.137c-1.847-0.374-3.23-1.995-3.23-3.953v-0.05 c0.537,0.299,1.16,0.486,1.82,0.511C3.534,9.419,2.823,8.184,2.823,6.787c0-0.748,0.199-1.434,0.548-2.032 c1.983,2.443,4.964,4.04,8.306,4.215c-0.062-0.3-0.1-0.611-0.1-0.923c0-2.22,1.796-4.028,4.028-4.028 c1.16,0,2.207,0.486,2.943,1.272c0.91-0.175,1.782-0.512,2.556-0.973c-0.299,0.935-0.936,1.721-1.771,2.22 c0.811-0.088,1.597-0.312,2.319-0.624C21.104,6.712,20.419,7.423,19.633,7.997z"></path></svg>
<span class="u-screen-reader-text">Twitter</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0, 1);"><path d="M11.999,7.377c-2.554,0-4.623,2.07-4.623,4.623c0,2.554,2.069,4.624,4.623,4.624c2.552,0,4.623-2.07,4.623-4.624 C16.622,9.447,14.551,7.377,11.999,7.377L11.999,7.377z M11.999,15.004c-1.659,0-3.004-1.345-3.004-3.003 c0-1.659,1.345-3.003,3.004-3.003s3.002,1.344,3.002,3.003C15.001,13.659,13.658,15.004,11.999,15.004L11.999,15.004z"></path><circle cx="16.806" cy="7.207" r="1.078"></circle><path d="M20.533,6.111c-0.469-1.209-1.424-2.165-2.633-2.632c-0.699-0.263-1.438-0.404-2.186-0.42 c-0.963-0.042-1.268-0.054-3.71-0.054s-2.755,0-3.71,0.054C7.548,3.074,6.809,3.215,6.11,3.479C4.9,3.946,3.945,4.902,3.477,6.111 c-0.263,0.7-0.404,1.438-0.419,2.186c-0.043,0.962-0.056,1.267-0.056,3.71c0,2.442,0,2.753,0.056,3.71 c0.015,0.748,0.156,1.486,0.419,2.187c0.469,1.208,1.424,2.164,2.634,2.632c0.696,0.272,1.435,0.426,2.185,0.45 c0.963,0.042,1.268,0.055,3.71,0.055s2.755,0,3.71-0.055c0.747-0.015,1.486-0.157,2.186-0.419c1.209-0.469,2.164-1.424,2.633-2.633 c0.263-0.7,0.404-1.438,0.419-2.186c0.043-0.962,0.056-1.267,0.056-3.71s0-2.753-0.056-3.71C20.941,7.57,20.801,6.819,20.533,6.111z M19.315,15.643c-0.007,0.576-0.111,1.147-0.311,1.688c-0.305,0.787-0.926,1.409-1.712,1.711c-0.535,0.199-1.099,0.303-1.67,0.311 c-0.95,0.044-1.218,0.055-3.654,0.055c-2.438,0-2.687,0-3.655-0.055c-0.569-0.007-1.135-0.112-1.669-0.311 c-0.789-0.301-1.414-0.923-1.719-1.711c-0.196-0.534-0.302-1.099-0.311-1.669c-0.043-0.95-0.053-1.218-0.053-3.654 c0-2.437,0-2.686,0.053-3.655c0.007-0.576,0.111-1.146,0.311-1.687c0.305-0.789,0.93-1.41,1.719-1.712 c0.534-0.198,1.1-0.303,1.669-0.311c0.951-0.043,1.218-0.055,3.655-0.055c2.437,0,2.687,0,3.654,0.055 c0.571,0.007,1.135,0.112,1.67,0.311c0.786,0.303,1.407,0.925,1.712,1.712c0.196,0.534,0.302,1.099,0.311,1.669 c0.043,0.951,0.054,1.218,0.054,3.655c0,2.436,0,2.698-0.043,3.654H19.315z"></path></svg>
<span class="u-screen-reader-text">Instagram</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M20.66 6.98a9.932 9.932 0 0 0-3.641-3.64C15.486 2.447 13.813 2 12 2s-3.486.447-5.02 1.34c-1.533.893-2.747 2.107-3.64 3.64S2 10.187 2 12s.446 3.487 1.34 5.02a9.924 9.924 0 0 0 3.641 3.64C8.514 21.553 10.187 22 12 22s3.486-.447 5.02-1.34a9.932 9.932 0 0 0 3.641-3.64C21.554 15.487 22 13.813 22 12s-.446-3.487-1.34-5.02zM12 3.66c2 0 3.772.64 5.32 1.919-.92 1.174-2.286 2.14-4.1 2.9-1.002-1.813-2.088-3.327-3.261-4.54A7.715 7.715 0 0 1 12 3.66zM5.51 6.8a8.116 8.116 0 0 1 2.711-2.22c1.212 1.201 2.325 2.7 3.34 4.5-2 .6-4.114.9-6.341.9-.573 0-1.006-.013-1.3-.04A8.549 8.549 0 0 1 5.51 6.8zM3.66 12c0-.054.003-.12.01-.2.007-.08.01-.146.01-.2.254.014.641.02 1.161.02 2.666 0 5.146-.367 7.439-1.1.187.373.381.793.58 1.26-1.32.293-2.674 1.006-4.061 2.14S6.4 16.247 5.76 17.5c-1.4-1.587-2.1-3.42-2.1-5.5zM12 20.34c-1.894 0-3.594-.587-5.101-1.759.601-1.187 1.524-2.322 2.771-3.401 1.246-1.08 2.483-1.753 3.71-2.02a29.441 29.441 0 0 1 1.56 6.62 8.166 8.166 0 0 1-2.94.56zm7.08-3.96a8.351 8.351 0 0 1-2.58 2.621c-.24-2.08-.7-4.107-1.379-6.081.932-.066 1.765-.1 2.5-.1.799 0 1.686.034 2.659.1a8.098 8.098 0 0 1-1.2 3.46zm-1.24-5c-1.16 0-2.233.047-3.22.14a27.053 27.053 0 0 0-.68-1.62c2.066-.906 3.532-2.006 4.399-3.3 1.2 1.414 1.854 3.027 1.96 4.84-.812-.04-1.632-.06-2.459-.06z"></path></svg>
<span class="u-screen-reader-text">Dribbble</span>
</a>
</li>
<li>
<a href="#0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M7.803 5.731c.589 0 1.119.051 1.605.155.483.103.895.273 1.243.508.343.235.611.547.804.939.187.387.28.871.28 1.443 0 .62-.14 1.138-.421 1.551-.283.414-.7.753-1.256 1.015.757.219 1.318.602 1.69 1.146.374.549.557 1.206.557 1.976 0 .625-.119 1.162-.358 1.613a3.11 3.11 0 0 1-.974 1.114 4.315 4.315 0 0 1-1.399.64 6.287 6.287 0 0 1-1.609.206H2V5.731h5.803zm-.351 4.972c.48 0 .878-.114 1.192-.345.312-.228.463-.604.463-1.119 0-.286-.051-.522-.151-.707a1.114 1.114 0 0 0-.417-.428 1.683 1.683 0 0 0-.597-.215 3.609 3.609 0 0 0-.697-.061H4.71v2.875h2.742zm.151 5.239c.267 0 .521-.023.76-.077.241-.052.455-.136.637-.261.182-.12.332-.283.44-.491.109-.206.162-.475.162-.798 0-.634-.179-1.085-.533-1.358-.355-.27-.831-.404-1.414-.404H4.71v3.39h2.893zm8.565-.041c.367.358.896.538 1.584.538.493 0 .919-.125 1.278-.373.354-.249.57-.515.653-.79h2.155c-.346 1.072-.871 1.838-1.589 2.299-.709.463-1.572.693-2.58.693-.702 0-1.334-.113-1.9-.337a4.033 4.033 0 0 1-1.439-.958 4.37 4.37 0 0 1-.905-1.485 5.433 5.433 0 0 1-.32-1.899c0-.666.111-1.289.329-1.864a4.376 4.376 0 0 1 .934-1.493c.405-.42.885-.751 1.444-.994a4.634 4.634 0 0 1 1.858-.362c.754 0 1.413.146 1.979.44a3.967 3.967 0 0 1 1.39 1.182c.363.493.622 1.058.783 1.691.161.632.217 1.292.171 1.983h-6.431c.001.704.238 1.371.606 1.729zm2.812-4.681c-.291-.322-.783-.496-1.385-.496-.391 0-.714.065-.974.199a1.97 1.97 0 0 0-.62.491 1.772 1.772 0 0 0-.328.628 2.82 2.82 0 0 0-.111.587h3.982c-.058-.624-.272-1.085-.564-1.409zm-3.918-4.663h4.989v1.215h-4.989z"></path></svg>
<span class="u-screen-reader-text">Behance</span>
</a>
</li>
</ul> <!-- s-intro__social -->
<div class="s-intro__scroll">
<a href="#about" class="smoothscroll">
<span>Scroll Down</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
style="fill: rgba(0, 0, 0, 1); transform: rotate(180deg);">
<path d="M21 11H6.414l5.293-5.293-1.414-1.414L2.586 12l7.707 7.707 1.414-1.414L6.414 13H21z"></path>
</svg>
</a>
</div>
</section>
<!-- about -->
<section id="about" class="s-about target-section">
<div class="row s-about__content" data-animate-block>
<div class="column lg-12">
<h2 class="text-pretitle" data-animate-el>About Us</h2>
<p class="s-about__desc" data-animate-el>
<span>We</span> create stunning, responsive digital design templates using HTML, CSS, and JavaScript, perfect for creatives, agencies, and businesses.
</p>
</div>
</div>
</section>
<!-- services -->
<section id="services" class="s-services">
<div class="s-services__bg"></div>
<div class="row narrow section-header section-header--dark has-bottom-sep">
<div class="column lg-12">
<h3 class="text-pretitle">Services</h3>
<h1 class="text-display-title">What We Do.</h1>
<p class="lead">We design and develop modern, responsive digital design templates using HTML, CSS, and JavaScript. Our templates are optimized for performance, user-friendly, and customizable, making them ideal for creatives, agencies, and businesses looking to enhance their online presence with visually stunning websites.</p>
</div>
</div>
<div class="s-services__content">
<div class="row services-list block-lg-one-half block-tab-whole" data-animate-block>
<div class="column service-item" data-animate-el>
<span class="service-icon-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 4c-1.5 0-2.662 1.685-1.598 3.194.535.759.406 1.216.045 1.749-.765 1.127-1.872 2.057-3.447 2.057-2.521 0-3.854-2.083-4.131-3.848-.096-.614-.15-1.074.436-1.644.402-.39.695-.904.695-1.508 0-1.104-.896-2-2-2s-2 .896-2 2c0 .604.293 1.118.695 1.508.586.57.531 1.03.436 1.644-.277 1.765-1.61 3.848-4.131 3.848-1.575 0-2.682-.93-3.447-2.058-.362-.532-.491-.989.045-1.748 1.064-1.509-.098-3.194-1.598-3.194-1.104 0-2 .896-2 2 0 .797.464 1.495 1.144 1.808.825.38.856 1.317.856 2.171v12.021h20v-12.021c0-.854.031-1.792.856-2.171.68-.313 1.144-1.011 1.144-1.808 0-1.104-.896-2-2-2zm-10 6.297c1.977 2.96 5.58 3.354 8 1.851v3.852h-16v-3.852c2.398 1.49 6.01 1.131 8-1.851zm-8 9.703v-2h16v2h-16z"/></svg>
</span>
<div class="service-content">
<h3 class="h4">Branding</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</p>
</div>
</div> <!-- end service-item -->
<div class="column service-item" data-animate-el>
<span class="service-icon-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 8c.552 0 1 .449 1 1s-.448 1-1 1-1-.449-1-1 .448-1 1-1zm0-2c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3zm-10 6c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3zm10-8c.343 0 .677.035 1 .101v-2.101c0-.552-.447-1-1-1s-1 .448-1 1v2.101c.323-.066.657-.101 1-.101zm-10 6c.343 0 .677.035 1 .101v-8.101c0-.552-.447-1-1-1s-1 .448-1 1v8.101c.323-.066.657-.101 1-.101zm10 4c-.343 0-.677-.035-1-.101v8.101c0 .552.447 1 1 1s1-.448 1-1v-8.101c-.323.066-.657.101-1 .101zm-10 6c-.343 0-.677-.035-1-.101v2.101c0 .552.447 1 1 1s1-.448 1-1v-2.101c-.323.066-.657.101-1 .101z"/></svg>
</span>
<div class="service-content">
<h3 class="h4">UI/UX Design</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</p>
</div>
</div>
<div class="column service-item" data-animate-el>
<span class="service-icon-block">
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M10 16v2.5c0 2.483-2.017 4.5-4.5 4.5-2.484 0-4.5-2.017-4.5-4.5 0-2.484 2.016-4.5 4.5-4.5h2.5v-4h-2.5c-2.484 0-4.5-2.016-4.5-4.5 0-2.483 2.016-4.5 4.5-4.5 2.483 0 4.5 2.017 4.5 4.5v2.5h4v-2.5c0-2.483 2.017-4.5 4.5-4.5 2.484 0 4.5 2.017 4.5 4.5 0 2.484-2.016 4.5-4.5 4.5h-2.5v4h2.5c2.484 0 4.5 2.016 4.5 4.5 0 2.483-2.016 4.5-4.5 4.5-2.483 0-4.5-2.017-4.5-4.5v-2.5h-4zm-2 0h-2.5c-1.379 0-2.5 1.122-2.5 2.5s1.121 2.5 2.5 2.5 2.5-1.122 2.5-2.5v-2.5zm10.5 0h-2.5v2.5c0 1.378 1.121 2.5 2.5 2.5s2.5-1.122 2.5-2.5-1.121-2.5-2.5-2.5zm-4.5-6h-4v4.132h4v-4.132zm-6-2v-2.5c0-1.378-1.121-2.5-2.5-2.5s-2.5 1.122-2.5 2.5 1.121 2.5 2.5 2.5h2.5zm10.5 0c1.379 0 2.5-1.122 2.5-2.5s-1.121-2.5-2.5-2.5-2.5 1.122-2.5 2.5v2.5h2.5z"/></svg>
</span>
<div class="service-content">
<h3 class="h4">Web Development</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</p>
</div>
</div>
<div class="column service-item" data-animate-el>
<span class="service-icon-block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l-11 6v12.131l11 5.869 11-5.869v-12.066l-11-6.065zm-1 21.2l-6.664-3.555 4.201-2.801c1.08-.719-.066-2.359-1.243-1.575l-4.294 2.862v-7.901l8 4.363v8.607zm-6.867-14.63l6.867-3.746v4.426c0 1.323 2 1.324 2 0v-4.415l6.91 3.811-7.905 4.218-7.872-4.294zm8.867 6.03l8-4.269v7.8l-4.263-2.842c-1.181-.785-2.323.855-1.245 1.574l4.172 2.781-6.664 3.556v-8.6z"/></svg>
</span>
<div class="service-content">
<h3 class="h4">Illustration</h3>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- portfolio -->
<section id="portfolio" class="s-portfolio">
<div class="s-portfolio__header">
<div class="row narrow section-header section-header--dark has-bottom-sep">
<div class="column lg-12">
<h3 class="text-pretitle">Showcase</h3>
<h1 class="text-display-title">See Our Featured Projects.</h1>
<p class="lead">
Lorem ipsum Dolor adipisicing nostrud et aute Excepteur amet commodo
ea dolore irure esse Duis nulla sint fugiat cillum ullamco proident
aliquip quis qui voluptate dolore veniam Ut laborum non est in officia.
</p>
</div>
</div>
</div>
<div class="row s-portfolio__content" data-animate-block>
<div class="column lg-12">
<div class="folio-list bricks">
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-shutterbug.jpg" Title="Shutterbug" data-size="1050x700">
<img src="images/portfolio/shutterbug.jpg"
srcset="images/portfolio/shutterbug.jpg 1x, images/portfolio/shutterbug@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">Web Development</div>
<h4 class="folio-item__title">Shutterbug</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-yellowwall.jpg" Title="Yellow Wall" data-size="1050x700">
<img src="images/portfolio/yellowwall.jpg"
srcset="images/portfolio/yellowwall.jpg 1x, images/portfolio/yellowwall@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">Marketing</div>
<h4 class="folio-item__title">Yellow Wall</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-architecture.jpg" Title="Architecture" data-size="1050x700">
<img src="images/portfolio/architecture.jpg"
srcset="images/portfolio/architecture.jpg 1x, images/portfolio/architecture@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">Marketing</div>
<h4 class="folio-item__title">Architecture</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-minimalismo.jpg" Title="Minimalismo" data-size="1050x700">
<img src="images/portfolio/minimalismo.jpg"
srcset="images/portfolio/minimalismo.jpg 1x, images/portfolio/minimalismo@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">UI/UX Design</div>
<h4 class="folio-item__title">Minimalismo</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-skaterboy.jpg" Title="Skaterboy" data-size="1050x700">
<img src="images/portfolio/skaterboy.jpg"
srcset="images/portfolio/skaterboy.jpg 1x, images/portfolio/skaterboy@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">Branding</div>
<h4 class="folio-item__title">Skaterboy</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
<div class="brick folio-item" data-animate-el>
<div class="folio-item__thumb">
<a class="folio-item__thumb-link" href="images/portfolio/gallery/g-salad.jpg" Title="Salad" data-size="1050x700">
<img src="images/portfolio/salad.jpg"
srcset="images/portfolio/salad.jpg 1x, images/portfolio/salad@2x.jpg 2x" alt="">
</a>
</div>
<div class="folio-item__info">
<div class="folio-item__cat">Branding</div>
<h4 class="folio-item__title">Salad</h4>
</div>
<a href="https://www.behance.net/" title="Project Link" class="folio-item__project-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z"></path><path d="m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z"></path></svg>
</a>
<div class="folio-item__caption">
<p>Vero molestiae sed aut natus excepturi. Et tempora numquam. Temporibus iusto quo.Unde dolorem corrupti neque nisi.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row testimonials">
<div class="column lg-12" data-animate-block>
<h2 class="text-pretitle" data-animate-el>What They Say About Us</h2>
<div class="swiper-container testimonial-slider" data-animate-el>
<div class="swiper-wrapper">
<div class="testimonial-slider__slide swiper-slide">
<p>
Molestiae incidunt consequatur quis ipsa autem nam sit enim magni. Voluptas tempore rem.
Explicabo a quaerat sint autem dolore ducimus ut consequatur neque. Nisi dolores quaerat fuga rem nihil nostrum.
Laudantium quia consequatur molestias.
</p>
<div class="testimonial-slider__author">
<img src="images/avatars/user-02.jpg" alt="Author image" class="testimonial-slider__avatar">
<cite class="testimonial-slider__cite">
<strong>Tim Cook</strong>
<span>CEO, Apple</span>
</cite>
</div>
</div>
<div class="testimonial-slider__slide swiper-slide">
<p>
Excepturi nam cupiditate culpa doloremque deleniti repellat. Veniam quos repellat voluptas animi adipisci.
Nisi eaque consequatur. Voluptatem dignissimos ut ducimus accusantium perspiciatis.
Quasi voluptas eius distinctio. Atque eos maxime.
</p>
<div class="testimonial-slider__author">
<img src="images/avatars/user-03.jpg" alt="Author image" class="testimonial-slider__avatar">
<cite class="testimonial-slider__cite">
<strong>Sundar Pichai</strong>
<span>CEO, Google</span>
</cite>
</div>
</div>
<div class="testimonial-slider__slide swiper-slide">
<p>
Repellat dignissimos libero. Qui sed at corrupti expedita voluptas odit. Nihil ea quia nesciunt. Ducimus aut sed ipsam.
Autem eaque officia cum exercitationem sunt voluptatum accusamus. Quasi voluptas eius distinctio.
Voluptatem dignissimos ut.
</p>
<div class="testimonial-slider__author">
<img src="images/avatars/user-01.jpg" alt="Author image" class="testimonial-slider__avatar">
<cite class="testimonial-slider__cite">
<strong>Satya Nadella</strong>
<span>CEO, Microsoft</span>
</cite>
</div>
</div>
<div class="testimonial-slider__slide swiper-slide">
<p>
Nunc interdum lacus sit amet orci. Vestibulum dapibus nunc ac augue. Fusce vel dui. In ac felis
quis tortor malesuada pretium. Curabitur vestibulum aliquam leo. Qui sed at corrupti expedita voluptas odit.
Nihil ea quia nesciunt. Ducimus aut sed ipsam.
</p>
<div class="testimonial-slider__author">
<img src="images/avatars/user-06.jpg" alt="Author image" class="testimonial-slider__avatar">
<cite class="testimonial-slider__cite">
<strong>Jeff Bezos</strong>
<span>CEO, Amazon</span>
</cite>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="clients-block">
<div class="row">
<div class="column lg-12" data-animate-block>
<div class="swiper-container clients" data-animate-el>
<div class="swiper-wrapper clients__content">
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/dropbox.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/atom.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/github.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/redhat.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/medium.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/messenger.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/steam.svg" /></a>
<a href="#0" title="" class="swiper-slide clients__slide"><img src="images/icons/clients/spotify.svg" /></a>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact" class="s-contact target-section">
<div class="row section-header section-header--dark">
<div class="column lg-12">
<h3 class="text-pretitle">Get In Touch</h3>
<h1 class="text-display-title">
Have questions or need assistance? Get in touch with us! We're here to help with your digital design needs. Contact us via email or social media.
Drop us a line at <a href="mailto:#0">info@jvcodes.com</a>.
</h1>
</div>
</div>
<div class="row s-contact__infos">
<div class="column lg-5 md-6 stack-on-900 s-contact__block-address">
<h5 class="with-top-line">Where to Find Us</h5>
<p>
1600 Amphitheatre Parkway <br>
Mountain View, California <br>
94043 US
</p>
</div>
<div class="column lg-3 md-6 stack-on-900 s-contact__block-social">
<h5 class="with-top-line">Follow Us</h5>
<ul class="s-contact__list">
<li><a href="#0">Facebook</a></li>
<li><a href="#0">Twitter</a></li>
<li><a href="#0">Instagram</a></li>
</ul>
</div>
<div class="column lg-4 md-12 stack-on-900 s-contact__block-number">
<h5 class="with-top-line">Contact Us</h5>
<ul class="s-contact__list">
<li><a href="mailto:#0">info@jvcodes.com</a></li>
<li><a href="tel:197-543-2345">+197 543 2345</a></li>
<li><a href="tel:197-123-9876">+197 123 9876</a></li>
</ul>
</div>
</div>
<div class="row s-contact__bottom">
<div class="column lg-5 tab-12 s-contact__mail-block">
<a href="mailto:#0" class="btn btn--stroke btn--mail">
Let's Talk
</a>
</div>
<div class="column lg-7 tab-12 s-contact__subscribe">
<h5>Subscribe</h5>
<div class="subscribe-form">
<form id="mc-form" class="mc-form" novalidate="true">
<input type="email" name="EMAIL" id="mce-EMAIL" class="u-fullwidth text-center" placeholder="Your Email Address" title="The domain portion of the email address is invalid (the portion after the @)." pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" required="">
<input type="submit" name="subscribe" value="Subscribe" class="btn btn--primary u-fullwidth">
<div class="mc-status"></div>
</form>
</div>
</div>
</div>
</section>
</section>
<!-- footer -->
<footer id="colophon" class="s-footer">
<div class="row">
<div class="column lg-12 ss-copyright">
<span>© Copyright JV Codes 2025</span>
<span>Design by <a href="https://www.jvcodes.com/">JV Codes</a></span>
</div>
</div>
<div class="ss-go-top">
<a class="smoothscroll" title="Back to Top" href="#top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);"><path d="M6 4h12v2H6zm5 10v6h2v-6h5l-6-6-6 6z"></path></svg>
</a>
</div>
</footer>
</div>
<!-- photoswipe background -->
<div aria-hidden="true" class="pswp" role="dialog" tabindex="-1">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title=
"Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title=
"Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> <button class="pswp__button pswp__button--arrow--right" title=
"Next (arrow right)"></button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<!-- Java Script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
Here is the complete code for style.css file to style the Digital Design Website:
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
:root {
--font-1 : "Lora", serif;
--font-2 : "Inter", sans-serif;
/* monospace
*/
--font-mono : Consolas, "Andale Mono", Courier, "Courier New", monospace;
}
/* -------------------------------------------------------------------
* ## colors
* ------------------------------------------------------------------- */
:root {
/* color-1(#F9A828)
* color-2(#07617D)
*/
--color-1 : #00bf63;
--color-2 : hsla(194, 89%, 26%, 1);
/* theme color variations
*/
--color-1-lighter : hsla(37, 95%, 77%, 1);
--color-1-light : hsla(37, 95%, 67%, 1);
--color-1-dark : hsla(37, 95%, 47%, 1);
--color-1-darker : hsla(37, 95%, 37%, 1);
--color-2-lighter : hsla(194, 89%, 46%, 1);
--color-2-light : hsla(194, 89%, 36%, 1);
--color-2-dark : hsla(194, 89%, 16%, 1);
--color-2-darker : hsla(194, 89%, 10%, 1);
/* feedback colors
* color-error(#ffd1d2), color-success(#c8e675),
* color-info(#d7ecfb), color-notice(#fff099)
*/
--color-error : hsla(359, 100%, 91%, 1);
--color-success : hsla(76, 69%, 68%, 1);
--color-info : hsla(205, 82%, 91%, 1);
--color-notice : hsla(51, 100%, 80%, 1);
--color-error-content : hsla(359, 50%, 50%, 1);
--color-success-content : hsla(76, 29%, 28%, 1);
--color-info-content : hsla(205, 32%, 31%, 1);
--color-notice-content : hsla(51, 30%, 30%, 1);
/* shades
* generated using
* Tint & Shade Generator
* (https://maketintsandshades.com/)
*/
--color-black : #000000;
--color-gray-19 : #161616;
--color-gray-18 : #2c2c2c;
--color-gray-17 : #424342;
--color-gray-16 : #585958;
--color-gray-15 : #6e6f6f;
--color-gray-14 : #838585;
--color-gray-13 : #999b9b;
--color-gray-12 : #afb2b1;
--color-gray-11 : #c5c8c7;
--color-gray-10 : #dbdedd;
--color-gray-9 : #dfe1e0;
--color-gray-8 : #e2e5e4;
--color-gray-7 : #e6e8e7;
--color-gray-6 : #e9ebeb;
--color-gray-5 : #edefee;
--color-gray-4 : #f1f2f1;
--color-gray-3 : #f4f5f5;
--color-gray-2 : #f8f8f8;
--color-gray-1 : #fbfcfc;
--color-white : #ffffff;
/* text
*/
--color-text : var(--color-gray-19);
--color-text-dark : var(--color-black);
--color-text-light : var(--color-gray-13);
--color-placeholder : var(--color-gray-13);
/* buttons
*/
--color-btn : var(--color-gray-9);
--color-btn-text : var(--color-black);
--color-btn-hover : var(--color-gray-11);
--color-btn-hover-text : var(--color-black);
--color-btn-primary : var(--color-1);
--color-btn-primary-text : var(--color-black);
--color-btn-primary-hover : var(--color-1-dark);
--color-btn-primary-hover-text : var(--color-black);
--color-btn-stroke : var(--color-black);
--color-btn-stroke-text : var(--color-black);
--color-btn-stroke-hover : var(--color-black);
--color-btn-stroke-hover-text : var(--color-white);
/* preloader
*/
--color-preloader-bg : var(--color-gray-19);
--color-loader : var(--color-1);
--color-loader-light : rgba(255, 255, 255, 0.1);
/* others
*/
--color-body : white;
--color-border : rgba(0, 0, 0, .08);
--border-radius : 3px;
}
/* -------------------------------------------------------------------
* ## spacing and typescale
* ------------------------------------------------------------------- */
:root {
/* spacing
* base font size: 18px
* vertical space unit : 32px
*/
--base-size : 62.5%;
--multiplier : 1;
--base-font-size : calc(1.8rem * var(--multiplier));
--space : calc(3.2rem * var(--multiplier));
/* vertical spacing
*/
--vspace-0_125 : calc(0.125 * var(--space));
--vspace-0_25 : calc(0.25 * var(--space));
--vspace-0_375 : calc(0.375 * var(--space));
--vspace-0_5 : calc(0.5 * var(--space));
--vspace-0_625 : calc(0.625 * var(--space));
--vspace-0_75 : calc(0.75 * var(--space));
--vspace-0_875 : calc(0.875 * var(--space));
--vspace-1 : calc(var(--space));
--vspace-1_25 : calc(1.25 * var(--space));
--vspace-1_5 : calc(1.5 * var(--space));
--vspace-1_75 : calc(1.75 * var(--space));
--vspace-2 : calc(2 * var(--space));
--vspace-2_5 : calc(2.5 * var(--space));
--vspace-3 : calc(3 * var(--space));
--vspace-3_5 : calc(3.5 * var(--space));
--vspace-4 : calc(4 * var(--space));
--vspace-4_5 : calc(4.5 * var(--space));
--vspace-5 : calc(5 * var(--space));
--vspace-5_5 : calc(5.5 * var(--space));
--vspace-6 : calc(6 * var(--space));
/* type scale
* ratio 1 :2 | base: 18px
* -------------------------------------------------------
*
* --text-display-3 = (77.40px)
* --text-display-2 = (64.50px)
* --text-display-1 = (53.75px)
* --text-xxxl = (44.79px)
* --text-xxl = (37.32px)
* --text-xl = (31.10px)
* --text-lg = (25.92px)
* --text-md = (21.60px)
* --text-size = (18.00px) BASE
* --text-sm = (15.00px)
* --text-xs = (12.50px)
*
* ---------------------------------------------------------
*/
--text-scale-ratio : 1.2;
--text-size : var(--base-font-size);
--text-xs : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
--text-sm : calc(var(--text-xs) * var(--text-scale-ratio));
--text-md : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-lg : calc(var(--text-md) * var(--text-scale-ratio));
--text-xl : calc(var(--text-lg) * var(--text-scale-ratio));
--text-xxl : calc(var(--text-xl) * var(--text-scale-ratio));
--text-xxxl : calc(var(--text-xxl) * var(--text-scale-ratio));
--text-display-1 : calc(var(--text-xxxl) * var(--text-scale-ratio));
--text-display-2 : calc(var(--text-display-1) * var(--text-scale-ratio));
--text-display-3 : calc(var(--text-display-2) * var(--text-scale-ratio));
/* default button height
*/
--vspace-btn : var(--vspace-2);
}
/* on mobile devices below 600px, change the value of '--multiplier'
* to adjust the values of base font size and vertical space unit.
*/
@media screen and (max-width: 600px) {
:root {
--multiplier : .875;
}
}
/* -------------------------------------------------------------------
* ## grid variables
* ------------------------------------------------------------------- */
:root {
/* widths for rows and containers
*/
--width-full : 100%;
--width-max : 1200px;
--width-wide : 1400px;
--width-wider : 1600px;
--width-widest : 1800px;
--width-narrow : 1000px;
--width-narrower : 800px;
--width-grid-max : var(--width-max);
/* gutter
*/
--gutter : 2rem;
}
/* on medium screen devices
*/
@media screen and (max-width: 1200px) {
:root {
--gutter : 1.8rem;
}
}
/* on mobile devices
*/
@media screen and (max-width: 600px) {
:root {
--gutter : 1rem;
}
}
/* ====================================================================
* # NORMALIZE
*
*
* --------------------------------------------------------------------
* normalize.css v8.0.1 | MIT License |
* github.com/necolas/normalize.css
* -------------------------------------------------------------------- */
html {
line-height : 1.15;
-webkit-text-size-adjust : 100%;
}
body {
margin : 0;
}
main {
display : block;
}
h1 {
font-size : 2em;
margin : 0.67em 0;
}
hr {
box-sizing : content-box;
height : 0;
overflow : visible;
}
pre {
font-family : monospace, monospace;
font-size : 1em;
}
a {
background-color : transparent;
}
abbr[title] {
border-bottom : none;
text-decoration : underline;
text-decoration : underline dotted;
}
b,
strong {
font-weight : bolder;
}
code,
kbd,
samp {
font-family : monospace, monospace;
font-size : 1em;
}
small {
font-size : 80%;
}
sub,
sup {
font-size : 75%;
line-height : 0;
position : relative;
vertical-align : baseline;
}
sub {
bottom : -0.25em;
}
sup {
top : -0.5em;
}
img {
border-style : none;
}
button,
input,
optgroup,
select,
textarea {
font-family : inherit;
font-size : 100%;
line-height : 1.15;
margin : 0;
}
button,
input {
overflow : visible;
}
button,
select {
text-transform : none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance : button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style : none;
padding : 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline : 1px dotted ButtonText;
}
fieldset {
padding : 0.35em 0.75em 0.625em;
}
legend {
box-sizing : border-box;
color : inherit;
display : table;
max-width : 100%;
padding : 0;
white-space : normal;
}
progress {
vertical-align : baseline;
}
textarea {
overflow : auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing : border-box;
padding : 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height : auto;
}
[type="search"] {
-webkit-appearance : textfield;
outline-offset : -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance : none;
}
::-webkit-file-upload-button {
-webkit-appearance : button;
font : inherit;
}
details {
display : block;
}
summary {
display : list-item;
}
template {
display : none;
}
[hidden] {
display : none;
}
/* ===================================================================
* # BASE SETUP
*
*
* ------------------------------------------------------------------- */
html {
font-size : var(--base-size);
box-sizing : border-box;
}
*,
*::before,
*::after {
box-sizing : inherit;
}
html,
body {
height : 100%;
}
body {
background-color : var(--color-body);
-webkit-overflow-scrolling : touch;
-webkit-text-size-adjust : 100%;
-webkit-tap-highlight-color : rgba(0, 0, 0, 0);
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
p {
font-size : inherit;
text-rendering : optimizeLegibility;
}
a {
text-decoration : none;
}
svg,
img,
video {
max-width : 100%;
height : auto;
}
pre {
overflow : auto;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
margin : 0;
padding : 0;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
}
/* ===================================================================
* # GRID v4.0.0
*
*
* -----------------------------------------------------------------
* - Grid breakpoints are based on MAXIMUM WIDTH media queries,
* meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
* - Grid columns without a specified width will automatically layout
* as equal width columns.
*
* - BLOCK GRID columns(columns inside BLOCK GRID containers) are
* equally-sized columns define at parent/row level.
* A BLOCK GRID container's class attribute value begins with "block-".
*
* ------------------------------------------------------------------- */
/* row
*/
.row {
width : 92%;
max-width : var(--width-grid-max);
margin : 0 auto;
display : flex;
flex-flow : row wrap;
}
.row .row {
width : auto;
max-width : none;
margin-left : calc(var(--gutter) * -1);
margin-right : calc(var(--gutter) * -1);
}
/* column
*/
.column {
display : block;
flex : 1 1 0%;
padding : 0 var(--gutter);
}
.collapse>.column,
.column.collapse {
padding : 0;
}
/* row utility classes
*/
.row.row-wrap {
flex-wrap : wrap;
}
.row.row-nowrap {
flex-wrap : nowrap;
}
.row.row-y-top {
align-items : flex-start;
}
.row.row-y-bottom {
align-items : flex-end;
}
.row.row-y-center {
align-items : center;
}
.row.row-stretch {
align-items : stretch;
}
.row.row-baseline {
align-items : baseline;
}
.row.row-x-left {
justify-content : flex-start;
}
.row.row-x-right {
justify-content : flex-end;
}
.row.row-x-center {
justify-content : center;
}
/* --------------------------------------------------------------------
* ## large screen devices
* -------------------------------------------------------------------- */
.lg-1 {
flex : none;
width : 8.33333%;
}
.lg-2 {
flex : none;
width : 16.66667%;
}
.lg-3 {
flex : none;
width : 25%;
}
.lg-4 {
flex : none;
width : 33.33333%;
}
.lg-5 {
flex : none;
width : 41.66667%;
}
.lg-6 {
flex : none;
width : 50%;
}
.lg-7 {
flex : none;
width : 58.33333%;
}
.lg-8 {
flex : none;
width : 66.66667%;
}
.lg-9 {
flex : none;
width : 75%;
}
.lg-10 {
flex : none;
width : 83.33333%;
}
.lg-11 {
flex : none;
width : 91.66667%;
}
.lg-12 {
flex : none;
width : 100%;
}
.block-lg-one-eight>.column {
flex : none;
width : 12.5%;
}
.block-lg-one-sixth>.column {
flex : none;
width : 16.66667%;
}
.block-lg-one-fifth>.column {
flex : none;
width : 20%;
}
.block-lg-one-fourth>.column {
flex : none;
width : 25%;
}
.block-lg-one-third>.column {
flex : none;
width : 33.33333%;
}
.block-lg-one-half>.column {
flex : none;
width : 50%;
}
.block-lg-whole>.column {
flex : none;
width : 100%;
}
/* --------------------------------------------------------------------
* ## medium screen devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
.md-1 {
flex : none;
width : 8.33333%;
}
.md-2 {
flex : none;
width : 16.66667%;
}
.md-3 {
flex : none;
width : 25%;
}
.md-4 {
flex : none;
width : 33.33333%;
}
.md-5 {
flex : none;
width : 41.66667%;
}
.md-6 {
flex : none;
width : 50%;
}
.md-7 {
flex : none;
width : 58.33333%;
}
.md-8 {
flex : none;
width : 66.66667%;
}
.md-9 {
flex : none;
width : 75%;
}
.md-10 {
flex : none;
width : 83.33333%;
}
.md-11 {
flex : none;
width : 91.66667%;
}
.md-12 {
flex : none;
width : 100%;
}
.block-md-one-eight>.column {
flex : none;
width : 12.5%;
}
.block-md-one-sixth>.column {
flex : none;
width : 16.66667%;
}
.block-md-one-fifth>.column {
flex : none;
width : 20%;
}
.block-md-one-fourth>.column {
flex : none;
width : 25%;
}
.block-md-one-third>.column {
flex : none;
width : 33.33333%;
}
.block-md-one-half>.column {
flex : none;
width : 50%;
}
.block-md-whole>.column {
flex : none;
width : 100%;
}
.hide-on-md {
display : none;
}
}
/* --------------------------------------------------------------------
* ## tablet devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.tab-1 {
flex : none;
width : 8.33333%;
}
.tab-2 {
flex : none;
width : 16.66667%;
}
.tab-3 {
flex : none;
width : 25%;
}
.tab-4 {
flex : none;
width : 33.33333%;
}
.tab-5 {
flex : none;
width : 41.66667%;
}
.tab-6 {
flex : none;
width : 50%;
}
.tab-7 {
flex : none;
width : 58.33333%;
}
.tab-8 {
flex : none;
width : 66.66667%;
}
.tab-9 {
flex : none;
width : 75%;
}
.tab-10 {
flex : none;
width : 83.33333%;
}
.tab-11 {
flex : none;
width : 91.66667%;
}
.tab-12 {
flex : none;
width : 100%;
}
.block-tab-one-eight>.column {
flex : none;
width : 12.5%;
}
.block-tab-one-sixth>.column {
flex : none;
width : 16.66667%;
}
.block-tab-one-fifth>.column {
flex : none;
width : 20%;
}
.block-tab-one-fourth>.column {
flex : none;
width : 25%;
}
.block-tab-one-third>.column {
flex : none;
width : 33.33333%;
}
.block-tab-one-half>.column {
flex : none;
width : 50%;
}
.block-tab-whole>.column {
flex : none;
width : 100%;
}
.hide-on-tab {
display : none;
}
}
/* --------------------------------------------------------------------
* ## mobile devices
* -------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.row {
width : 100%;
padding-left : 6vw;
padding-right : 6vw;
}
.row .row {
padding-left : 0;
padding-right : 0;
}
.mob-1 {
flex : none;
width : 8.33333%;
}
.mob-2 {
flex : none;
width : 16.66667%;
}
.mob-3 {
flex : none;
width : 25%;
}
.mob-4 {
flex : none;
width : 33.33333%;
}
.mob-5 {
flex : none;
width : 41.66667%;
}
.mob-6 {
flex : none;
width : 50%;
}
.mob-7 {
flex : none;
width : 58.33333%;
}
.mob-8 {
flex : none;
width : 66.66667%;
}
.mob-9 {
flex : none;
width : 75%;
}
.mob-10 {
flex : none;
width : 83.33333%;
}
.mob-11 {
flex : none;
width : 91.66667%;
}
.mob-12 {
flex : none;
width : 100%;
}
.block-mob-one-eight>.column {
flex : none;
width : 12.5%;
}
.block-mob-one-sixth>.column {
flex : none;
width : 16.66667%;
}
.block-mob-one-fifth>.column {
flex : none;
width : 20%;
}
.block-mob-one-fourth>.column {
flex : none;
width : 25%;
}
.block-mob-one-third>.column {
flex : none;
width : 33.33333%;
}
.block-mob-one-half>.column {
flex : none;
width : 50%;
}
.block-mob-whole>.column {
flex : none;
width : 100%;
}
.hide-on-mob {
display : none;
}
}
/* --------------------------------------------------------------------
* ## small screen devices
* --------------------------------------------------------------------*/
/* stack columns on small screen devices
*/
@media screen and (max-width: 400px) {
.row .row {
margin-left : 0;
margin-right : 0;
}
.block-stack>.column,
.column {
flex : none;
width : 100%;
margin-left : 0;
margin-right : 0;
padding : 0;
}
.hide-on-sm {
display : none;
}
}
/* --------------------------------------------------------------------
* ## additional column stackpoints
* -------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
.stack-on-1000,
.block-stack-on-1000>.column {
flex : none;
width : 100%;
margin-left : 0;
margin-right : 0;
}
}
@media screen and (max-width: 900px) {
.stack-on-900,
.block-stack-on-900>.column {
flex : none;
width : 100%;
margin-left : 0;
margin-right : 0;
}
}
@media screen and (max-width: 700px) {
.stack-on-700,
.block-stack-on-700>.column {
flex : none;
width : 100%;
margin-left : 0;
margin-right : 0;
}
}
@media screen and (max-width: 550px) {
.stack-on-550,
.block-stack-on-550>.column {
flex : none;
width : 100%;
margin-left : 0;
margin-right : 0;
}
}
/* ===================================================================
* # UTILITY CLASSES
*
*
* ------------------------------------------------------------------- */
/* flex item alignment classes
*/
.u-flexitem-center {
margin : auto;
align-self : center;
}
.u-flexitem-left {
margin-right : auto;
align-self : center;
}
.u-flexitem-right {
margin-left : auto;
align-self : center;
}
.u-flexitem-x-center {
margin-right : auto;
margin-left : auto;
}
.u-flexitem-x-left {
margin-right : auto;
}
.u-flexitem-x-right {
margin-left : auto;
}
.u-flexitem-y-center {
align-self : center;
}
.u-flexitem-y-top {
align-self : flex-start;
}
.u-flexitem-y-bottom {
align-self : flex-end;
}
/* misc helper classes
*/
.u-screen-reader-text {
clip : rect(1px, 1px, 1px, 1px);
clip-path : inset(50%);
height : 1px;
width : 1px;
margin : -1px;
overflow : hidden;
padding : 0;
border : 0;
position : absolute;
word-wrap : normal !important;
}
.u-clearfix:after {
content : "";
display : table;
clear : both;
}
.u-hidden {
display : none;
}
.u-invisible {
visibility : hidden;
}
.u-antialiased {
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
.u-overflow-hidden {
overflow : hidden;
}
.u-remove-top {
margin-top : 0;
}
.u-remove-bottom {
margin-bottom : 0;
}
.u-add-half-bottom {
margin-bottom : var(--vspace-0_5);
}
.u-add-bottom {
margin-bottom : var(--vspace-1);
}
.u-no-border {
border : none;
}
.u-fullwidth {
width : 100%;
}
.u-pull-left {
float : left;
}
.u-pull-right {
float : right;
}
/* ===================================================================
* # TYPOGRAPHY
*
*
* -------------------------------------------------------------------
* type scale - ratio 1:2 | base: 18px
* -------------------------------------------------------------------
*
* --text-display-3 = (77.40px)
* --text-display-2 = (64.50px)
* --text-display-1 = (53.75px)
* --text-xxxl = (44.79px)
* --text-xxl = (37.32px)
* --text-xl = (31.10px)
* --text-lg = (25.92px)
* --text-md = (21.60px)
* --text-size = (18.00px) BASE
* --text-sm = (15.00px)
* --text-xs = (12.50px)
*
* -------------------------------------------------------------------- */
/* --------------------------------------------------------------------
* ## base type styles
* -------------------------------------------------------------------- */
body {
font-family : var(--font-1);
font-size : var(--base-font-size);
font-weight : 400;
line-height : var(--vspace-1);
color : var(--color-text);
}
/* links
*/
a {
color : var(--color-2);
transition : all 0.3s ease-in-out;
}
a:focus,
a:hover,
a:active {
color : var(--color-1-dark);
}
a:hover,
a:active {
outline : 0;
}
/* headings
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family : var(--font-2);
font-weight : 500;
color : var(--color-text-dark);
font-variant-ligatures : common-ligatures;
text-rendering : optimizeLegibility;
}
h1,
.h1 {
margin-top : var(--vspace-2_5);
margin-bottom : var(--vspace-0_75);
}
h2,
.h2,
h3,
.h3,
h4,
.h4 {
margin-top : var(--vspace-2);
margin-bottom : var(--vspace-0_5);
}
h5,
.h5,
h6,
.h6 {
margin-top : var(--vspace-1_5);
margin-bottom : var(--vspace-0_5);
}
h1,
.h1 {
font-size : var(--text-display-1);
line-height : var(--vspace-2);
letter-spacing : -.01em;
}
@media screen and (max-width: 500px) {
h1,
.h1 {
font-size : var(--text-xxxl);
line-height : calc(1.625 * var(--space));
}
}
h2,
.h2 {
font-size : var(--text-xxl);
line-height : var(--vspace-1_5);
}
h3,
.h3 {
font-size : var(--text-xl);
line-height : var(--vspace-1_25);
}
h4,
.h4 {
font-size : var(--text-lg);
line-height : var(--vspace-1);
}
h5,
.h5 {
font-size : var(--text-md);
line-height : var(--vspace-0_875);
}
h6,
.h6 {
font-weight : 600;
font-size : var(--text-sm);
line-height : var(--vspace-0_75);
text-transform : uppercase;
letter-spacing : .3rem;
}
/* emphasis, italic,
* strong, bold and small text
*/
em,
i,
strong,
b {
font-size : inherit;
line-height : inherit;
}
em,
i {
font-style : italic;
}
strong,
b {
font-weight : 600;
}
small {
font-size : 75%;
font-weight : 400;
line-height : var(--vspace-0_5);
}
/* blockquotes
*/
blockquote {
margin : 0 0 var(--vspace-1) 0;
padding : var(--vspace-1) var(--vspace-1_5);
border-left : 2px solid var(--color-text-light);
position : relative;
}
@media screen and (max-width: 400px) {
blockquote {
padding : var(--vspace-0_75) var(--vspace-0_75);
}
}
blockquote p {
font-family : var(--font-1);
font-weight : 400;
font-size : var(--text-lg);
font-style : normal;
line-height : var(--vspace-1_25);
color : var(--color-text-dark);
padding : 0;
}
blockquote cite {
display : block;
font-family : var(--font-2);
font-weight : 400;
font-size : var(--text-sm);
line-height : var(--vspace-0_75);
font-style : normal;
}
blockquote cite:before {
content : "\2014 \0020";
}
blockquote cite,
blockquote cite a,
blockquote cite a:visited {
color : var(--color-text-light);
border : none;
}
/* figures
*/
figure img,
p img {
margin : 0;
vertical-align : bottom;
}
figure {
display : block;
margin-left : 0;
margin-right : 0;
}
figure img+figcaption {
margin-top : var(--vspace-1);
}
figcaption {
font-style : italic;
font-size : var(--text-sm);
text-align : center;
margin-bottom : 0;
}
/* preformatted, code
*/
var,
kbd,
samp,
code,
pre {
font-family : var(--font-mono);
}
pre {
padding : var(--vspace-0_75) var(--vspace-1) var(--vspace-1);
background : var(--color-gray-9);
overflow-x : auto;
}
code {
font-size : var(--text-sm);
line-height : 1.6rem;
margin : 0 .2rem;
padding : calc(((var(--vspace-1) - 1.6rem) / 2) - .1rem) calc(.8rem - .1rem);
white-space : nowrap;
background : var(--color-gray-6);
border : 1px solid var(--color-gray-8);
color : var(--color-text-dark);
border-radius : 3px;
}
pre>code {
display : block;
white-space : pre;
line-height : var(--vspace-1);
padding : 0;
margin : 0;
border : none;
}
/* deleted text, abbreviation,
* & mark text
*/
del {
text-decoration : line-through;
}
abbr {
font-family : var(--font-1);
font-weight : 600;
font-variant : small-caps;
text-transform : lowercase;
letter-spacing : .1em;
}
abbr[title],
dfn[title] {
border-bottom : 1px dotted;
cursor : help;
text-decoration : none;
}
mark {
background : var(--color-1-lighter);
color : var(--color-black);
}
/* horizontal rule
*/
hr {
border : solid var(--color-border);
border-width : .1rem 0 0;
clear : both;
margin : var(--vspace-2) 0 calc(var(--vspace-2) - 1px);
height : 0;
}
hr.fancy {
border : none;
margin : var(--vspace-2) 0;
height : var(--vspace-1);
text-align : center;
}
hr.fancy::before {
content : "*****";
letter-spacing : .3em;
}
/* --------------------------------------------------------------------
* ## additional typography & helper classes
* -------------------------------------------------------------------- */
.lead,
.attention-getter {
font-family : var(--font-2);
font-weight : 300;
font-size : var(--text-md);
line-height : var(--vspace-1_25);
color : var(--color-text-light);
}
@media screen and (max-width: 500px) {
.lead,
.attention-getter {
font-size : calc(var(--text-size) * 1.0556);
line-height : calc(1.125 * var(--space));
}
}
.pull-quote {
position : relative;
padding : 0;
margin-top : 0;
text-align : center;
}
.pull-quote blockquote {
border : none;
margin : 0 auto;
max-width : 62rem;
padding-top : var(--vspace-2_5);
position : relative;
}
.pull-quote blockquote p {
font-weight : 400;
color : var(--color-text-dark);
}
.pull-quote blockquote:before {
content : "";
display : block;
height : var(--vspace-1);
width : var(--vspace-1);
background-repeat : no-repeat;
background : center center;
background-size : contain;
background-image : url(../images/icons/icon-quote.svg);
transform : translate(-50%, 0, 0);
position : absolute;
top : var(--vspace-1);
left : 50%;
}
.drop-cap:first-letter {
float : left;
font-family : var(--font-2);
font-weight : 600;
font-size : calc(3 * var(--space));
line-height : 1;
padding : 0 0.125em 0 0;
text-transform : uppercase;
background : transparent;
color : var(--color-text-dark);
}
.text-center {
text-align : center;
}
.text-left {
text-align : left;
}
.text-right {
text-align : right;
}
/* --------------------------------------------------------------------
* ## lists
* -------------------------------------------------------------------- */
ol {
list-style : decimal;
}
ul {
list-style : disc;
}
li {
display : list-item;
}
ol,
ul {
margin-left : 1.6rem;
}
ul li {
padding-left : .4rem;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin : 1.6rem 0 1.6rem 1.6rem;
}
ul.disc li {
display : list-item;
list-style : none;
padding : 0 0 0 .8rem;
position : relative;
}
ul.disc li::before {
content : "";
display : inline-block;
width : 8px;
height : 8px;
border-radius : 50%;
background : var(--color-2);
position : absolute;
left : -.9em;
top : 11px;
vertical-align : middle;
}
dt {
margin : 0;
color : var(--color-2);
}
dd {
margin : 0 0 0 2rem;
}
/* definition list line style
*/
.lining dt,
.lining dd {
display : inline;
margin : 0;
}
.lining dt+dt:before,
.lining dd+dt:before {
content : "\A";
white-space : pre;
}
.lining dd+dd:before {
content : ", ";
}
.lining dd+dd:before {
content : ", ";
}
.lining dd:before {
content : ": ";
margin-left : -0.2em;
}
/* definition list dictionary style
*/
.dictionary-style dt {
display : inline;
counter-reset : definitions;
}
.dictionary-style dt+dt:before {
content : ", ";
margin-left : -0.2em;
}
.dictionary-style dd {
display : block;
counter-increment : definitions;
}
.dictionary-style dd:before {
content : counter(definitions, decimal) ". ";
}
/* --------------------------------------------------------------------
* ## spacing
* -------------------------------------------------------------------- */
fieldset,
button,
.btn {
margin-bottom : var(--vspace-0_5);
}
input,
textarea,
select,
pre,
blockquote,
figure,
figcaption,
table,
p,
ul,
ol,
dl,
form,
img,
.video-container,
.ss-custom-select {
margin-bottom : var(--vspace-1);
}
/* ===================================================================
* # PRELOADER
*
*
* -------------------------------------------------------------------
* - markup:
*
* <div id="preloader">
* <div id="loader"></div>
* </div>
*
* ------------------------------------------------------------------- */
#preloader {
position : fixed;
display : flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
background : var(--color-preloader-bg);
z-index : 500;
height : 100vh;
width : 100%;
opacity : 1;
}
.no-js #preloader {
display : none;
}
#loader {
width : var(--vspace-2);
height : var(--vspace-2);
padding : 0;
background-color : var(--color-loader);
border-radius : 100%;
-webkit-animation : sk-scaleout 1.0s infinite ease-in-out;
animation : sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform : scale(0);
transform : scale(0);
}
100% {
-webkit-transform : scale(1);
transform : scale(1);
opacity : 0;
}
}
@keyframes sk-scaleout {
0% {
transform : scale(0);
}
100% {
transform : scale(1);
opacity : 0;
}
}
/* ===================================================================
* # FORM
*
*
* ------------------------------------------------------------------- */
fieldset {
border : none;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
--input-height : var(--vspace-2);
--input-line-height : var(--vspace-1);
--input-vpadding : calc((var(--input-height) - var(--input-line-height)) / 2);
display : block;
height : var(--input-height);
padding : var(--input-vpadding) 0 calc(var(--input-vpadding) - 1px);
border : 0;
outline : 0;
color : var(--color-text-light);
font-family : var(--font-2);
font-size : var(--text-sm);
line-height : var(--input-line-height);
max-width : 100%;
background : transparent;
border-bottom : 1px solid var(--color-border);
transition : all .3s ease-in-out;
}
.ss-custom-select {
position : relative;
padding : 0;
}
.ss-custom-select select {
-webkit-appearance : none;
-moz-appearance : none;
appearance : none;
text-indent : 0.01px;
text-overflow : '';
margin : 0;
vertical-align : middle;
line-height : var(--vspace-1);
}
.ss-custom-select select option {
padding-left : 2rem;
padding-right : 2rem;
background-color : var(--color-body);
}
.ss-custom-select select::-ms-expand {
display : none;
}
.ss-custom-select::after {
border-bottom : 1px solid white;
border-right : 1px solid white;
content : '';
display : block;
height : 8px;
width : 8px;
margin-top : -7px;
pointer-events : none;
position : absolute;
right : 2.4rem;
top : 50%;
transition : all 0.15s ease-in-out;
transform-origin : 66% 66%;
transform : rotate(45deg);
}
textarea {
min-height : calc(8 * var(--space));
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
color : var(--color-text);
border-bottom : 1px solid var(--color-2);
}
label,
legend {
font-family : var(--font-2);
font-weight : 700;
font-size : var(--text-sm);
line-height : var(--vspace-0_5);
margin-bottom : var(--vspace-0_5);
color : var(--color-text-dark);
display : block;
}
input[type="checkbox"],
input[type="radio"] {
display : inline;
}
label>.label-text {
display : inline-block;
margin-left : 1rem;
font-family : var(--font-2);
line-height : inherit;
}
label>input[type="checkbox"],
label>input[type="radio"] {
margin : 0;
position : relative;
top : 2px;
}
/* -------------------------------------------------------------------
* ## style placeholder text
* ------------------------------------------------------------------- */
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color : var(--color-placeholder);
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color : var(--color-placeholder);
opacity : 1;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color : var(--color-placeholder);
opacity : 1;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color : var(--color-placeholder);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color : var(--color-placeholder);
}
::placeholder {
/* Most modern browsers support this now. */
color : var(--color-placeholder);
}
/* -------------------------------------------------------------------
* ## change autocomplete styles in Chrome
* ------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color : var(--color-1);
transition : background-color 5000s ease-in-out 0s;
}
/* ===================================================================
* # BUTTONS
*
*
* ------------------------------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
--btn-height : var(--vspace-btn);
display : inline-block;
font-family : var(--font-2);
font-weight : 500;
font-size : var(--text-xs);
text-transform : uppercase;
letter-spacing : .35em;
height : var(--btn-height);
line-height : calc(var(--btn-height) - 4px);
padding : 0 3.6rem;
margin : 0 0.4rem var(--vspace-0_5) 0;
color : var(--color-btn-text);
text-decoration : none;
text-align : center;
white-space : nowrap;
cursor : pointer;
transition : all .3s;
background-color : var(--color-btn);
border : 2px solid var(--color-btn);
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background-color : var(--color-btn-hover);
border-color : var(--color-btn-hover);
color : var(--color-btn-hover-text);
outline : 0;
}
/* button primary
*/
.btn.btn--primary,
button.btn--primary,
input[type="submit"].btn--primary,
input[type="reset"].btn--primary,
input[type="button"].btn--primary {
background : var(--color-btn-primary);
border-color : var(--color-btn-primary);
color : var(--color-btn-primary-text);
}
.btn.btn--primary:focus,
button.btn--primary:focus,
input[type="submit"].btn--primary:focus,
input[type="reset"].btn--primary:focus,
input[type="button"].btn--primary:focus,
.btn.btn--primary:hover,
button.btn--primary:hover,
input[type="submit"].btn--primary:hover,
input[type="reset"].btn--primary:hover,
input[type="button"].btn--primary:hover {
background : var(--color-btn-primary-hover);
border-color : var(--color-btn-primary-hover);
color : var(--color-btn-primary-hover-text);
}
/* button modifiers
*/
.btn.u-fullwidth,
button.u-fullwidth {
width : 100%;
margin-right : 0;
}
.btn--small,
button.btn--small {
--btn-height : calc(var(--vspace-btn) - 1.6rem);
}
.btn--medium,
button.btn--medium {
--btn-height : calc(var(--vspace-btn) + .8rem);
}
.btn--large,
button.btn--large {
--btn-height : calc(var(--vspace-btn) + 1.6rem);
}
.btn--stroke,
button.btn--stroke {
background : transparent !important;
border : 2px solid var(--color-btn-stroke);
color : var(--color-btn-stroke-text);
}
.btn--stroke:focus,
button.btn--stroke:focus,
.btn--stroke:hover,
button.btn--stroke:hover {
background : var(--color-btn-stroke-hover) !important;
border : 2px solid var(--color-btn-stroke-hover);
color : var(--color-btn-stroke-hover-text);
}
.btn--pill,
button.btn--pill {
padding-left : 3.2rem !important;
padding-right : 3.2rem !important;
border-radius : 1000px !important;
}
/* ===================================================================
* # TABLE
*
*
* ------------------------------------------------------------------- */
table {
border-width : 0;
width : 100%;
max-width : 100%;
font-family : var(--font-1);
border-collapse : collapse;
}
th,
td {
padding : var(--vspace-0_5) 3.2rem calc(var(--vspace-0_5) - 1px);
text-align : left;
border-bottom : 1px solid var(--color-border);
}
th {
padding : var(--vspace-0_5) 3.2rem;
color : var(--color-text-dark);
font-family : var(--font-2);
font-weight : 600;
}
th:first-child,
td:first-child {
padding-left : 0;
}
th:last-child,
td:last-child {
padding-right : 0;
}
.table-responsive {
overflow-x : auto;
-webkit-overflow-scrolling : touch;
}
/* ===================================================================
* # COMPONENTS
*
*
* ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
* ## pagination
* ------------------------------------------------------------------- */
.pgn {
--pgn-num-height : calc(var(--vspace-1) + .4rem);
margin : var(--vspace-1) auto;
text-align : center;
}
.pgn ul {
display : inline-flex;
flex-flow : row wrap;
justify-content : center;
list-style : none;
margin-left : 0;
position : relative;
padding : 0 6rem;
}
.pgn ul li {
margin : 0;
padding : 0;
}
.pgn__num {
font-family : var(--font-2);
font-weight : 600;
font-size : var(--text-size);
line-height : var(--vspace-1);
display : block;
padding : .2rem 1.2rem;
height : var(--pgn-num-height);
margin : .2rem .2rem;
color : var(--color-text-dark);
border-radius : 4px;
transition : all, .3s, ease-in-out;
}
.pgn__num:focus,
.pgn__num:hover {
background : var(--color-black);
color : var(--color-white);
}
.pgn .current,
.pgn .current:focus,
.pgn .current:hover {
background-color : var(--color-black);
color : var(--color-white);
}
.pgn .inactive,
.pgn .inactive:focus,
.pgn .inactive:hover {
opacity : 0.4;
cursor : default;
}
.pgn__prev,
.pgn__next {
display : inline-flex;
flex-flow : row wrap;
justify-content : center;
align-items : center;
height : var(--pgn-num-height);
width : 4.8rem;
line-height : var(--vspace-1);
border-radius : 4px;
padding : 0;
margin : 0;
opacity : 1;
font : 0/0 a;
text-shadow : none;
color : transparent;
transition : all, .3s, ease-in-out;
position : absolute;
top : 50%;
transform : translate(0, -50%);
}
.pgn__prev:focus,
.pgn__prev:hover,
.pgn__next:focus,
.pgn__next:hover {
background-color : var(--color-black);
}
.pgn__prev svg,
.pgn__next svg {
height : 2.4rem;
width : 2.4rem;
transition : all, .3s, ease-in-out;
}
.pgn__prev svg path,
.pgn__next svg path {
stroke : var(--color-text-dark);
}
.pgn__prev:focus svg path,
.pgn__prev:hover svg path,
.pgn__next:focus svg path,
.pgn__next:hover svg path {
stroke : var(--color-white);
}
.pgn__prev {
left : 0;
}
.pgn__next {
right : 0;
}
.pgn__prev.inactive,
.pgn__next.inactive {
opacity : 0.4;
cursor : default;
}
.pgn__prev.inactive:focus,
.pgn__prev.inactive:hover,
.pgn__next.inactive:focus,
.pgn__next.inactive:hover {
background-color : transparent;
}
/* -------------------------------------------------------------------
* responsive:
* pagination
* ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.pgn ul {
padding : 0 5.2rem;
}
}
/* -------------------------------------------------------------------
* ## alert box
* ------------------------------------------------------------------- */
.alert-box {
padding : var(--vspace-0_75) 4rem var(--vspace-0_75) 3.2rem;
margin-bottom : var(--vspace-1);
border-radius : var(--border-radius);
font-family : var(--font-2);
font-weight : 500;
font-size : var(--text-sm);
line-height : var(--vspace-0_75);
opacity : 1;
visibility : visible;
position : relative;
}
.alert-box__close {
position : absolute;
display : block;
right : 1.6rem;
top : 1.6rem;
cursor : pointer;
width : 12px;
height : 12px;
}
.alert-box__close::before,
.alert-box__close::after {
content : '';
display : inline-block;
width : 1px;
height : 12px;
position : absolute;
top : 0;
left : 5px;
}
.alert-box__close::before {
transform : rotate(45deg);
}
.alert-box__close::after {
transform : rotate(-45deg);
}
.alert-box--error {
background-color : var(--color-error);
color : var(--color-error-content);
}
.alert-box--error .alert-box__close::before,
.alert-box--error .alert-box__close::after {
background-color : var(--color-error-content);
}
.alert-box--success {
background-color : var(--color-success);
color : var(--color-success-content);
}
.alert-box--success .alert-box__close::before,
.alert-box--success .alert-box__close::after {
background-color : var(--color-success-content);
}
.alert-box--info {
background-color : var(--color-info);
color : var(--color-info-content);
}
.alert-box--info .alert-box__close::before,
.alert-box--info .alert-box__close::after {
background-color : var(--color-info-content);
}
.alert-box--notice {
background-color : var(--color-notice);
color : var(--color-notice-content);
}
.alert-box--notice .alert-box__close::before,
.alert-box--notice .alert-box__close::after {
background-color : var(--color-notice-content);
}
.alert-box.hideit {
opacity : 0;
visibility : hidden;
transition : all .5s;
}
/* -------------------------------------------------------------------
* ## skillbars
* ------------------------------------------------------------------- */
.skill-bars {
list-style : none;
margin : var(--vspace-2) 0 var(--vspace-1);
}
.skill-bars li {
height : .4rem;
background : var(--color-gray-9);
width : 100%;
margin-bottom : calc(var(--vspace-2) - .4rem);
padding : 0;
position : relative;
}
.skill-bars li strong {
position : absolute;
left : 0;
top : calc((var(--vspace-1) * 1.25) * -1);
font-family : var(--font-2);
font-weight : 600;
color : var(--color-text-dark);
text-transform : uppercase;
letter-spacing : .2em;
font-size : var(--text-xs);
line-height : var(--vspace-0_75);
}
.skill-bars li .progress {
background : var(--color-2);
position : relative;
height : 100%;
}
.skill-bars li .progress span {
display : block;
font-family : var(--font-1);
color : white;
font-size : 1rem;
line-height : 1;
background : var(--color-black);
padding : var(--vspace-0_25);
border-radius : 4px;
position : absolute;
right : 0;
top : calc((var(--vspace-1) + .8rem) * -1);
}
.skill-bars li .progress span::after {
position : absolute;
left : 50%;
bottom : -10px;
margin-left : -5px;
width : 0;
height : 0;
border : 5px solid transparent;
border-top-color : var(--color-black, var(--color-black));
content : "";
}
.skill-bars li .percent5 {
width : 5%;
}
.skill-bars li .percent10 {
width : 10%;
}
.skill-bars li .percent15 {
width : 15%;
}
.skill-bars li .percent20 {
width : 20%;
}
.skill-bars li .percent25 {
width : 25%;
}
.skill-bars li .percent30 {
width : 30%;
}
.skill-bars li .percent35 {
width : 35%;
}
.skill-bars li .percent40 {
width : 40%;
}
.skill-bars li .percent45 {
width : 45%;
}
.skill-bars li .percent50 {
width : 50%;
}
.skill-bars li .percent55 {
width : 55%;
}
.skill-bars li .percent60 {
width : 60%;
}
.skill-bars li .percent65 {
width : 65%;
}
.skill-bars li .percent70 {
width : 70%;
}
.skill-bars li .percent75 {
width : 75%;
}
.skill-bars li .percent80 {
width : 80%;
}
.skill-bars li .percent85 {
width : 85%;
}
.skill-bars li .percent90 {
width : 90%;
}
.skill-bars li .percent95 {
width : 95%;
}
.skill-bars li .percent100 {
width : 100%;
}
/* --------------------------------------------------------------------
* ## stats tabs
* -------------------------------------------------------------------- */
.stats-tabs {
padding : 0;
margin : var(--vspace-1) 0;
}
.stats-tabs li {
display : inline-block;
margin : 0 1.6rem var(--vspace-0_5) 0;
padding : 0 1.5rem 0 0;
border-right : 1px solid var(--color-border);
}
.stats-tabs li:last-child {
margin : 0;
padding : 0;
border : none;
}
.stats-tabs li a {
display : block;
font-family : var(--font-2);
font-size : var(--text-lg);
font-weight : 600;
line-height : var(--vspace-1_5);
border : none;
color : var(--color-text-dark);
}
.stats-tabs li a:hover {
color : var(--color-2);
}
.stats-tabs li a em {
display : block;
margin : 0;
font-family : var(--font-2);
font-size : var(--text-sm);
line-height : var(--vspace-0_5);
font-weight : 400;
font-style : normal;
color : var(--color-text-light);
}
/* ===================================================================
* # PROJECT-WIDE SHARED STYLES
*
*
* ------------------------------------------------------------------- */
.wide {
max-width : var(--width-wide);
}
.wider {
max-width : var(--width-wider);
}
.narrow {
max-width : var(--width-narrow);
}
.body-text-sm {
font-size : calc(var(--text-size) * 0.8889);
line-height : calc(0.9375 * var(--space));
}
.screen-reader-text {
clip : rect(1px, 1px, 1px, 1px);
clip-path : inset(50%);
height : 1px;
width : 1px;
margin : -1px;
overflow : hidden;
padding : 0;
border : 0;
position : absolute;
word-wrap : normal !important;
}
[data-animate-el] {
opacity : 0;
}
.basicLightbox iframe {
width : 880px;
aspect-ratio : 16/9;
}
/* -------------------------------------------------------------------
* ## media classes
* ------------------------------------------------------------------- */
/* floated image
*/
img.u-pull-right {
margin : var(--vspace-0_5) 0 var(--vspace-0_5) var(--vspace-0_875);
}
img.u-pull-left {
margin : var(--vspace-0_5) var(--vspace-0_875) var(--vspace-0_5) 0;
}
/* responsive video container
*/
.video-container {
--aspect-ratio : 16/9;
position : relative;
height : 0;
overflow : hidden;
padding-bottom : calc(100%/(var(--aspect-ratio)));
}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
}
/* -------------------------------------------------------------------
* ## swiper overrides
* ------------------------------------------------------------------- */
.swiper-container .swiper-pagination-bullets .swiper-pagination-bullet {
margin : 0 1.2rem;
}
.swiper-container .swiper-pagination-bullet {
width : 8px;
height : 8px;
background : rgba(0, 0, 0, 0.3);
opacity : 1;
}
.swiper-container .swiper-pagination-bullet-active {
background : black;
opacity : 1;
}
/* -------------------------------------------------------------------
* ## section header
* ------------------------------------------------------------------- */
.section-header {
max-width : 840px;
margin-bottom : var(--vspace-1_5);
text-align : center;
position : relative;
}
.section-header .text-display-title {
margin-bottom : var(--vspace-0_75);
}
.section-header.has-bottom-sep {
padding-bottom : calc(var(--vspace-1_25) - 1px);
position : relative;
}
.section-header.has-bottom-sep::before {
content : "";
display : inline-block;
height : 1px;
width : 400px;
background-color : var(--color-border);
transform : translateX(-50%);
position : absolute;
bottom : 0;
left : 50%;
}
.section-header--dark .text-pretitle {
color : var(--color-gray-15);
}
.section-header--dark .lead {
color : rgba(255, 255, 255, 0.35);
}
.section-header--dark.has-bottom-sep::before {
background-color : rgba(255, 255, 255, 0.05);
}
/* -------------------------------------------------------------------
* ## theme-specific typography classes
* ------------------------------------------------------------------- */
.text-pretitle {
font-family : var(--font-2);
font-size : var(--text-size);
font-weight : 600;
color : var(--color-black);
text-transform : uppercase;
letter-spacing : .2em;
margin-top : 0;
margin-bottom : 0;
position : relative;
}
.text-display-title {
--text-display-title-size : 6rem;
--text-multiplier : 1;
font-family : var(--font-1);
font-size : calc(var(--text-display-title-size) * var(--text-multiplier));
font-weight : 500;
line-height : 1.2667;
color : white;
margin-top : 0;
}
/* -------------------------------------------------------------------
* responsive:
* project-wide shared styles
* ------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
.text-pretitle {
font-size : calc(var(--text-size) * 0.8889);
}
}
@media screen and (max-width: 700px) {
.text-display-title {
--text-multiplier : .9;
}
}
@media screen and (max-width: 600px) {
.text-display-title {
--text-multiplier : .8;
}
}
@media screen and (max-width: 500px) {
.text-display-title {
--text-multiplier : .7;
}
}
@media screen and (max-width: 400px) {
.section-header.has-bottom-sep::before {
width : 240px;
}
.text-display-title {
font-size : 4rem;
}
}
/* ===================================================================
* # PAGE WRAP
*
*
* ------------------------------------------------------------------- */
.s-pagewrap {
--header-height : 7.2rem;
display : flex;
flex-direction : column;
min-height : 100%;
overflow : hidden;
position : relative;
}
/* ===================================================================
* # SITE HEADER
*
*
* ------------------------------------------------------------------- */
/* --------------------------------------------------------------------
* ## logo
* -------------------------------------------------------------------- */
.s-header__logo {
z-index : 102;
position : absolute;
top : 3.2rem;
left : 2.8rem;
}
.s-header__logo a {
display : block;
margin : 0;
padding : 0;
outline : 0;
border : none;
}
.s-header__logo img {
width : 40px;
margin : 0;
vertical-align : bottom;
}
/* -------------------------------------------------------------------
* ## menu toggle
* ------------------------------------------------------------------- */
.s-header__menu-toggle {
--menu-toggle-height : 4.2rem;
z-index : 102;
padding-right : calc(var(--menu-toggle-height) + .2rem);
padding-left : 1.2rem;
transition : all 0.3s ease-in-out;
position : fixed;
top : 2.8rem;
right : 2.8rem;
}
.s-header__menu-toggle.opaque {
background-color : black;
}
.s-header__menu-text {
display : block;
font-family : var(--font-2);
font-weight : 400;
font-size : 1.3rem;
line-height : var(--menu-toggle-height);
text-transform : uppercase;
letter-spacing : 0.3em;
color : white;
}
.s-header__menu-icon {
display : block;
height : 2px;
width : 2.4rem;
background-color : white;
position : absolute;
top : 50%;
right : .9rem;
margin-top : -1px;
}
.s-header__menu-icon::before,
.s-header__menu-icon::after {
content : '';
width : 100%;
height : 100%;
background-color : inherit;
position : absolute;
left : 0;
}
.s-header__menu-icon::before {
top : -0.8rem;
}
.s-header__menu-icon::after {
bottom : -0.8rem;
}
/* --------------------------------------------------------------------
* ## off-canvas menu
* -------------------------------------------------------------------- */
.s-header__nav {
z-index : 200;
background : #0C0C0C;
color : rgba(255, 255, 255, 0.25);
font-family : var(--font-2);
font-size : 1.5rem;
line-height : 2.8rem;
padding : var(--vspace-1_25) var(--vspace-1);
height : 100%;
width : 300px;
transform : translateX(100%);
overflow-y : auto;
transition-property : transform;
transition-duration : 0.4s;
transition-timing-function : cubic-bezier(0.215, 0.61, 0.355, 1);
position : fixed;
right : 0;
top : 0;
}
.s-header__nav a,
.s-header__nav .text-highlight {
color : rgba(255, 255, 255, 0.5);
}
.s-header__nav a:focus,
.s-header__nav a:hover {
color : white;
}
.s-header__nav h3 {
margin-top : 0;
font-weight : 600;
font-size : var(--text-md);
line-height : 3rem;
color : white;
margin-bottom : var(--vspace-1_5);
}
.s-header__nav-list {
list-style : none;
margin-left : 0;
margin-bottom : var(--vspace-1_5);
font-family : var(--font-2);
font-size : 1.5rem;
line-height : 1;
}
.s-header__nav-list li {
padding-left : 0;
border-top : 1px solid rgba(255, 255, 255, 0.025);
}
.s-header__nav-list li:last-child {
border-bottom : 1px solid rgba(255, 255, 255, 0.025);
}
.s-header__nav-list li a {
display : block;
padding : var(--vspace-0_5) 0;
}
.s-header__nav-close-btn {
display : block;
height : 3rem;
width : 3rem;
border-radius : 3px;
background-color : rgba(255, 255, 255, 0.05);
border-radius : 50%;
font : 0/0 a;
text-shadow : none;
color : transparent;
position : absolute;
top : var(--vspace-1_25);
right : var(--vspace-1);
}
.s-header__nav-close-btn span::before,
.s-header__nav-close-btn span::after {
content : "";
display : block;
height : 2px;
width : 12px;
background-color : white;
margin-top : -1px;
position : absolute;
top : 50%;
left : 9px;
}
.s-header__nav-close-btn span::before {
transform : rotate(-45deg);
}
.s-header__nav-close-btn span::after {
transform : rotate(45deg);
}
/* menu is open
*/
.menu-is-open .s-header__nav {
transform : translateX(0);
visibility : visible;
-webkit-overflow-scrolling : touch;
}
/* --------------------------------------------------------------------
* ## header social
* -------------------------------------------------------------------- */
.s-header__social {
list-style : none;
display : flex;
margin : 0;
}
.s-header__social li {
padding-left : 0;
margin-right : 1rem;
line-height : 1;
}
.s-header__social li:last-child {
margin-right : 0;
}
.s-header__social svg {
height : 2.4rem;
width : 2.4rem;
}
.s-header__social svg path {
fill : rgba(255, 255, 255, 0.15);
transition : all 0.3s ease-in-out;
}
.s-header__social a:focus svg path,
.s-header__social a:hover svg path {
fill : white;
}
/* -------------------------------------------------------------------
* responsive:
* site-header
* ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
.s-header__menu-toggle {
right : 2.4rem;
}
}
@media screen and (max-width: 400px) {
.s-header__logo {
left : 2.4rem;
}
.s-header__nav {
width : 90vw;
}
}
/* ===================================================================
* # INTRO
*
*
* ------------------------------------------------------------------- */
.s-intro {
background-color : var(--color-preloader-bg);
width : 100%;
height : 100vh;
min-height : calc(25.5 * var(--space));
overflow : hidden;
position : relative;
}
/* --------------------------------------------------------------------
* ## intro background
* -------------------------------------------------------------------- */
.s-intro__bg {
display : block;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background-image : url(../images/hero-bg.jpg);
background-repeat : no-repeat;
background-position : center 30%;
background-size : cover;
}
.s-intro__bg::before {
display : block;
content : "";
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background : var(--color-gray-15);
pointer-events : none;
opacity : .1;
}
.s-intro__bg::after {
display : block;
content : "";
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background : linear-gradient(0deg, black 15%, rgba(0, 0, 0, 0) 100%);
pointer-events : none;
opacity : .1;
}
/* --------------------------------------------------------------------
* ## intro content
* -------------------------------------------------------------------- */
.s-intro__content {
z-index : 1;
height : 100%;
align-items : center;
justify-content : center;
color : white;
padding-top : 18vh;
padding-bottom : 12rem;
text-align : center;
position : relative;
}
.s-intro__pretitle {
font-weight : 500;
font-size : var(--text-md);
text-transform : uppercase;
letter-spacing : .2em;
color : white;
margin-top : 0;
}
.s-intro__title {
--text-title-size : 10.4rem;
--text-multiplier : 1;
font-weight : 700;
font-size : calc(var(--text-title-size) * var(--text-multiplier));
line-height : 1.1154;
color : white;
margin-top : 0;
margin-bottom : var(--vspace-2_5);
}
.s-intro__more {
--vspace-btn : var(--vspace-1_5);
}
.s-intro__more-btn {
border : 2px solid white;
color : white;
margin : 0;
}
.s-intro__more-btn:focus,
.s-intro__more-btn:hover {
background-color : white !important;
border : 2px solid white;
color : black;
}
/* --------------------------------------------------------------------
* ## intro social
* -------------------------------------------------------------------- */
.s-intro__social {
z-index : 2;
list-style : none;
display : block;
margin : 0;
padding-top : var(--vspace-1_25);
position : absolute;
left : 4.4rem;
bottom : var(--vspace-1_25);
}
.s-intro__social::before {
content : "";
display : block;
height : var(--vspace-0_875);
width : 1px;
background-color : rgba(255, 255, 255, 0.5);
position : absolute;
top : 0;
left : 50%;
}
.s-intro__social li {
padding-left : 0;
line-height : 1;
margin-bottom : 1rem;
}
.s-intro__social svg {
height : var(--vspace-0_625);
width : var(--vspace-0_625);
}
.s-intro__social svg path {
fill : white;
}
/* --------------------------------------------------------------------
* ## intro scroll
* -------------------------------------------------------------------- */
.s-intro__scroll {
z-index : 2;
transform : rotate(90deg);
transform-origin : right bottom;
position : absolute;
right : 6.2rem;
bottom : var(--vspace-1_5);
}
.s-intro__scroll a {
display : flex;
align-items : center;
}
.s-intro__scroll span {
font-family : var(--font-2);
font-weight : 400;
font-size : calc(var(--text-size) * 0.6667);
line-height : 1;
text-transform : uppercase;
letter-spacing : .3em;
color : white;
margin-right : 1.6rem;
}
.s-intro__scroll svg {
height : var(--vspace-0_625);
width : var(--vspace-0_625);
}
.s-intro__scroll svg path {
fill : white;
}
/* -------------------------------------------------------------------
* responsive:
* intro
* ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
.s-intro__title {
--text-multiplier : .9;
}
}
@media screen and (max-width: 1200px) {
.s-intro__title {
--text-multiplier : .8;
}
}
@media screen and (max-width: 1080px) {
.s-intro__pretitle {
font-size : var(--text-size);
}
.s-intro__title {
--text-multiplier : .7;
}
}
@media screen and (max-width: 900px) {
.s-intro__title {
--text-multiplier : .6;
}
}
@media screen and (max-width: 800px) {
.s-intro__title br {
display : none;
}
}
@media screen and (max-width: 700px) {
.s-intro__title {
--text-multiplier : .55;
}
}
@media screen and (max-width: 600px) {
.s-intro__title {
--text-multiplier : .5;
}
.s-intro__social {
left : 3.6rem;
}
.s-intro__scroll {
right : 5.4rem;
}
}
@media screen and (max-width: 500px) {
.s-intro__pretitle {
font-size : calc(var(--text-size) * 0.8889);
}
.s-intro__title {
--text-multiplier : .45;
}
}
@media screen and (max-width: 400px) {
.s-intro__title {
--text-multiplier : .38;
}
.s-intro__social {
left : 2.8rem;
}
.s-intro__scroll {
right : 4.6rem;
}
}
/* ===================================================================
* # ABOUT
*
*
* ------------------------------------------------------------------- */
.s-about {
--text-desc-size : 5.2rem;
--text-multiplier : 1;
background-color : white;
padding-top : var(--vspace-2);
padding-bottom : var(--vspace-6);
}
.s-about .text-pretitle::before {
content : "";
display : block;
background-color : var(--color-text-light);
width : 2px;
height : var(--vspace-3_5);
margin : 0 auto var(--vspace-0_5);
}
.s-about__content {
max-width : 1000px;
text-align : center;
}
.s-about__desc {
font-weight : 500;
font-size : calc(var(--text-desc-size) * var(--text-multiplier));
line-height : 1.5385;
margin-top : var(--vspace-1_5);
}
.s-about__desc span {
color : var(--color-2);
}
/* -------------------------------------------------------------------
* responsive:
* about
* ------------------------------------------------------------------- */
@media screen and (max-width: 1400px) {
.s-about {
--text-multiplier : 0.9;
}
.s-about__content {
max-width : 900px;
}
}
@media screen and (max-width: 1000px) {
.s-about {
--text-multiplier : 0.8;
}
.s-about__content {
max-width : 800px;
}
}
@media screen and (max-width: 800px) {
.s-about {
--text-multiplier : 0.7;
}
}
@media screen and (max-width: 700px) {
.s-about {
--text-multiplier : 0.65;
}
}
@media screen and (max-width: 600px) {
.s-about {
--text-multiplier : 0.6;
}
}
@media screen and (max-width: 400px) {
.s-about {
--text-multiplier : 0.55;
}
}
@media screen and (max-width: 360px) {
.s-about__desc {
font-size : var(--text-xl);
}
}
/* ===================================================================
* # SERVICES
*
*
* ------------------------------------------------------------------- */
.s-services {
background-color : black;
padding-top : var(--vspace-6);
padding-bottom : var(--vspace-5);
color : rgba(255, 255, 255, 0.35);
position : relative;
}
/* --------------------------------------------------------------------
* ## services background
* -------------------------------------------------------------------- */
.s-services__bg {
display : block;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background-image : url(../images/services-bg.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
}
.s-services__bg::before {
display : block;
content : "";
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
background : black;
pointer-events : none;
opacity : .8;
}
/* --------------------------------------------------------------------
* ## services list
* -------------------------------------------------------------------- */
.services-list {
max-width : 1020px;
margin-top : var(--vspace-3);
position : relative;
}
.services-list .column:nth-child(2n + 1) {
padding-right : 3.2rem;
}
.services-list .column:nth-child(2n + 2) {
padding-left : 3.2rem;
}
.service-item {
margin-bottom : var(--vspace-0_5);
}
.service-item h3 {
margin-top : 0;
margin-bottom : var(--vspace-0_5);
color : white;
}
.service-icon-block {
display : block;
margin-bottom : var(--vspace-0_25);
}
.service-icon-block svg {
height : var(--vspace-1_5);
width : var(--vspace-1_5);
}
.service-icon-block svg path {
fill : var(--color-1);
}
/* -------------------------------------------------------------------
* responsive:
* services
* ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
.services-list .column:nth-child(2n + 1) {
padding-right : var(--gutter);
}
.services-list .column:nth-child(2n + 2) {
padding-left : var(--gutter);
}
}
@media screen and (max-width: 600px) {
.service-item {
display : block;
}
.service-icon-block {
margin-bottom : var(--vspace-0_5);
}
}
@media screen and (max-width: 400px) {
.services-list .column:nth-child(2n + 1) {
padding-right : 0;
}
.services-list .column:nth-child(2n + 2) {
padding-left : 0;
}
}
/* ===================================================================
* # PORTFOLIO
*
*
* ------------------------------------------------------------------- */
.s-portfolio {
background : white;
min-height : 800px;
padding : 0;
position : relative;
}
.s-portfolio__header {
background-color : #111111;
padding-top : var(--vspace-5);
padding-bottom : calc(6.5 * var(--space));
}
/* -------------------------------------------------------------------
* ## portfolio list
* ------------------------------------------------------------------- */
.folio-list {
margin-top : calc(var(--vspace-1) * -5.5);
}
.folio-list .brick {
float : left;
width : 50%;
padding : 0;
margin : 0;
}
.folio-item {
overflow : hidden;
position : relative;
}
.folio-item__caption {
display : none;
}
/* thumbnail
*/
.folio-item__thumb a {
display : block;
}
.folio-item__thumb a::before {
z-index : 1;
content : "";
display : block;
background-color : rgba(0, 0, 0, 0.8);
opacity : 0;
visibility : hidden;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
transition : all, .5s;
}
.folio-item__thumb a::after {
z-index : 1;
content : "...";
text-align : center;
font-family : var(--font-2);
font-weight : 300;
font-size : 2.8rem;
color : white;
display : block;
height : 3.2rem;
width : 3.2rem;
line-height : 3.2rem;
margin-left : -1.6rem;
margin-top : -3rem;
text-align : center;
opacity : 0;
visibility : hidden;
transform : scale(0.5);
transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position : absolute;
left : 50%;
top : 50%;
}
.folio-item__thumb img {
vertical-align : bottom;
margin-bottom : 0;
transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* portfolio info
*/
.folio-item__info {
z-index : 2;
padding : 0 8rem 0 var(--vspace-1);
transform : translateY(100%);
opacity : 0;
visibility : hidden;
transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position : absolute;
left : 0;
top : var(--vspace-1_25);
}
.folio-item__title {
font-size : var(--text-size);
line-height : 1.25;
margin : 0;
color : white;
}
.folio-item__cat {
font-family : var(--font-2);
font-size : var(--text-sm);
line-height : 1.5;
margin-bottom : 0.2rem;
color : rgba(255, 255, 255, 0.5);
}
.folio-item__project-link {
z-index : 2;
display : flex;
align-items : center;
justify-content : center;
height : var(--vspace-1_25);
width : var(--vspace-1_25);
background-color : transparent;
border : 1px solid rgba(255, 255, 255, 0.3);
border-radius : 5px;
opacity : 0;
visibility : hidden;
transform : translateY(100%);
transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position : absolute;
top : var(--vspace-1_25);
right : var(--vspace-1_25);
}
.folio-item__project-link svg {
height : var(--vspace-0_625);
width : var(--vspace-0_625);
}
.folio-item__project-link svg path {
fill : white;
transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.folio-item__project-link:focus,
.folio-item__project-link:hover {
background-color : white;
border : 1px solid white;
}
.folio-item__project-link:focus svg path,
.folio-item__project-link:hover svg path {
fill : black;
}
/* on hover
*/
.folio-item:hover .folio-item__thumb img {
transform : scale(1.05);
}
.folio-item:hover .folio-item__thumb a::before {
opacity : 1;
visibility : visible;
}
.folio-item:hover .folio-item__thumb a::after {
opacity : 1;
visibility : visible;
transform : scale(1);
}
.folio-item:hover .folio-item__info {
opacity : 1;
visibility : visible;
transform : translateY(0);
}
.folio-item:hover .folio-item__project-link {
opacity : 1;
visibility : visible;
transform : translateX(0);
}
/* -------------------------------------------------------------------
* ## testimonials
* ------------------------------------------------------------------- */
.testimonials {
--text-slide-size : 3.6rem;
--text-multiplier : 1;
margin-top : var(--vspace-3_5);
margin-bottom : var(--vspace-3);
max-width : 960px;
text-align : center;
}
.testimonials .text-pretitle {
color : var(--color-2);
}
.testimonials .swiper-container {
margin-top : var(--vspace-1);
padding-bottom : var(--vspace-1_5);
}
/* testimonial slider
*/
.testimonial-slider__slide {
position : relative;
}
.testimonial-slider__slide p {
font-size : calc(var(--text-slide-size) * var(--text-multiplier));
line-height : 1.5556;
}
.testimonial-slider__author {
display : inline-block;
min-height : var(--vspace-2);
margin-bottom : var(--vspace-0_625);
position : relative;
}
.testimonial-slider__avatar {
width : var(--vspace-2);
height : var(--vspace-2);
border-radius : 100%;
margin-bottom : var(--vspace-0_125);
vertical-align : bottom;
outline : none;
}
.testimonial-slider__cite {
display : block;
}
.testimonial-slider__cite strong,
.testimonial-slider__cite span {
font-style : normal;
transition : all 0.3s ease-in-out;
}
.testimonial-slider__cite strong {
line-height : var(--vspace-0_75);
color : black;
}
.testimonial-slider__cite span {
display : block;
font-family : var(--font-2);
font-size : var(--text-sm);
font-weight : 400;
line-height : var(--vspace-0_5);
color : var(--color-text-light);
}
/* -------------------------------------------------------------------
* ## clients
* ------------------------------------------------------------------- */
.clients-block {
padding-top : var(--vspace-1_25);
padding-bottom : calc(2.25 * var(--space));
background-color : var(--color-gray-4);
}
.clients {
margin-top : var(--vspace-1_5);
padding-bottom : var(--vspace-1_75);
}
.clients__slide img {
margin : 0;
opacity : .4;
transform : scale(0.85);
transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.clients__slide:focus img,
.clients__slide:hover img {
transform : scale(1);
opacity : 1;
}
/* -------------------------------------------------------------------
* responsive:
* works
* ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.folio-item__title {
font-size : calc(var(--text-size) * 0.8889);
}
.folio-item__cat {
font-size : calc(var(--text-size) * 0.7778);
}
.testimonials {
max-width : 600px;
}
}
@media screen and (max-width: 700px) {
.folio-list .brick {
float : none;
width : auto;
}
.folio-item__title {
font-size : var(--text-size);
}
.folio-item__cat {
font-size : 1.2rem;
}
.testimonials {
--text-multiplier : .9;
}
}
@media screen and (max-width: 600px) {
.testimonials {
--text-multiplier : .8;
}
}
@media screen and (max-width: 500px) {
.testimonials {
--text-multiplier : .65;
}
}
@media screen and (max-width: 400px) {
.testimonial-slider__slide p {
font-size : 2.1rem;
}
}
/* ===================================================================
* # CONTACT
*
*
* ------------------------------------------------------------------- */
.s-contact {
--color-border : rgba(255, 255, 255, .05);
background-color : var(--color-gray-19);
background-image : url(../images/contact-bg.jpg);
background-repeat : no-repeat;
background-position : center;
background-size : cover;
padding-top : var(--vspace-5);
padding-bottom : var(--vspace-3);
position : relative;
}
.s-contact h5 {
margin-top : 0;
margin-bottom : var(--vspace-1);
color : rgba(255, 255, 255, 0.25);
}
.s-contact h5.with-top-line {
padding-top : var(--vspace-0_75);
border-top : 1px solid var(--color-border);
}
.s-contact::before {
content : "";
display : block;
background : black;
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
width : 100%;
height : 100%;
pointer-events : none;
opacity : .75;
}
.s-contact .section-header {
max-width : 1020px;
}
.s-contact .section-header a {
color : var(--color-1);
}
/* -------------------------------------------------------------------
* ## contact infos
* ------------------------------------------------------------------- */
.s-contact__infos {
margin-top : var(--vspace-3_5);
font-family : var(--font-2);
font-weight : 400;
font-size : calc(var(--text-size) * 1.556);
line-height : var(--vspace-1_5);
color : white;
position : relative;
}
.s-contact__infos [class*="s-contact__block"] {
padding-bottom : var(--vspace-1);
}
.s-contact__list {
list-style : none;
margin-left : 0;
}
.s-contact__list a {
color : white;
}
.s-contact__list a:focus,
.s-contact__list a:hover {
color : var(--color-1);
}
.s-contact__list li {
padding-left : 0;
}
/* -------------------------------------------------------------------
* ## contact bottom
* ------------------------------------------------------------------- */
.s-contact__bottom {
--btn-input-height : var(--vspace-2);
margin-top : var(--vspace-0_5);
position : relative;
}
/* mail button block
*/
.s-contact__mail-block {
padding-top : calc(var(--vspace-0_875) + var(--vspace-1));
position : relative;
}
.s-contact__mail-block::before {
content : "";
display : block;
width : 200px;
height : 1px;
background-color : var(--color-border);
position : absolute;
top : calc(var(--vspace-0_875) / 2);
left : var(--gutter);
}
.btn--mail {
--btn-height : var(--btn-input-height);
border : 2px solid var(--color-1);
color : white;
margin : 0;
}
.btn--mail:focus,
.btn--mail:hover {
background-color : var(--color-1) !important;
color : black;
}
/* subscription form
*/
.s-contact__subscribe {
--input-height : var(--btn-input-height);
--btn-width : 180px;
}
.s-contact__subscribe form {
display : flex;
flex-flow : row wrap;
margin-bottom : 0;
}
.s-contact__subscribe input[type="email"],
.s-contact__subscribe input[type="submit"],
.s-contact__subscribe .ms-status {
flex : none;
}
.s-contact__subscribe input[type="email"] {
width : calc(100% - var(--btn-width));
background-color : rgba(255, 255, 255, 0.05);
font-size : var(--text-sm);
color : white;
border : none;
padding : var(--input-vpadding) calc(2.8rem - 1px);
text-align : left;
margin : 0;
}
.s-contact__subscribe input[type="submit"] {
--btn-height : var(--btn-input-height);
background-color : var(--color-1);
border : 2px solid var(--color-1);
color : black;
width : var(--btn-width);
margin : 0;
}
.s-contact__subscribe .mc-status {
width : 100%;
margin-top : var(--vspace-0_75);
font-family : var(--font-2);
font-size : var(--text-sm);
color : var(--color-1);
}
/* -------------------------------------------------------------------
* responsive:
* contact
* ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.s-contact__mail-block {
padding-top : 0;
}
.s-contact__mail-block::before {
display : none;
}
.btn--mail {
width : 100%;
margin-bottom : var(--vspace-2_5);
}
}
@media screen and (max-width: 600px) {
.s-contact .text-display-title {
--text-multiplier : .6;
}
.s-contact__subscribe form {
display : block;
}
.s-contact__subscribe input[type="email"],
.s-contact__subscribe input[type="submit"],
.s-contact__subscribe .mc-status {
width : 100%;
}
.s-contact__subscribe input[type="email"] {
text-align : center;
margin-bottom : var(--vspace-0_5);
}
.s-contact__subscribe .mc-status {
text-align : center;
}
}
@media screen and (max-width: 500px) {
.s-contact .text-display-title {
--text-multiplier : .55;
}
.s-contact h5 {
font-size : calc(var(--text-size) * 1.1111);
margin-bottom : var(--vspace-0_375);
}
.s-contact__infos {
font-size : var(--text-lg);
line-height : calc(1.375 * var(--space));
}
}
@media screen and (max-width: 400px) {
.s-contact .text-display-title {
font-size : var(--text-xl);
}
}
/* ===================================================================
* # FOOTER
*
*
* ------------------------------------------------------------------- */
.s-footer {
background-color : #00bf63;
padding-top : var(--vspace-1_75);
padding-bottom : var(--vspace-1_75);
font-family : var(--font-2);
font-size : calc(var(--text-size) * 0.8889);
line-height : var(--vspace-1);
color : white;
position : relative;
}
.s-footer a {
color : white;
}
.s-footer a:focus,
.s-footer a:hover {
color : #272b29;
}
/* -------------------------------------------------------------------
* ## copyright
* ------------------------------------------------------------------- */
.ss-copyright {
padding-right : var(--vspace-2);
}
.ss-copyright span {
display : inline-block;
}
.ss-copyright span::after {
content : "|";
display : inline-block;
padding : 0 1rem 0 1.2rem;
color : rgba(255, 255, 255, 0.05);
}
.ss-copyright span:last-child::after {
display : none;
}
/* -------------------------------------------------------------------
* ## go top
* ------------------------------------------------------------------- */
.ss-go-top {
z-index : 2;
opacity : 0;
visibility : hidden;
transform : translate(0, 200%);
transition : all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
position : fixed;
bottom : 4.4rem;
right : 4rem;
}
.ss-go-top a {
display : flex;
align-items : center;
justify-content : center;
text-decoration : none;
border : none;
height : calc(1.875 * var(--space));
width : calc(1.875 * var(--space));
border-radius : 50%;
background-color : black;
transition : all .3s;
position : relative;
}
.ss-go-top a:focus svg path,
.ss-go-top a:hover svg path {
fill : white;
}
.ss-go-top svg {
height : var(--vspace-0_75);
width : var(--vspace-0_75);
}
.ss-go-top svg path {
fill : white;
}
.ss-go-top.link-is-visible {
opacity : 1;
visibility : visible;
transform : translate(0, 0);
}
/* -------------------------------------------------------------------
* responsive:
* footer
* ------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
.ss-go-top {
right : var(--vspace-1);
bottom : var(--vspace-1_5);
}
.ss-go-top a {
height : var(--vspace-1_75);
width : var(--vspace-1_75);
}
.ss-go-top svg {
height : var(--vspace-0_625);
width : var(--vspace-0_625);
}
}
@media screen and (max-width: 500px) {
.ss-copyright span {
display : block;
}
.ss-copyright span::after {
display : none;
}
}
JavaScript
Here is the complete code for script.js file to function the Digital Design Website:
(function(html) {
'use strict';
const cfg = {
// MailChimp URL
mailChimpURL : 'https://facebook.us1.list-manage.com/subscribe/post?u=1abf75f6981256963a47d197a&id=37c6d8f4d6'
};
/* animations */
const tl = anime.timeline( {
easing: 'easeInOutCubic',
duration: 800,
autoplay: false
})
.add({
targets: '#loader',
opacity: 0,
duration: 1000,
begin: function(anim) {
window.scrollTo(0, 0);
}
})
.add({
targets: '#preloader',
opacity: 0,
complete: function(anim) {
document.querySelector("#preloader").style.visibility = "hidden";
document.querySelector("#preloader").style.display = "none";
}
})
.add({
targets: ['.s-header__logo', '.s-header__menu-toggle'],
opacity: [0, 1]
}, '-=200')
.add({
targets: ['.s-intro__pretitle', '.s-intro__title', '.s-intro__more'],
translateY: [100, 0],
opacity: [0, 1],
delay: anime.stagger(200)
}, '-=400')
.add({
targets: ['.s-intro__social', '.s-intro__scroll'],
opacity: [0, 1],
delay: anime.stagger(200)
}, '-=200');
/* preloader */
const ssPreloader = function() {
const preloader = document.querySelector('#preloader');
if (!preloader) return;
html.classList.add('ss-preload');
window.addEventListener('load', function() {
html.classList.remove('ss-preload');
html.classList.add('ss-loaded');
tl.play();
});
}; // end ssPreloader
/* parallax */
const ssParallax = function() {
const rellax = new Rellax('.rellax');
}; // end ssParallax
/* menu on scrolldown */
const ssMenuOnScrolldown = function() {
const menuToggle = document.querySelector('.s-header__menu-toggle');
const triggerHeight = 150;
window.addEventListener('scroll', function () {
let loc = window.scrollY;
if (loc > triggerHeight) {
menuToggle.classList.add('opaque');
} else {
menuToggle.classList.remove('opaque');
}
});
}; // menu on scrolldown
/* offcanvas menu */
const ssOffCanvas = function() {
const menuToggle = document.querySelector('.s-header__menu-toggle');
const nav = document.querySelector('.s-header__nav');
const closeButton = document.querySelector('.s-header__nav-close-btn');
const siteBody = document.querySelector('body');
if (!(menuToggle && nav)) return;
menuToggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
siteBody.classList.add('menu-is-open');
});
closeButton.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
if (siteBody.classList.contains('menu-is-open')) {
siteBody.classList.remove('menu-is-open');
}
});
siteBody.addEventListener('click', function(e) {
if(!(e.target.matches('.s-header__nav, .smoothscroll'))) {
closeButton.dispatchEvent(new Event('click'));
}
});
}; // end ssOffcanvas
/* masonry
* ------------------------------------------------------ */
const ssMasonry = function() {
const containerBricks = document.querySelector('.bricks');
if (!containerBricks) return;
imagesLoaded(containerBricks, function() {
const msnry = new Masonry(containerBricks, {
itemSelector: '.brick',
columnWidth: '.brick',
percentPosition: true,
resize: true
});
});
}; // end ssMasonry
/* animate elements if in viewport
* ------------------------------------------------------ */
const ssAnimateOnScroll = function() {
const blocks = document.querySelectorAll('[data-animate-block]');
if (!blocks) return;
window.addEventListener('scroll', animateOnScroll);
function animateOnScroll() {
let scrollY = window.pageYOffset;
blocks.forEach(function(current) {
const viewportHeight = window.innerHeight;
const triggerTop = (current.getBoundingClientRect().top + window.scrollY + (viewportHeight * .2)) - viewportHeight;
const blockHeight = current.offsetHeight;
const blockSpace = triggerTop + blockHeight;
const inView = scrollY > triggerTop && scrollY <= blockSpace;
const isAnimated = current.classList.contains('ss-animated');
if (inView && (!isAnimated)) {
anime({
targets: current.querySelectorAll('[data-animate-el]'),
opacity: [0, 1],
translateY: [100, 0],
delay: anime.stagger(200, {start: 200}),
duration: 800,
easing: 'easeInOutCubic',
begin: function(anim) {
current.classList.add('ss-animated');
}
});
}
});
}
}; // end ssAnimateOnScroll
/* swiper
* ------------------------------------------------------ */
const ssSwiper = function() {
const clientsSwiper = new Swiper('.clients', {
slidesPerView: 3,
spaceBetween: 6,
slideClass: 'clients__slide',
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
// when window width is > 500px
501: {
slidesPerView: 4,
spaceBetween: 16
},
// when window width is > 900px
901: {
slidesPerView: 5,
spaceBetween: 32
},
// when window width is > 1200px
1201: {
slidesPerView: 6,
spaceBetween: 40
}
}
});
const testimonialsSwiper = new Swiper('.testimonial-slider', {
slidesPerView: 1,
effect: 'slide',
pagination: {
el: '.swiper-pagination',
clickable: true,
}
});
}; // end ssSwiper
/* photoswipe
* ----------------------------------------------------- */
const ssPhotoswipe = function() {
const items = [];
const pswp = document.querySelectorAll('.pswp')[0];
const folioItems = document.querySelectorAll('.folio-item');
if (!(pswp && folioItems)) return;
folioItems.forEach(function(folioItem) {
let folio = folioItem;
let thumbLink = folio.querySelector('.folio-item__thumb-link');
let title = folio.querySelector('.folio-item__title');
let caption = folio.querySelector('.folio-item__caption');
let titleText = '<h4>' + title.innerHTML + '</h4>';
let captionText = caption.innerHTML;
let href = thumbLink.getAttribute('href');
let size = thumbLink.dataset.size.split('x');
let width = size[0];
let height = size[1];
let item = {
src : href,
w : width,
h : height
}
if (caption) {
item.title = titleText.trim() + captionText.trim();
}
items.push(item);
});
// bind click event
folioItems.forEach(function(folioItem, i) {
let thumbLink = folioItem.querySelector('.folio-item__thumb-link');
thumbLink.addEventListener('click', function(event) {
event.preventDefault();
let options = {
index: i,
showHideOpacity: true
}
// initialize PhotoSwipe
let lightBox = new PhotoSwipe(pswp, PhotoSwipeUI_Default, items, options);
lightBox.init();
});
});
}; // end ssPhotoSwipe
/* mailchimp form
* ---------------------------------------------------- */
const ssMailChimpForm = function() {
const mcForm = document.querySelector('#mc-form');
if (!mcForm) return;
// Add novalidate attribute
mcForm.setAttribute('novalidate', true);
// Field validation
function hasError(field) {
// Don't validate submits, buttons, file and reset inputs, and disabled fields
if (field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') return;
// Get validity
let validity = field.validity;
// If valid, return null
if (validity.valid) return;
// If field is required and empty
if (validity.valueMissing) return 'Please enter an email address.';
// If not the right type
if (validity.typeMismatch) {
if (field.type === 'email') return 'Please enter a valid email address.';
}
// If pattern doesn't match
if (validity.patternMismatch) {
// If pattern info is included, return custom error
if (field.hasAttribute('title')) return field.getAttribute('title');
// Otherwise, generic error
return 'Please match the requested format.';
}
// If all else fails, return a generic catchall error
return 'The value you entered for this field is invalid.';
};
// Show error message
function showError(field, error) {
// Get field id or name
let id = field.id || field.name;
if (!id) return;
let errorMessage = field.form.querySelector('.mc-status');
// Update error message
errorMessage.classList.remove('success-message');
errorMessage.classList.add('error-message');
errorMessage.innerHTML = error;
};
// Display form status (callback function for JSONP)
window.displayMailChimpStatus = function (data) {
// Make sure the data is in the right format and that there's a status container
if (!data.result || !data.msg || !mcStatus ) return;
// Update our status message
mcStatus.innerHTML = data.msg;
// If error, add error class
if (data.result === 'error') {
mcStatus.classList.remove('success-message');
mcStatus.classList.add('error-message');
return;
}
// Otherwise, add success class
mcStatus.classList.remove('error-message');
mcStatus.classList.add('success-message');
};
// Submit the form
function submitMailChimpForm(form) {
let url = cfg.mailChimpURL;
let emailField = form.querySelector('#mce-EMAIL');
let serialize = '&' + encodeURIComponent(emailField.name) + '=' + encodeURIComponent(emailField.value);
if (url == '') return;
url = url.replace('/post?u=', '/post-json?u=');
url += serialize + '&c=displayMailChimpStatus';
// Create script with url and callback (if specified)
var ref = window.document.getElementsByTagName( 'script' )[ 0 ];
var script = window.document.createElement( 'script' );
script.src = url;
// Create global variable for the status container
window.mcStatus = form.querySelector('.mc-status');
window.mcStatus.classList.remove('error-message', 'success-message')
window.mcStatus.innerText = 'Submitting...';
// Insert script tag into the DOM
ref.parentNode.insertBefore( script, ref );
// After the script is loaded (and executed), remove it
script.onload = function () {
this.remove();
};
};
// Check email field on submit
mcForm.addEventListener('submit', function (event) {
event.preventDefault();
let emailField = event.target.querySelector('#mce-EMAIL');
let error = hasError(emailField);
if (error) {
showError(emailField, error);
emailField.focus();
return;
}
submitMailChimpForm(this);
}, false);
}; // end ssMailChimpForm
/* alert boxes
* ------------------------------------------------------ */
const ssAlertBoxes = function() {
const boxes = document.querySelectorAll('.alert-box');
boxes.forEach(function(box){
box.addEventListener('click', function(event) {
if (event.target.matches('.alert-box__close')) {
event.stopPropagation();
event.target.parentElement.classList.add('hideit');
setTimeout(function(){
box.style.display = 'none';
}, 500)
}
});
})
}; // end ssAlertBoxes
/* Back to Top
* ------------------------------------------------------ */
const ssBackToTop = function() {
const pxShow = 900;
const goTopButton = document.querySelector(".ss-go-top");
if (!goTopButton) return;
// Show or hide the button
if (window.scrollY >= pxShow) goTopButton.classList.add("link-is-visible");
window.addEventListener('scroll', function() {
if (window.scrollY >= pxShow) {
if(!goTopButton.classList.contains('link-is-visible')) goTopButton.classList.add("link-is-visible")
} else {
goTopButton.classList.remove("link-is-visible")
}
});
}; // end ssBackToTop
/* smoothscroll
* ------------------------------------------------------ */
const ssMoveTo = function() {
const siteBody = document.querySelector('body');
const easeFunctions = {
easeInQuad: function (t, b, c, d) {
t /= d;
return c * t * t + b;
},
easeOutQuad: function (t, b, c, d) {
t /= d;
return -c * t* (t - 2) + b;
},
easeInOutQuad: function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
},
easeInOutCubic: function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t*t + b;
t -= 2;
return c/2*(t*t*t + 2) + b;
}
}
const triggers = document.querySelectorAll('.smoothscroll');
const moveTo = new MoveTo({
tolerance: 0,
duration: 1200,
easing: 'easeInOutCubic',
container: window,
callback: function (target) {
if (siteBody.classList.contains('menu-is-open')) {
siteBody.classList.remove('menu-is-open');
}
}
}, easeFunctions);
triggers.forEach(function(trigger) {
moveTo.registerTrigger(trigger);
});
}; // end ssMoveTo
/* Initialize
* ------------------------------------------------------ */
(function ssInit() {
ssPreloader();
ssParallax();
ssMenuOnScrolldown();
ssAnimateOnScroll();
ssOffCanvas();
ssMasonry();
ssSwiper();
ssPhotoswipe();
ssMailChimpForm();
ssAlertBoxes();
ssBackToTop();
ssMoveTo();
})();
})(document.documentElement);
Download Source Code
This free Digital Design Website Template has no copyrights and other Intellectual Properties rights; you can use the source code for free. If you’d like the full files and to start building your website right now then click the button below!
Conclusion
This template was design to used for professional websites and also to increase your portfolio. It will assist you in creating a good and presentable online image through the use of a better design that is also responsive.
Try to link back and give credit to JV Source Codes to support the project being done. In case you have any difficulties, click on YouTube and follow me – do not hesitate to leave a comment, I will be glad to assist! ☺
