Mixlix - Health Supplement Landing Page v1.2

First of all, thank you for purchasing the Mixlix HTML5 Template. You can find the detailed information about the template in this document.
If there is anything you cannot find in this document, you can send an e-mail via the Profile page.

Mixlix in a Brief

Mixlix is a Health Supplement Landing Page Template.
In download folder you will find Two folders:

Documentation (Documentation for main template)
Mixlix (Main Template)
PSD (PSD File Download link)

Remember, when you want to use the shortCode/element in any pages you need to adjust the section spacing by giving margin or padding. Don't get panic if you messed up anything when you edit the template. We are always available to support our customer.

01Installation

Follow the steps below to setup your site template:

Unzip the downloaded package and open the Template folder to find all the template files. You wil get Mixlix folder in there. You need to upload this folder to your hosting web server using FTP or cPanel in order to use it on your website.
Below is the folder structure you will see in your website root directory:
- mixlix/assets/css - Stylesheet files
- mixlix/assets/fonts - Icon/fonts files
- mixlix/assets/img - Image files
- mixlix/assets/js - JS files
- mixlix/inc - Contact from file
You need to upload all or specific HTML files as per your need.
And now you are ready to go to generate your website with this awesome template.

02HTML Structure

We are used Bootstrap Latest Version v5.1.3 framework in this template.
The general template structure is the same throughout the template. Here is the general structure.

    
    <!doctype html>
    <html class="no-js" lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Mixlix - Health Supplement Landing Page
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

        <!-- CSS here -->
        <link rel="stylesheet" href="assets/css/.........">
        <link rel="stylesheet" href="assets/css/.........">
        <link rel="stylesheet" href="assets/css/.........">
    </head>

    <body>

        <!-- header start -->
        <header">
            <div id="sticky-header" class="menu-area transparent-header">
                <div class="container custom-container">
                    <div class="row">
                        <div class="col-12">
                            <div class="mobile-nav-toggler"><i class="flaticon-menu"></i></div>
                            <div class="menu-wrap">
                                <nav class="menu-nav show">
                                    <div class="logo">
                                        <a href="index.html"><img src="assets/img/logo/logo.png" alt="Logo"></a>
                                    </div>
                                    <div class="navbar-wrap main-menu d-none d-lg-flex">
                                        <ul class="navigation">
                                            <li class="menu-item-has-children active"><a href="#home" class="section-link">Home</a>
                                                <ul class="submenu">
                                                    <li class="active"><a href="index.html">Supplement Demo</a></li>
                                                    <li><a href="index-2.html">Capsule Demo</a></li>
                                                    <li><a href="index-3.html">Snack Bar Demo</a></li>
                                                    <li><a href="index-4.html">Slider Demo</a></li>
                                                    <li><a href="index-5.html">Special Page Demo</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="#features" class="section-link">Features</a></li>
                                            <li><a href="#ingredient" class="section-link">Ingredient</a></li>
                                            <li><a href="#gallery" class="section-link">Gallery</a></li>
                                            <li><a href="#price" class="section-link">Price</a></li>
                                            <li class="menu-item-has-children"><a href="#blog" class="section-link">News</a>
                                                <ul class="submenu">
                                                    <li><a href="blog.html">Our Blog</a></li>
                                                    <li><a href="blog-details.html">Blog Details</a></li>
                                                </ul>
                                            </li>
                                            <li class="menu-item-has-children"><a href="shop.html">Shop</a>
                                                <ul class="submenu">
                                                    <li><a href="shop.html">Our Shop</a>
                                                    <li><a href="shop-details.html">Shop Details</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">Contact</a></li>
                                        </ul>
                                    </div>
                                    <div class="header-action d-none d-sm-block">
                                        <ul>
                                            <li class="header-shop-cart"><a href="#"><i class="flaticon-shopping-cart"></i><span>2</span></a>
                                            </li>
                                            <li class="header-search"><a href="#"><i class="flaticon-search"></i></a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header-end -->



        <!-- main area start -->
        <main>

            <!-- Section Start -->
            <section>

            </section>
            <!-- Section End -->

        </main>
        <!-- main area end -->



        <!-- footer start -->
        <footer>

        </footer>
        <!-- footer-end -->



        <!-- JS here -->
        <script src="assets/js/........."></script>
        <script src="assets/js/........."></script>
        <script src="assets/js/........."></script>
        <script src="assets/js/........."></script>
        <script src="assets/js/........."></script>
    <body>
    </html>

03All Pages

Introduce Mixlix All Pages

index.html is ====> Supplement Powder
index-2.html is ====> Supplement Capsule
index-3.html is ====> Supplement Snack Bar
index-4.html is ====> Slider Demo
index-5.html is ====> Special Demo
shop.html is ====> Shop Page
shop-details.html is ====> Shop Details Page
blog.html is ====> Blog Standard Post
blog-details.html is ====> Blog Details Page
contact.html is ====> Contact Page

04Favicon Settings

Favicon Will be found in <head> section.

    
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">

05Logo Settings

The Logo will be found in the <nav class="navbar"> tag.


        <div class="logo"><a href="index.html"><img src="img/logo/logo.png" alt="logo"></a></div>

You can replace any .jpg .png .svg logo. And set the width according to your logo size.

06Fonts Settings

In Mixlix we use Poppins font.
You can change both fonts form assets/css/style.css file:

        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

07Activeted PHP Contact Form

You can edit your form simply and quickly. Open mail.php from Mixlix folder and add your email into $recipient field


<?php
 /*
 *  CONFIGURE EVERYTHING HERE
 */

// an email address that will be in the From field of the email.
$from = 'Demo contact form';

// an email address that will receive the email with the output of the form
$sendTo = 'yourmail@gmail.com'; // Add Your email here

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('Name' => 'Name', 'email' => 'Email', 'phone' => 'Phone', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';

?>

08CSS Structure

The style.css file contains all of the specific stylings for the page. The file is separated into sections using:

bootstrap.min.css

This file includes core bootstrap styles
Source
font-awesome.css

This file contains styles about Fontawesome icon library
Source
Example
<i class="fab fa-facebook-square"></i>
magnific-popup.css

This file contains styles about Popup Style
Source
animate.min.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Source
Example
<div class="wow slideInLeft"> ... </div>
slick.css

This file contains styles about slick carousel plugin
Source
style.css

All styles about template

09JavaScripts

jQuery 3.6.0

jQuery is a fast, small, and feature-rich JavaScript library.
Source
bootstrap.min.js

Core bootstrap js file
Source
slick.min.js

jQuery carousel plugin from Slick
Source
wow.js

A lightweight script to animate scrolling.Reveal Animations When You Scroll.
Source
min.js

This file contains all script about site.

10Credits

11Thanks

Once again thank you for purchasing one of our Templates

Best Regards

Themeadapt

12Changelog:

Dates are formatted in dd/mm/yy


    ===========================
    ----- (25/02/2022) ------
    ===========================
    #Added : Home 3 Demo
    #Added : Home 4 Demo
    #Added : Home 5 Demo
    #Update : Bootstrap v.5
    #Update : Retina Display Support


    ===========================
    ----- (07/12/2021) ------
    ===========================
    First Published

Mixlix - Health Supplement Landing Page

Mixlix - Health Supplement Landing Page v1.2

Mixlix in a Brief

01Installation

02HTML Structure

03All Pages

index.html is ====> Supplement Powder

index-2.html is ====> Supplement Capsule

index-3.html is ====> Supplement Snack Bar

index-4.html is ====> Slider Demo

index-5.html is ====> Special Demo

shop.html is ====> Shop Page

shop-details.html is ====> Shop Details Page

blog.html is ====> Blog Standard Post

blog-details.html is ====> Blog Details Page

contact.html is ====> Contact Page

04Favicon Settings

05Logo Settings

06Fonts Settings

07Activeted PHP Contact Form

08CSS Structure

bootstrap.min.css

font-awesome.css

Example

magnific-popup.css

animate.min.css

Example

slick.css

style.css

09JavaScripts

jQuery 3.6.0

bootstrap.min.js

slick.min.js

wow.js

min.js

10Credits

Bootstrap

Stock Image Unsplash, Pexels

Fontawesome

Animate.css

11Thanks

Once again thank you for purchasing one of our Templates

Best Regards

Themeadapt

12Changelog:

index.html is `====>` Supplement Powder

index-2.html is `====>` Supplement Capsule

index-3.html is `====>` Supplement Snack Bar

index-4.html is `====>` Slider Demo

index-5.html is `====>` Special Demo

shop.html is `====>` Shop Page

shop-details.html is `====>` Shop Details Page

blog.html is `====>` Blog Standard Post

blog-details.html is `====>` Blog Details Page

contact.html is `====>` Contact Page