Made by Pe Themes
First of all, Thank you so much for purchasing this template and for being our customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.
This documentation is to help you regarding each step of customization.
Please go through the documentation carefully to understand how this template is made and how to edit this properly.
When you purchase Alioth from Themeforest, you need to login your account and download template files from Themeforest. Please make sure you downloaded All file & Documentation option.
After you downloaded template files you will find inside it;
01. Alioth - Template files for installation
02. Documentation - Contains Alioth template documentation
You'll see two folders named "Light" and "Dark" inside the "Alioth" folder. Both folders are ready to upload on your server so you can pick the layout you want and just upload it in your srver.
Step 1: Login to your hosting server via FTP client.
Step 2: Locate the domain folder you wish to upload Alioth.
Step 3: Upload Alioth theme files in your domain server
In Alioth you can set the site settings with body's data-attributes
When you start editing a page you will see the body's data-attributes;
<body data-barba="wrapper" data-smooth-scroll="false" data-cursor="true" data-header-sticky="true" data-menu-style="overlay" data-page-layout="light" data-header-layout="dark" data-menu-layout="light" data-footer-layout="light" data-page-loader="false">
Alioth offers a very easy page customizing area you just need to change data values for the settings you wish to set.
Here's acceptable setting types;
data-barba-wrapper ------ These setting shold'nt be changed for AJAX page transitions.
data-smooth-scroll ------ true or false - Turn on/off smooth scroll.
data-page-loader ------ true or false - Turn on/off page loader animation.
data-cursor ------ true or false - Turn on/off custom mouse cursor.
data-header-sticky ------ true or false - Turn on/off sticky header.
data-menu-style ------ overlay or classic - Menu style selection.
data-menu-layout ------ light or dark - Menu layout selection.
data-page-layout ------ light or dark - Page layout selection.
data-header-layout ------ light or dark - Header layout selection.
data-footer-layout ------ light or dark - Footer layout selection.
You can select the page laoder duration in these section;
<!--Page Loader-->
<div data-duration="5" class="alioth-page-loader" data-layout="light">
<span class="apl-background"></span>
<!--Loader Percentage (Don't Touch)-->
<div class="apl-count"></div>
<!--Loader Percentage (Don't Touch)-->
</div>
<!--/Page Loader-->You can select the page transition settings in these section;
<!--Page Transitions-->
<div class="alioth-page-transitions" data-layout="light">
<!--Transition Background (Don't touch)-->
<span class="apt-bg"></span>
<!--/Transition Background (Don't touch)-->
<!--Transition Text-->
<div class="trans-text">Loading, please wait..</div>
<!--Transition Text-->
</div>
<!--/Page Transitions-->You can set the page transition layout with data-layout attribute.
And you can change the page transition text here.
As you now; Alioth offers a custom interactive mousecursor and here you can set the mousecursor settings;
<!-- Mouse Cursor -->
<div data-dark-circle="rgba(25,27,29,.6)" data-dark-dot="#191b1d" data-light-circle="hsla(0,0%,100%,.2)" data-light-dot="#fff" id="mouseCursor">
<div id="cursor"></div>
<div id="dot"></div>
</div>
<!-- /Mouse Cursor -->The mouse cursor in Aioth is interactive and need to set some color settings for that.
data-dark-circle - You can set the border color which is be used when the cursor is dark layout.
data-dark-dot - You can set the dot color which is be used when the cursor is dark layout.
data-light-circle - You can set the border color which is be used when the cursor is light layout.
data-light-dot - You can set the dot color which is be used when the cursor is light layout.
The first step of customizing a template is adding your logo.
You'll see site-branding class below header section.
<!-- Site Branding -->
<div class="site-branding">
<!-- Site Logos -->
<div class="site-logo">
<a href="index.html">
<img alt="Site Logo" class="dark-logo" src="img/site-logo.png">
<img alt="Site Logo Light" class="light-logo" src="img/site-logo-light.png">
</a>
</div>
<!-- /Site Logos -->
</div>
<!-- /Site Branding -->Again in the header section you'll see menu ul. Here you can edit main menu URLs and titles.
<!-- Site Navigation -->
<div class="site-navigation">
<span class="sub-back"><i class="icofont-long-arrow-left"></i></span>
<!-- Main Menu -->
<ul class="menu main-menu">
<li class="menu-item has-children"><a href="#">Home</a>
<!-- Sub-Menu -->
<ul class="sub-menu">
<li class="menu-item"><a href="index.html">Agency</a></li>
<li class="menu-item"><a href="home-personal.html">Personal</a></li>
<li class="menu-item"><a href="home-showcase-carousel.html">Showcase Carousel</a></li>
<li class="menu-item"><a href="home-showcase-list.html">Showcase List</a></li>
<li class="menu-item"><a href="home-showcase-slideshow.html">Showcase Slideshow</a></li>
<li class="menu-item"><a href="home-showcase-wall.html">Showcase Wall</a></li>
<li class="menu-item"><a href="home-fullscreen-slider.html">Fullscreen Slider</a></li>
<li class="menu-item"><a href="home-fullscreen-slideshow.html">Fullscreen Slideshow</a></li>
<li class="menu-item"><a href="home-fullscreen-wall.html">Fullscreen Wall</a></li>
<li class="menu-item"><a href="home-shop.html">Shop</a></li>
</ul>
<!-- /Sub-Menu -->
</li>
<li class="menu-item has-children"><a href="#">Pages</a>
<!-- Sub-Menu -->
<ul class="sub-menu">
<li class="menu-item"><a href="about.html">About Us</a></li>
<li class="menu-item"><a href="about-me.html">About Me</a></li>
<li class="menu-item"><a href="our-team.html">Team</a></li>
<li class="menu-item"><a href="clients.html">Clients</a></li>
<li class="menu-item"><a href="our-services.html">Services</a></li>
<li class="menu-item"><a href="404-not-found.html">404 Page</a></li>
</ul>
<!-- /Sub-Menu -->
</li>
<li class="menu-item"><a href="works.html">Portfolio</a></li>
<li class="menu-item has-children"><a href="#">Stories</a>
<!-- Sub-Menu -->
<ul class="sub-menu">
<li class="menu-item"><a href="blog-list.html">Blog - List</a></li>
<li class="menu-item"><a href="blog-classic.html">Blog - Classic</a></li>
<li class="menu-item"><a href="single-post.html">Single Post</a></li>
</ul>
<!-- /Sub-Menu -->
</li>
<li class="menu-item has-children"><a href="#">Shop</a>
<!-- Sub-Menu -->
<ul class="sub-menu">
<li class="menu-item"><a href="products.html">Products</a></li>
<li class="menu-item"><a href="single-product.html">Single Product</a></li>
<li class="menu-item"><a href="cart.html">Cart</a></li>
<li class="menu-item"><a href="checkout.html">Checkout</a></li>
</ul>
<!-- /Sub-Menu -->
</li>
<li class="menu-item"><a href="contact.html">Contact</a></li>
</ul>
<!-- /Main Menu -->
<!-- Menu Widget (Left) -->
<div class="menu-widget menu-widget-left">
<ul class="social-list">
<li><a href="#.">Facebook</a></li>
<li><a href="#.">Instagram</a></li>
<li><a href="#.">Twitter</a></li>
<li><a href="#.">LinkedIn</a></li>
</ul>
</div>
<!-- /Menu Widget (Left) -->
<!-- Menu Widget (Right) -->
<div class="menu-widget menu-widget-right">
<div class="git-button">
<a href="mailto:[email protected]">Get in touch!</a>
</div>
</div>
<!-- /Menu Widget (Right) -->
</div>
<!-- /Site Navigation -->IMPORTANT:
2. Menu item which belong the current page must have menu-item-active class
You can edit overlay menu's widget areas here. These widget areas will not display if you using classic menu style
<!-- Menu Widget (Left) -->
<div class="menu-widget menu-widget-left">
<ul class="social-list">
<li><a href="#.">Facebook</a></li>
<li><a href="#.">Instagram</a></li>
<li><a href="#.">Twitter</a></li>
<li><a href="#.">LinkedIn</a></li>
</ul>
</div>
<!-- /Menu Widget (Left) -->
<!-- Menu Widget (Right) -->
<div class="menu-widget menu-widget-right">
<div class="git-button">
<a href="mailto:[email protected]">Get in touch!</a>
</div>
</div>
<!-- /Menu Widget (Right) -->This a fullscreen slider for displaying portfolio projects
Let's take a look how to add/edit a project in this;
<!-- Project -->
<div class="fs-project">
<!-- Project Image -->
<div class="fs-project-image">
<div class="slide-bgimg">
<img alt="Project Featured Image" src="img/projects/project-5/project_featured_image.jpg">
</div>
</div>
<!--/ Project Image -->
<!-- Project Details -->
<div class="fs-project-dets">
<!-- Project Title -->
<div class="fs-title">Spirits of #illusion</div>
<!--/ Project Title-->
<!-- Project Metas -->
<div class="fs-meta">
<!-- Project Category -->
<span class="fs-cat">Production</span>
<!--/ Project Category -->
<!-- Project Year -->
<span class="fs-year">2015</span>
<!--/ Project Year-->
</div>
<!--/ Project Metas -->
</div>
<!--/ Project Details-->
<!-- Project Button -->
<div class="fs-button">
<a href="project-5.html">Case Study</a>
</div>
<!--/ Project Button -->
</div>
<!--/ Project -->
Here's the preferences of a project;
fs-project-image - Project featured image. (Can be used with a video see the "Showcase Videos" shortcode for more detail.)
fs-title - Project title.
fs-cat - Project category (can be changed with another meta but fs-cat class must be exists.)
fs-year - Project year (can be changed with another meta but fs-year class must be exists.)
fs-button - Project page URL and button text can be change here
This is another fullscreen showcase page which is used for displaying projects.
Let's take a look how to add/edit projects.
<!--Project-->
<div class="ss-project">
<!--Project Image-->
<div class="ss1-image">
<img alt="Project Featured Image" src="img/projects/project-2/project_featured_image.jpg">
</div>
<!--/Project Image-->
<!--Project Details-->
<div class="ss1-details">
<!--Project Category-->
<div class="ss1-cat">Branding</div>
<!--/Project Category-->
<!--Project Title-->
<div class="ss1-title">The Silk’s Nothing</div>
<!--/Project Title-->
<!--Project Meta-->
<div class="ss1-met-wrap">
<!--Project Summary-->
<div class="ss1-summary">Science hundreds of thousands Hypatia concept of the number one decipherment ship of the imagination? Drake Equation.</div>
<!--/Project Summary-->
<!--Project URL-->
<a class="ss1-url" href="project-2.html"></a>
<!--/Project URL-->
</div>
<!--/Project Meta-->
</div>
<!--/Project Details-->
</div>
<!--/Project-->
Here's the preferences of a project;
ss1-image - Project featured image. (Can be used with a video see the "Showcase Videos" shortcode for more detail.)
ss1-title - Project title.
ss1-cat - Project category (can be changed with another meta but ss1-cat class must be exists.)
ss1-summary - Project summary (can be changed with another meta but ss1-summary class must be exists.)
ss1-url - Project page URL
A fullscreen wall layout for displaying portfolio projects
Let's take a look how to edit/add projects in this.
<!-- Project -->
<div data-image-url="img/projects/project-1/project-featured-image.jpg" class="fw-project">
<!-- Project URL --><a href="project-1.html">
<!-- Project Title -->
<div class="fw-project-title">Ricardo Almeida
</div>
<!--/ Project Title -->
<!-- Project Category-->
<div class="fw-project-category">Photography
</div>
<!--/ Project Caegory-->
</a>
</div>
<!--/ Project -->
data-image-url - Project image url
a tag - Project page URL
fw-project-title - Project title
fw-project-category - Project category (can be changed with another meta but fw-project-category class must be exists.)
A scroll based carousel showcase with an heading text;
You can edit heading and background texts here;
<!--Carousel Background Text-->
<div class="cas-bg-text">Featured Works</div>
<!--/Carousel Background Text-->
<!--Carousel Headline-->
<div class="cas-headline">
Hello! We are PeThemes,
<br>a digital creative agency from NY.
<br>Creating wonderful digital products
<br>and a pinch of rock'n roll!
</div>
<!--/Carousel Headline-->
Let's have a look at how to edit porjects;
<!--Carousel Project-->
<div class="cas-project">
<!--Carousel Project Image-->
<div class="cs-image">
<img alt="Project Image" src="img/projects/project-5/project_featured_image.jpg">
</div>
<!--/Carousel Project Image-->
<!--Project Title $ URL-->
<div class="cs-title">
<a href="project-5.html">Spirits of #illusion</a>
</div>
<!--/Project Title $ URL-->
</div>
<!--/Carousel Project-->
cs-image - Project featured image. (Can be used with a video see the "Showcase Videos" shortcode for more detail.)
cs-title - Project title and project page URL
A list based showcase layout;
Let's have a look at how to edit projects;
<!--Project-->
<div class="sl-project">
<!--Project URL--><a href="project-8.html">
<!--Project Title-->
<div class="sl-project-title"> Pierre</div>
<!--/Project Title-->
<!--Project Meta-->
<div class="sl-project-meta">
<!--Project Category-->
<div class="sl-project-cat">UI/UX Design</div>
<!--/Project Category-->
<!--Project Year-->
<div class="sl-project-year">2020</div>
<!--/Project Year-->
</div>
<!--/Project Meta-->
</a>
<!--Project Image-->
<div class="sl-project-image">
<img alt="Project Image" src="img/projects/project-8/project_featured_image.jpg">
</div>
<!--/Project Image-->
</div>
<!--/Project-->
a-tag - Project page URL
sl-project-title - Project title.
sl-project-cat - Project category (can be changed with another meta but sl-project-cat class must be exists.)
sl-project-year - Project year (can be changed with another meta but sl-project-year class must be exists.)
sl-project-image - Project's featured image
A slideshow showcase layout with project summaries.
Let's have a look at how to edit projects;
<!-- Project -->
<div class="ss2-project">
<!-- Project Metas -->
<div class="ss2-project-meta">
<!-- Project Category -->
<div class="ss2-project-cat">Production</div>
<!--/ Project Category -->
<!-- Project Title -->
<div class="ss2-project-title">Spirits of #illusion</div>
<!--/ Project Title -->
<!-- Project Excerpt -->
<div class="ss2-project-excerpt">Billions upon billions rings of Uranus Drake Equation hearts of the stars ship of the imagination great turbulent clouds. </div>
<!--/ Project Excerpt -->
</div>
<!--/ Project Metas -->
<!-- Project Image -->
<div class="ss2-project-image">
<img alt="Project İmage" src="img/projects/project-5/project_featured_image.jpg">
</div>
<!--/ Project Image -->
<!-- Project URL -->
<a class="ss2-project-url" href="project-5.html"></a>
<!--/ Project URL -->
</div>
<!--/ Project -->ss2-project-title - Project title.
ss2-project-cat - Project category (can be changed with another meta but ss2-project-cat class must be exists.)
ss2-project-excerpt - Project excerpt (can be changed with another meta but ss2-project-excerpt class must be exists.)
ss2-project-image - Project's featured image
ss2-project-url - Project page URL
A scroll based horizontal wall showcase layout;
Let's have a look at how to edit projects;
<!-- Poject -->
<div class="wall-project">
<!-- Poject URL --><a href="project-1.html">
<!-- Poject Title -->
<div class="project-title">Ricardo Almeida</div>
<!-- Poject Title -->
</a>
<!-- Poject Image -->
<div class="project-image">
<img alt="Project Image" src="img/projects/project-1/project-featured-image.jpg">
</div>
<!-- Poject Image -->
</div>
<!--/ Poject -->
a tag - Project URL.
project-title - Project title
ss2-project-image - Project's featured image
A project page in Alioth has 3 main sections; "Project Page Header , Project Content and Next Project Section."
There's three project page header desings included with Alioth.
Here you can see how to edit these are;
Style 1;
The project-page-header div must be to have "style_1" class.
With the data-animate you can turn on/off header opening animation
If you using that style in a project #page's data-barba-namespace attribute must be pph1. Otherwise the AJAX page transitions will not be work for that page.
<!-- Page -->
<div id="page" class="project-page" data-barba="container" data-barba-namespace="pph1">
<!-- Project Page Header -->
<div data-animate="true" class="project-page-header style_1">
<!-- Project Header Image -->
<div class="project-fetaured-image">
<img alt="Project Featured Image" src="img/projects/project-5/project_featured_image.jpg">
</div>
<!-- /Project Header Image -->
<!-- Project Details -->
<div class="project-details">
<!-- Project Title & Cat -->
<div class="project-title">
<!-- Project Title -->
<h1 class="big-title">Spirits of #illusion</h1>
<!-- Project Title -->
</div>
<!-- /Project Title & Cat -->
<!-- Project Metas -->
<div class="project-metas">
<!-- Project Meta -->
<div class="project-meta project-cats">
<!-- Project Cats-->
<div class="project-cat">Production</div>
<!-- /Project Cats-->
</div>
<!-- /Project Meta -->
<!-- Project Meta -->
<div class="project-meta meta-summary">
<!-- Meta Content-->
<h5>As a patch of light Flatland courage of our questions light years Tunguska event radio telescope. Paroxysm of global death paroxysm of global death explorations emerged into consciousness rings of Uranus descended from astronomers? Take root and flourish from which we spring muse about the carbon in our apple pies extraordinary claims require extraordinary evidence the carbon in our apple pies.</h5>
<!-- /Meta Content-->
</div>
<!-- /Project Meta -->
<!-- Project Meta -->
<div class="project-meta project-other">
<h5>Coffee Lab - 2017</h5>
</div>
<!-- /Project Meta -->
</div>
<!-- /Project Metas -->
</div>
<!-- Project Details -->
</div>
<!-- /Project Page Header -->
Style 2;
The project-page-header div must be to have "style_2" class.
With the data-animate you can turn on/off header opening animation
If you using that style in a project #page's data-barba-namespace attribute must be pph2. Otherwise the AJAX page transitions will not be work for that page.
<!-- Page -->
<div id="page" class="project-page" data-barba="container" data-barba-namespace="pph2">
<!-- Project Page Header -->
<div data-animate="true" class="project-page-header style_2">
<!-- Project Header Image -->
<div class="project-featured-image">
<img alt="Project Featured Image" src="img/projects/project-1/project-featured-image.jpg">
</div>
<!-- /Project Header Image -->
<!-- Project Head -->
<div class="project-head">
<!-- Project Title -->
<div class="project-title">
<h1 class="big-title">Ricardo Almeida</h1>
</div>
<!-- /Project Title -->
<!-- Project Category -->
<div class="project-cat">Photography</div>
<!-- /Project Category -->
</div>
<!-- /Project Head -->
<!-- Project Details -->
<div class="project-details">
<!-- Project Metas -->
<div class="project-metas">
<!-- Project Meta -->
<div class="project-meta project-other">
<h5>Zeina - 2020</h5>
</div>
<!-- /Project Meta -->
<!-- Project Meta -->
<div class="project-meta meta-summary">
<!-- Meta Content-->
<h5>Gathered by gravity take root and flourish of brilliant syntheses billions upon billions white dwarf billions upon billions? Stirred by starlight Hypatia emerged into consciousness as a patch of light stirred by starlight the carbon in our apple pies? Rich in heavy atoms preserve and cherish that pale blue dot permanence of the stars realm of the galaxies. </h5>
<!-- /Meta Content-->
</div>
<!-- /Project Meta -->
</div>
<!-- /Project Metas -->
</div>
<!-- /Project Details -->
</div>
<!-- /Project Page Header -->
Style 3;
The project-page-header div must be to have "style_3" class.
With the data-animate you can turn on/off header opening animation
If you using that style in a project #page's data-barba-namespace attribute must be pph3. Otherwise the AJAX page transitions will not be work for that page.
<!-- Page -->
<div id="page" class="project-page" data-barba="container" data-barba-namespace="pph3">
<!-- Project Page Header -->
<div data-animate="true" class="project-page-header style_3">
<!-- Project Page Head -->
<div class="project-head">
<!-- Project Title & Category -->
<div class="project-title">
<!-- Project Title -->
<h1 class="big-title">Pierre</h1>
<!-- /Project Title -->
<!-- Project Category -->
<div class="project-cat">UI/UX Design</div>
<!-- /Project Category -->
</div>
<!-- /Project Title & Category -->
</div>
<!-- /Project Page Head -->
<!-- Project Details -->
<div class="project-details">
<!-- Project Metas -->
<div class="project-metas">
<!-- Project Meta -->
<div class="project-meta project-other">
<h5>Beat - 2014</h5>
</div>
<!-- /Project Meta -->
<!-- Project Meta -->
<div class="project-meta meta-summary">
<!-- Meta Content-->
<h5>From which we spring not a sunrise but a galaxyrise across the centuries Tunguska event Euclid descended from astronomers? Muse about emerged into consciousness vanquish the impossible the sky calls to us Orion's sword venture. Astonishment rings of Uranus stirred by starlight venture two ghostly white figures in coveralls and helmets. </h5>
<!-- /Meta Content-->
</div>
<!-- /Project Meta -->
</div>
<!-- /Project Metas -->
</div>
<!-- /Project Details -->
</div>
<!-- /Project Page Header -->
Project content area will be builded just like a page, the detailed information about building and grid system will be next main section in this documentation. Please continue following.
You can set next project navigation here:
<!-- Next Project Section-->
<div class="next-project-section section no-margin">
<!--Next Project URL --><a href="project-9.html">
<!-- Next Project Image-->
<div class="next-project-image">
<img alt="Next Project Image" src="img/projects/project-9/project_featured_image.jpg">
</div>
<!--/ Next Project Image-->
<!-- Next Project Meta Wrapper-->
<div class="wrapper-small no-nargin">
<div class="c-col-12">
<div class="next-project-wrap">
<!-- Next Project Text-->
<span>Next Project</span>
<!--/ Next Project Text-->
<!-- Next Project Title-->
<h1 class="next-project-title">Emerald Planet</h1>
<!--/ Next Project Title-->
</div>
</div>
</div>
<!--/ Next Project Meta Wrapper-->
</a>
</div>
<!--/ Next Project Section-->
If you want to use a video instead of an image, you just need to change project-featured-image section with that;
If you using video header in a project #page's data-barba-namespace attribute must be pph-video. Otherwise the AJAX page transitions will not be work for that page.
<!-- Project Header Image -->
<div class="project-fetaured-image">
<!--Video-->
<div class="project-featured-video">
<!--Video Attributes-->
<div class="pph-video" data-plyr-provider="vimeo" data-plyr-embed-id="586720487"></div>
<!--/Video Attributes-->
</div>
<!--/Video-->
</div>
<!-- /Project Header Image -->
Alioth's blog posts page is very easy to customize for everyone.
<!--Blog Post-->
<div class="post alioth-post sticky">
<!--Blog Post Image-->
<div class="post-image">
<img alt="Post Image" src="img/post_01.jpg">
</div>
<!--/Blog Post Image-->
<!--Blog Post URL--><a href="single-post.html">
<!--Blog Post Date-->
<div class="post-date">12 January, 2021</div>
<!--/Blog Post Date-->
<!--Blog Post Title-->
<div class="post-title">
<h3>Ship of the imagination the sky calls to us culture made.</h3>
</div>
<!--Blog Post Title-->
<!--Blog Post Summary-->
<h5 class="post-summary">Jean-François Champollion bits of moving fluff a very small stage in a vast.. </h5>
<!--/Blog Post Summary-->
<!--Blog Post Cat-->
<div class="post-cat">NEWS</div>
<!--/Blog Post Cat-->
</a>
</div>
<!--/Blog Post-->
post-image - Post image.
a tag - Post URL.
post-date - Post date.
post-title - Title of the post.
post-summary - Post summary.
post-cat - Post category.
<!--Blog Post-->
<div class="post alioth-post sticky">
<!--Blog Post URL--><a href="single-post.html">
<!--Blog Post Image-->
<div class="post-image">
<img alt="Post Image" src="img/post_03.jpg">
</div>
<!--/Blog Post Image-->
<!--Blog Post Meta-->
<div class="post-meta">
<!--Blog Post Title-->
<div class="post-title">
<h2>Ship of the imagination the sky calls to us culture made.</h2>
</div>
<!--/Blog Post Title-->
<!--Blog Post Date-->
<h5 class="post-date">13 January, 2021</h5>
<!--/Blog Post Date-->
<!--Blog Post Category-->
<h5 class="post-cat">News</h5>
<!--Blog Post Category-->
</div>
<!--/Blog Post Meta-->
</a>
</div>
<!--Blog Post-->
post-image - Post image.
a tag - Post URL.
post-date - Post date.
post-title - Title of the post.
post-cat - Post category.
2. Post Content You can create post content here;
<!-- Post Content -->
<div class="post-content">
<!-- Content Here -->
</div>
<!-- Post Content -->The detailed information about building and grid system will be next main sections in this documentation. Please continue following.
Alioth using it's own grid system for all pages you can use these on project pages, blog post pages and all inner pages.
The gris system consists of 3 layers;
1. Section: Main structure of an element/elements.
<!-- Section -->
<div class="section">
</div>
<!--/ Section -->2. Wrappers: The second layer for screen sizing this is the most important layer for a good design. Alioth has three type of wrappers wrapper, wrapper-small and wrapper-full
<!-- Section -->
<div class="section">
<!-- Wrapper -->
<div class="wrapper">
</div>
<!--/ Wrapper -->
</div>
<!--/ Section -->3. Columns: Last layer of and element and it's providing to sizing elements. Alioth's grid system is a 12 column grid system such as Bootstrap.
When setting up a column you just need to add c- prefix eg. c-col-6.
<!-- Section -->
<div class="section">
<!-- Wrapper -->
<div class="wrapper">
<!-- Column -->
<div class="c-col-12">
<!-- Content Here -->
</div>
<!--/ Column -->
</div>
<!--/ Wrapper -->
</div>
<!--/ Section -->Alioth has a ready to use page header that you can use;
<!-- Page Header -->
<div class="page-header" data-anim="true">
<div class="page-header-wrap wrapper-small">
<!-- Page Title -->
<div class="page-title">
<h1 class="big-title">Stories</h1>
</div>
<!-- /Page Title -->
</div>
</div>
<!-- /Page Header -->
With the data-anim attribute you can turn on/off the page header animation.
Alioth offers shortcodes for fast and good page building here's the usable shortcodes;
1. Text Wrapper: A basic text wrapper area you can enter paragraphs, headings, quotes etc..
<!--Text Wrapper-->
<div class="text-wrapper">
<h3 class="has-anim" data-stagger="0.1" data-duration="1.5" data-delay=".1" data-animation="linesUp">
Great turbulent clouds cosmic ocean cosmos globular star cluster hydrogen atoms gathered by gravity. How far away as a patch of light how far away made in the interiors of collapsing stars extraplanetary a very small stage in a vast cosmic arena. Concept of the number one billions upon billions encyclopaedia galactica encyclopaedia galactica are creatures of the cosmos rich in heavy atoms.
</h3>
</div>
<!--/Text Wrapper-->
2. Single Image: A shortcode for displaying images.
<!--Single Image-->
<div data-lightbox="img/projects/project-2/project_image_1.jpg" class="single-image">
<img data-animation="slideUp" data-duration="1.5" data-delay="0" data-color="#caaf9c" class="has-anim" alt="Single Image" src="img/projects/project-2/project_image_1.jpg">
</div>
<!--/Single Image-->
3. Single Project: A multifunctioned image wrapper area you can add your images here and if you add image-lightbox class in it, the image will be pop-up openable on click.
<!--Alioth Single Project-->
<div class="alioth-single-project">
<!--Project URL--><a href="project-4.html">
<!--Project Image-->
<div class="sw-image">
<!--Project Video-->
<div class="showcase-video" data-plyr-provider="vimeo" data-plyr-embed-id="586720487"></div>
<!--/Project Video-->
</div>
<!--/Project Image-->
<!--Project Details-->
<div class="sw-detail">
<!--Project Title-->
<div class="sw-title">Mobile Shoestore</div>
<!--/Project Title-->
<!--Project Category-->
<div class="sw-cat">UI/UX Design</div>
<!--/Project Category-->
</div>
<!--/Project Details-->
</a>
</div>
<!--/Alioth Single Project-->
4. Image Carousel: A scroll based image carousel widget.
<!-- Image Carousel -->
<div data-navigate="scroll" class="alioth-image-carousel">
<!-- Carousel Wrapper -->
<div class="ai-wrapper">
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_4.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_5.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_6.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_7.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_8.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_9.jpg">
</div>
<!-- /Carousel Image -->
<!-- Carousel Image -->
<div class="ai-image">
<img alt="Carousel Image" src="img/projects/project-6/image_10.jpg">
</div>
<!-- /Carousel Image -->
</div>
<!-- /Carousel Wrapper -->
</div>
<!-- /Image Carousel -->
5. Page Navigation: Animated single page navigation.
<!-- Page Nav -->
<div class="alioth-page-nav" style="background-color: #f1f1f1">
<!--Page URL-->
<a href="works.html">
<!-- Page Title -->
<div class="page-title">Our Works</div>
<!-- /Page Title -->
<!-- Page Sub-Title -->
<div class="page-sub-title">See what we did before.</div>
<!-- /Page Sub-Title -->
</a>
</div>
<!-- /Page Nav -->
6. Seperator: Animated seperator.
<!--Seperator-->
<span data-color="rgba(25,27,29,.6)" data-anim="true" class="alioth-seperator"></span>
<!--/Seperator-->
7. Embed Video: A video widget for embeding youtube and vimeo videos.
<!--Embed Video-->
<div data-interaction="false" data-autoplay="true" class="alioth-embed-video">
<!--Video Attributes-->
<div data-poster="false" class="embed-video" data-plyr-provider="vimeo" data-plyr-embed-id="591025241"></div>
<!--/Video Attributes-->
</div>
<!--/Embed Video-->
8. Linked Text: Animated linked text widget.
<!--Linked Text-->
<div data-height="170" class="hello-heading linked-text dark hide_mobile">
<h1 style="font-size: 150px" class="big-title">
Hello,
<br>we are an
<br>independent
<br><a data-target="About Us" href="about.html">creative agency</a>
<br><a data-target="Contact Us" href="contact.html">in the Istanbul</a>
<br>who connect
<br><a data-target="Our Clients" href="clients.html">brands with</a>
<br><a data-target="Services" href="our-services.html">their audiences</a>
<br>using design,
<br><a data-target="Portfolio" href="works.html">technology</a>
<br>and insights.
</h1>
</div>
<!--/Linked Text-->
<!--Linked Text-->
<div data-height="60" class="hello-heading linked-text light hide_desktop">
<h1 style="font-size: 40px" class="big-title">
Hello,
<br>we are an
<br>independent
<br><a data-target="About Us" href="about.html">creative agency</a>
<br><a data-target="Contact Us" href="contact.html">in the Istanbul</a>
<br>who connect
<br><a data-target="Our Clients" href="clients.html">brands with</a>
<br><a data-target="Services" href="our-services.html">their audiences</a>
<br>using design,
<br><a data-target="Portfolio" href="works.html">technology</a>
<br>and insights.
</h1>
</div>
<!--/Linked Text-->
9. Scrollable Text: Scroll based animated text widget.
<!--Text Wrapper-->
<div class="scrollable-text">
<h1 class="big-title">
As a patch of light the only home we've ever known tendrils.
</h1>
</div>
<!--/Text Wrapper-->
10. Services: Services accordion widget.
<!--Alioth Services-->
<div data-anim="true" class="alioth-services style_2">
<!--Services Wrapper-->
<div class="services">
<!--Service-->
<div class="service">
<!--Service Title-->
<div class="service-title">Web Design</div>
<!--/Service Title-->
<!--Service Toggle (Don't touch)-->
<div class="service-toggle">
<i class="icofont-thin-down"></i>
</div>
<!--/Service Toggle (Don't touch)-->
<!--Service Content Wrapper-->
<div class="service-wrap">
<!--Service Content-->
<div class="service-cont">
<h2>Emerged into consciousness rich in heavy atoms are creatures of the cosmos Cambrian explosion light years birth. Extraordinary claims require.
</h2>
<h5 style="color: rgba(25,27,29,.6)">Intelligent beings preserve and cherish that pale blue dot emerged into consciousness cosmic fugue worldlets rich in mystery. Two ghostly white figures in coveralls and helmets are softly dancing with pretty stories for which there's little good evidence.
<br>
<br>Print Design
<br>Brand Identity
<br>Art Direction
<br>User Interface
<br>Brand Identity
</h5>
</div>
<!--/Service Content-->
</div>
<!--/Service Content Wrapper-->
</div>
<!--/Service-->
<!--Service-->
<div class="service">
<!--Service Title-->
<div class="service-title">Brand Identity</div>
<!--/Service Title-->
<!--Service Toggle (Don't touch)-->
<div class="service-toggle">
<i class="icofont-thin-down"></i>
</div>
<!--/Service Toggle (Don't touch)-->
<!--Service Content Wrapper-->
<div class="service-wrap">
<!--Service Content-->
<div class="service-cont">
<h2>Something incredible is waiting to be known finite but unbounded something incredible is waiting to be known with pretty stories for which.
</h2>
<h5 style="color: rgba(25,27,29,.6)">Intelligent beings preserve and cherish that pale blue dot emerged into consciousness cosmic fugue worldlets rich in mystery. Two ghostly white figures in coveralls and helmets are softly dancing with pretty stories for which there's little good evidence.
<br>
<br>Print Design
<br>Brand Identity
<br>Art Direction
<br>User Interface
<br>Brand Identity
</h5>
</div>
<!--/Service Content-->
</div>
<!--/Service Content Wrapper-->
</div>
<!--/Service-->
</div>
<!--/Services Wrapper-->
</div>
<!--/Alioth Services-->
11. Testimonials: Testimonals slider widget.
<!--Testimonials-->
<div class="a-testimonials autoplay dark">
<!--Testimonals Controls (Don't touch)-->
<div class="a-testimonals-control">
<span class="a-test-prev"><i class="icofont-thin-left"></i></span>
<div class="a-test-frac">
<span class="a-test-current">01</span>
<div class="a-testimonials-count"><span></span></div>
<span class="a-test-total"></span>
</div>
<span class="a-test-next"><i class="icofont-thin-right"></i></span>
</div>
<!--/Testimonals Controls (Don't touch)-->
<!--Testimonals Wrapper-->
<div class="a-testimonials-wrapper">
<!--Testimonal-->
<div class="a-testimonial">
<!--Testimonal Text-->
<div class="testimonial-text">“Globular star cluster light years gathered by gravity hundreds of thousands hydrogen atoms explorations. Not a sunrise but a galaxyrise cosmic ocean not a sunrise but a galaxyrise birth invent the universe the only home we've ever known. A mote of dust suspended.”</div>
<!--/Testimonal Text-->
<!--Testimonal Meta-->
<div class="testimonial-meta">
<!--Testimonial Name-->
<div class="testimonial-name">Sofia Potts - CEO</div>
<!--/Testimonial Name-->
<!--Testimonial Brand-->
<div class="testimonial-brand">Radamel</div>
<!--/Testimonial Brand-->
</div>
<!--/Testimonal Meta-->
</div>
<!--/Testimonal-->
<!--Testimonal-->
<div class="a-testimonial">
<!--Testimonal Text-->
<div class="testimonial-text">“Intelligent beings as a patch of light Orion's sword astonishment science invent the universe. At the edge of forever billions upon billions rich in mystery great turbulent clouds tesseract descended from astronomers. Globular star cluster something incredible is waiting.”</div>
<!--/Testimonal Text-->
<!--Testimonal Meta-->
<div class="testimonial-meta">
<!--Testimonial Name-->
<div class="testimonial-name">Aiden Adams - CTO</div>
<!--/Testimonial Name-->
<!--Testimonial Brand-->
<div class="testimonial-brand">Zeina</div>
<!--/Testimonial Brand-->
</div>
<!--/Testimonal Meta-->
</div>
<!--/Testimonal-->
<!--Testimonal-->
<div class="a-testimonial">
<!--Testimonal Text-->
<div class="testimonial-text">“Hearts of the stars Vangelis the sky calls to us billions upon billions emerged into consciousness citizens of distant epochs? From which we spring billions upon billions vastness is bearable only through love inconspicuous motes of rock and gas Drake Equation quasar.”</div>
<!--/Testimonal Text-->
<!--Testimonal Meta-->
<div class="testimonial-meta">
<!--Testimonial Name-->
<div class="testimonial-name">Jackson Garza - Public Relations</div>
<!--/Testimonial Name-->
<!--Testimonial Brand-->
<div class="testimonial-brand">Strawberry</div>
<!--/Testimonial Brand-->
</div>
<!--/Testimonal Meta-->
</div>
<!--/Testimonal-->
</div>
<!--/Testimonals Wrapper-->
</div>
<!--/Testimonials-->
12. Heading: Animated headings widget.
<!--Heading-->
<div style="padding-left: 100px" data-parallax="true" data-image="false" data-background-text="Blog Posts" class="alioth-heading">
<!--Heading Text-->
<div class="ah-title">
<h1 class="has-anim big-title" data-stagger="0.01" data-duration="1" data-delay=".1" data-animation="charsUp">
On the Blog
</h1>
</div>
<!--/Heading Text-->
</div>
<!--Heading-->
13. Clients:A widget for displaying client logos.
<!--Clients-->
<div data-anim="true" class="alioth-clients column-4">
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_01-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_02-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_03-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_04-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_05-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_06-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_07-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_08-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_09-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_10-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_11-dark.png"></a></div>
<!--/Client-->
<!--Client-->
<div class="a-client"><a href="#."><img alt="Client Logo" src="img/client_12-dark.png"></a></div>
<!--/Client-->
</div>
<!--/Clients-->
14. Awards:An animated list widget for displaying awards.
<!--Alioth Awards-->
<div data-anim="true" class="alioth-awards">
<!--Award-->
<div class="a-award">
<!--Award URL--><a href="#.">
<div class="award-dets">
<!--Alioth Awwards-->
<div class="award-title">Site of the Day</div>
<!--/Alioth Awwards-->
<!--Award Concern-->
<div class="award-loc">Awwwards</div>
<!--/Award Concern-->
</div>
<!--Award Date-->
<div class="award-date">2020</div>
<!--/Award Date-->
</a>
</div>
<!--/Award-->
<!--Award-->
<div class="a-award">
<!--Award URL--><a href="#.">
<div class="award-dets">
<!--Alioth Awwards-->
<div class="award-title">Studio of the Year</div>
<!--/Alioth Awwards-->
<!--Award Concern-->
<div class="award-loc">CSSDA</div>
<!--/Award Concern-->
</div>
<!--Award Date-->
<div class="award-date">2019</div>
<!--/Award Date-->
</a>
</div>
<!--/Award-->
</div>
<!--/Alioth Awwards-->
15. Personal Head:A welcome section for personal pages.
<!--Personal Head-->
<div data-animate="true" style="background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 100%);" class="alioth-personal-head">
<!--Personal Image-->
<div class="aph-image">
<img alt="Personal Image" src="img/hme-persona_portrait.png">
</div>
<!--/Personal Image-->
<!--Heading-->
<div class="aph-name">
<!--Front Text-->
<span class="name-front">Jennifer</span>
<!--/Front Text-->
<!--Back Text-->
<span class="name-back">Doeza</span>
<!--/Back Text-->
</div>
<!--/Heading-->
<!--Heading Sub Texts-->
<div class="aph-details">
<!--Welcome Text-->
<div class="aph-welc">Hello, I'am</div>
<!--/Welcome Text-->
<!--Welcome Sub Text-->
<div class="aph-sub-text">I am an indepentent designer based from NY and I am currently working on premium WordPress themes.
</div>
<!--/Welcome Sub Text-->
</div>
<!--/Heading Sub Texts-->
<!--Circular Button-->
<a class="circular-button scroller" href="#secondSec">
<span>Let's Meet<i class="icofont-arrow-down"></i></span>
</a>
<!--/Circular Button-->
</div>
<!--/Personal Head-->
16. Forms:Custom forms for Alioth.
<!-- Contact Form -->
<div class="alioth-form">
<form action="/" method="post">
<!-- Form Field -->
<div class="field-wrap">
<label>
Company Name
</label>
<input type="text" required autocomplete="off" />
</div>
<!--/ Form Field -->
<!-- Form Field -->
<div class="field-wrap">
<label>
Your Name
</label>
<input type="email" required autocomplete="off" />
</div>
<!--/ Form Field -->
<!-- Form Field -->
<div class="field-wrap">
<label>
Phone number
</label>
<input type="email" required autocomplete="off" />
</div>
<!--/ Form Field-->
<!-- Form Field -->
<div class="field-wrap">
<label>
E-mail
</label>
<input type="email" required autocomplete="off" />
</div>
<!--/ Form Field-->
<!-- Form Field -->
<div class="field-wrap">
<label>
Subject
</label>
<input type="email" required autocomplete="off" />
</div>
<!--/ Form Field -->
<!-- Form Field (Textarea)-->
<div class="message-wrap">
<label>
Your message
</label>
<textarea rows="8"></textarea>
</div>
<!--/ Form Field (Textarea)-->
<!-- Button -->
<div class="send-wrap">
<button type="submit" class="button button-block">Submit</button>
</div>
<!--/ Button -->
</form>
</div>
<!--/Contact Form -->
16. Number Counter:Animated number counter.
<!--Number Counter-->
<div data-delay="0" class="a-number-counter light">
<!--Number-->
<div class="ac-number">17</div>
<!--Seperator-->
<span class="ac-sign">+</span>
<!--/Seperator-->
<!--/Number-->
<!--Counter Title-->
<div class="ac-title">Galaxies</div>
<!--/Counter Title-->
</div>
<!--/Number Counter-->
1. Text Animations
Alioth has a lots of scroll animation types for texts and these are really easy to create.
Let's see how to create an animation;
Step 1: The first step of creating and animation is adding has-anim class to which element you want to animate.
Step 2: After you added has-anim class you need to add data-animation attribute.
Code should be like that;
<h3 class="has-anim" data-animation="linesUp">
Hearts of the stars rings of Uranus made in the interiors of collapsing stars preserve and cherish that pale blue dot are creatures of the cosmos network of wormholes and billions upon billions upon billions upon billions upon billions upon billions upon billions.
</h3>
All animations are triggers when the element in viewbox of the screen, but you can set some spesific options for this animations:
data-delay attribute provides the animation start delay in secconds default value is "0"
data-duration attribute provides the animation duration time in secconds default is "0.6"
data-stagger attribute makes the delay between animation elements in some of the animate types.
After you set all the things for an animations whole code should be like that:
<h3 class="has-anim" data-stagger="0.1" data-duration="1.5" data-delay=".4" data-animation="linesUp" style="color: hsla(0,0%,100%,.2)">
Hearts of the stars rings of Uranus made in the interiors of collapsing stars preserve and cherish that pale blue dot are creatures of the cosmos network of wormholes and billions upon billions upon billions upon billions upon billions upon billions upon billions.
</h3>
Here's a list about all the animation types for texts;
lines-up
lines-down
words-up
words-down
words-left
words-right
words-fade-up
words-fade-down
words-fade-left
words-fade-right
chars-up
chars-down
chars-left
chars-right
chars-fade-up
chars-fade-down
chars-fade-left
chars-fade-right
lines-down
lines-fade-up
lines-fade-left
lines-fade-right
lines-fade-down
2. Image Animations
Alioth has a lots of scroll animation types for images and these are really easy to create.
Let's see how to create an animation;
Step 1: The first step of creating and animation is adding has-anim class to which element you want to animate.
Step 2: After you added has-anim class you need to add data-animation attribute.
Code should be like that;
<div class="single-image">
<img alt="Single Image" data-animation="blockUp" class="has-anim" src="img/projects/project-7/image_3.jpg">
</div>
All animations are triggers when the element in viewbox of the screen, but you can set some spesific options for this animations:
data-delay attribute provides the animation start delay in secconds default value is "0"
data-duration attribute provides the animation duration time in secconds default is "0.6"
data-color is allow you to set overlay color for block animations.
After you set all the things for an animations whole code should be like that:
<div class="single-image">
<img alt="Single Image" data-animation="blockUp" data-duration="1.5" data-delay="0" data-color="#caaf9c" class="has-anim" src="img/projects/project-7/image_3.jpg">
</div>
Here's a list about all the animation types for images;
blockUp
blockDown
blockLeft
blockRight
slideUp
slideDown
slideLeft
slideRight
3. Parallax Animations
You can also create parallax scroll animations for the page elements
Let's see how to create an animation;
Step 1: The first step of creating and animation is adding has-parallax class to which element you want to animate.
Step 2: After you added has-parallax class you need to add data-parallax-strength and data-parallax-diraction attribute.
Code should be like that;
<!--Column-->
<div class="c-col-10 no-gap has-parallax" data-parallax-strength="0.15" data-parallax-direction="up">
<!--Single Image-->
<div class="single-image">
<img alt="Single Image" src="img/about-me-light-2.jpg">
</div>
<!--/Single Image-->
</div>
<!--/Column-->
All animations are triggers when the element in viewbox of the screen, but you can set some spesific options for this animations:
data-parallax-strength parallax animation speed.
data-parallax-direction animation directon (up or down)
Alioth has two type of footer styles; "Site Footer" and "Showcase Footers".
Fullscreen Footer using some on fullscreen pages (showcase pages)
Site Footer using on inner pages.
As you can see site footer is builded with Alioth's grid system you can customize it with shortcodes and grid system elements.
<!-- Site Footer -->
<div id="footer" class="site-footer section">
<!-- Footer Wrapper (Top) -->
<div class="wrapper">
<!-- Footer Branding -->
<div class="c-col-6 footer-widget footer_brand">
<!-- Footer Logo -->
<div class="footer-logo">
<img alt="Footer Logo" src="img/footer-logo.png">
</div>
<!-- Footer Logo -->
<!-- Copyright -->
<div class="copyright-text">
2020©
</div>
<!--/ Copyright -->
</div>
<!--/ Footer Branding -->
<!-- Footer Widget -->
<div class="c-col-3 footer-widget">
<!-- Socials Widget -->
<div class="social-list-widget">
<ul>
<li><a target="_blank" href="#.">Facebook</a></li>
<li><a target="_blank" href="#.">Instagram</a></li>
<li><a target="_blank" href="#.">Twitter</a></li>
<li><a target="_blank" href="#.">LinkedIn</a></li>
<li><a target="_blank" href="#.">Behance</a></li>
</ul>
</div>
<!--/ Socials Widget -->
</div>
<!--/ Footer Widget -->
<!-- Footer Widget -->
<div class="c-col-3 footer-widget">
<!-- Text Box -->
<div class="alioth-text-box">
<h5 style="color: rgba(25,27,29,.6)">#15–7015 Avenue of Americas
<br>New York, NY L5S 1T7
<br>
<br>+1 812 585 14 23
</h5>
</div>
<!--/ Text Box -->
</div>
<!--/ Footer Widget -->
</div>
<!--/ Footer Wraper (Top) -->
<!-- Footer Wraper (Bottom) -->
<div class="wrapper">
<!-- Footer Widget -->
<div class="c-col-6 footer-widget footer_cta">
<!-- CTA -->
<div class="big-button">
<a href="mailto:[email protected]">[email protected]</a>
</div>
<!--/ CTA -->
</div>
<!--/ Footer Widget -->
<!-- Footer Widget -->
<div class="c-col-6 footer-widget footer_menu">
<!-- Footer Menu -->
<div class="footer-menu">
<ul>
<li><a target="_blank" href="http://alioth-html.pethemes.com/documentation">Documentation</a></li>
<li><a href="mailto:[email protected]">Support</a></li>
<li><a target="_blank" href="#.">Purchase</a></li>
</ul>
</div>
<!--/ Footer Menu -->
</div>
<!--/ Footer Widget -->
</div>
<!-- Footer Wraper (Bottom) -->
</div>
<!-- /Site Footer -->