Thank you for your purchase! If you have any questions that you feel should have been in this document, please log in using the account used to purchase the file and email via my user page contact form here. Thanks so much!
For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priority. You will need some knowledge of HTML/CSS to edit this theme
Do not start from scratch, use an existing page we were created and modify it, it will save you time and better for your performance at work.
Quickly find what you're looking for in this document by using your browser's "Find in Page" feature, typically Control+F (Command+F).
Trying to locate/replace text, styles or code in themes? "Find in Files" command which is commonly found in any decent text editor which will save you hours of searching.
Please use Sublime Text Editor (Recommend).
Getting an error message, chances are someone else has seen it too, try a google search for a quick fix.
Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.
Please use image dimension same the image dimension in our template.
Don't forget to re-explore the live demo for layouts, usage ideas and sample code.
You can really easily customize all part of site or build new.
This div contains the loading screen
<!-- Load page -->
<div class="animationload">
<div class="loader"> </div>
</div>
<!-- End load page -->
You can select between 2 menu styles (index.html or index1.html).
Menu has the following structure.
<!-- Start Menu section -->
<nav class="menu">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<!-- start menu block (profile) -->
<a href="profile.html" class="menu-li">
<!-- img menu block -->
<span class="foto">
<img src="./assets/img/menu/profile.png" class="menu-img" data-img-name="profile" alt="Ukieweb" />
</span>
<!-- name menu block -->
<span class="name">Profile</span>
</a>
<!-- end menu block (profile) -->
<!-- start menu block (resume) -->
<a href="resume.html" class="menu-li">
<!-- img menu block -->
<span class="foto">
<img src="./assets/img/menu/resume.png" class="menu-img" data-img-name="resume" alt="Ukieweb" />
</span>
<!-- name menu block -->
<span class="name">Resume</span>
</a>
<!-- end menu block (resume) -->
<!-- start menu block (portfolio) -->
<a href="portfolio.html" class="menu-li">
<!-- img menu block -->
<span class="foto">
<img src="./assets/img/menu/portfolio.png" class="menu-img" data-img-name="portfolio" alt="Ukieweb" />
</span>
<!-- name menu block -->
<span class="name">Portfolio</span>
</a>
<!-- end menu block (portfolio) -->
<!-- start menu block (contact) -->
<a href="contact.html" class="menu-li">
<!-- img menu block -->
<span class="foto">
<img src="./assets/img/menu/contact.png" class="menu-img" data-img-name="contact" alt="Ukieweb" />
</span>
<!-- name menu block -->
<span class="name">Contact</span>
</a>
<!-- end menu block (contact) -->
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</nav>
<!-- End Menu section -->
Home has the following structure.
<!-- Start Home-header section -->
<section class="home-header border-bottom padding-block">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-5 col-lg-5 text-right">
<!-- Your foto -->
<div class="foto">
<img src="./assets/img/photo.png" />
</div>
<!-- end your foto -->
</div>
<div class="col-xs-12 col-sm-7 col-lg-7">
<!-- Your Name -->
<h1 class="title">Jonh Doe</h1>
<!-- Your Profession -->
<h3 class="sub-title">Web Designer & Mobile Application Developer</h3>
<!-- social icon -->
<div class="social">
<ul class="animated" data-animation="fadeIn" data-animation-delay="600">
<!-- social icons -->
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-youtube"></i></a></li>
<!--
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-behance"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-digg"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-deviantart"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-envelope-square"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-delicious"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-instagram"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-dropbox"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-skype"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-tumblr"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-vimeo-square"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-flickr"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-github-alt"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-renren"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-vk"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-xing"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-weibo"></i></a></li>
<li><a class="ukie-icons hover-animate" href="#"><i class="fa fa-rss"></i></a></li>
-->
</ul>
</div>
<!-- end social icon -->
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- End Home-header section -->
Head section has the following structure.
<!-- Start Head section -->
<header class="head">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-8 col-sm-11 col-lg-11">
<img class="logo-page" src="./assets/img/profile_l.png" />
<!-- Title Page -->
<h2 class="title">Profile</h2>
<!-- Description Page -->
<h4 class="sub-title">A Brief About Me</h4>
</div>
<div class="col-xs-4 col-sm-1 col-lg-1 text-right">
<a href="index.html" class="btn-close hover-animate"></a>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</header>
<!-- End Head section -->
Content section has the following structure.
<<!-- Start Content section -->
<section class="content border-bottom padding-block">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-7">
<h3 class="title">Hello, I am web designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>
<a href="#" class="btn hover-animate">Hire me Now</a>
<a href="#" class="btn btn-color hover-animate">Download CV</a>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-lg-5">
<div class="block-grey">
<table>
<tr>
<td class="font-weight-m">Name</td>
<td class="text-right">John Doe</td>
</tr>
<tr>
<td class="font-weight-m">Date of birth</td>
<td class="text-right">November 24, 1990</td>
</tr>
<tr>
<td class="font-weight-m">E-mail</td>
<td class="text-right"><a href="mailto:info@yourdomain.com">info@yourdomain.com</a></td>
</tr>
<tr>
<td class="font-weight-m">Address</td>
<td class="text-right">144 King St, Melbourne VIC</td>
</tr>
<tr>
<td class="font-weight-m">Phone</td>
<td class="text-right"><a href="tel:01234567890">012-3456-7890</a></td>
</tr>
<tr>
<td class="font-weight-m">Website</td>
<td class="text-right"><a href="www.themeforest.net">www.themeforest.net</a></td>
</tr>
</table>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- End Content section -->
Info section has the following structure.
<!-- Start Info section -->
<section class="info border-bottom padding-block text-center">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<h3 class="title">What i’m doing</h3>
</div>
</div>
<!-- end row -->
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<div class="circle-block ">
<span class="icon hover-animate"><i class="fa fa-android"></i></span>
<span class="name hover-animate">Applications</span>
</div>
<div class="circle-block">
<span class="icon hover-animate"><i class="fa fa-desktop"></i></span>
<span class="name hover-animate">Web design</span>
</div>
<div class="circle-block">
<span class="icon hover-animate"><i class="fa fa-photo"></i></span>
<span class="name hover-animate">Illustrations</span>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- End Info section -->
Pricing section has the following structure.
<<!-- Start Pricing section -->
<div class="pricing padding-block text-center">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<h3 class="title">Pricing</h3>
</div>
</div>
<!-- end row -->
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="table-pricing">
<div class="header-pricing">Applications</div>
<div class="price-pricing">
$59<sup>99</sup>
</div>
<div class="properties-pricing">
<ul>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
CSS Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
JavaScript Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
PHP Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
WordPress
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
Other Options
</li>
</ul>
</div>
<div class="footer-pricing">
<a href="#" class="btn hover-animate">Order Now</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="table-pricing best-pricing">
<div class="header-pricing">Website design</div>
<div class="price-pricing">
$69<sup>99</sup>
</div>
<div class="properties-pricing">
<ul>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
CSS Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
JavaScript Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
PHP Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
WordPress
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
Other Options
</li>
</ul>
</div>
<div class="footer-pricing">
<a href="#" class="btn btn-color hover-animate">Order Now</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="table-pricing">
<div class="header-pricing">Logo design</div>
<div class="price-pricing">
$79<sup>99</sup>
</div>
<div class="properties-pricing">
<ul>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
CSS Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
JavaScript Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
PHP Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
WordPress
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
Other Options
</li>
</ul>
</div>
<div class="footer-pricing">
<a href="#" class="btn hover-animate">Order Now</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="table-pricing">
<div class="header-pricing">Illustrations</div>
<div class="price-pricing">
$129<sup>99</sup>
</div>
<div class="properties-pricing">
<ul>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
CSS Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
JavaScript Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
PHP Coding
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
WordPress
</li>
<li>
<span class="arrow-check"><i class="fa fa-check-circle"></i></span>
Other Options
</li>
</ul>
</div>
<div class="footer-pricing">
<a href="#" class="btn hover-animate">Order Now</a>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- End Pricing section -->
Skills section has the following structure.
<!-- Start Skills section -->
<section class="skills border-bottom padding-block">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-6">
<h3 class="title title-skills">Professional skills</h3>
<label class="progress-bar-label">JavaScript</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">
<span>78%</span>
</div>
</div>
<label class="progress-bar-label">Photoshop</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="96" aria-valuemin="0" aria-valuemax="100">
<span>96%</span>
</div>
</div>
<label class="progress-bar-label">Illustrator</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<span>85%</span>
</div>
</div>
<label class="progress-bar-label">HTML&CSS</label>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<span>60%</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-6">
<h3 class="title title-skills">Additional skills</h3>
<div class="circle-progress-block">
<div class="circle-progress">
<input type="text" class="dial" value="43" data-color="#00b6f9" data-from="0" data-to="99" />
</div>
<label class="circle-progress-label">Communication</label>
</div>
<div class="circle-progress-block">
<div class="circle-progress">
<input type="text" class="dial" value="62" data-color="#00b6f9" data-from="0" data-to="99" />
</div>
<label class="circle-progress-label">English</label>
</div>
<div class="circle-progress-block">
<div class="circle-progress">
<input type="text" class="dial" value="78" data-color="#00b6f9" data-from="0" data-to="99" />
</div>
<label class="circle-progress-label">Humor</label>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- End Skills section -->
Portfolio section has the following structure.
<!-- Start Portfolio section -->
<div class="portfolio-section padding-block">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<!-- Portfolio -->
<div class="portfolio">
<div class="filter_div controls">
<div class="col-xs-12 col-sm-12 col-lg-11">
<ul>
<li class="hover-animate filter active" data-filter="all">All</li>
<li class="hover-animate filter" data-filter=".category-1">Web design</li>
<li class="hover-animate filter" data-filter=".category-2">Illustrations</li>
<li class="hover-animate filter" data-filter=".category-3">Applications</li>
</ul>
</div>
</div>
<div id="portfolio-grid">
<div class="mix col-xs-12 col-sm-6 col-lg-4 portfolio-item category-2">
<div class="within">
<img src="assets/img/portfolio/p1.png" alt="Alt">
<div class="port-item-cont">
<h3 class="title">Project Title</h3>
<p class="desc">Your Project description</p>
<a href="#" class="popup-content view-work hover-animate">View details</a>
</div>
<div class="hidden">
<div class="podrt-desc">
<div class="modal-box-content">
<img src="assets/img/portfolio/p_b1.png" alt="Alt" />
<button class="mfp-close"></button>
<div class="text">
<h3 class="title">Project Title</h3>
<table>
<tr>
<td class="font-weight-m" width="100">Completed</td>
<td>November 2014</td>
</tr>
<tr>
<td class="font-weight-m">Client</td>
<td>Envato</td>
</tr>
</table>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiamae
vitae dicta sunt explicabo.</p>
<a href="" class="btn btn-color">See Live</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end Portfolio -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- End Portfolio section -->
Contact section has the following structure.
<!-- Start Contact Form -->
<div class="contact-form">
<form action="" id="contact-form" method="post">
<input type="text" id="user-name" name="user-name" value="" placeholder="Name" />
<input type="email" id="user-email" name="user-email" value="" placeholder="Email" />
<textarea id="user-message" name="user-message" placeholder="Message"></textarea>
<div class="footer-form">
<input type="submit" class="btn btn-color" value="Send Message" />
<div class="info-message-form">
<p>Please fill out all the fields!</p>
<span class="close-msg"><i class="fa fa-close"></i></span>
</div>
</div>
</form>
</div>
<!-- End Contact Form -->
Blog section has the following structure.
<!-- Start Blog section -->
<section class="blog padding-block">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-8">
<!-- start post -->
<div class="post">
<!-- start photo -->
<div class="photo">
<img src="assets/img/blog/post1.png" alt="UkieWeb">
</div>
<!-- end photo -->
<!-- start title post -->
<h3 class="title title-blog">Standard Post with Image</h3>
<!-- end title post -->
<div class="entry-byline">
<i class="fa fa-user"></i>
<span class="entry-author right-border">
<a href="#" title="Posts by Theme Admin" rel="author" >
<span>Jonh Doe</span>
</a>
</span>
<i class="fa fa-clock-o"></i>
<time class="entry-published right-border">30/04/2015</time>
<i class="fa fa-comment"></i>
<span class="comments-link">30 Comments</span>
</div>
<!-- start desc post -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum dolor.</p>
<!-- end desc post -->
<a href="post-img.html" class="btn hover-animate btn-color-hover">Read More</a>
</div>
<!-- end post -->
<!-- start post -->
<div class="post">
<!-- start photo -->
<div class="photo">
<img src="assets/img/blog/post1.png" alt="UkieWeb">
</div>
<!-- end photo -->
<!-- start title post -->
<h3 class="title title-blog">Standard Post with Image</h3>
<!-- end title post -->
<div class="entry-byline">
<i class="fa fa-user"></i>
<span class="entry-author right-border">
<a href="#" title="Posts by Theme Admin" rel="author" >
<span>Jonh Doe</span>
</a>
</span>
<i class="fa fa-clock-o"></i>
<time class="entry-published right-border">30/05/2015</time>
<i class="fa fa-comment"></i>
<span class="comments-link">65 Comments</span>
</div>
<!-- start desc post -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum dolor.</p>
<!-- end desc post -->
<a href="post-img.html" class="btn hover-animate btn-color-hover">Read More</a>
</div>
<!-- end post -->
<!-- start post -->
<div class="post last">
<!-- start video -->
<div class="video">
<iframe src="//player.vimeo.com/video/22439234?title=0&portrait=0&byline=0" frameborder="0"
allowfullscreen="" replaced="true"></iframe>
</div>
<!-- end video -->
<!-- start title post -->
<h3 class="title title-blog">Standard Post with Video</h3>
<!-- end title post -->
<div class="entry-byline">
<i class="fa fa-user"></i>
<span class="entry-author right-border">
<a href="#" title="Posts by Theme Admin" rel="author" >
<span>Jonh Doe</span>
</a>
</span>
<i class="fa fa-clock-o"></i>
<time class="entry-published right-border">29/05/2015</time>
<i class="fa fa-comment"></i>
<span class="comments-link">5 Comments</span>
</div>
<!-- start desc post -->
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum dolor.</p>
<!-- end desc post -->
<a href="#" class="btn hover-animate btn-color-hover">Read More</a>
</div>
<!-- end post -->
<!-- start pagination -->
<div class="pagination">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="#">2</a>
<a class="page-numbers" href="#">3</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="#">9</a>
<a class="next page-numbers" href="#">Next »</a>
</div>
<!-- end pagination -->
</div>
<div class="col-xs-12 col-sm-12 col-lg-4">
<!-- start slidebar -->
<aside class="widget widget_categories">
<h3 class="widget-title">Categories</h3>
<ul>
<li class="cat-item cat-item-6"><a href="#">Web design</a></li>
<li class="cat-item cat-item-8"><a href="#">Web development</a></li>
<li class="cat-item cat-item-7"><a href="#">Logos & Illustrations</a></li>
<li class="cat-item cat-item-1"><a href="#">Marketing</a></li>
</ul>
</aside>
<aside class="widget widget_recent_entries">
<h3 class="widget-title">Recent Posts</h3>
<ul>
<li><a href="#">Excepteur sint occaecat cupidatat non proident</a></li>
<li><a href="#">Duis aute irure dolor in reprehenderit</a></li>
<li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</a></li>
</ul>
</aside>
<aside class="widget widget_archive">
<h3 class="widget-title">Archives</h3>
<ul>
<li><a href="#">October 2014</a></li>
<li><a href="#">September 2014</a></li>
<li><a href="#">June 2014</a></li>
</ul>
</aside>
<aside class="widget widget_tag_cloud">
<h3 class="widget-title">Tags</h3>
<div class="tagcloud">
<a href="#" class="hover-animate">Web</a>
<a href="#" class="hover-animate">Illustrations</a>
<a href="#" class="hover-animate">Graphic design</a>
<a href="#" class="hover-animate">Applications</a>
<a href="#" class="hover-animate">Photo</a>
<a href="#" class="hover-animate">UkieWeb</a>
</div>
</aside>
<!-- end slidebar -->
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</section>
<!-- End Blog section -->
Footer section has the following structure.
<<!-- Start Footer section -->
<footer class="footer">
<!-- start container -->
<div class="container">
<!-- start row -->
<div class="row">
<!-- start phone number -->
<div class="col-xs-12 col-sm-6 col-lg-3">
<a href="#" class="hover-animate">
<span class="ukie-icons hover-animate"><i class="fa fa-phone"></i></span> +38 012-3456-7890
</a>
</div>
<!-- end phone number -->
<!-- start email -->
<div class="col-xs-12 col-sm-6 col-lg-3">
<a href="#" class="hover-animate">
<span class="ukie-icons hover-animate"><i class="fa fa-paper-plane"></i></span> info@yourdomain.com
</a>
</div>
<!-- end email -->
<!-- start address -->
<div class="col-xs-12 col-sm-6 col-lg-3">
<a href="#" class="hover-animate">
<span class="ukie-icons hover-animate"><i class="fa fa-map-marker"></i></span> 44 King St, Melbourne VIC
</a>
</div>
<!-- end address -->
<!-- start Copyright -->
<div class="col-xs-12 col-sm-6 col-lg-3 text-right">
<span class="copyright">Copyright © 2015 All right reserved</span>
</div>
<!-- end Copyright -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</footer>
<!-- End Footer section -->
Similarly for other patterns.
I used some CSS files in this template. By using of them, we can work round this. Those files also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere.
CSS has the following structure:
If you create you own styles you must check all the sizes of responsive so all works ok, if you need to change your own styles at certain size you will do it at respons.css.
You can see some help info, when click links which are below each regarding script:
To add new scripts you can use scripts.js or create your own js
You can change the counter in scripts.js:
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.
If you have a more general question relating to the themes on ThemeForest, basic HTML/CSS/JavaScript related questions, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Regards,
UkieWeb