Wednesday, 04 May 2016 18:26

Home Feature Grid

Written by

This grid is better when there is a left or right column. This utilises the inbuilt grid-layout feature of the joomlashine templates. From JSN Air.

Easy to start

Easy to start

JSN Airprovides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.

Multiple color

Multiple Colors

6 major color variations for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.

Responsive Design

Responsive Design

All JoomlaShine templates are equipped with responsive design feature making your website look beautiful in both smartphones and tablets..

Dedicated Support

Dedicated Support

In addition to comprehensive documentations in PDF format and online video, you also get support from friendly forum and dedicated support system.

Flexible Layout

Flexible Layouts

JSN Air layout system is very flexible and capable. JSN Air provides 36+ module positions allowing you to have multiple layouts configuration.

Customer Love us

Popular extensions support

JSN Air works well with other Joomla popular extensions. JSN Air also has extended style that will automatically support for the display of K2 or Kunena component.

CSS

.template-feature-grid .grid-col .grid-col_inner { 
	padding: 15px;
	background: rgba(249, 249, 249, 0);
	border: 1px solid rgba(242, 242, 242, 0);
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
	
}

.template-feature-grid .grid-col .grid-col_inner:hover {
	background: rgba(249, 249, 249, 1);
	border: 1px solid rgba(242, 242, 242, 1);
}

.template-feature-grid .template-feature-grid-icon {
	float: left;
	margin-right: 10px;
	height: 90px;
	padding-top: 10px;
}

.template-feature-grid .template-feature-grid-content h3,
.template-feature-grid .template-feature-grid-content p {
	margin: 0;
	margin-bottom: 5px;
	overflow: hidden; /* Prevents text wrapping */
}

HTML

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-easy-start.png" alt="Easy to start" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Easy to start</a></h3>
            <p><strong>JSN Air</strong>provides unique mechanism of installing sample data on directly your current website. Just few clicks and the demo website is all setup.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-star.png" alt="Multiple color" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Multiple Colors</a></h3>
            <p><strong>6 major color variations</strong> for your taste. Each color variation covers not only the main background, but also color of drop-down menu, links, table's header and more.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-responsive.png" alt="Responsive Design" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Responsive Design</a></h3>
            <p>All JoomlaShine templates are equipped with <strong>responsive design</strong> feature making your website look beautiful in both smartphones and tablets..</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-support.png" alt="Dedicated Support" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Dedicated Support</a></h3>
            <p>In addition to <strong>comprehensive documentations</strong> in PDF format and online video, you also get support from <strong>friendly forum</strong> and <strong>dedicated support system</strong>.</p>
        </div>
    </div>
</div>

<div class="grid-layout template-feature-grid">
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-layout.png" alt="Flexible Layout" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3><a href="http://quantumwarp.com/">Flexible Layouts</a></h3>
            <p>JSN Air layout system is very flexible and capable. JSN Air provides <strong>36+ module positions</strong> allowing you to have multiple layouts configuration.</p>
        </div>
    </div>
    <div>
        <div class="template-feature-grid-icon"><img src="/images/kb/2016/778/icon-love.png" alt="Customer Love us" border="0" /></div>
        <div class="template-feature-grid-content">
            <h3>Popular extensions support</h3>
            <p>JSN Air works well with other <strong>Joomla popular extensions</strong>. JSN Air also has extended style that will automatically support for the display of <a href="/kb/articles?amp;view=itemlist&amp;layout=category&amp;task=&amp;id=&amp;Itemid=645">K2</a> or <a href="/component/kunena/?amp;view=home&amp;defaultmenu=499&amp;Itemid=800">Kunena component</a>.</p>
        </div>
    </div>	
</div>

 

Read 1109 times Last modified on Friday, 06 May 2016 11:29