About the template

aterivus_preview

Aterivus is a premium, fully responsive one page / under construction / coming soon template with modern and clean design for creative people, agency, business, e-commerce, portfolio etc… . The template is fully functional, being packed with a countdown for your launch date, a subscribe form and a contact form which will put you in contact with your future clients. It is unique coming soon template built on Bootstrap 4.1.1 framework and designed with attention to details in mind. The list of features:

  • Elegant and Easy to Use/Customize
  • 100% Fully Responsive
  • Clean, Modern Design
  • Amazing CSS3 Effects/Animations
  • Compatible with most modern browsers
  • Awesome Google font
  • Built with W3C Valid HTML5 and CSS3
  • Built on Bootstrap 4
  • Font Awesome Icons
  • jQuery Countdown
  • Contact Form
  • Subscribe Form
  • 24 Colors Schemes
  • Customizable Social Icons and Side Panels positions
  • Well documented

Usage

Installing Aterivus template using FTP:
  • Unpack the templates .zip file (aterivus.zip) you have downloaded.
  • Upload the /aterivus folder's content to the /public_html/ directory on your server.

Template setup

Background Image and Logo

Background image used on our demo website is downloaded from Unsplash and is not included in the template package. In order to set up your own background image just follow these simple steps:

  • Choose an image to be used as a background on your site.
  • Upload it to /assets/img/ folder on your server.
  • Inside index.html file find div element with bg-img class and update src attribute of its img element to correspond your image's name.
aterivus_bg_img_setup

In order to add your logo and favicon just upload them to /assets/img/ folder and update following lines of code inside index.html file for favicon and logo respectively:

aterivus_favicon_setup
aterivus_logo_setup

Countdown Date

If you want to set up your own countdown date open index.html file and div with countdown class and inside data-year, data-month and data-day attributes simply add your year, month and day respectively.

aterivus_countdown_setup

Social Icons

Next image displays part of code from index.html file that should be updated in order to use your social icons (instead of # add your social profile url):

aterivus_social_links_setup

Note: Unnecessary social icons can be removed simply by deleting corresponding lines from the code displayed above.

By updating next line of code:

aterivus_social_setup

Social Icons block can have one of the following positions:

  • Right - by using social-right class instead of social-left. We are using this position on our demo site.
  • Left - by using social-left class instead of social-right.
  • Center - by removing both social-left and social-right classes.

Side Panels

Subscribe, Contact and About Us pages are displayed as left or right side panels:

aterivus_left_side_panel
aterivus_right_side_panel

You can update the side of the panel by finding the panel you want to update inside index.html file and add panel-left or panel-right class next to default panel class.

aterivus_panel_setup

About Us Panel

In order to update text and image on About Us panel just find Side Panel About block in index.html file and update its texts and image url.

Subscribe Panel

Inside subscribe.php file you should add your email address for receiving mails from subscribe form:

aterivus_mail_setup

In order to update text on Subscribe panel just find Side Panel Subscribe block in index.html file and update its texts.

Contact Panel

Inside contact.php file you should add your email address for receiving mails from contact form:

In order to update texts and address info on Contact panel just find Side Panel Contact block in index.html file and update its texts and info.

Color Schemes

Inside /assets/css/ directory you will find a bunch of CSS files with various color names. In order to use specific color scheme on your site, go to index.html file and update following line of code:

aterivus_color_setup_1

Instead of default.css file (black color) choose one of other 23 colors (beige, blue, brown, ...).

Aterivus template package comes with Colorpanel plugin enabled by default in order to makes it easier for you to choose color scheme for your site. After you set up default color for your site you can disable Colorpanel simply by removing following part of code from index.html file:

aterivus_color_setup_2

Files

Aterivus template includes directories and files described below.

Inside your aterivus.zip file you will find 3 folders including licencing folder.

Documentation

Documentation folder include three different folders and one index.html file. Just open index.html and you can see the documentation in your browser.

Aterivus

Below we will describe the most important files of the template.

PHP

All PHP files are in main aterivus/ folder:

  • contact.php - Code responsible for sending mail from contact form.
  • subscribe.php - Code responsible for sending mail from subscribe form.

JavaScript

bootstrap.min.js is inside /assets/bootstrap/js/ folder and all other JavaScript files are in /assets/js/:

  • custom.js - Custom JavaScript code.
  • jquery-3.3.1.min.js - jQuery JavaScript library.
  • jquery.colorpanel.js - Simple jQuery plugin to switch css stylesheet color scheme.
  • jquery.countdown.js - The countdown functionality.
  • jquery.plugin.js - Simple JavaScript Inheritance.
  • jquery.validate.js - jQuery Validation Plugin.

CSS

The most important template's CSS files which are in /assets/css/ directory are:

  • jquery.colorpanel.css - Styles for jQuery Colorpanel plugin.
  • default.css - Default Aterivus color scheme (black).
  • style.css - Main Aterivus style.

Other CSS files from /assets/css/ are color scheme files, more about them in Color Schemes section. bootstrap.css file is in /assets/bootstrap/css folder.

Sources and Credits

Frameworks

Aterivus template is powered by Bootstrap v4 (front-end framework).

Bootstrap v4.1.1 The most popular front-end framework. http://getbootstrap.com/
jQuery v3.3.1 Fast, small, and feature-rich JavaScript library. http://jquery.com/

Plugins (JavaScript)

Countdown for jQuery v2.1.0 A simple date countdown plugin for jQuery. http://keith-wood.name/countdown.html
jQuery Validation v1.17.0 Makes simple clientside form validation easy, offering plenty of customization options. https://jqueryvalidation.org/
jQuery Colorpanel v1.0.0 Simple plugin to switch css stylesheet skin theme on your template demo. https://infario.github.io/colorpanel/

Fonts

Raleway Google Fonts https://fonts.google.com/specimen/Raleway

Icons

Font Awesome Icons Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. https://fontawesome.com/icons

Preview Images

Images used on demo website are purchased/downloaded from Unsplash. These images are not included in the template package.

Help

For further questions please send us an email on: support@creativestudiom.com.

We will do our best to assist you with any questions directly related to the template set up.