QARK Modern - HTML Template

Get started

Installation:

QARK Modern is HTML template so there's no really "installation" required just unzip the main file you've downloaded from themeforest and after unziping you have your all template ready to be used.

Setting Up The Grid:

Before starting to work deeper with this template, you'll need to know how to use template's grid, it's simple and easy to use. QARK Modern is being build using one of the most popular grid, the 960 grid, which means your site container is 960px wide.To make it work without problem you be using columns for everything starting from sliders , portfolio , blog and more.

Working With Navigation:

I have used jQuery improved dropdown menu but the menu itself is easy to edit. Its structure base on a nested unorederd lists structure.

Your code should look like the following.

<!-- MAIN NAVIGATION -->
<div class="menu">
    <div class="menu-right-closed"></div>
    <div class="menu-bg">
            <ul class="sf-menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Features</a>
                    <ul>
                        <li><a href="index.html">List Slider (Default)</a></li>
                        <li><a href="homepage-nivo-slider.html">Nivo Slider</a></li>
                        <li><a href="homepage-accordian-slider.html">Accordian Slider</a></li>
                        <li><a href="homepage-3d-slider.html">3D Slider</a></li>
                        <li><a href="homepage-video-block.html">Video Block</a></li>
                        <li><a href="homepage-grid.html">Grid Homepage</a></li>
                        <li><a href="homepage-static.html">Static Homepage</a></li>
                        <li><a href="#">Menu Second Level</a>
                            <ul>
                                <li><a href="#">Some text</a></li>
                                <li><a href="#">Another text</a></li>
                                <li><a href="#">Third Level Menu</a>
                                    <ul>
                                        <li><a href="#">Some text</a></li>
                                        <li><a href="#">Another text</a></li>
                                    </ul>	
                                </li>
                            </ul>	
                        </li>
                    </ul>
                </li>
                <li><a href="#">Pages</a>
                    <ul>
                        <li><a href="about-us.html">Our Company</a>
                            <ul>
                                <li><a href="about-us.html">About Us</a></li>
                                <li><a href="news.html">News Archive</a></li>
                                <li><a href="services.html">Our Services</a></li>
                                <li><a href="our-team.html">Our Team</a></li>
                                <li><a href="testimonials.html">Clients Testimonials</a></li>
                                <li><a href="jobs.html">Career and Job</a></li>
                                <li><a href="faq.html">F.A.Q</a></li>
                            </ul>
                        </li>
                        <li><a href="typography.html">Typography and Features</a></li>
                        <li><a href="columns-layouts.html">Column Layouts</a></li>
                        <li><a href="fullwidth-page.html">Fullwidth Page</a></li>
                        <li><a href="pricing-boxes.html">Pricing Boxes</a></li>
                        <li><a href="404.html">404 Error</a></li>
                    </ul>
                </li>
                <li><a href="#">Portfolio</a>
                    <ul>
                        <li><a href="1-column-portfolio.html">1 Column Portfolio</a></li>
                        <li><a href="2-column-portfolio.html">2 Columns Portfolio</a></li>
                        <li><a href="3-column-portfolio.html">3 Columns Portfolio</a></li>
                        <li><a href="4-column-portfolio.html">4 Columns Portfolio</a></li>
                        <li><a href="portfolio-with-sidebar.html">Portfolio With Sidebar</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                        <li><a href="portfolio-details.html">Portfolio Details</a></li>
                    </ul>
                </li>
                <li><a href="#">Blog</a>
                    <ul>
                        <li><a href="blog.html">Blog</a></li>
                        <li><a href="blog-2.html">Blog Style II</a></li>
                        <li><a href="blog-post.html">Blog Post</a></li>
                    </ul>
                </li>
                <li><a href="contact-us.html">Contact us</a></li>		
            </ul>
    </div>
    <div class="menu-left-closed"></div>
</div>
<!-- END MAIN NAVIGATION -->

Navigation CSS:

/*-------------------------------------------------------------------------------------------------*/
	/*SUPERFISH MENU */
/*-------------------------------------------------------------------------------------------------*/
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:0;
	padding:0;
	list-style:none;
}
.sf-menu ul {
	position:absolute;
	top:-999em;
	width:169px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:169px;
}

.sf-menu li:hover {
	visibility:	inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:left;
	position:relative;
}
.sf-menu a {
	display:block;
	position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0;
	top:2.5em; /* match top ul list item height */
	z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:169px; /* match ul width */
	top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:169px; /* match ul width */
	top:0px;
}

/*** DEMO SKIN ***/
.sf-menu {
	font-size:11px;
	float:left;
	margin-top:20px;
}
.sf-menu a {
	padding:7px 2em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:#666666;
}

.sf-menu a:hover  { /* visited pseudo selector so IE6 applies text colour*/
	color:#ff0099;
}
.sf-menu li {
	background:#ffffff;
}
.sf-menu li li {
	background:#ffffff;
}
.sf-menu li li li {
	background:#ffffff;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	outline:0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right:2.25em;
	min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:absolute;
	display:block;
	right:.75em;
	top:1.05em; /* IE6 only */
	width:	10px;
	height:	10px;
	text-indent:-999em;
	overflow:hidden;
	background:url('../images/arrows.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

For more information please visit this site

Working With Sliders:

List slider

HTML code:

<div id="feature_list">
        <ul id="tabs">
            <li>
                <a href="javascript:;"><img src="images/1.png" alt="" />
                <span class="ls-title">Web Design</span>
                <br/>
                <span class="clear">Lorem ipsum dolor sit amet consect</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                <img src="images/2.png" alt="" />
                <span class="ls-title">Programming</span>
                <br/>
                <span class="clear">Lorem ipsum dolor sit amet consect</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                <img src="images/3.png" alt="" />
                <span class="ls-title">Applications</span>
                <br/>
                <span class="clear">Lorem ipsum dolor sit amet consect</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                <img src="images/4.png" alt="" />
                <span class="ls-title">Marketing</span>
                <br/>
                <span class="clear">Lorem ipsum dolor sit amet consect</span>
                </a>
            </li>
        </ul>
        <ul id="output">
            <li>
                <img src="images/abc-1.jpg" alt="" />
                <a href="#">See project details</a>
            </li>
            <li>
                <img src="images/abc-2.jpg" alt="" />
                <a href="#">See project details</a>
            </li>
            <li>
                <img src="images/abc-3.jpg" alt="" />
                <a href="#">See project details</a>
            </li>
            <li>
                <img src="images/abc-4.jpg" alt="" />
                <a href="#">See project details</a>
            </li>
        </ul>
    </div>

NIVO Slider

HTML code:

<div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
        <img src="images/slide-1.jpg" alt="" />
        <a href=""><img src="images/slide-2.jpg" alt="" title="This is an example of a caption" /></a>
        <img src="images/slide-3.jpg" alt="" />
        <img src="images/slide-4.jpg" alt="" title="#htmlcaption" />
    </div>
    <div id="htmlcaption" class="nivo-html-caption">
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

ACCORDIAN Slider

HTML code:

<div class="kwicks-box">
    <ul class="kwicks horizontal" >
        <li id="kwick_1"><img src="images/slide-1.jpg" alt="" />
            <a href="">
                <p class="accordian-slider-caption">
                    <span class="accordian-slider-captiontitle">
                        Tyrum in fuerat construeret.
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tortor enim, sit amet eleifend lorem. Dolor sit amet, consectetur adipiscing elit.
                    </span>
                </p>
            </a>
        </li>
        <li id="kwick_2"><img src="images/slide-2.jpg" alt="" />
            <a href="">
                <p class="accordian-slider-caption">
                    <span class="accordian-slider-captiontitle">
                        Tyrum in fuerat construeret.
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tortor enim, sit amet eleifend lorem. Dolor sit amet, consectetur adipiscing elit.
                    </span>
                </p>
            </a>
        </li>
        <li id="kwick_3"><img src="images/slide-3.jpg" alt="" />
            <a href="">
                <p class="accordian-slider-caption">
                    <span class="accordian-slider-captiontitle">
                        Tyrum in fuerat construeret.
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tortor enim, sit amet eleifend lorem. Dolor sit amet, consectetur adipiscing elit.
                    </span>
                </p>
            </a>
        </li>
        <li id="kwick_4"><img src="images/slide-4.jpg" alt="" />
            <a href="">
                <p class="accordian-slider-caption">
                    <span class="accordian-slider-captiontitle">
                        Tyrum in fuerat construeret.
                    </span>
                    <span>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tortor enim, sit amet eleifend lorem. Dolor sit amet, consectetur adipiscing elit.
                    </span>
                </p>
            </a>
        </li>
    </ul>
</div>

3D Slider

HTML code:

<div id="piecemaker">
    <p>
        Put your alternative Non Flash content here.
    </p>
</div>

GRID Slider

HTML code:

<div class="mosaic-block mb2 cover">
    <div class="mosaic-overlay"><img src="images/m2.jpg" alt="" /></div>
    <a href="" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>
<div class="mosaic-block mb4 bar">
    <a href="http://www.nonsensesociety.com/2011/01/sloppy-art/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>Sloppy Art - A Mess of Inspiration</h4>
            <p>via the Nonsense Society (image credit: Florian</p>
        </div>
    </a>
    <div class="mosaic-backdrop"><img src="images/m4.jpg" alt="" /></div>
</div>
<div class="mosaic-block mb1 cover2">
    <a href="http://yourather.com/questions/135" target="_blank" class="mosaic-overlay"><img src="images/m1.jpg" alt="" /></a>
    <a href="http://yourather.com/questions/135" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Hardest Choice Ever</h4>
            <p>via You Rather</p>
        </div>
    </a>
</div>
<div class="mosaic-block mb5 bar3">
    <div class="mosaic-overlay"><img src="images/m5.jpg" alt="" /></div>
    <a href="" target="_blank" class="mosaic-backdrop">
    <div class="details">
        <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
        <p>via Desktopped</p>
    </div>
    </a>
</div>   
<div class="mosaic-block mb5 cover3">
    <div class="mosaic-overlay"><img src="images/m5-1.jpg" alt="" /></div>
    <a href="" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>  
<div class="mosaic-block fade mb3">
    <a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay">
        <div class="details">
            <h4>Mighty Social Icons</h4>
            <p>By Build Internet</p>
        </div>
    </a>
    <div class="mosaic-backdrop"><img src="images/m3.jpg" alt="" /></div>
</div>

VIDEO BLOCK

HTML code:

<div id="video-block">
    <iframe src="http://player.vimeo.com/video/23534361?title=0<amp;byline=0<amp;portrait=0" width="940" height="350" >
    </iframe>
</div>

JavaScript initialization

LIST Slider

JS code:

jQuery.noConflict()(function($){
    $(document).ready(function() {

        $.featureList(
            $("#tabs li a"),
            $("#output li"), {
                start_item	:	1
            }
        );
    });
});

NIVO Slider

JS code:

jQuery.noConflict()(function($){
	$(document).ready(function() {
        $('#slider').nivoSlider({
            pauseTime:5000,
            pauseOnHover:false
        });        
    });
});

ACCORDIAN Slider

JS code:

jQuery.noConflict()(function($){
    $('.kwicks').kwicks({
        max : 900,
        spacing : 0
    });
});

3D Slider

JS code:

      var flashvars = {};
      flashvars.cssSource = "css/piecemaker.css";
      flashvars.xmlSource = "js/piecemaker-2/piecemaker.xml";
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";
      swfobject.embedSWF('js/piecemaker-2/piecemaker.swf', 'piecemaker', '940', '350', '0', null, flashvars,    
      params, null);

GRID Slider

JS code:

jQuery.noConflict()(function($){
        
        $('.circle').mosaic({
            opacity		:	0.8			//Opacity for overlay (0-1)
        });
        
        $('.fade').mosaic();
        
        $('.bar').mosaic({
            animation	:	'slide'		//fade or slide
        });
        
        $('.bar2').mosaic({
            animation	:	'slide'		//fade or slide
        });
        
        $('.bar3').mosaic({
            animation	:	'slide',	//fade or slide
            anchor_y	:	'top'		//Vertical anchor position
        });
        
        $('.cover').mosaic({
            animation	:	'slide',	//fade or slide
            hover_x		:	'400px'		//Horizontal position on hover
        });
        
        $('.cover2').mosaic({
            animation	:	'slide',	//fade or slide
            anchor_y	:	'top',		//Vertical anchor position
            hover_y		:	'80px'		//Vertical position on hover
        });
        
        $('.cover3').mosaic({
            animation	:	'slide',	//fade or slide
            hover_x		:	'400px',	//Horizontal position on hover
            hover_y		:	'300px'		//Vertical position on hover
        });
    
    });

Column Layouts and Headers

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a ipsum ut odio lobortis consequat nec at orci.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a ipsum ut odio lobortis consequat nec at orci.

One Half Last

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a ipsum ut odio lobortis consequat nec at orci. Sed porttitor enim in neque consectetur sit amet porttitor orci commodo. Maecenas ac ante interdum magna rhoncus aliquet vel ac massa.

Tthree Fourth

One Fourth Last

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a ipsum ut odio lobortis consequat nec at orci.

One Third

Tthree Third Last

One

Column Layouts:
===ONE FOURTH COLUMN===

<div class="one-fourth">
    <div class="header-one-fourth">
        <div class="header-content">HEADER TITLE</div>
    </div>
    COLUMN CONTENT
</div>
============================


===ONE HALF COLUMN===

<div class="one-half">
    <div class="header-one-half">
        <div class="header-content">HEADER TITLE</div>
    </div>
    COLUMN CONTENT
</div>
============================


===THREE FOURTH COLUMN===

<div class="three-fourth">
    <div class="header-three-fourth">
        <div class="header-content">HEADER TITLE</div>
    </div>
    COLUMN CONTENT
</div>
============================


===ONE THIRD COLUMN===

<div class="one-third">
    <div class="header-one-third">
        <div class="header-content">HEADER TITLE</div>
    </div>
    COLUMN CONTENT
</div>
============================


===TWO THIRD COLUMN===

<div class="two-third">
    <div class="header-two-third">
        <div class="header-content">HEADER TITLE</div>
    </div>
    COLUMN CONTENT
</div>
============================

Different lists

Check list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

Cancel list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

Info list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

Question list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

Warning list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

Arrow list

About Us
News Archive
Our Service
Our Team
Clients Testimonials
Job Opportunities
F.A.Q

HTML code (arrow list):

<ul class="arrow-list">
    <li>About Us</li>
    <li>News Archive</li>
    <li>Our Service</li>
    <li>Our Team</li>
    <li>Clients Testimonials</li>
    <li>Job Opportunities</li>
    <li class="list-last">F.A.Q</li>
</ul>

CSS Code:

.check-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.check-list li {
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background: url(../images/check.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}
.list-last {
	border-bottom:1px dashed #999999
}
.info-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.info-list li {
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background: url(../images/info.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}
.cancel-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.cancel-list li {
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background: url(../images/cancel.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}
.question-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.question-list li {
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background: url(../images/question.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}
.warning-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.warning-list li {
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background:url(../images/warning.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}
.arrow-list {
	font-size:12px;
	list-style-type:none;
	list-style-position:outside;
}
.arrow-list li{
	margin:0px;	
	display:block;
	padding:11px 0px 11px 35px;
	background: url(../images/list-arrow.png) no-repeat;
	background-position:left center;
	border-top:1px dashed #999999;
	font-style:italic;
}

Different Boxes

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos in quis risus.

HTML code:

<div class="info-box-purple">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos in quis risus.</div>
<div class="info-box-green">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos in quis risus.</div>
<div class="info-box-blue">
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos in quis risus.</div>
</div>

CSS code:

	.info-box-purple {
		border:1px solid #cc0066;
		padding: 20px 60px;
		background:#ff0099 url(../images/cancel-box.png) no-repeat 10px 15px;
		color:#ffffff;
		text-shadow:none;
		margin-bottom:15px;
	}
	.info-box-green {
		border:1px solid #009900;
		padding: 20px 60px;
		background:#00CC33 url(../images/check-box.png) no-repeat 10px 15px;
		color:#ffffff;
		text-shadow:none;
		margin-bottom:15px;
	}
	.info-box-blue {
		border:1px solid #006699;
		padding: 20px 60px;
		background:#0099FF url(../images/info-box.png) no-repeat 10px 15px;
		color:#ffffff;
		text-shadow:none;
		margin-bottom:15px;
	}

ICONS

HTML code:

    <img class="icon"  src="images/icons/icon-1.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-2.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-3.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-4.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-5.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-6.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-7.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-8.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-9.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-10.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-11.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-12.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-13.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-14.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-15.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-16.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-17.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-18.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-19.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-20.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-21.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-22.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-23.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-24.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-25.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-26.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-27.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-28.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-29.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-30.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-31.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-32.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-33.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-34.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-35.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-36.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-37.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-38.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-39.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-40.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-41.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-42.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-43.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-44.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-45.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-46.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-47.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-48.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-49.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-50.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-51.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-52.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-53.png" alt=" "/>
    <img class="icon"  src="images/icons/icon-54.png" alt=" "/>

CSS code:

    .icon {
        padding-right:20px;
        padding-bottom:10px;
    }

End of documentation

Once again, thank you so much for purchasing this theme.

Overview:

Table of Contents:

Template overview

QARK Moredn works in:

Template features:

Homepage:

Get started

Installation:

Setting Up The Grid:

Working With Navigation:

Working With Sliders:

List slider

NIVO Slider

ACCORDIAN Slider

3D Slider

GRID Slider

VIDEO BLOCK

JavaScript initialization

LIST Slider

NIVO Slider

ACCORDIAN Slider

3D Slider

GRID Slider

Column Layouts and Headers

Different lists

Different Boxes

ICONS

End of documentation