Preloader
For activating the preloader copy and paste the below code into the body element.
<body data-offset="60">
<!--Preloader-->
<div class="preloader">
<div class="preload-animation-container">
<div class="ball"></div>
</div>
</div>
<!--End of preloader-->Page
There was a two types of pages: Full width and Card.
If you want to use full width type of page, copy – paste this example into your document.
<!--Page-->
<div class="page page-full" data-type="main">
<div class="p-card">
<!--Page Content HERE-->
</div>
</div>If you want to use card type of page, copy – paste this example into your document.
<!--Page-->
<div class="page page-card" data-type="main">
<div class="p-card">
<!--Page Content HERE-->
</div>
</div>Page Type
Add “data-type=”post”” to page element for identifying post page, or add “data-type=”main”” to page element for identifying main page
<!--Page-->
<div class="page" data-type="post"><!--Page-->
<div class="page" data-type="main">Header
To use the header copy – paste this example into your document.
<!--Page-->
<div class="page page-card" data-type="main">
<div class="p-card">
<!--Header-->
<header class="navigation">
<ul class="nav" id="navigation">
<li>
<a href="#home" class='active nav-link'>
<i class="icon icon-shop"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="#about" class='nav-link'>
<i class="icon icon-user"></i>
<span>About</span>
</a>
</li>
<li>
<a href="#portfolio" class="nav-link">
<i class="icon icon-photo"></i>
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#resume" class="nav-link">
<i class="icon icon-graduation-cap"></i>
<span>Resume</span>
</a>
</li>
<li>
<a href="#blog" class="nav-link">
<i class="lnr icon-doc"></i>
<span>Blog</span>
</a>
</li>
<li>
<a href="#contact" class="nav-link">
<i class="icon icon-mail"></i>
<span>Contact</span>
</a>
</li>
</ul>
</header>
<!--End of Header-->Change Navigation Type
To change Navigation Menu type add your choosen classname to header element
- header-1: Only Icon
- header-2: Icon and Label in bottom
- header-3: Icon and Label in right.
<!--Header-->
<header class="navigation header-1">Slide Animation Type
If you would like to change the slide animation, you would change data-open and data-close attributes of card_container element
<!--SLIDE TYPE - CHANGE data-open and data-close attributes-->
<div class="card_container close-container" id="container" data-open="animate__backInLeft" data-close="animate__backOutLeft">Here you can see some off animation classes.
- animate__backInLeft || animate__backOutLeft
- animate__fadeIn || animate__fadeOut
- animate__rollIn || animate__rollOut
- animate__flipInY || animate__fadeOut
- animate__zoomIn || animate__zoomOut
- animate__slideInDown || animate__slideOutDown
For more information visit here
How to add Item in Portfolio Section
You can add images, embedded videos (YouTube, Vimeo), and links in the portfolio section.
If you want to add images, use portfolio-image class name:
<!--Portfolio Image Type-->
<a href="./assets/images/cp1.jpg" class="portfolio-single portfolio-image">If you want to show embedded link, use portfolio-ifram classname
<!--Portfolio Video / Youtube Type-->
<a href="https://www.youtube.com/watch?time_continue=85&v=oC1m-dTFX6g" class="portfolio-single iframe_popup">If you want to add permalink, no need to add additional classname
<!--Portfolio Link Type-->
<a href="https://themeforest.net/" class="portfolio-single" target="_blank">