Made by Pe Themes
Cygni Interactive Portfolio Showcase Template
Theme Documentation v1.0
01. Getting Started

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 Cygni from Themeforest, you need to login your account and download template files from Themeforest. Please make sure you downloaded All file & Documentation option.


What is included?


After you downloaded template files you will find inside it;

01. Cygni - Tempalte files for installation
02. Documentation
- Contains Cygni template documentation

02. Installation
1. Choosing Layout

If you want to use light version of template, you can directly upload the folder named "light" into your server.

If you want to use dark version of template, please follow these steps below;

Step 1: Go to folder named "dark" and copy all files.

Step 2: Go to folder named "light" and paste all files and replace them.

2. Template installation

Step 1: Login to your hosting server via FTP client.

Step 2: Locate the domain folder you wish to upload Cygni.

Step 3: Upload Cygni theme files in your domain server

03. Page Settings

In Cygni we highly recommend you to use page settings div for all settings you want to change in a page.

When you start editing a page you will see page-settings div below the #main div.

    <!-- Site Content -->
    <div id="main" class="content">

        <!-- Page Settings -->
        <div class="page-settings" data-layout="light" data-header-style="dark" data-menu-layout="dark"></div>
        <!--/ Page settings -->


Cygni 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-layout ------ light or dark
data-header-style ------ light or dark
data-menu-layout ------ light or dark
data-menu-style ------ classic or full
data-background ------ color code like #121212

03. Header
1. Site Identity

The first step of customizing a template is adding your logo.
You'll see site-branding class below header section.

        <!-- Branding -->
        <div class="site-branding">
            <img class="dark-logo" src="images/cygni-logo.png" alt="Site Logo">
            <img class="light-logo" src="images/cygni-logo-light.png" alt="Site Light Logo">
        </div>
        <!-- /Branding -->
2. Site Navigation

Again in the header section you'll see menu ul. Here you can edit main menu URLs and titles.

                <!-- Navigation -->
                <ul class="menu">

                    <!-- Main Menu -->
                    <li class="menu-item"><a href="index.html">Home</a>
                    <li class="menu-item has-children menu-item-active"><a href="#">Works</a>
                        <!-- Sub Menu -->
                        <ul class="sub-menu">
                            <li class="menu-item has-children"><a href="big-slider.html">Big Slider</a></li>
                            <li class="menu-item has-children"><a href="list.html">List Carousel</a></li>
                            <li class="menu-item has-children"><a href="vertical.html">Vertical</a></li>
                            <li class="menu-item has-children"><a href="horizontal.html">Horizontal</a></li>
                            <li class="menu-item has-children"><a href="wall.html">Wall</a></li>
                        </ul>
                        <!--/ Sub Menu -->
                    </li>
                    <li class="menu-item"><a href="about.html">About</a></li>
                    <li class="menu-item"><a href="journal.html">Journal</a></li>
                    <li class="menu-item"><a href="contact.html">Contact</a></li>
                    <!-- /Main Menu -->

                </ul>
                <!-- /Navigation -->

There's some important points when you editing menu:

1. If you're adding a Submenu, parent menu item must have has-children class.
2. Menu item which belong the current page must have menu-item-active class

3. Menu Widget Areas

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-wrapper mww-1">
                <div class="menu-widget">
                    <div class="menu-widget-title">
                        WE ARE ALWAYS HERE;
                    </div>

                    <h5>19, Avenue du Président <br>Wilson 75116, Paris</h5>
                    <h5>+9 (0) 512 69 78</h5>
                </div>
            </div>
            <!--/ Menu Widget (Left) -->
04. Showcase Pages
1. Big Slider

This a fullscreen slider which has the detailed information it's projects.
Let's take a look how to edit this.

                    <!-- Project -->
                    <div class="big-slider-item">

                        <!-- Project URL -->
                        <a href="project-2.html"></a>
                        <!--/ Project URL -->

                        <div class="top">
                            <!-- Project Category -->
                            <div class="category">branding</div>
                            <!--/ Project Category -->

                            <!-- Project Title -->
                            <div class="title">Flavia Botanicals</div>
                            <!--/ Project Title -->
                        </div>

                        <!-- Project Summary -->
                        <div class="summary">
                            Touch base make it look like digital. Push back can we align on lunch orders, yet can you put it on my calendar?
                        </div>
                        <!--/ Project Summary -->

                        <!-- Project Year -->
                        <div class="year">2020</div>
                        <!--/ Project Year -->

                        <!-- Project Metas -->
                        <div class="meta">
                            <div><span class="meta-title">Client</span>STRADE</div>
                            <div><span class="meta-title">Biref</span>Redesign</div>
                        </div>
                        <!--/ Project Metas -->

                        <!-- Project Featured Image -->
                        <div class="image">
                            <img src="images/projects/fleava/bs_cov.jpg" alt="Big Slider Project Image">
                        </div>
                        <!--/ Project Featured Image -->

                    </div>
                    <!--/ Project -->

a tag - The target URL which belong this project

category - Project's work category eg. "photography"

title - Project's main title

summary - A little brief about project

year - Project release date

meta - Other details for project you can add unlimited informations here.

image - Add porject's image or video (only .mp4 videos supported).

Project button text
You can also edit the "View Project" button text here;

 <div class="big-slide-button">View Project</div>
2. List Carousel

A list based carousel page this can be also control swiping or with the arrows.
Let's take a look how to edit this.

                    <!-- Project -->
                    <div class="list-image swiper-slide">

                        <!-- Project URL -->
                        <a href="project-5.html"></a>
                        <!--/ Project URL -->

                        <!-- Project Title -->
                        <div class="list-p-title">Diamond</div>
                        <!--/ Project Title -->

                        <!-- Project Metas -->
                        <div class="list-titles-meta">
                            <span>2009</span>
                            <span>SALEUR</span>
                            <span>VIDEO PRODUCTION</span>
                        </div>
                        <!--/ Project Metas -->

                        <!-- Project image -->
                        <div class="list-image-wrapper">
                            <video>
                                <source src="images/projects/diamond/big-cov.mp4">
                            </video>
                        </div>
                        <!--/ Project Image -->

                    </div>
                    <!--/ Project -->

a tag - The target URL which belong this project

list-p-title - Project's Title

list-titles-meta - Other details for project you can add unlimited informations here.

image - Add porject's image or video (only .mp4 videos supported).

3. Wall

A project wall template for low number projects.
Let's take a look how to edit this.

                <!-- Project -->
                <div class="wall-project">

                    <!-- Project URL --><a href="project-5.html">

                        <!-- Project Image -->
                        <div class="project-image">
                            <img src="images/projects/diamond/image_3.jpg" alt="Wall Project Image">
                        </div>
                        <!--/ Project Image -->

                        <!-- Project Title -->
                        <div class="title">
                            Diamond
                        </div>
                        <!--/ Project Title -->

                        <!-- Project Category -->
                        <div class="category">
                            2009
                        </div>
                        <!--/ Project Category -->
                    </a>
                </div>
                <!--/ Project -->

a tag - The target URL which belong this project

project-image - Add porject's image or video (only .mp4 videos supported).

title - Project's Title

category - Project's work category.

4. Horizontal

A horizontal slider for projects.
Let's take a look how to edit this.

                    <!-- Project -->
                    <div class="horizontal-item">

                        <!-- Project Image -->
                        <div class="horizontal-image">
                            <img src="images/projects/gold-and-gold/bs_cov.jpg" alt="Horizontal Project Image">
                        </div>
                        <!--/ Project Image -->

                        <!-- Project Title -->
                        <div class="title">Magic #thegolden</div>
                        <!--/ Project Title -->

                        <!-- Project Year -->
                        <div class="year">2019</div>
                        <!--/ Project Year -->

                        <!--/ Project URL -->
                        <a class="project-url" href="project-10.html"></a>
                        <!--/ Project URL -->

                    </div>
                    <!--/ Project -->

project-image - Add porject's image or video (only .mp4 videos supported).

title - Project's Title

year - Project release date

project-url - The target URL which belong this project

5. Vertical

Vertical projects showcase.
Let's take a look how to edit this.

                <!-- Project -->
                <div class="vertical-item" data-scroll>

                    <!-- Project URL --><a class="vertical-item-link" href="project-6.html"> </a>

                    <!-- Project Image -->
                    <div class="vertical-image-wrapper">
                        <img src="images/projects/basic-magazine/wall_cov.jpg" alt="Vertical Project Image">
                    </div>
                    <!--/ Project Image -->


                    <!-- Project Meta-->
                    <div class="vertical-item-meta" data-scroll data-scroll-speed="2">

                        <!-- Project Category -->
                        <span class="vertical-category">Photography</span>
                        <!--/ Project Category -->

                        <!-- Project Title -->
                        <div class="vertical-item-title">
                            Basic Magazine
                        </div>
                        <!--/ Project Title -->

                    </div>
                    <!--/ Project Meta-->

                </div>
                <!--/ Project -->

vertical-item-link - The target URL which belong this project

vertical-image-wrapper - Add porject's image or video (only .mp4 videos supported).

vertical-item-category - Project's work category.

vertical-item-title - Project's Title



You can also edit bakcground text here;

 <div class="vertical-back-text" data-scroll data-scroll-speed="1" data-scroll-direction="horizontal">Selected <br> Works</div>
05.Project Pages
1. Project Header Image

You can enter an image or video in this section (only .mp4 videos supported).

                <!-- Project Image -->
                <div class="project-image">
                    <img src="images/projects/juno/scp_head.jpg" alt="Project Header Image">
                </div>
                <!--/ Project Image -->

There's some spesific classes can be used for project header image: project-image-full and no-overlays.
If you enter project-image-full class; image will be fit on screen height.
If you enter no-overlays class; there's not an overlay will be displayed on the image.

2. Project Top Place

You can eneter the project title and project category here;

                <div class="project-top">

                    <!-- Project Category -->
                    <div data-delay=".2" class="project-work has-animation skew-down">
                        Production
                    </div>
                    <!-- Project Category -->

                    <!-- Project Title -->
                    <div class="project-title has-animation skew-up">
                        Juno
                    </div>
                    <!-- Project Title -->

                </div>

project-work - The category of the project.

project-title - Title of the project.

3. Project Metas

You can eneter other project metas here, you can add unlimited informations here;

                <!-- Project Metas -->
                <div class="project-meta">

                    <div data-delay=".7" class="has-animation skew-up"><span class="pm-tit">Client: </span>Hennessy</div>

                    <div data-delay=".8" class="has-animation skew-up"><span class="pm-tit">Year: </span>2019</div>

                    <div data-delay=".9" class="has-animation skew-up"><span class="pm-tit">Role: </span>Web Arts</div>

                </div>
                <!-- Project Metas -->

pm-tit - Title of the current detail.

4. Project Summary

A short biref belong the project;

                 <!-- Project Summary -->
                <div data-delay="1" class="project-summary has-animation lines-up">
                   Deploy we need to dialog around your choice of work attire, or let's put a pin in that good optics. Time vampire sacred cow if you want to motivate these clowns, try less carrot and more stick cloud native container based yet usabiltiy, so herding cats. Deploy to production. 
                </div>
                <!-- Project Summary -->
5. Project Content

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.

6. Next Project Sectıon

You can set next project navigation here:

            <!-- Next Project Setion -->
            <div class="projects-nav">

                <div class="next-project">
                    <!-- Next Project URL -->
                    <a href="project-4.html">
                        <div class="next-project-wrapper">

                            <span class="next-project-span has-animation skew-up">Next Project</span>

                            <!-- Next Project Title -->
                            <h1 class="next-project-title has-animation skew-up">Vanessa Claro</h1>
                            <!--/ Next Project Title -->
                        </div>

                        <!-- Next Project Image -->
                        <div class="next-project-image-wrapper">
                            <img src="images/projects/vanessa-claro/bs_cov.jpg" alt="Next Project Image">
                        </div>
                        <!--/ Next Project Image -->

                    </a>
                    <!--/ Next Project URL -->
                </div>

            </div>
            <!--/ Next Project Setion -->

next-project-span - You can change "Next Project" text.

next-project-title - Next project's title.

next-image-wrapper - Add porject's image or video (only .mp4 videos supported).

06.Blog
1. Blog Posts Page

Cygni's blog posts page is very easy to customize for everyone.

1. Background Text The scrolling big text on background.

            <!-- Background Text -->
            <div class="j-back">Journal</div>
            <!--/ Background Text -->


2. Blog Page Title A title for the blog page and a caption.

                <!-- Blog Page Title -->
                <div class="pe-blog-stamp">
                    <div class="caption has-animation skew-up">JOURNAL</div>
                    <div class="blog-page-title has-animation skew-up">Latest Stories</div>
                </div>
                <!-- Blog Page Title -->


3. Post Single post view for posts page;
You can add sticky class for first post.

                <!-- Post -->
                <div class="pe-post">
                    <!-- Post URL --><a href="single-post.html">

                        <!-- Post Image -->
                        <div class="pe-post-featured">
                            <img src="images/post_02.jpg" alt="Post Image">
                        </div>
                        <!--/ Post Image -->

                        <!-- Post -->
                        <div class="post-meta">

                            <!-- Post Category -->
                            <div class="post-cat">BLOG</div>
                            <!--/ Post Category -->

                            <!-- Post Title -->
                            <div class="post-title">
                                Run it up the flagpole a tentative event rundown is attached.
                            </div>
                            <!--/ Post Title -->

                        </div>
                        <!--/ Post Meta -->

                    </a>
                </div>
                <!--/ Post -->

a tag - Post URL for click.

pe-post-features - Post featured image.

post-cat - Post category.

post-title - Title of the post.

2. Single Post Page

1. Post Header Section which you can add post title, meta and image.

             <!-- Post Heeader -->
            <div class="pe-post-header">

                <!-- Post Meta -->
                <div class="pe-single-post-meta wrapper-small">
                    <div data-delay=".75" class="caption has-animation lines-up">
                        19 DECEMBER 2020 - BLOG
                    </div>

                    <!-- Post Title -->
                    <div data-delay=".6" class="pe-single-post-title has-animation skew-up">
                        Blue money message the initiative and product launch synergies.
                    </div>
                    <!--/ Post Title -->

                </div>
                <!--/ Post Meta -->

                <!-- Post Image -->
                <div class="pe-single-post-image wrapper">
                    <div class="image-wrapper has-animation slide-left">
                        <img src="images/post_09.jpg" alt="Single Post Image">
                    </div>
                </div>
                <!--/ Post Image -->

            </div>
            <!--/ Post Heeader -->

pe-single-post-meta - Add the post's metas.

pe-single-post-title - Post's main title.

pe-single-post-image - Post featured image.

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.

06. Page Building
1. Grid system

Cygni 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 if you want to add a layered background color for the setion you need to add data-background attribute in it eg. data-background: #124566.
The gris system consists of 3 layers;

                <!-- Section -->
                <div class="section">

                </div>
                <!--/ Section -->

2. Wrappers: The second layer for screen sizing this is the most important layer for a good design. Cygni has two type of wrappers wrapper and wrapper-small

                <!-- 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. Cygni'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 -->
2. Shortcodes

Cygni 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">

                                <div class="caption has-animation skew-up">ABOUT PROJECT</div>

                                <h3 class="has-animation lines-fade-up">
                                    Minimize backwards overflow focus on the customer journey yet quick sync run it up the flagpole, ping the boss and circle back crisp ppt for quantity.
                                </h3>
                                <p data-delay="0.2" class="big-p has-animation lines-fade-up">
                                    Baseline the procedure and samepage your department my capacity is full, or clear blue water what's our go to market strategy?. Root-and-branch review race without a finish line pixel pushing, or 60% to 30% is a lot of persent zeitgeist so regroup and blue sky. Highlights high turnaround rate win-win-win idea shower.
                                </p>

                            </div>
                            <!--/ Text wrapper -->

2. Image Wrapper: 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.

                            <!-- Image Wrapper -->
                            <div class="image-wrapper has-animation slide-top">
                                <img src="images/projects/juno/image_3.jpg" alt="Single Image">
                            </div>
                            <!--/ Image Wrapper -->

3. Embed Videos: You can create speciliazed Youtube and Vimeo embed videos. These embed videos has two styles you can choose wich you want

1. Autoplay video

                        <!-- Embed Video -->
                        <div class="pe-embed-video">
                            <div class="pe-video" data-plyr-provider="youtube" data-plyr-embed-id="LcSevy6HUQc"></div>
                        </div>
                        <!--/ Embed Video -->

2. Static Video

                            <div class="pe-video-style-2">
                                <div class="video-control">
                                    <i class="icon-play"></i>
                                    <img class="video-cover-image" src="images/projects/whiteboard-fluid/video_cover.jpg" alt="Video Cover Image">
                                </div>
                                <div class="pe-video-2" data-plyr-provider="vimeo" data-plyr-embed-id="389464589"></div>
                            </div>

You just need to enter data-plyr-provider and data-lyr-embed-id attributes.

4. Image Carousel: An inner carousel shortcode you just need to add your images.

                            <!-- Carousel -->
                            <div class="pe-carousel swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="pe-carousel-item swiper-slide">
                                        <img alt="Carousel Image" src="images/projects/vanessa-claro/image_9.jpg">
                                    </div>

                                    <div class="pe-carousel-item swiper-slide">
                                        <img alt="Carousel Image" src="images/projects/vanessa-claro/image_10.jpg">
                                    </div>

                                    <div class="pe-carousel-item swiper-slide">
                                        <img alt="Carousel Image" src="images/projects/vanessa-claro/image_11.jpg">
                                    </div>

                                    <div class="pe-carousel-item swiper-slide">
                                        <img alt="Carousel Image" src="images/projects/vanessa-claro/image_12.jpg">
                                    </div>

                                </div>

                                <span class="carousel-navigate">
                                    <i class="fa fa-chevron-left"></i>
                                    <i class="fa fa-chevron-right"></i>
                                </span>
                            </div>
                            <!--/ Carousel -->

5. Accordion: Animated accordion section for services and other informations.

                        <!-- Accordion -->
                        <div class="c-accordion">
                            <div class="accordion-list">
                                <ul>
                                    <li class="accordion-title">Creative direction
                                        <p class="accordion-content ac-active">
                                            Our new office is located in a workshop in a paved courtyard typical of Belleville. This long building mixes several living and creative spaces on different levels: a large open space for shared work</p>
                                    </li>
                                    <li class="accordion-title">Brand Indentity
                                        <p class="accordion-content">
                                            Our new office is located in a workshop in a paved courtyard typical of Belleville. This long building mixes several living and creative spaces on different levels: a large open space for shared work</p>
                                    </li>
                                    <li class="accordion-title">UI/UX Design
                                        <p class="accordion-content">
                                            Our new office is located in a workshop in a paved courtyard typical of Belleville. This long building mixes several living and creative spaces on different levels: a large open space for shared work</p>
                                    </li>
                                    <li class="accordion-title">Video / Animation
                                        <p class="accordion-content">
                                            Our new office is located in a workshop in a paved courtyard typical of Belleville. This long building mixes several living and creative spaces on different levels: a large open space for shared work</p>
                                    </li>
                                    <li class="accordion-title">Creative direction
                                        <p class="accordion-content">
                                            Our new office is located in a workshop in a paved courtyard typical of Belleville. This long building mixes several living and creative spaces on different levels: a large open space for shared work</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--/ Accordion -->

6. Team Member An aniamted element for displaying a team member and his social connections.

                        <!-- Team Member -->
                        <div class="team-member">

                            <!-- Team Member Image -->
                            <div class="team-member-image">
                                <img src="images/team/5.png" alt="Team Member Image">
                            </div>
                            <!--/ Team Member Image -->

                            <div class="team-member-details">

                                <!-- Team Member Name -->
                                <div class="team-member-name">
                                    Blossom Pugh
                                </div>
                                <!--/ Team Member Name -->

                                <!-- Team Member Position -->
                                <span class="team-member-pos">
                                    Co-Founder
                                </span>
                                <!--/ Team Member Position -->

                            </div>

                            <!-- Team Member Socials-->
                            <ul class="member-socials">
                                <li><a style="color: #053eff" target="_blank" href="http://behance.net"><i class="icon-behance"></i></a></li>
                                <li><a style="color: #ea4c89" target="_blank" href="#"><i class="icon-dribbble"></i></a></li>
                                <li><a style="color: #08a0e9" target="_blank" href="#"><i class="icon-twitter"></i></a></li>
                                <li><a style="color: #3b5998" target="_blank" href="#"><i class="icon-facebook"></i></a></li>
                                <li><a style="color: #0e76a8" target="_blank" href="#"><i class="icon-linkedin"></i></a></li>
                            </ul>
                            <!--/ Team Member Socials-->

                        </div>
                        <!--/ Team Member -->

7. Forms Specialized forms for Cygni.

                        <!-- Contact Form -->
                        <div class="c-form">

                            <form action="/" method="post">

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Name
                                    </label>
                                    <input placeholder="Who are you?" type="text" required autocomplete="off" />
                                </div>
                                <!--/ Form Field -->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        E-mail
                                    </label>
                                    <input placeholder="You'll not see any ads" type="email" required autocomplete="off" />
                                </div>
                                <!--/ Form Field -->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Phone
                                    </label>
                                    <input placeholder="Promise we'll not disturb" type="email" required autocomplete="off" />
                                </div>
                                <!--/ Form Field-->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Subject
                                    </label>
                                    <input placeholder="This can be just love." type="email" required autocomplete="off" />
                                </div>
                                <!--/ Form Field -->

                                <!-- Form Field (Textarea)-->
                                <div class="message-wrap">
                                    <label>
                                        Your message
                                    </label>
                                    <textarea rows="8" placeholder="Looking forward for your precious words.."></textarea>
                                </div>
                                <!--/ Form Field (Textarea)-->

                                <!-- Checkbox -->
                                <div class="privacy-wrap">
                                    <input type="checkbox" />
                                    <span>Accept Privacy</span>
                                </div>
                                <!--/ Checkbox -->

                                <!-- Button -->
                                <div class="send-wrap">
                                    <button type="submit" class="button button-block">Submit</button>
                                </div>
                                <!--/ Button -->

                            </form>
                        </div>
                        <!--/Contact Form -->
3. Scroll Animations

Cygni has a lots of scroll animation types 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-animation class to which element you want to animate.
Step 2: After you added has-animation class you need to add animation class name eg. fade-in-up.

Code should be like that;

<h1 class="has-animation fade-in-up">Stay <br>in touch.</h1>

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"

After you set all the things for an animations whole code should be like that:

<p data-duration="1" data-delay="0.5" class="big-p has-animation lines-fade-up">
  Big picture this is a no-brainer
</p>



Here's a list about all the animation classes and acceptable element types:

fade-in - All Elemets
fade-in-up - All Elemets
fade-in-down - All Elemets
fade-in-left - All Elemets
fade-in-right - All Elemets
skew-up - All Elemets
skew-down - All Elemets
lines-up - Text elements (p, h1, h2 etc.)
lines-down - Text elements (p, h1, h2 etc.)
lines-fade-up - Text elements (p, h1, h2 etc.)
lines-fade-down - Text elements (p, h1, h2 etc.)
slide-up - Images
slide-down - Images
slide-left - Images
slide-right - Images

08.Footer

Cygnı has two type of footer styles; "Fullscreen Footer" and "Site Footer".
Fullscreen Footer using some on fullscreen pages (showcase pages)
Site Footer using on inner pages.

1. Fullscreen Footer

You can add your content inside of ff-left and ff-right classes.

        <!-- Fullscreen Footer -->
        <div class="fullscreen-footer">
            
            <!-- Fullscreen Footer Left Side -->
            <div class="ff-left">
                <a href="mailto:hello@pethemes.com">SAY HELLO!</a>
            </div>
            <!--/ Fullscreen Footer Left Side-->
            
            <!-- Fullscreen Footer Right Side -->
            <div class="ff-right">
                <ul class="ff-socials">
                    <li><a href="#">Fb</a></li>
                    <li><a href="#">Tw</a></li>
                    <li><a href="#">Be</a></li>
                </ul>
            </div>
            <!--/ Fullscreen Footer Right Side -->
            
        </div>
        <!--/ Fullscreen Footer -->
2. Site Footer

As you can see site footer is builded with Cygni's grid system you can customize it with shortcodes and grid system elements.

        <!-- Footer -->
        <footer class="site-footer">


            <!-- Fullwidth Wrapper -->
            <div class="wrapper">

                <!-- Column -->
                <div class="c-col-12">
                    <h1 class="thin" style="margin: 0">Do you have a project or an idea?
                        <br><a class="underline" href="#">hello@pethemes.com</a>
                    </h1>

                </div>
                <!--/ Column -->

            </div>
            <!-- Fullwidth Wrapper -->

            <!-- Fullwidth Wrapper -->
            <div style="margin-bottom: 75px" class="wrapper-full">

                <div class="c-col-6 hide-mobile"></div>

                <!-- Column -->
                <div class="c-col-3 no-gap">
                    <div class="caption">VISIT</div>
                    <h5>32 Avenue of the Americas
                        <br>New York, NY 10013
                        <br>United States
                    </h5>

                </div>
                <!--/ Column -->

                <!-- Column -->
                <div class="c-col-3 no-gap">
                    <div class="caption">FOLLOW</div>

                    <!-- Footer List -->
                    <ul class="footer-list">
                        <li><a href="#" class="underline">Facebook</a></li>
                        <li><a href="#" class="underline">Twitter</a></li>
                        <li><a href="#" class="underline">Behance</a></li>
                        <li><a href="#" class="underline">Instagram</a></li>
                    </ul>
                    <!-- Footer List -->
                </div>
                <!--/ Column -->

            </div>
            <!-- Fullwidth Wrapper -->

            <!-- Wrapper -->
            <div style="margin-bottom: 0" class="wrapper">

                <!-- Column -->
                <div class="c-col-6">

                    <!-- Footer Menu -->
                    <ul class="footer-menu ">
                        <li><a href="#">Terms</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                        <li><a href="#">Purchase</a></li>
                    </ul>
                    <!--/ Footer Menu -->

                </div>
                <!-- Column -->

                <!-- Column -->
                <div class="c-col-6 align-right">
                    <p class="copyright-text">Pe Themes - CYGNI®, inc 20 - 20©</p>
                </div>
                <!-- Column -->

            </div>
            <!-- Wrapper -->


        </footer>
        <!--/ Footer -->