ikonik Documentation

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, you can sign up to our support forums with your purchase code and start a ticket, and please rate the template on themeforest if you liked it. Thanks so much!
- Pixelwars Team

Support Forums

Any questions that are beyond the scope of this help file, use support forums.

Visit Support Forums

Rate The Theme

If you liked the theme you can rate it on themeforest in your downloads menu.

Rate on themeforest

We assume you have basic knowledge of HTML / CSS and JS. In this doc you will not learn how to code but you will learn how to setup, use and customize the theme. Before you begin make sure you have a code editor, you can use Dreamweaver or any other editor like Notepad++ will be enough.

Within the download you'll find the following file structure, logically groupped common assets.

There are two project folders in the the downloaded package, one contains Dreamweaver Template and other one contains Plain Html template.

Once downloaded, unzip the compressed folder to see the structure of th theme. You'll see something like this:

  ikonik/
  ├── audio/
  ├── css/
  ├── images/
  ├── js/
  ├── Templates/
  └── index.html
  └── other html files

If you have Dreamweaver, and you are going to build a static html site with this template you can benefit template files in "Templates" folder. Template files includes layout markup shared by all pages, and once you have updated a template all pages that inherits that template are automatically updated. For example if you create a new site in Dreamweaver, then copy all project files to this site folder, then open "layout.dwt" under "Templates/" folder and update some parts in the markup in "layout.dwt", when you save it, all pages' markup will be updated. Check out this article for more about Dreamweaver templates. Here are the Dreamweaver template files in this project;

layout.dwt Includes general layout markup shared by all pages.

In this template you will find all HTML files in well formatted and highly commented. Most of the markup is self explanatory with comments. So i will only explain the parts where the markup needs more attention.

Doctype

Uses plain HTML5 Doctype

<!DOCTYPE html>

Html tag

html tag with custom html5 data attributes for easy customizing. You can learn more about in customization section

<html lang="en" class="no-js one-page-layout sound-effects" data-audio-tick="audio/tick.mp3" data-click-ripple-animation="yes">

Head tags contains meta tags, font / css and some script files, other script files are added just before the closing tag of the body.

Here are meta tags and title. You can edit them as you want except the viewport meta tag, it preserves responsive layout.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="ikonik - Responsive HTML5 vCard Template">
<meta name="keywords" content="vcard, html5, portfolio">
<meta name="author" content="Pixelwars">
<meta name="theme-color" content="#1755cf" />

Here are favicon and apple touch icon (196x196 pixels .png format);

<!-- FAV and TOUCH ICONS -->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon" href="images/ico/apple-touch-icon.png"/>

Note : For full coverage of favicon usage you can visit RealFaviconGenerator.

Here is the font css.

<!-- FONTS -->
<link rel="stylesheet" href="css/fonts/jost/jost.css">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">

Initial scripts in the head.

<!-- INITIAL SCRIPTS -->
<script src="js/jquery-3.4.0.min.js"></script>

Here are css files.

<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="js/nprogress/nprogress.css">
<link rel="stylesheet" type="text/css" href="js/jquery.magnific-popup/magnific-popup.css">
<link rel="stylesheet" type="text/css" href="css/fonts/fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="css/align.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/768.css">

All other script files are located at the end of the body tag. These are the general script files used over all files.

<!-- SCRIPTS -->
<script src="js/TweenMax.min.js"></script>
<script src="js/jquery.address.js"></script>
<script src="js/nprogress/nprogress.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.sticky-sidebar.min.js"></script>
<script src="js/main.js"></script>

Homepage shows 5 pages : About Me + Resume + Portfolio + Blog(latest posts only) + Contact. Pages are fetched via ajax and being showed in a fullscreen layout.

The HTML files are in well formatted and highly commented.

Homepage Markup

Here is the markup for homepage layout;

<body>
	<!-- .home-wrap -->
    <div class="home-wrap">


        <!-- HOME BG IMAGE -->
        <div class="home-bg" style="background-image: url(images/home/cover.jpg)"></div>
        <!-- HOME BG IMAGE -->


        <!-- HOME BG LOGO -->
        <div class="home-bg-logo">
            <img src="images/home/icon-bg.svg" alt="icon" />
        </div>
        <!-- HOME BG LOGO -->


        <!-- .home-menu -->
        <nav class="home-menu">
            <a href="about.html" data-slug="about">
                <span class="item-name">About</span>
            </a>
            <a href="resume.html" data-slug="resume">
                <span class="item-name">Resume</span>
            </a>
            <a href="portfolio.html" data-slug="portfolio" id="portfolio-link">
                <span class="item-name">Portfolio</span>
            </a>
            <a href="blog-latest.html" data-slug="blog">
                <span class="item-name">Blog</span>
            </a>
            <a href="contact.html" data-slug="contact">
                <span class="item-name">Contact</span>
            </a>
        </nav>
        <!-- .home-menu -->


        <!-- .home-heading -->
        <div class="home-heading">

            <!-- .home-logo -->
            <div class="home-logo">

                <p class="home-job-title">Web Developer</p>

                <p class="home-marquee">
                    Building creative websites for the world's people. Always in search
                    of the great user experience.
                    Building creative websites for the world's people. Always in search
                    of the great user experience.
                </p>

                <i class="home-logo-left "><span>Web</span></i>
                <i class="home-logo-center">
                    <span class="home-icon">
                        <img src="images/home/icon.svg" alt="icon" />
                    </span>
                    <span class="home-text-container">
                        <span class="home-text-container-placeholder">Jason Whallberg</span>
                    </span>
                    <span class="home-text">Jason Whallberg</span>
                </i>
                <i class="home-logo-right"><span>Developer</span></i>

            </div>
            <!-- .home-logo -->

        </div>
        <!-- .home-heading -->


        <!-- .home-social -->
        <p class="home-social">
            <a class="social-link facebook" href="#"></a>
            <a class="social-link linkedin" href="#"></a>
            <a class="social-link behance" href="#"></a>
            <a class="social-link dribbble" href="#"></a>
        </p>
        <!-- .home-social -->


        <!-- .home-footer -->
        <p class="home-footer">© 2019 Jack O'Connor</p>
        <!-- .home-footer -->


        <!-- FULL SCREEN TOGGLE -->
        <div class="full-screen-wrap">
            <div class="top-left"></div>
            <div class="top-left-horiz"></div>
            <div class="top-right"></div>
            <div class="top-right-horiz"></div>
            <div class="bottom-left"></div>
            <div class="bottom-left-horiz"></div>
            <div class="bottom-right"></div>
            <div class="bottom-right-horiz"></div>
        </div>
        <!-- FULL SCREEN TOGGLE -->


		
        <!-- REMOVE THIS MARKUP TO DISABLE BG AUDIO -->
        
        <div class="bg-music-confirm">
            <p>Autoplay Music?</p>
            <p><a class="bg-music-yes">Yeah!</a> <a class="bg-music-no">Nope</a> </p>
        </div>
		
        <!-- HOME BG MUSIC -->
        <div id="play-music" class="play-music autoplay">
            <div id="music-animation" class="music-animation">
                <span class="music-bar bar1"></span>
                <span class="music-bar bar2"></span>
                <span class="music-bar bar3"></span>
                <span class="music-bar bar4"></span>
                <span class="music-bar bar5"></span>
            </div>
            <div class="music-toggle" id="music-toggle"><a id="toggle" data-on-text="Music on" data-off-text="Music off">Music off</a></div>
        </div>

        <audio id="bg-music" loop src="audio/music2.mp3"></audio>
        <!-- HOME BG MUSIC -->

        <!-- REMOVE THIS MARKUP TO DISABLE BG AUDIO -->



    </div>
    <!-- .home-wrap -->




    <!-- .one-page-content-->
    <div class="one-page-content">

        <a href="/" class="close-page">
            <span class="close-text"></span>
        </a>

        <div class="content-wrap"></div>

    </div>
    <!-- .one-page-content-->


    <!-- page transition overlays -->
    <div class="overlay overlay-1"></div>
    <div class="overlay overlay-2"></div>
    <!-- page transition overlays -->



    <!-- PORTFOLIO SINGLE AJAX CONTENT CONTAINER -->
    <div class="p-overlay"></div>
    <div class="p-overlay"></div>
	

        
</body>

Note : Homepeage ajax pages may not work on your local machine due to the browser security restrictions, you need to start a local server (you can do it with VS Code Live Server extension) or upload your site to a live server(web).

This template is based on Bootstrap's solid responsive 12 column grid system.

Here is a simple example of using grid to crate a 3 column layout;

<div class="row">
  <div class="col-md-4">column 4/12</div>
  <div class="col-md-4">column 4/12</div>
  <div class="col-md-4">column 4/12</div>
</div>

Note that: columns must be wrapped by a row container. This is a simple usage of the grid system. Bootstrap grid sytems has more powerfull features, check out Bootstrap Doc to learn more about the grid system.

This template uses 1 font icon set. They are all font icons(vector) and can be styled easily with css. They are also easy to drop in anywhere as you will see in some part of this template.

All Available Icons

Fontello Icons

Usage of the icons

For Fontello icons;

<i class="pw-icon-apple">

Icons on the homepage

Meticulous Icon Family

"About Me" page is consist of : Services / Work Process / Fun Fact and Clients.

Services

<div class="boxed is-dark">
  <div class="row">

    <div class="col-sm-3">
      <img src="images/site/about.jpg" alt="about image">
    </div>

    <div class="col-sm-9">

      <h2 class="fw-300">Hello, I am Jason Whallberg, a <strong>graphic
          designer</strong> based in LA.
        I can design beautiful <strong>type faces</strong> and
        <strong>user
          interfaces</strong> for both digital and print
        media and I love coffee.
      </h2>

    </div>

  </div>
</div>

              

<!-- SERVICES -->

<!-- section-title -->
<div class="section-title center">
	<h2>
		<i>services</i>
	</h2>
</div>
<!-- section-title -->

<!-- row -->
<div class="row">

	<!-- col -->
	<div class="col-sm-6 col-lg-3">

		<!-- service -->
		<div class="service">
			<img src="images/site/service-01.svg" alt="image" />
			<h3>Copywriter</h3>
			<p>I design super cool websites. It is a long established fact that
				a reader will be distracted by the readable content.</p>
		</div>
		<!-- service -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-sm-6 col-lg-3">

		<!-- service -->
		<div class="service">
			<img src="images/site/service-02.svg" alt="image" />
			<h3>Game Dev</h3>
			<p>I can design beautiful type faces for both digital and print
				media. It is a long established fact that a reader will be
				distracted.</p>
		</div>
		<!-- service -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-sm-6 col-lg-3">

		<!-- service -->
		<div class="service">
			<img src="images/site/service-03.svg" alt="image" />
			<h3>Management</h3>
			<p>I write about web design. It is a long established fact that a
				reader will be distracted by the readable content.</p>
		</div>
		<!-- service -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-sm-6 col-lg-3">

		<!-- service -->
		<div class="service">
			<img src="images/site/service-04.svg" alt="image" />
			<h3>Problem Solver</h3>
			<p>I have strong project management skills. It is a long
				established fact that a reader will be distracted by the
				readable content.</p>
		</div>
		<!-- service -->

	</div>
	<!-- col -->

</div>
<!-- row -->
<!-- SERVICES -->

You can also use font icons instead of image icons in services.

Work Procces

<!-- PROCESS -->

<!-- section-title -->
<div class="section-title center">
	<h2>
		<i>work procces</i>
	</h2>
</div>
<!-- section-title -->


<!-- row -->
<div class="row">

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-01.svg" alt="image" />
			<h4>Research</h4>
		</div>
		<!-- process -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-02.svg" alt="image" />
			<h4>IDEA</h4>
		</div>
		<!-- process -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-03.svg" alt="image" />
			<h4>DESIGN</h4>
		</div>
		<!-- process -->

	</div>

	<!-- col -->

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-04.svg" alt="image" />
			<h4>DEVELOP</h4>
		</div>
		<!-- process -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-05.svg" alt="image" />
			<h4>TEST</h4>
		</div>
		<!-- process -->

	</div>
	<!-- col -->

	<!-- col -->
	<div class="col-xs-4 col-sm-2">

		<!-- process -->
		<div class="process">
			<img src="images/site/process-06.svg" alt="image" />
			<h4>LAUNCH</h4>
		</div>
		<!-- process -->

	</div>
	<!-- col -->

</div>
<!-- row -->
<!-- PROCESS -->

You can also use image icons instead of font icons in work procces.

The markup for clients and fun-fact are pretty straightforward.

Resume page is consist of : Work and Education History/ Skills / Testimonials.

Skills

Here is the markup for skills;

<!-- .skill-unit -->
<div class="skill-unit">
	<h4>Sketch</h4>
	<div class="bar" data-percent="80">
		<div class="progress"></div>
	</div>
</div>
<!-- .skill-unit -->

<!-- .skill-unit -->
<div class="skill-unit">
	<h4>Adobe XD</h4>
	<div class="bar" data-percent="100">
		<div class="progress"></div>
	</div>
</div>
<!-- .skill-unit -->

Note that : Use data-percent attribute to give percentage to each skill.

Portfolio page has multi column masonry layout and filtering powered by isotope plugin.

Filters

Here is the markup for filters;

<!--FILTERS-->
<ul id="filters" class="filters">
	<li class="current">
		<a href="#" data-filter="*">all</a>
	</li>
	<li>
		<a href="#" data-filter=".media">Media</a>
	</li>
	<li>
		<a href="#" data-filter=".illustration">Illustration</a>
	</li>
	<li>
		<a href="#" data-filter=".video">Video</a>
	</li>
</ul>
<!--FILTERS-->

Note that : data-filter=".design" attiribute keeps the class name of items which will be filtered under same category.

Portfolio Items

Here is the structure of portfolio items;

<!-- PORTFOLIO ITEMS -->
<div class="portfolio-items media-grid masonry" data-layout="masonry" data-item-width="360">

  <div class="media-cell illustration hentry">
	...
  </div>
  
  <div class="media-cell video hentry">
	...
  </div>
  
  <div class="media-cell media hentry">
	..
  </div>
  
</div>
<!-- PORTFOLIO ITEMS -->

data-item-width is the column width for the items in the portfolio grid.

Note that again : class name "video" in <div class="media-cell video hentry"> is related to data-filter=".video" attribute of filter markup.

data-layout determines grid layout, see all isotope layouts. Most used two layouts are masonry and fitRows.

We have 3 different types of portfolio item in general; Ajax Portfolio Details / Lightbox (image - image gallery - video - audio) and Custom Url.

1- Ajax Portfolio Details Link

Uses jquery ajax html loading to show portfolio details. Here is the markup;

<!-- portfolio-item - lightbox image -->
<div class="media-cell media format-image hentry">
	<div class="media-box">
		<img src="images/portfolio/04.jpg" alt="portfolio-post">
		<div class="mask"></div>
		<!-- lightbox - image -->
		<a href="images/portfolio/04.jpg" data-title="by MERCEDES DEBELLARD"
			class="lightbox"></a>
		<!-- lightbox - image -->
	</div>
	<div class="media-cell-desc">
		<h3>Portrait Skecth</h3>
		<p class="category">ligthbox image</p>
	</div>
</div>
<!-- portfolio-item - lightbox image -->



<!-- portfolio-item - lightbox gallery -->
<div class="media-cell media format-gallery hentry">
	<div class="media-box">
		<img src="images/portfolio/03.jpg" alt="portfolio-post">
		<div class="mask"></div>
		<!-- lightbox - gallery -->
		<a href="images/portfolio/lightbox-01.jpg" class="lightbox"
			data-title="Portraits by MERCEDES DEBELLARD"></a>
		<a href="images/portfolio/lightbox-02.jpg" class="lightbox"
			data-title="Portraits by MERCEDES DEBELLARD"></a>
		<a href="images/portfolio/lightbox-03.jpg" class="lightbox"
			data-title="Portraits by MERCEDES DEBELLARD"></a>
		<a href="images/portfolio/lightbox-04.jpg" class="lightbox"
			data-title="Portraits by MERCEDES DEBELLARD"></a>
		<!-- lightbox - gallery -->
	</div>
	<div class="media-cell-desc">
		<h3>Wizard Adventure</h3>
		<p class="category">lightbox gallery</p>
	</div>
</div>
<!-- portfolio-item - lightbox gallery -->



<!-- portfolio-item - lightbox video -->
<div class="media-cell illustration video format-video hentry">

	<div class="media-box">
		<img src="images/portfolio/09.jpg" alt="portfolio-post">
		<div class="mask"></div>
		<!-- lightbox - video -->
		<a href="https://vimeo.com/123320091" data-title="An Animated History of the Van"
			class="lightbox mfp-iframe"></a>
		<!-- lightbox - video -->
	</div>

	<div class="media-cell-desc">
		<h3>Sleepy Games</h3>
		<p class="category">lightbox video</p>
	</div>

</div>
<!-- portfolio-item - lightbox video -->



<!-- portfolio-item - lightbox soundcloud -->
<div class="media-cell media format-audio hentry">
	<div class="media-box">
		<img src="images/portfolio/05.jpg" alt="portfolio-post">
		<div class="mask"></div>
		<!-- lightbox - soundcloud : url copied from share/embed code -->
		<a href="https://w.soundcloud.com/player/?visual=true&auto_play=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F221650664&show_artwork=true"
			data-title="Time (feat. G-Eazy & Olivver the Kid)"
			class="lightbox mfp-iframe"></a>

		<!-- lightbox - soundcloud -->
	</div>
	<div class="media-cell-desc">
		<h3>Changes</h3>
		<p class="category">lightbox soundcloud</p>
	</div>
</div>
<!-- portfolio-item - lightbox soundcloud -->

Note that : lightbox video or audio link need to have class mfp-iframe to work correctly.

3- Custom Url

Opens a custom url in a new tab. The markup;

<!-- portfolio-item - custom url -->
<div class="media-cell illustration format-link hentry">
	<div class="media-box">
		<img src="images/portfolio/07.jpg" alt="portfolio-post">
		<div class="mask"></div>
		<a href="https://dribbble.com/shots/5926608-Creatin-Way-The-Right-Way" target="_blank"></a>
	</div>
	<div class="media-cell-desc">
		<h3>Creatin — Way The Right Way</h3>
		<p class="category">external link</p>
	</div>
</div>
<!-- portfolio-item - custom url -->

Remember : You need to create an html file for for each portfolio item.

Portfolio Single Layout

Here is the generic layout of portfolio single pages;

<!-- .portfolio-single -->
<div class="portfolio-single page-layout">


	<!-- .hentry -->
	<article class="hentry">

		<!-- .entry-header -->
		<header class="entry-header">


			<!-- PORTFOLIO-NAV -->
			<div class="portfolio-nav">
				<span class="prev ajax"><a href="portfolio-item-03.html">Prev</a></span>
				<span class="back"><a href="#/portfolio">Close</a></span>
				<span class="next ajax"><a href="portfolio-item-02.html">Next</a></span>
			</div>
			<!-- PORTFOLIO-NAV -->

			<!-- TITLE -->
			<h1 class="entry-title">Vans illustrations</h1>
			<!-- TITLE -->

		</header>
		<!-- .entry-header -->


		<!-- .entry-content -->
		<div class="entry-content">


			<!-- .portfolio-desc -->
			<div class="portfolio-desc">

				<p>Vans isn't longer just a skateboarding brand, is become a broader lifestyle brand. The Old Skool and Classic Vans inspired me to create a series of figures that represent this new lifestyle and also explore new principles, organic and geometric shapes that are also associated with the products.
</p>

				<div class="portfolio-meta">
					<span><strong>Client</strong> Vans</span>
					<span><strong>Date</strong> 2019-03-01</span>
					<span><strong>Services</strong> Branding, Illustration</span>
				</div>

				<p>
					<a href="https://www.behance.net/gallery/77400809/Vans-Faces"
						target="_blank" class="button primary">LAUNCH PROJECT</a>
				</p>

			</div>
			<!-- .portfolio-desc -->


			<p>
				<img src="images/portfolio/single/01.jpg" alt="project">
				<img src="images/portfolio/single/02.jpg" alt="project">
				<img src="images/portfolio/single/03.jpg" alt="project">
			</p>





		</div>
		<!-- .entry-content -->


	</article>
	<!-- .hentry -->


</div>
<!-- .portfolio-single -->

Note : we will pull the content of <div class="portfolio-single"> in index.html via ajax.

NOTE : You can add images or videos as many as you wish to portfolio single content as shown above. They will behave flexible.

NOTE : You can built your own portfolio single templates with built in bootstrap responsive grid as you wish.

Contact page is consist of : Contact Info / Social Icons / Contact Form / Google Map.

Setting up Contact Form

1-) You can change mail subject in form's html markup;

<!-- enter mail subject here -->
<input type="hidden" name="subject" id="subject" value="You have a new message from ikonik!">

Change only the value="You have a new message from ikonik!" to your desired subject.

2-) Edit send-mail.php in a text editor,

// site owner
$site_name = 'ikonik HTML5 Template';
$sender_domain = 'server@your-domain.com';
$to = 'your-mail@gmail.com';

$site_name : this will be shown as sender name.
$sender_domain : this is required for some hosting like dreamhost. It should be like server@your-domain.com.
$to : This is the receiver e-mail address, your address.

Social Icons

Here is the markup for all available social icons;

<!-- SOCIAL -->
<p class="center">
    <a class="social-link facebook" href="#"></a>
    <a class="social-link twitter" href="#"></a>
    <a class="social-link linkedin" href="#"></a>
    <a class="social-link google-plus" href="#"></a>
    <a class="social-link pinterest" href="#"></a>
    <a class="social-link github" href="#"></a>
    <a class="social-link behance" href="#"></a>
    <a class="social-link dribbble" href="#"></a>
    <a class="social-link instagram" href="#"></a>
    <a class="social-link lastfm" href="#"></a>
    <a class="social-link rss" href="#"></a>
    <a class="social-link vimeo" href="#"></a>
    <a class="social-link forrst" href="#"></a>
    <a class="social-link skype" href="#"></a>
    <a class="social-link vine" href="#"></a>
    <a class="social-link youtube" href="#"></a>
    <a class="social-link flickr" href="#"></a>
    <a class="social-link tumblr" href="#"></a>
    <a class="social-link blogger" href="#"></a>
    <a class="social-link delicious" href="#"></a>
    <a class="social-link digg" href="#"></a>
    <a class="social-link wordpress" href="#"></a>
    <a class="social-link stack-overflow" href="#"></a>
    <a class="social-link foursquare" href="#"></a>
    <a class="social-link xing" href="#"></a>
    <a class="social-link weibo" href="#"></a>
    <a class="social-link vkontakte" href="#"></a>
    <a class="social-link soundcloud" href="#"></a>
    <a class="social-link fivehundredpx" href="#"></a>
    <a class="social-link slideshare" href="#"></a>
    <a class="social-link spotify" href="#"></a>
    <a class="social-link imdb" href="#"></a>
    <a class="social-link snapchat" href="#"></a>
    <a class="social-link email" href="mailto:someone@example.com"></a>
</p>
<!-- SOCIAL -->

Here is a complete list of used css files in the theme and what thay stand for;

normalize.css : Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
bootstrap.min.css : Bootstrap is a powerful front-end framework and we only used the responsive grid system for our layout.
fontello.css : includes styles for fontello font icons.
nprogress.css : style file fo the nprogress script file.
magnific-popup.css : is the style file of Magnific Popup jquery plugin, used for lightboxes on portfolio page.
align.css : content alignment styles (image alignments etc..).
main.css : is the main style file of the theme. Layout/font/color and other style declerations are in this file. Code blocks are grouped and commented.
768.css : is the main style file for the theme, contains tablet and desktop styles.

Included Fonts

In this theme we have used font icons instead of png icons, because font icons are vector-scalable, ready for retina screens, saves bandwidth and easy to work with.

css/fonts/fontello : a custom set of icons from Fontello.com, mostly used for social icons.
css/fonts/jost : Jost* is a beautiful font created by indestructible type*.

We are using jquery (v3.2.1) as javascipt framework.

Here is a complete list of used script files in the template and what thay stand for;

jquery-3.4.0.min.js : jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
TweenMax.min.js : TweenMax is the most feature-packed (and popular) animation tool, it used for homepage intro animations.
jquery.address.js : jQuery Address plugin provides powerful deep linking capabilities and allows the creation of unique virtual addresses that can point to a website section or an application state.
nprogress.js : nprogress is a nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
jquery.easing.1.3.js : jQuery Easing Plugin is a jQuery plugin with advanced easing options for custom made animations.
jquery.sticky-sidebar.min.js : Sticky Sidebar is a pure JavaScript plugin for making smart and high performance sticky sidebar.
imagesloaded.pkgd.min.js : imagesLoaded is a jQuery plugin to detect when images have been loaded, used on portfolio single ajax view.
jquery.isotope.min.js : Isotope is an exquisite jQuery plugin for magical layouts. We used it to build portfolio layout and filtering. Also for gallery page layout.
jquery.fitvids.js : fitvids.JS is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. We used it for responsive video embeeding.
jquery.validate.min.js : jQuery validate plugin is a jQuery plugin makes simple client-side form validation. We used it for contact form client-side validation.
jquery.magnific-popup.min.js : is the script file of Magnific Popup jquery plugin, used for lightbox.
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false :is the script file for the google map api, used for the map on the contact page.
main.js : This is the main script file of the theme. All the plugin initilizations and other script works are done in this file with comments.

We designed this template for easy customization. You can customize the template easily to your needs in two general ways : Html Data Attributes / CSS Skins.

While this template is designed for easily styling with predefined css skin files if you want to edit a specific section of the site, follow these steps;

First grab the element you want to style by inspecting element in your browser, right click the element and click Inspect Element. If you don't know how, check out this article, once you are familiar with this approach you will find it extremely easy to edit/override current styles of an element.

Let's say you want to make active filter link item bolder in portfolio filtering. Grab the element by right click on it and click "Inspect Element", on the right pane of developer tool window we can see to code to grab the elemnent with css : #filters .current a Then do the following;

#filters .current a { font-weight: bold; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight .

#portfolio #filters .current a { font-weight: bold ; }

And if your new style is not overriding, add !important at the end of style definition;

#filters .current a { font-weight: bold !important; }

NOTE : Add your custom css code after all style definitions in your head tag.

<style>
	#filters .current a { font-weight: bold !important; }
</style>

Here are some simple css code snippets to customize the essentials;

Change link colors;

a {
 	color: #1851f1;
	}
a:hover {
 	color: #2c00ff;
	}
.cool-link {
	background-image: linear-gradient(transparent 88%, #2c00ff 12%);
	}

Change text-selection color;

/* Text Selection */
::selection {
 	text-shadow: none; color: #fff; background: #000;
	}
::-moz-selection {
 	text-shadow: none; color: #fff; background: #000;
	}

Changing Primary Color

You will see "THEME" section at the end of the main.css file. You can easily change primary color there.

/* PRIMARY COLOR : #1851f1 */
.button:after,
input[type=submit]:hover, 
input[type=button]:hover, 
.more-link:after,
button:hover, 
.pagination a:hover,
.navigation a:hover,
.event:nth-of-type(2):after,
.elementor-widget:nth-of-type(2) .event:after,
.portfolio-nav a:hover,
.skill-unit .bar .progress,
#nprogress .bar,
.media-date,
.home-menu .item-name::before,
.home-menu .item-name::after,
.overlay-2,
.mfp-bg  {
 	background-color: #1851f1;
	}
*::-webkit-scrollbar-thumb {
	background-color: #1851f1;
	}
.bypostauthor > article,
.event h3,
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 
textarea:focus, 
input:focus, 
select:focus,
.tabs .tab-titles li a.active,
input[type=submit], 
input[type=button], 
button, 
.button,
.more-link,
.navigation a {
	border-color: #1851f1
	}
.event h3,
.entry-title a:hover,
input[type=submit], 
input[type=button], 
button, 
.button,
.more-link,
.navigation a,
.filters .current .cool-link {
	color: #1851f1
	}
#nprogress .spinner-icon {
  	border-top-color: #1851f1; border-left-color: #1851f1;
	}

You can check out Customizer.txt file in the theme folder for more options to customize your template. Here is the contents of this file;

ikonik CUSTOMIZER OPTIONS

 - This file is preapared for WordPress Customizer 
 but you can use the css codes below to customize your template with extra css too ;)




--------------------- Customizer > General  


	- Sound Effects (dropdown on/off)
		default		: ON
		class		: add class to html tag: "sound-effects"
		
	- Background Music (file:upload : mp3)
		remove markup on index.html when no mp3 is uploaded
		
	- Background Music Autoplay
		default		: on
		class 		:  *remove autoplay class when OFF

	- Click Ripple Effect (dropdown on/off)
		default		: ON
		html tag data attribute: data-click-ripple-animation="yes"
		


------------------------------------------	
	
	



--------------------- Customizer > Typography


	- Body Font (dropdown Google Fonts List)
		default 	: Jost*
		css			: see below	
	
body,
input,
textarea,
select,
input[type=file] {
	font-family: 'Jost*';
	}
	

	- Body Font Size (input:number - min:10 - max: 30 - steps:1)
		default		: 18px
		css			: @media screen and (min-width: 992px) { body { font-size: 18px; } }				

	- Headings Font (dropdown Google Fonts List)
		default 	: Jost*
		css			: 
h1,
.entry-title {
	font-family: 'Jost*', sans-serif;
	}
	
	- Headings Font Size (input:number - min:10 - max: 100 - steps:2)
		default 	: 62
		css			: @media screen and (min-width: 991px) { h1 { font-size: 62px; } }
	
	- Headings Font Weight (dropdown : 100-900)
		default 	: 400
		css			: h1, .entry-title { font-weight: 400; }


	- Sub Headings Font (dropdown Google Fonts List)
		default 	: Jost*
		css			: see below
	
h2, h3, h4, h5, h6, .filters, .nav-menu, .card-nav, th, dt, .button, .catlinks a, input[type=submit], button, label, .tab-titles, .more-link, blockquote {
 	font-family: 'Jost*', sans-serif;
	}
	

	- Buttons Font Size (input:number - min:9 - max: 20 - steps:1)
		default 	: 11
		css			: input[type=submit], input[type=button], button, .button, .more-link { font-size: 11px; }
	
	- Buttons Font Weight (dropdown : 100-900)
		default 	: 700
		css			: input[type=submit], input[type=button], button, .button, .more-link { font-weight: 700; }
	
	- Buttons Letter Spacing (input:range - min:0 - max: 10 - steps:1)
		default 	: 1
		css			: input[type=submit], input[type=button], button, .button, .more-link { letter-spacing: 1px; }
		
		
	- Blog List Title Font Size (input:number - min:10 - max: 120 - steps:2)
		default 	: 34
		css			: @media screen and (min-width: 991px) { .blog-regular .post .entry-title { font-size: 34px; } }
	
    
------------------------------------------	
	
	
	
	
	
	

--------------------- Customizer > Colors


	- Body Text Color (input:colorpicker)
		default 	: #605561
		css			: body { color: #605561; }

	- Headings Text Color (input:colorpicker)
		default 	: #323232
		css			: h1, h2, h3, h4, h5, h6, blockquote { color: #323232; }

	- Link Color (input:colorpicker)
		default 	: #1851f1
		css			: a { color: #1851f1; }


	- Link Hover Color (input:colorpicker)
		default 	: #2c00ff
		css			: see below

a:hover {
 	color: #2c00ff;
	}
.cool-link {
	background-image: linear-gradient(transparent 88%, #2c00ff 12%);
	}	
	

	- Primary Color (input:colorpicker)	
		default 	: #1851f1
		css			: see below
	
/* PRIMARY COLOR : #1851f1 */
.button:after,
input[type=submit]:hover, 
input[type=button]:hover, 
.more-link:after,
button:hover, 
.pagination a:hover,
.navigation a:hover,
.event:nth-of-type(2):after,
.elementor-widget:nth-of-type(2) .event:after,
.portfolio-nav a:hover,
.skill-unit .bar .progress,
#nprogress .bar,
.media-date,
.cool-link:after,
.home-menu .item-name::before,
.home-menu .item-name::after,
.overlay-2,
.mfp-bg  {
 	background-color: #1851f1;
	}
*::-webkit-scrollbar-thumb {
	background-color: #1851f1;
	}
.bypostauthor > article,
.event h3,
input:not([type=submit]):not([type=button]):not([type=file]):not([type=radio]):not([type=checkbox]):focus, 
textarea:focus, 
input:focus, 
select:focus,
.tabs .tab-titles li a.active,
input[type=submit], 
input[type=button], 
button, 
.button,
.more-link,
.navigation a {
	border-color: #1851f1
	}
.event h3,
.entry-title a:hover,
input[type=submit], 
input[type=button], 
button, 
.button,
.more-link,
.navigation a,
.filters .current .cool-link {
	color: #1851f1
	}
#nprogress .spinner-icon {
  	border-top-color: #1851f1; border-left-color: #1851f1;
	}
	

------------------------------------------





		



--------------------- Customizer > Home 

	- Home Title Font (dropdown Google Fonts List) 
		default 	: Jost*
		css			: 

.home-logo-center,
.home-logo-left,
.home-logo-right {
	font-family: 'Jost*', sans-serif;
	}

	- Home Title Font Weight (dropdown: 100-900)
		default 	: 500
		css			: 
.home-logo-center,
.home-logo-left,
.home-logo-right {
	font-weight: 500;
	}

	- Home Title BG Color (input:colorpicker)
		default 	: #030303
		css			: .home-text-container { color: #030303; }



	- Home Menu Font (dropdown Google Fonts List)
		default 	: Anton
		css			: .home-menu { font-family: 'Anton', sans-serif; }

	- Home Menu Font Weight (dropdown: 100-900)
		default 	: 400
		css			: .home-menu .item-name { font-weight: 400; }


	- Home Image Mask Color  (input:colorpicker)
		default	    : #000
		css			: .home-bg:after, .header:before { background: #000; }
		
	- Home Image Mask Opacity  (input:range - min:0 - max: 1 - steps:0.1)
		default	    : 0
		css			: .home-bg:after, .header:before { opacity: 0.X; }



	- Grid Title Font Size px (input:number - min:10 - max: 30 - steps:1)
		default 	: 19
		css			: @media screen and (min-width: 768px) { .media-grid h3 { font-size: 19px; } }
	
	- Grid Title Font Weight (dropdown : 100-900)
		default 	: 500
		css			: .media-grid h3 { font-weight: 500; }
	
	- Grid Title Text Transform (dropdown : None / Uppercase)
		default 	: None
		none-css	: .media-grid h3 { text-transform: none; }
		uppercase-css	: .media-grid h3 { text-transform: uppercase; }
		
	- Grid Title Letter Spacing (input:range - min:0 - max: 10 - steps:1)
		default 	: 0
		css			: .media-grid h3 { letter-spacing: 0px; }	
	
		
------------------------------------------

Fonts by Google Webfonts

We included some fonts in this template from Google Webfonts which uses font-face technique for font embeeding.

Font declerations are at the head section;

<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">

Changing Fonts

To change fonts, just go to Google Webfonts site, search and select a new font, click "Quick use" link, then copy the stylesheet code from Add this code to your website: / Standart section and paste the code into head section. Then change the font family name in main.css starting from line:65. These font definitions in main.css are the only font definitions for the entire theme, once you have changed font-family in these lines, you are done!

/* ----- 1.2 FONTS ----- */ 
/* BODY */
body,
input,
textarea,
select,
input[type=file] {
	font-family: 'Jost*', sans-serif;
	}

/* HEADING 1 */
h1,
.entry-title {
	font-family: 'Jost*', sans-serif;
	}

/* HOME TITLE */
.home-logo-center,
.home-logo-left,
.home-logo-right {
	font-family: 'Jost*', sans-serif;
	}

/* HOME MENU */
.home-menu {
	font-family: 'Anton', sans-serif;
	}
	
/* HEADINGS */
h2,
h3,
h4,
h5,
h6,
.filters,
.nav-menu,
.card-nav,
th,
dt,
.button,
.catlinks a,
input[type=submit],
button,
label,
.tab-titles,
.more-link,
blockquote {
 	font-family: 'Jost*';
	}

 CREDITS
- thanks to the authors of this beautiful resources



CSS3 Marquee 
https://codepen.io/jonathansampson/pen/qyxdB

JS Detect iOS
https://codepen.io/niggi/pen/DtIfy

Home Icon
https://www.flaticon.com/packs/design-thinking
https://www.flaticon.com/family/meticulous/lineal

Menu Hover Effect
https://tympanus.net/Development/MenuHoverEffects/dustu.html

Page Reveal Effect Inspiration
https://tympanus.net/Tutorials/PageRevealEffects/
https://tympanus.net/Development/BlockRevealers/form.html

Close Icon
https://codepen.io/rsbear/pen/ZpXJVp

Loader #6
https://codepen.io/Paolo-Duzioni/pen/ZoRabJ

Home Image Duotone Effect
https://duotone.shapefactory.co/?f=ff7a6f&t=1c1c61&q=man

Play Music Animation
https://codepen.io/Wujek_Greg/pen/EpJwaj

Silence sound
http://www.minidisc.org/charman/downloads.html

Chrome Audio Autoplay Fix with iframe
https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome

Youtube Music - Mood : Funky
https://www.youtube.com/audiolibrary/music
Music1 : Ticker
Music2 : Toe Jam
Music 3 : Digital Solitude

Multiline Link Hover Animation
https://codepen.io/christiancroser/pen/xqrLBm

Fullscreen Toggle code
https://codepen.io/jacobgDK/pen/azOXdY

Online Audio Converter for reducing file sizes of bg music => 128kbps 
https://online-audio-converter.com/tr/


PORTFOLIO IMAGES
https://www.behance.net/gallery/57704083/Portraits-06


Sound Effects
https://freesound.org/people/qubodup/sounds/60000/
https://freesound.org/people/domingus/sounds/54001/


Resume Icons
https://www.iconfinder.com/iconsets/education-free

Contact Icons
http://www.streamlineicons.com/free-icons.html

Single Page Menu Icons
https://feathericons.com/

nProgress
http://ricostacruz.com/nprogress/

PL Intro Animation
https://codepen.io/karlovidek/full/JvrZBG

Isotope
http://isotope.metafizzy.co/

Yep, that's the end of the file, thanks for reading!

see you on another template ;)

Introductiona quick introduction

created : Nov 2019

by pixelwars

Support Forums

Follow us

Rate The Theme

Getting Startedthings to know before get started

File structure

HTMLhtml structure and layout

Doctype

Html tag

Head

Layout

Homepage Markup

GridResponsive Grid System

Iconsicons ready to use

All Available Icons

Usage of the icons

Icons on the homepage

About Me

Services

Work Procces

Resume

Skills

Portfolio

Filters

Portfolio Items

Portfolio Item Types

1- Ajax Portfolio Details Link

3- Custom Url

Portfolio Single

Portfolio Single Layout

Contact

Setting up Contact Form

Social Icons

CSSstyle files used

Included Fonts

Javascriptscript files used

Customizationhow to customize the template to your needs.

Custom CSS

Changing Primary Color

Fonts

Fonts by Google Webfonts

Changing Fonts

Creditsthanks to the creators of this great files