Template Documentation

Homepage Slideshow

The homepage slideshow is created using the super awesome Revolution Slider Joomla extension, which we have a distribution license for this template & is included in the template package - saving you buying it as an extra!

Details here: http://themepunch.com/revolution

There are a huge amount of settings available, but in this particular template we are using it in the full screen mode & placing the module in the 'carousel' module position. We have also added some extra CSS within the template to style some parts of the slideshow for this template.

Portfolio Article Code

As seen here: Portfolio Page

<div class="grid-portfolio full-portfolio">
 <ul class="items">
  <li class="item thumb conceptual">
   <figure>
    <a href="/portfolio-post.html">
     <div class="text-overlay">
     <div class="info">Photo Title &amp; Link</div>
    </div>
   <img src="/images/art/p1.jpg" alt="" />
  </a>
 </figure>
 </li>
 <li class="item thumb black-white">
  <figure>
   <a href="/portfolio-post2.html">
    <div class="text-overlay">
     <div class="info">Photo Title &amp; Link</div>
    </div>
    <img src="/images/art/p2.jpg" alt="" />
  </a>
 </figure>
 </li>
 <li class="item thumb conceptual">
  <figure>
    <a href="/portfolio-post3.html">
     <div class="text-overlay">
      <div class="info">Photo Title &amp; Link</div>
     </div><img src="/images/art/p3.jpg" alt="" />
    </a>
   </figure>
  </li>
 </ul>
</div>

My Specialities Code

As seen here: Services Page

<div class="section-title text-center">
 <h3>My Specialities</h3>
</div>
<div class="row">
 <div class="col-sm-4">
  <div class="bordered text-center">
   <img src="/images/art/s1.jpg" alt="" />
   <h3>Design</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis fringilla lorem.</p>
  </div>
 </div>
 <div class="col-sm-4">
  <div class="bordered text-center">
   <img src="/images/art/s2.jpg" alt="" />
   <h3>Photography</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis fringilla lorem.</p>
  </div>
 </div>
 <div class="col-sm-4">
  <div class="bordered text-center">
   <img src="/images/art/s3.jpg" alt="" />
   <h3>Development</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis fringilla lorem.</p>
  </div>
 </div>
</div>

My Latest Instagram Shots Code

As seen here: Home Page

<div class="section-title text-center">
 <h3>My Latest Instagram Shots</h3>
</div>
<div class="swiper-wrapper">
 <a class="arrow-left" href="#"></a><a class="arrow-right" href="#"></a>
 <div class="swiper-container instagram">
  <div id="instafeed" class="swiper">&nbsp;</div>
 </div>
</div>

My Skills Code

As seen here: Home Page

<div class="section-title">
 <h3>My Skills</h3>
</div>
<ul class="progress-list">
 <li>
  <p>Design <em>100%</em></p>
  <div class="progress plain">
   <div class="bar" style="width: 100%;">&nbsp;</div>
  </div>
 </li>
 <li>
  <p>Photoshop <em>80%</em></p>
  <div class="progress plain">
   <div class="bar" style="width: 80%;">&nbsp;</div>
  </div>
 </li>
 <li>
  <p>Photography <em>85%</em></p>
  <div class="progress plain">
   <div class="bar" style="width: 85%;">&nbsp;</div>
  </div>
 </li>
 <li>
  <p>Development <em>75%</em></p>
  <div class="progress plain">
   <div class="bar" style="width: 50%;">&nbsp;</div>
  </div>
 </li>
</ul>