Introduction

Stylico is an AJAX-based website template with deeplinking especially created for Djs and Producers. It´s the first template that uses the History.js library and other features that you have never seen on themeforest. The History.js uses the latest HTML5 History API and when your browser does not support HTML5 History, it will automatically use hashes (#) for deeplinking. That gives you the possibility to browse between each page and listening to the music of the MP3-Player.


Fancy Music Player V2.0

You see the next generation of Fancy Music Player. It has a HTML/CSS based skin, for playing mp3 files a hidden swf will be used that communicates via JS with the HTML control buttons. If Flash is not supported, it will automatically use the new HTML5 audio engine, so it runs on all iToys(iPad, iPhone etc.). You can add new tracks from any page in your website very easily.


Custom Image Slider

The slider based on the Orbit slider. It has been modified with an own skin and a great thumbnail navigation. You can add unlimited of images to the slider, you can also set a image link. You can choice between 4 different slides and over 15 other options!


Gigs schedule with filter

Show your visitors where you are playing next. The schedule allows to filter gigs by own custom tags. Check out the GIGS page, where you can filter the venues by contintent.


AJAX Contact Form

An easy and fresh AJAX contact form especially created for this template.


Custom 404 Page

Create your own 404 page. Click me to load the 404 page.


Own background for each page

You can also set an own background for each page. Click me to change the background.

<a href="template_features.html" class="internal-link" rel="images/stylico/main_background_lila.jpg">Click me to change the background.</a>

Widgets

Add tracks to the music player from any pages

PLAY NOW
<a href="music/Fobee-La_Kazan.mp3" title="Fobee - La Kazan" class="play-now" style="width: 50px;">PLAY NOW <span class="record-play"></span></a>

Internal linkage

Go to home page
<a href="home.html" class="internal-link">Go to home page</a>
Open a page thats not in the main navigation
<a href="any_page.html" class="internal-link">Open a page thats not in the main navigation</a>

Custom Soundcloud Player

You can choice between 3 different layouts (Cover, Horizontal and Vertical) and 4 color themes(Black, Blue, Orange and Green).

<div class='sc-player'>
  <a href='http://soundcloud.com/radykal/favorites' ></a>
</div>

Latest Tweets

Show your latest tweets on your home page or where ever you want.

HTML/CSS elements

<h2 class="ribbon">HTML/CSS elements</h2>

Headline 3

Headline 4

<h3>Headline 3</h3>
<h4>Headline 4</h4>
This is a link
<a href="#">This is a link</a>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

<span class="dropcap">L</span>

This is an unordered list

<ul>
  <li>List One</li>
  <li>List Two</li>
  <li>List Three</li>
</ul>

Zebra Table

Heading 1 Heading 2 Heading 3 Heading 4
Lorem ipsum dolor Lorem Ipsum sed diam voluptua Lorem Ipsum
Lorem Ipsum Lorem ipsum dolor sed diam voluptua Lorem
Ipsum Lorem Ipsum Lorem Lorem ipsum dolor
Lorem Ipsum Lorem Ipsum sed diam voluptua Lorem Ipsum
Lorem ipsum dolor sed diam Lorem Ipsum sed diam
<table class="zebra-table">
    <thead>
        <tr>
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
            <th scope="col">Heading 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum dolor</td>
            <td>Lorem Ipsum</td>
            <td>sed diam voluptua</td>
            <td>Lorem Ipsum</td>
        </tr>
    </tbody>
</table>

Box Table

Heading 1 Heading 2 Heading 3 Heading 4
Lorem ipsum dolor Lorem Ipsum sed diam voluptua Lorem Ipsum
Lorem Ipsum Lorem ipsum dolor sed diam voluptua Lorem
Ipsum Lorem Ipsum Lorem Lorem ipsum dolor
Lorem Ipsum Lorem Ipsum sed diam voluptua Lorem Ipsum
Lorem ipsum dolor sed diam Lorem Ipsum sed diam
<table class="box-table">
    <thead>
        <tr>
            <th scope="col">Heading 1</th>
            <th scope="col">Heading 2</th>
            <th scope="col">Heading 3</th>
            <th scope="col">Heading 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Lorem ipsum dolor</td>
            <td>Lorem Ipsum</td>
            <td>sed diam voluptua</td>
            <td>Lorem Ipsum</td>
        </tr>
    </tbody>
</table>
Single Tag
<span class="tag">Single Tag</span>
<ul class="tag-list">
  <li>Tag One</li>
  <li>Tag Two</li>
  <li>Tag Three</li>
</ul>
Green Blue Red
<a href="#" class="green-button">Green</a>
<a href="#" class="blue-button">Blue</a>
<a href="#" class="red-button">Red</a>
Big Button
<a href="#" class="big-button">Big Button</a>
Warning
This is an error box
Warning
This is a success box
Warning
This is a warning box
<div class="error-box">
    <h5>Warning</h5>
    <span>This is a warning box</span>
</div>
<div class="success-box">
    <h5>Warning</h5>
    <span>This is a warning box</span>
</div>
<div class="warning-box">
    <h5>Warning</h5>
    <span>This is a warning box</span>
</div>
<img src="images/media/thumbs/image_01.jpg" class="rounded">