Mixio - Five in One Elegant Coming Soon and Landing Page Template Documentation

by: mix_design
version: 2.0.0
created: 11.05.2018
last update: 28.10.2021

Introduction

Thank you for choosing Mixio - five in one elegant coming soon and landing page HTML template. We have prepared detailed documentation to make Mixio customization an easy task for you. If you have any questions that are beyond the scope of this help file, you can email us on support@mixdesign.club.

We would be very happy if you could rate this item here with 5 stars. Your feedback is very important so write us a line ! :)

Installation

Follow the steps below to setup your site template:

In order to start working with Mixio unzip the downloaded package and open HTML folder to find all ready-to-use template files. Choose one of the demo *.html files (any ready-to-use demo you like) and rename it to index.html.
Next you’ll need to prepare a project for customization. Below is a list of files and folders that are required in the root directory of your project:
- index.html - your chosen *.html file (renamed already);
- css folder - stylesheet files;
- js folder - JavaScript files;
- fonts folder - icon and lining nums fonts files;
- img folder for project images and favicon;
- video folder - project video files;
- mail.php file for sending e-mails;
- .htaccess - this file contain rules for files caching on web server;
The other files can be used according to your preferences.
Your project is ready to go! Now you can start adding your texts, images and video to your new awesome website.
After the customization is over, you’ll need to upload the project files to your hosting web server using FTP client or cPanel interface in order to use it on your website.

Files Structure

After downloading and extracting template package you will find 3 folders:

HTML: ready to use HTML template;
MixioGULP: if you want to totally customize Mixio, you can use this template;
Documentation: this help file.

This section describes HTML folder structure. More about MixioGULP folder structure you can find out in MixioGULP section.

Mixio is one page HTML template. So, mostly you will need one *.html file and supporting *.css, *.js, *.php files with some images. All the directories and files are well organized as it shown on the image bellow.

all HTML files are located in the root directory;
separate folders are created for CSS files, JavaScript files, fonts, images and video;
source-files folder contains all expanded CSS files, expanded JavaScript files, plugins and components files;
mail.php file for sending e-mails is located in the root directory;
.htaccess file is located in the root directory. This file contain rules for files caching on web server.

Demo Pages

Mixio is one page HTML template and comes with 14 ready-to-use demo pages:

HTML structure

Mixio has a simple and easy to customize structure based on Bootstrap 5 Grid. Here is a sample page structure:

    
      <!DOCTYPE html>
      <html lang="en" dir="ltr">

        <head>
          Meta tags, Title, Favicon and Icons, Facebook Metadata, CSS, Custom Browser Color
        </head>

        <body class="split overflow-hidden">

          <!-- Old Browsers Support Start -->
            ...
          <!-- Old Browsers Support End -->

          <!-- Loader Start -->
          <div class="loader">
            ...
          </div>
          <!-- Loader End -->

          <!-- Custom HTML Start -->

          <!-- Navigation Start -->
          <div class="menu-black-layer"></div>
          <nav>
            ...
          </nav>
          <!-- Navigation End -->

          <!-- Fullpage.js Sections Start -->
          <div id="fullpage" class="fullpage">

            <!-- Home Section Start-->
            <div class="section fp-auto-height-responsive home" data-anchor="homePage">
              ...
            </div>
            <!-- Home Section End-->

            <!-- About Section Start-->
            <div class="section fp-auto-height-responsive inner about" data-anchor="aboutPage">
              ...
            </div>
            <!-- About Section End-->

            <!-- Features Section Start-->
            <div class="section fp-auto-height-responsive inner features" data-anchor="featuresPage">
              ...
            </div>
            <!-- Features Section End-->

            <!-- Portfolio Section Start-->
            <div class="section fp-auto-height-responsive inner portfolio" data-anchor="portfolioPage">
              ...
            </div>
            <!-- Portfolio Section End-->

            <!-- Contact Section Start-->
            <div class="section fp-auto-height-responsive inner contact" data-anchor="contactPage">
              ...
            </div>
            <!-- Contact Section End-->

          </div>
          <!-- Fullpage.js Sections End -->

          <!-- Notify Me Popup Start -->
          <div class="popup notify">
            ...
          </div>
          <!-- Notify Me Popup End -->

          <!-- Write-a-Line Popup Start -->
          <div class="popup writealine">
            ...
          </div>
          <!-- Write-a-Line Popup End -->

          <!-- Custom HTML End -->

          <!-- Root element of PhotoSwipe. Must have class pswp. -->
          <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            ...
          </div>

          <!-- Load Scripts Start -->
          ...
          <!-- Load Scripts End -->

        </body>

      </html>

CSS Files

Mixio template CSS files have a well-organized structure and a table of contents, as you can see on image below:

All CSS files are placed in css folder and have to be included in the <head> tag. Mixio uses uncompressed CSS files. If you want to improve Google PageSpeed Insights performance, you can use minificated files from source-files → mixio-css-min-files.

    
      <!-- Template Styles Start -->
      <link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
      <link rel="stylesheet" type="text/css" href="css/plugins.css">
      <link rel="stylesheet" type="text/css" href="css/main.css">
      <!-- Template Styles End -->

CSS files that have to be included in chosen .html file:

loader.css
plugins.css
main.css

If you want to customize CSS styles, We recommend to create your own custom.css file and include it to Template Styles section of the HTML file. This solution will help you in future updates.

JavaScript Libraries

All JavaScript files are placed in js folder and have to be included before the </body> tag.

libs.min.js - all JavaScript libraries that are necessary for Mixio proper work, are сompiled in this file;
gallery-init.js - for photoswipe gallery initialization;
mixio-custom.js - includes other scripts calls and settings;
map-*.js - for Google Map.

    
      <!-- Load Scripts Start -->
      <script src="js/libs.min.js"></script>
      <script src="js/gallery-init.js"></script>
      <script src="js/mixio-custom.js"></script>
      <script src="js/maps/map-dark.js"></script>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNMDtmEsvSevM4ztfsbhLfLNZhKHCvWXk"></script>
      <!-- Load Scripts End -->

We used minificated libs.min.js file to add all necessary JavaScript libraries to this template. The file contains:

jQuery
Modernizr
jQuery Transit
jQuery Mouse Wheel Plugin
KBW Countdown
AjaxChimp
FullPage.js
PhotoSwipe JavaScript Gallery
Swiper Slider
Vegas
YTPlayer
mixio-app.js - Mixio template custom JavaScript file.

All this uncompressed files you can find in the source-files folder.

* - map color name

Fonts

In Mixio template we used Playfair Display Font, Raleway Font and Fontawesome Free Iconic Font.

Custom Fonts

In the Mixio template we used two fonts:

Playfair Display font is used for headlines;
Raleway font is used for basic text content and additional text.

This fonts are embedded in the main.css file via @font-face rule:

    
      /* ------------------------------------------------*/
      /* Fonts Start */
      /* ------------------------------------------------*/
      /* Raleway Font */
      @font-face {
        font-family: "Raleway";
        font-style: normal;
        font-weight: 400;
        src: url("../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype"),
             url("../fonts/RalewayRegular/RalewayRegular.woff") format("woff"),
             url("../fonts/RalewayRegular/RalewayRegular.ttf") format("truetype");
      }
      ...
      /* ------------------------------------------------*/
      /* Fonts End */
      /* ------------------------------------------------*/

You can customize embedded fonts or embed another fonts for your project in the Fonts section of the main.css file.

Fontawesome free

Mixio uses free version of FontAwesome 5.15.4 iconic font. You can use fontawesome.com/icons page to easily find the icon you want to use. Solid, regular and brands icons are already compiled in the plugins.css file and ready for use.

To change icons, just change the class names: fas fa-heart, fab fa-instagram, far fa-address-book.

<li>
    <a href="https://www.facebook.com/ " target="_blank">
        <i class="fab fa-facebook"></i>
    </a>
</li>

More information about FontAwesome you can find on official documentation website - FontAwesome Docs.

Favicon and Apple touch icons

Mixio covers almost all platforms design requirements for favicon and icons:

Classic favicon:

      
        <link rel="icon" href="img/favicon/favicon.ico" sizes="any">

Android Web App Manifest & Apple Touch Icon:

      
        <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
        <link rel="manifest" href="img/favicon/manifest.webmanifest">

Universal SVG Icon for All Sizes ang Dark & Light Browser Color Themes:

      
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
        	<style type="text/css">
        		.st0 {
        			fill: #1f1f1f;
        		}
        		@media (prefers-color-scheme: dark) {
        			.st0 {
        				fill: #ffffff;
        			}
        		}
        	</style>
        	<path class="st0" d="M475.1,71.4c-6.2,3.1-9.3,6.2-9.3,12.4c-3.1,6.2-3.1,15.5-3.1,31.1V385c0,12.4,0,24.8,3.1,31.1 ..."/>
        </svg>

Facebook Metadata:

      
        <meta property="og:image:height" content="1200">
        <meta property="og:image:width" content="1200">
        <meta property="og:title" content="Mixio - Five in One Elegant Coming Soon and Landing Page Template">
        <meta property="og:description" content="MIxio - awesome coming soon template to kick-start your project">
        <meta property="og:url" content="http://mixdesign.club/themeforest/mixio/">
        <meta property="og:image" content="http://mixdesign.club/themeforest/mixio/img/favicon/og-image.jpg">

You can use Mixio favicon as an example or generate new one with Favicon Generator or any other favicon generator by your needs.

Customization

Mixio template comes with easy-to-customize page elements. You can choose from layout types - split and fullscreen, various backgrounds and much more.

Preloader

Loader will hide contents of your site until it's fully loaded.

If you want to customize or remove loader, find this code in *.html file:

<!-- Loader Start -->
<div class="loader">
  <div class="loader__content">
    <div class="loader__logo slideInDown">
      <!-- Your Logo Here -->
      <img src="img/mixio-logo-loader.svg" alt="Mixio - awesome coming soon template to kick-start your project">
    </div>
    <div class="loader__caption slideInUp">
      <p class="loading-text">Loading</p>
      <span class="loading-dots">
        <span class="dot"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </span>
    </div>
  </div>
</div>
<!-- Loader End -->

Loader styles are included in the <head> tag:

<!-- Template Styles Start-->
...
<link rel="stylesheet" type="text/css" href="css/loaders/loader.css">
...
<!-- Template Styles End-->

Logo

The logo container is located in the home section intro -div class="... home__intro".

<!-- Main Section Intro Start -->
<div class="col-12 col-xl-6 fullheight home__intro">
  ...
  <!-- Logo Start-->
  <div class="intro__logo">
    <!-- Your Logo Here -->
    <img src="img/mixio-logo.svg" alt="Mixio - awesome coming soon template to kick-start your project">
  </div>
  <!-- Logo End-->
  ...
</div>
<!-- Main Section Intro End -->

You can use SVG, PNG or JPG image for logo. If you are using SVG, create PNG fallback image for old browsers. It'll be replaced automatically if needed.

Images

All images used in Mixio template live demo are just for preview purpose only and they are not included in main download files. You easily can find all images on unsplash.com or pexels.com. We are using placeholders from placeholder.com instead of real images. You can easily replace placeholder URL with a path to your image like img/yourimage.jpg.

All tmplate background images you can replace in the main.css file:

/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.media-1 {
  background-image: url("http://via.placeholder.com/1366x1080");
}
...
/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/

<!-- Navigation Start -->
<div class="menu-black-layer"></div>
<nav>
 
  <!-- Menu Close Button Start -->
  <a href="#" id="menu-close" class="menu-close">
    <span></span>
  </a>
  <!-- Menu Close Button End -->
 
  <!-- Main Menu Start-->
  <ul class="menu" id="menu">
    <li data-menuanchor="homePage">
      <a href="#homePage">Home
        <span>Nice to meet you</span>
      </a>
    </li>
    <li data-menuanchor="aboutPage">
      <a href="#aboutPage">About Us
        <span>Our brand sucsess story</span>
      </a>
    </li>
    <li data-menuanchor="featuresPage">
      <a href="#featuresPage">Features
        <span>We love what we do</span>
      </a>
    </li>
    <li data-menuanchor="portfolioPage">
      <a href="#portfolioPage">Portfolio
        <span>Resent projects</span>
      </a>
    </li>
    <li data-menuanchor="contactPage">
      <a href="#contactPage">Contact
        <span>Welcome to our office</span>
      </a>
    </li>
  </ul>
  <!-- Main Menu End-->

</nav>
<!-- Navigation End -->

Homescreen Layout

Mixio template is provided with 5 layout types:

1. Split layout and days only countdown. Beautifully designed split layout with middle size headline and large days countdown. Countdown setup prosess you can find in the Countdown section of this file.