Documentation | Oxygen Creative HTML Template

Installation

Unzip the downloaded zip file and extract Oxygen files. You will see all html, css, javascript and php files in Oxygen folder. We recommend you work on localhost with these files.
You can edit your tags at the top of your HTML file. For example;
- <title> Your Title </title> Your Page Title
- <meta name="description" content="Your description" /> - Your Website's Description
- <meta name="keywords" content="example, example" /> - Your Website's Keywords
- <link rel="icon" type="image/png" href="images/favicon.png" /> - Your Website's Favicon
- <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/> - Apple Touch Icon
- <link rel="stylesheet" href="css/plugins.css" /> - CSS Files
- <link rel="stylesheet" href="css/style.css" /> - Styles
You can edit your tags at the top of your HTML file. For example;
- oxygen/css - CSS files and fonts of all theme.
- oxygen/images - All assets. Images, backgrounds, icons, videos, and sound files.
- oxygen/js - All javascript files, theme panel files, ajax files and extra components.
- oxygen/php - PHP support for social modules, contact form types and mailchimp.
You should use an editor for customize theme and add your contents, images .etc.
You should use an application for upload your website to server.

Example html page

    <!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta charset="utf-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <!-- Title, description, keywords -->
            <title>Your Title</title>
            <meta name="description" content="Your description" />
            <meta name="keywords" content="example, example" />
            <!-- Favicon, Touch icon -->
            <link rel="icon" type="image/png" href="images/favicon.png" />
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/>

            <!-- CSS Files -->
        </head>
        <!-- BODY START -->
        <body>

            <!-- NAVIGATION -->
            <nav id="navigation" class="modern-nav fixed bs-xs link-hover-01 nav-white nav-lg" data-offset="0">
                ...
            </nav>
            <!-- END NAVIGATION -->
            <!-- NAVIGATION -->

            <!-- Home -->
            <section id="home" class="fullwidth">
                <!-- Start slider for home section - you can customize all details -->
                <div class="custom-slider fullwidth height-80vh height-60vh-sm mxh-1000 mnh-550 mnh-350-sm relative zi-2">
                    <!-- Wrapper for slider -->
                    <div class="swiper-wrapper">

                        <!-- Slide -->
                        <div class="swiper-slide nav-to--white">
                            All details in a slide
                        </div>
                        <!-- End slide -->

                        <!-- Slide -->
                        <div class="swiper-slide nav-to--dark">
                            All details in a slide
                        </div>
                        <!-- End slide -->

                        <!-- Slide -->
                        <div class="swiper-slide nav-to--white">
                            All details in a slide
                        </div>
                        <!-- End slide -->

                    </div>
                    <!-- End wrapper for slider -->
                </div>
                <!-- End slider for home section -->
                
            </section>
            <!-- End Home -->

            <!-- Page Details -->
            <section>
                ...
            </section>

            <!-- FOOTER -->
            <footer id="footer" class="bg-dark3">
                ...
            </footer>
            <!-- END FOOTER -->

            <!-- JS Files -->

        </body>
        <!-- Body End -->
    </html>

You can find a lot of example pages in the Oxygen.

Skins and Colors

Oxygen does not have the file for the skins. In the css/style.css file, there are variations of .colored, .colored1, and .colored2. And you just need to change them. All colors depend on these 3 styles.
You can see :root style code in the css/style.css and line 43.
You can get Javascript support for this case. You can add data-color="#000" or data-color="purple" codes for text colors. There is support for background colors too. For example; data-bgcolor="#4b4b4b" or data-bgcolor="red" .etc
You can use Bootstrap or Oxygen colors for elements like .bg-warning - .bg-secondary - .bg-colored - .bg-colored2 - .bg-dark4 - .bg-gray7 - .bg-gradient3 .etc

A Few Examples:

.bg-colored

.bg-colored1

.bg-dark

.bg-white .text-dark .border

.bg-warning

.bg-danger

.bg-success

.bg-secondary

.bg-info

.bg-primary

.bg-pink

data-bgcolor="#e74c3c"

.bg-warning - data-color="#222"

data-bgcolor="#3498db" data-color="#fff"

Code example of this page

    <div class="row text-white">
        <div class="col-sm-3 col-6"><div class="bg-colored px-15 py-15 mt-5">.bg-colored</div></div>
        <div class="col-sm-3 col-6"><div class="bg-colored1 px-15 py-15 mt-5">.bg-colored1</div></div>
        <div class="col-sm-3 col-6"><div class="bg-dark px-15 py-15 mt-5">.bg-dark</div></div>
        <div class="col-sm-3 col-6"><div class="bg-info px-15 py-15 mt-5">.bg-info</div></div>
        <div class="col-sm-3 col-6"><div class="bg-gradient px-15 py-15 mt-5">.bg-dark-gradient</div></div>
        ...
    </div>

Navigation Types

Oxygen's navigations is ready to use and changeable easily to fixed or static types. You only need use .fixed class for fixed navigation type and .static class for navigation style.

`#01` Fixed Navigation Visit example

Fixed navigation is stays on the top when you are on home or scrolled to bottom. Its getting .scrolled class when scroll down page. And you can customize easily first and scrolled styles in the style.css file.

Here is an example code for fixed navigation;

    <nav id="navigation" class="navigation fixed hover-dark nav-dark" data-offset="0">
        <div class="container-fluid nav-container">
            <div class="row nav-wrapper">
                Your navigation cols
            </div>
        </div>
    </div>

`#02` Static Navigation Visit example

Static navigation is usable on everywhere like sticky. This navigation will keep position when scroll down.

Here is an example code for statc navigation;

    <nav id="navigation" class="navigation hover-dark nav-dark" data-offset="0">
        <div class="container-fluid nav-container">
            <div class="row nav-wrapper">
                Your navigation cols
            </div>
        </div>
    </div>

NOTE: This nav type is no need any .fixed class or .sticky class.

Responsive Options

You can use Bootstrap 4x columns for responsive options directly. Please follow for examples:

How it works:

One of three columns

Code example of this page

    <div class="row">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

You can see documentation on here for bootstrap columns; Bootstrap Grid System. Or you can check using examples.

Grid Options:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px	XXL ≥1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Column ordering	Yes

Equal Width:

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

    <div class="container-fluid mt-15">
        <div class="row">
            <div class="col">
                <p class="p-4">1 of 2</p>
            </div>
            <div class="col">
                <p class="p-4">2 of 2</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p class="p-4">1 of 3</p>
            </div>
            <div class="col">
                <p class="p-4">2 of 3</p>
            </div>
            <div class="col">
                <p class="p-4">3 of 3</p>
            </div>
        </div>
    </div>

Equal width system will calculate widths of items automatically.

Vertical alignment:

One of three columns

Code example of this page

    <div class="row align-items-start">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

    <div class="row align-items-center">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

    <div class="row align-items-end">
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm border">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

You can align the cols equal to row class. You can move them with .align-items-start, .align-items-center and .align-items-end classes.

Self align:

One of three columns

    <div class="row">
        <div class="col-sm align-self-start">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm align-self-center">
            <p class="p-4"><One of three columns</p>
        </div>
        <div class="col-sm align-self-end">
            <p class="p-4"><One of three columns</p>
        </div>
    </div>

You can align the cols with adding .align-self-start, .align-self-center and .align-self-end classes.

Horizontal alignment:

One of two columns

Code example of this page

    <div class="row justify-content-start">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
        <div class="row justify-content-end">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
    <div class="row justify-content-around">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>
        <div class="row justify-content-between">
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
        <div class="col-4">
            <p class="p-4"><One of two columns</p>
        </div>
    </div>

You can see documentation on here for bootstrap columns; Bootstrap Grid System.

Sliders and Carousels

Oxygen is comes with a beautiful slider plugin. You can see a super detailed documentation for swiper slider.

Swiper Slider:

You can use Swiper slider examples on demos and elements or create your own beautiful sldiers/carousels. You can see detailed documentation for Swiper slider on here: Swiper Slider Documentation

You will see examples on demos and elements for this slider. There is all codes described for how you use/customize them. You can see the templates on here: Sliders You can see these slider's css codes in elements.css file and js codes on the html file's bottom.

Here is an example slider.

Code example of this page

<!-- Col -->
<div class="col-lg-7 col-12 pt-5">
    <!-- Custom Slider -->
    <div class="custom-slider flip">
        <div class="swiper-wrapper">
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_01.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_02.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
            <!-- Slide -->
            <div class="swiper-slide">
                <img src="images/single-project2/slider_03.jpg" alt="blog post image">
            </div>
            <!-- End Slide -->
        </div>
        <!-- Arrows -->
        <div class="custom-slider-arrows">
            <div class="slider-prev">
                <svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke-width="1" fill="none" fill-rule="evenodd">
                        <g transform="translate(-1456.000000, -511.000000)">
                            <polyline points="1488.53604 530 1477.97712 540.172402 1488.53604 550.344804"></polyline>
                            <circle cx="1485.5" cy="540.5" r="28.5"></circle>
                        </g>
                    </g>
                </svg>
            </div>
            <div class="slider-next">
                <svg width="59px" height="59px" viewBox="0 0 59 59" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="WEB-DESIGN-1920" transform="translate(-1456.000000, -511.000000)">
                            <polyline points="1480 530 1490.54404 540.384763 1480 550.344804"></polyline>
                            <circle cx="1485.5" cy="540.5" r="28.5"></circle>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <!-- End Arrows -->
        <!-- Pagination -->
        <div class="custom-slider-pagination bg-colored-active-bullets"></div>
    </div>
    <!-- End Post Slider -->
</div>
<!-- End Col -->

Javascript code example of this page:

    //*********************************************
    //  TEXT SLIDER
    //*********************************************

        //Call Swiper Slider
        var swiperText = new Swiper(".text-slider", {
            grabCursor: false,
            effect: "fade",
            touchRatio: 1,
            speed: 750, // 1000 = 1 second
            autoHeight: true,
            autoplay: {
                delay: 5000,
            },
            navigation: {
                nextEl: '.text-slider-next',
                prevEl: '.text-slider-prev',
            },
            spaceBetween: 0,
            loop: true,
            slidesPerView: 1,
            fade: {
                crossFade: true,
            },
        });

You can find css codes in elements.css file. If you want use them you can copy these codes to your own files.

Oxygen comes with a perfect lightbox plugin. You can see all details on this page. This lightbox plugin can be used on galleries, single items easily and can be used with images, google maps, local&online videos, websites. Also this plugin works according to portfolio filters. And you do not need any customization for this feature. It'll get updated filters automatically.

<div class="your-container">
    <div class="item">
        <a href="image path" data-fslightbox="anyGalleryName" data-type="image">
            <img src="image path" alt="lightbox image">
        </a>
    </div>
    <div class="item">
        <a href="image path" data-fslightbox="anyGalleryName" data-type="image">
            <img src="image path" alt="lightbox image">
        </a>
    </div>
    <div class="item">
        <a href="image path" data-fslightbox="anyGalleryName" data-type="image">
            <img src="image path" alt="lightbox image">
        </a>
    </div>
    <div class="item">
        <a href="image path" data-fslightbox="anyGalleryName" data-type="image">
            <img src="image path" alt="lightbox image">
        </a>
    </div>
    <div class="item">
        <a href="image path" data-fslightbox="anyGalleryName" data-type="image">
            <img src="image path" alt="lightbox image">
        </a>
    </div>
</div>

You should add data-fslightbox attribute to "a" tag. And you can add any group name to this attribute. And you need add data-type attribute for media type. You can add image, video, youtube to this attribute.

<div class="item">
    <a href="image path" data-fslightbox="thisIsNotaGallery" data-type="image">
        <img src="image path" alt="lightbox image">
    </a>
</div>

You can add any random name to data-fslightbox attribute for single item.

Background color and images

You can use data attributes for background colors, text colors and background images. Please follow for the examples;

Background Images:

Here is example for cover sized and right-top aligned background image;

<div class="bg-cover bg-top bg-right" data-background="your-background-image-path.jpg"></div>

And customized mobile and desktops;

<div class="bg-cover bg-top bg-right bg-mobile-center" data-background="your-background-image-path.jpg" data-mobile-background="your-mobile-background-image-path.jpg"></div>

You can use background images with lazy load;

<div class="bg-cover bg-top bg-right bg-mobile-center" data-bg="your-background-image-path.jpg"></div>

Background Colors:

data-bgcolor="#f90000"

<div class="text-white p-4" data-bgcolor="#f90000">data-bgcolor="#f90000"</div>

You can add a background color with data-bgcolor attribute directly.

Text Colors:

data-color="#f90000"

<div class="bg-primary p-4" data-color="#f2f2f2">data-color="#f90000"</div>

You can customize text color with data-color attributes.

Use Together:

Custom background and text color

<div class="bg-primary p-4" data-bgcolor="#FF5454" data-color="#231616">Custom background and text color</div>

You can use background and text color selectors together.

Parallax animations

You can give horizontal, vertical or diagonal parallax effects and all css animations to elements with scroll. Here is how to use them:

Skrollr animations:

This parallax plugin is making possible unlimited animations with scroll. You can change all css options of an element with scroll. skrollr.js by Prinzhorn

For parallax image on home page;

<div class="bg-parallax" data-background="images/backgrounds/background_01.jpg" data-anchor-target="#home" data-0="transform:translate3d(0, 0px, 0px);" data-900="transform:translate3d(0px, 250px, 0px);"></div>

And for elements;

<div class="some-element" data-0="transform:translate3d(0, 0px, 0px); opacity: 1;" data-450="transform:translate3d(0px, 125px, 0px); opacity: 0;">

According to parent section;

<section id="parallax-section">
    <div class="some-element" data-anchor-target="#parallax-section" data-bottom-top="transform:translate3d(0, -50px, 0px);" data-top-bottom="transform:translate3d(0px, 100px, 0px);">Some element</div>
</section>

NOTEYou can use this plugin on slider layers. An example is here Oxygen Demo 04

Contact Forms

Contact form:

Example contact form is here;

<!-- Start contact form -->
<form id="contact-form" name="contact-form" class="contact-form validate-me" method="post" action="php/mail.php" autocomplete="off">

    <!-- Row for inputs -->
    <div class="row">
        
        <!-- Name -->
        <div class="col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="text" name="name" id="name" required class="py-25 px-25 b-transparent fs-18 bg-gray2 dark-placeholder mt-30">
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please enter your name.
            </div>
        </div>

        <!-- E-mail address -->
        <div class="col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="email" name="email" id="email" required class="py-25 px-25 b-transparent fs-18 bg-gray2 dark-placeholder mt-30">
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please enter a valid e-mail.
            </div>
        </div>

        <!-- Subject -->
        <div class="col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input type="text" name="subject" id="subject" class="py-25 px-25 b-transparent fs-18 bg-gray2 dark-placeholder mt-30">
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please enter a valid e-mail.
            </div>
        </div>

        <!-- Verify -->
        <div class="col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input type="text" name="verify" id="verify" class="py-25 px-25 b-transparent fs-18 bg-gray2 dark-placeholder mt-30">
        </div>

        <!-- Message -->
        <div class="col-12 mr-0 ml-0 animated" data-animation="fadeInUp" data-animation-delay="200">
            <textarea name="message" id="message" class="py-25 px-25 b-transparent fs-18 bg-gray2 dark-placeholder mt-30"></textarea>
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please type your message.
            </div>
        </div>

        <!-- Send Button -->
        <div class="col-12 text-center animated" data-animation="fadeInUp" data-animation-delay="300">
            <button type="submit" id="submit" class="send-button">SEND MESSAGE</button>
        </div>

    </div>
    <!-- End Row for inputs -->
</form>
<!-- End contact form -->

Customize Contact Forms

Contact form:

Example contact form is here;

<!-- Start contact form -->
<form id="contact-form" name="contact-form" class="contact-form" method="post" 1 action="php/mail.php" autocomplete="off">

    <!-- Row for inputs -->
    <div class="row">
        
        <!-- Name -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="text" 2 name="name" id="name" required class="contact-input">
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please enter your name.
            </div>
        </div>

        <!-- E-mail address -->
        <div class="input-wrapper col-md-6 col-12 mr-0 animated" data-animation="fadeInUp" data-animation-delay="0">
            <input type="email" name="email" id="email" 3 required class="contact-input">
            <div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please enter a valid e-mail.
            </div>
        </div>

        <!-- Subject -->
        <div class="input-wrapper col-md-6 col-12 ml-0 animated" data-animation="fadeInUp" data-animation-delay="100">
            <input 4 type="text" name="subject" id="subject" class="contact-input">
        </div>

        <!-- Message -->
        <div class="input-wrapper textarea-wrapper col-12 mr-0 ml-0 animated" data-animation="fadeInUp" data-animation-delay="200">
            <textarea name="message" id="message" class="contact-input"></textarea>
            5<div class="invalid-tooltip top-3 mt-0 bg-transparent p-0 text-danger fs-16 font-main">
                Please type your message.
            </div>
        </div>

        <!-- Send Button -->
        <div class="col-12 text-center animated" data-animation="fadeInUp" data-animation-delay="300">
            <button type="submit" id="submit" class="send-button">SEND MESSAGE</button>
        </div>

    </div>
    <!-- End Row for inputs -->
</form>
<!-- End contact form -->

Important and selected points:

Action You should point to your contact form is where to transfers the form datas. Classic forms transfers to php/mail.php file, but there is more ready to use php files for use another form types like anvanced.
Name Php scripts getting datas from name areas. So, if you add more inputs, you should give new names to them and add this names to php script. For example:
```

<input type="text" name="address" id="address" required class="contact-input">
```
You should add $address = $_POST['address']; code to your mail php file, line 17. Also you should add this input to your mail body. For example;
```
Phone: {$phone} 
Address: {$address} 
Subject: {$subject} 
```
You can add or remove a lot of form elements to your contact form.
Required You can add required attribute to important inputs. Forms can not be submitted without filling correct them.
Type If you use correct type for inputs, your form is works better on mobile and large devices. For example, email type for E-mail inputs, or numbers type for number inputs.
Tooltips These elements are invisible first. If you click on send button with missing fields, these warnings will be visible on missing inputs. They will be invisible after they filled.

How to work contact forms:

PHP You need add your smtp address, a mailer (noreply) address, password of mailer address and your own address. Please follow:

$mail->Host = "smtp.example.com"; - Set the hostname of the mail server.
$mail->Port = 587; - Set the SMTP port number - likely to be 25, 465 or 587
$mail->Username = "noreply@example.com"; - Username to use for SMTP authentication, your noreply address.
$mail->Password = "noreplyPassword"; - Password to use for SMTP authentication. Password of noreply address, not your address.
$mail->addAddress('whoto@example.com', 'John Doe'); - Set who the message is to be sent to - Your Address

Note All codes have detailed descriptions in the php files.

Mailchimp:

You can use MailChimp With Oxygen, on the footer. Example MailChimp form is here:

<div id="footer-newsletter" class="footer-newsletter">
    <form id="newsletter-form" name="newsletter-form" class="newsletter-form" method="post" action="php/newsletter.php">
        <input type="email" name="n-email" id="n-email" required placeholder="Add your E-Mail address">
        <button type="submit" id="n-submit" name="submit" class="send-button">SUBSCRIBE</button>
    </form>
    <div class="success-message">
        <h4 class="title font-secondary">Thank you!</h4>
        <p class="desc">
            Your subscription is successfully! <br>
            Thanks for being part of the community.
        </p>
    </div>
</div>

PHP editings - Open php/newsletter.php file and please follow:

Step 1 - Put your MailChimp API - How get your Mailchimp API KEY - Gen an API Key

$api_key = 'your_api_key_goes_here';

Step 2 - Put your list Id here - How get your Mailchimp LIST ID - Get Your Lis ID

$list_id = 'your_list_ID_goes_here';

You can also edit your success message on line 22 - newsletter.php file.

Welcome to Oxygen Documentation

Oxygen Creative Template Documentation

Installation

Example html page

Skins and Colors

A Few Examples:

Navigation Types

`#01` Fixed Navigation Visit example

`#02` Static Navigation Visit example

Responsive Options

How it works:

Grid Options:

Equal Width:

Vertical alignment:

Self align:

Horizontal alignment:

Sliders and Carousels

Swiper Slider:

Background color and images

Background Images:

Background Colors:

Text Colors:

Use Together:

Parallax animations

Skrollr animations:

Contact Forms

Contact form:

Customize Contact Forms

Contact form:

Important and selected points:

How to work contact forms:

Mailchimp:

Credits And Sources

Welcome to Oxygen Documentation

Oxygen Creative Template Documentation

Installation

Example html page

Skins and Colors

A Few Examples:

Navigation Types

#01 Fixed Navigation Visit example

#02 Static Navigation Visit example

Responsive Options

How it works:

Grid Options:

Equal Width:

Vertical alignment:

Self align:

Horizontal alignment:

Sliders and Carousels

Swiper Slider:

Lightbox Using

Gallery Type:

Single Item:

Background color and images

Background Images:

Background Colors:

Text Colors:

Use Together:

Parallax animations

Skrollr animations:

Contact Forms

Contact form:

Customize Contact Forms

Contact form:

Important and selected points:

How to work contact forms:

Mailchimp:

Credits And Sources

`#01` Fixed Navigation Visit example

`#02` Static Navigation Visit example