Parallax707

Welcome to Parallax707.

Hello, firstly I would like to thank you for purchasing " Parallax707 - HTML Template ".

If you have any questions that are beyond the scope of this help file, please feel free to email.

Creator: Ahmed Mohamed

Contact: [email protected]

Created On: 26/02/2013

Installation:

Parallax707 is HTML template so there's no really "installation" required just unzip the main file you've downloaded from wrapbootstrap 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. Parallax707 is being build using one of the most popular Framwork, Twitter bootstrap, which means your site container is 12-column grids wide.To make it work without problem you be using columns for everything .

Working With Navigation:

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

Your code should look like the following.

              
          
          <div id="navbar" class="navbar navbar-static-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

                    </a>
                    <a class="brand" href="index.html">Parallax<span>707</span>
                    </a>
                    <div class="nav-collapse collapse pull-right">
                        <ul class="nav">
                            <li class="active dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
							<ul class="dropdown-menu">
                            		<li>
                                        <a href="#welcome">Home Style 1</a>
                                    </li>
                                    <li>
                                        <a href="3d_slider.html">Home Style 2</a>
                                    </li>                                     
                                     <li>
                                        <a href="layer_slider.html">Home Style 3</a>
                                    </li>
                                     <li>
                                        <a href="nivo_slider.html">Home Style 4</a>
                                    </li> 
                                     <li>
                                        <a href="parallax_slider.html">Home Style 5</a>
                                    </li>
                                    <li>
                                        <a href="portfolio_slider.html">Home Style 6</a>
                                    </li>                      
                                </ul>
                            </li>
                            <li>
                                <a href="#About">About</a>
                            </li>
                            <li>
                                <a href="#Services">Services</a>
                            </li>
                            <li>
                                <a href="#Portfolio">Portfolio</a>
                            </li>
                            <li>
                                <a href="#LargeSlider">Gallery</a>
                            </li>
                            <li>
                                <a href="#Contact">Contact</a>
                            </li>                            
                            <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown"> External Pages <b class="caret"></b></a>
 								<ul class="dropdown-menu"> <li><a href="about_us.html">About Us</a></li>
                                    <li><a href="our_services.html">Our Services</a></li>
                                    <li><a href="portfolio_page.html">Our Portfolio</a></li>
                                    <li><a href="gallery.html">Gallery</a></li>
                                     <li><a href="pricing.html">Pricing Tables</a></li>
                                      <li><a href="icons.html">Icons</a></li>
                              </ul>
                             </li>                                 
                                           
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
          
          
          
              

Navigation CSS:

              .navbar-fixed-top {
  			  top: 0;
				}                
                .navbar-fixed-top,
                .navbar-fixed-bottom {
                    position: fixed;
                    right: 0;
                    left: 0;
                    z-index: 1030;
                    margin-bottom: 0;
                }
                .navbar-inner:after {
                    clear: both;
                }
                .navbar-inner:before,
                .navbar-inner:after {
                    display: table;
                    content: "";
                    line-height: 0;
                }
                .navbar-fixed-top .navbar-inner,
                .navbar-static-top .navbar-inner {
                    -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.3);
                    -moz-box-shadow: 0 1px 10px rgba(0,0,0,.3);
                    box-shadow: 0 1px 10px rgba(0,0,0,.3);
                }
                .navbar-fixed-top .navbar-inner,
                .navbar-fixed-bottom .navbar-inner {
                    padding-left: 0;
                    padding-right: 0;
                    -webkit-border-radius: 0;
                    -moz-border-radius: 0;
                    border-radius: 0;
                }
                .navbar .nav {
                display: block;
                float: left;
                left: 0;
                margin: 0 10px 0 0;
                position: relative;
            }
            .navbar .nav > li {
              float: left;
            }
            .navbar .nav > li {
                float: left;
            }
            
            .navbar .nav > li > a {
                color: #777777;
                float: none;
                font-size: 20px;
                font-weight: lighter;
                padding: 30px 15px;
                text-decoration: none;
                text-transform: uppercase;
                text-shadow: 1px 1px 5px #1f1f1f;
                filter: dropshadow(color=#1f1f1f, offx=1, offy=1);
            }
            
            .navbar .nav .dropdown-toggle .caret {
                margin-top: 8px;
            }
            
            .navbar .nav > li > a:focus,
            .navbar .nav > li > a:hover {
                background-color: transparent;
                color: #F96E5B !important;
                -webkit-transition: background 500ms ease-out;
                -moz-transition: background 500ms ease-out;
                -ms-transition: background 500ms ease-out;
                -o-transition: background 500ms ease-out;
                transition: background 500ms ease-out;
                text-decoration: none;
            }
            
            .navbar .nav > .active > a,
            .navbar .nav > .active > a:hover,
            .navbar .nav > .active > a:focus {
                color: #F96E5B !important;
                text-decoration: none;
                -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
              -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
              box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
            }
            
            .navbar .btn-navbar {
                display: none;
                float: right;
                padding: 7px 10px;
                margin-left: 5px;
                margin-right: 5px;
                color: #ffffff;
                text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
                background-color: #333333;
                border-color: #e5e5e5 #e5e5e5 #bfbfbf;
                border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
                *background-color: #e5e5e5;
              /* Darken IE7 buttons by default so they stand out more given they won't have borders */     			filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
              -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
              -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
              box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
            }
            .navbar .btn-navbar:hover,
            .navbar .btn-navbar:active,
            .navbar .btn-navbar.active,
            .navbar .btn-navbar.disabled,
            .navbar .btn-navbar[disabled] {
              color: #ffffff;
              background-color: #3B3A3A;
              *background-color: #3B3A3A;
            }
            .navbar .btn-navbar:active,
            .navbar .btn-navbar.active {
              background-color: #cccccc \9;
            }
              
              

Grid SlideShow

Blur Slide Show

Your code should look like the following.

               
               <div id="welcome">
                    <div class="container-fluid clearfix" style="padding:0; overflow:hidden">
                        
<div id="ib-main-wrapper" class="ib-main-wrapper">
<div class="ib-main">
<a href="#"><img src="images/grid/thumbs/1.jpg" data-largesrc="images/grid/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/2.jpg" data-largesrc="images/grid/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#" class="ib-content">
<div class="ib-teaser"><h2>Welcome <span>Parallax707</span></h2></div>
<div class="ib-content-full"><p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div></a>
<a href="#"><img src="images/grid/thumbs/3.jpg" data-largesrc="images/grid/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/4.jpg" data-largesrc="images/grid/large/4.jpg" alt="image04"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/5.jpg" data-largesrc="images/grid/large/5.jpg" alt="image05"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/6.jpg" data-largesrc="images/grid/large/6.jpg" alt="image06"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/7.jpg" data-largesrc="images/grid/large/7.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/8.jpg" data-largesrc="images/grid/large/8.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/9.jpg" data-largesrc="images/grid/large/9.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/10.jpg" data-largesrc="images/grid/large/10.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/11.jpg" data-largesrc="images/grid/large/11.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#" class="ib-content">
<div class="ib-teaser"><h2>Parallax<span>Effect</span></h2></div>
<div class="ib-content-full"><p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p></div></a>
<a href="#"><img src="images/grid/thumbs/12.jpg" data-largesrc="images/grid/large/12.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/13.jpg" data-largesrc="images/grid/large/13.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/14.jpg" data-largesrc="images/grid/large/14.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/15.jpg" data-largesrc="images/grid/large/15.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/16.jpg" data-largesrc="images/grid/large/16.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/17.jpg" data-largesrc="images/grid/large/17.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/18.jpg" data-largesrc="images/grid/large/18.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/19.jpg" data-largesrc="images/grid/large/19.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/20.jpg" data-largesrc="images/grid/large/20.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/21.jpg" data-largesrc="images/grid/large/21.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/22.jpg" data-largesrc="images/grid/large/22.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/23.jpg" data-largesrc="images/grid/large/23.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/24.jpg" data-largesrc="images/grid/large/24.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/25.jpg" data-largesrc="images/grid/large/25.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/26.jpg" data-largesrc="images/grid/large/26.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/27.jpg" data-largesrc="images/grid/large/27.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/1.jpg" data-largesrc="images/grid/large/1.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/2.jpg" data-largesrc="images/grid/large/2.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/3.jpg" data-largesrc="images/grid/large/3.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/4.jpg" data-largesrc="images/grid/large/4.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/5.jpg" data-largesrc="images/grid/large/5.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/6.jpg" data-largesrc="images/grid/large/6.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/7.jpg" data-largesrc="images/grid/large/7.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/8.jpg" data-largesrc="images/grid/large/8.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/9.jpg" data-largesrc="images/grid/large/9.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/10.jpg" data-largesrc="images/grid/large/10.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/11.jpg" data-largesrc="images/grid/large/11.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/12.jpg" data-largesrc="images/grid/large/12.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/13.jpg" data-largesrc="images/grid/large/13.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/14.jpg" data-largesrc="images/grid/large/14.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/15.jpg" data-largesrc="images/grid/large/15.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/16.jpg" data-largesrc="images/grid/large/16.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/17.jpg" data-largesrc="images/grid/large/17.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/18.jpg" data-largesrc="images/grid/large/18.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/19.jpg" data-largesrc="images/grid/large/19.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/20.jpg" data-largesrc="images/grid/large/20.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/21.jpg" data-largesrc="images/grid/large/21.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/22.jpg" data-largesrc="images/grid/large/22.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/23.jpg" data-largesrc="images/grid/large/23.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/24.jpg" data-largesrc="images/grid/large/24.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/25.jpg" data-largesrc="images/grid/large/25.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/26.jpg" data-largesrc="images/grid/large/26.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/27.jpg" data-largesrc="images/grid/large/27.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/1.jpg" data-largesrc="images/grid/large/1.jpg" alt="image02"/><span>Cannot live together</span></a>
<a href="#"><img src="images/grid/thumbs/2.jpg" data-largesrc="images/grid/large/2.jpg" alt="image03"/><span>Youth is full of pleasance</span></a>
<a href="#"><img src="images/grid/thumbs/3.jpg" data-largesrc="images/grid/large/3.jpg" alt="image01"/><span>Crabbed Age and Youth</span></a>
<a href="#"><img src="images/grid/thumbs/4.jpg" data-largesrc="images/grid/large/4.jpg" alt="image02"/><span>Cannot live together</span></a>
<div class="clr"></div>
</div><!-- ib-main -->
</div><!-- ib-main-wrapper -->
                   </div>
                </div>
               
               

Your CSS code in the File grid.css

Lean Slider

Lean Slider

Your code should look like the following.

              
               < div class="slider-wrapper" > 
         < div id="slider" > 
             < div class="slide1" > 
                 < img src="images/1.jpg" alt="" / > 
             < /div > 
             < div class="slide2" > 
                 < img src="images/2.jpg" alt="" / > 
             < /div > 
             < div class="slide3" > 
                 < img src="images/3.jpg" alt="" / > 
             < /div > 
             < div class="slide4" > 
                 < img src="images/4.jpg" alt="" / > 
             < /div > 
         < /div > 
         < div id="slider-direction-nav" >  < /div > 
         < div id="slider-control-nav" >  < /div > 
     < /div > 
              

Your CSS code.

                .lean-slider {
                    position: relative;
                    *zoom: 1;
                }
                
                .lean-slider:before,
                .lean-slider:after {
                    content: " ";
                    display: table;
                }
                
                .lean-slider:after {
                    clear: both;
                }
                
                .lean-slider-slide {
                    float: left;
                    width: 100%;
                    margin-right: -100%;
                    display: none;
                }
                
                .lean-slider-slide.current {
                    display: block;
                }
                
                .slider-wrapper {
                    position: relative;
                    background: #fff url(../../images/loading.gif) no-repeat 50% 50%;
                    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.4);
                    -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.4);
                    box-shadow: 0 0 3px rgba(0,0,0,0.4);
                    clear: both;
                    margin: 25px 10px;
                }
                /*.lean-slider { overflow: hidden; }*/
                .lean-slider-slide {
                    display: block;
                    position: relative;
                    opacity: 0;
                    -webkit-transition: opacity 0.6s linear;
                    -moz-transition: opacity 0.6s linear;
                    -ms-transition: opacity 0.6s linear;
                    -o-transition: opacity 0.6s linear;
                    transition: opacity 0.6s linear;
                }
                
                .lean-slider-slide.current {
                    opacity: 1;
                }
                
                .lean-slider-slide img {
                    display: block;
                    width: 100%;
                }
                
                #slider-direction-nav {
                    position: absolute;
                    left: 0;
                    top: 47%;
                    width: 100%;
                    -webkit-transition: opacity 0.2s linear;
                    -moz-transition: opacity 0.2s linear;
                    -ms-transition: opacity 0.2s linear;
                    -o-transition: opacity 0.2s linear;
                    transition: opacity 0.2s linear;
                    opacity: 0.2;
                }
                
                .slider-wrapper:hover #slider-direction-nav {
                    opacity: 1;
                }
                
                #slider-direction-nav a {
                    float: left;
                    display: block;
                    width: 26px;
                    height: 37px;
                    background: url(../../images/arrows.png) no-repeat 0 0;
                    text-indent: -9999px;
                }
                
                #slider-direction-nav .lean-slider-next {
                    float: right;
                    background-position: 100% 0;
                }
                
                #slider-control-nav {
                    position: absolute;
                    left: 0;
                    bottom: 10px;
                    width: 100%;
                    text-align: center;
                    -webkit-transition: opacity 0.2s linear;
                    -moz-transition: opacity 0.2s linear;
                    -ms-transition: opacity 0.2s linear;
                    -o-transition: opacity 0.2s linear;
                    transition: opacity 0.2s linear;
                    opacity: 0.2;
                }
                
                .slider-wrapper:hover #slider-control-nav {
                    opacity: 1;
                }
                
                #slider-control-nav a {
                    display: inline-block;
                    width: 14px;
                    height: 14px;
                    background: url(../../images/bullets.png) no-repeat 0 0;
                    text-indent: -9999px;
                    margin: 0 3px;
                    -webkit-transition: none;
                    -moz-transition: none;
                    -ms-transition: none;
                    -o-transition: none;
                    transition: none;
                }
                
                #slider-control-nav a.active {
                    background-position: 100% 0;
                }
                
                /* Smartphones (portrait and landscape) ----------- */
                @media only screen 
                and (min-device-width : 320px) 
                and (max-width : 480px) {
                
                    #slider-direction-nav,
                    #slider-control-nav {
                        opacity: 1;
                    }
                }
                
                /* iPads (portrait and landscape) ----------- */
                @media only screen 
                and (min-device-width : 768px) 
                and (max-device-width : 1024px) {
                    
                    #slider-direction-nav,
                    #slider-control-nav {
                        opacity: 1;
                    }
                }
              
              

Our Services Section with animation

Services Section

Your code should look like the following.

               
               <div class="row-fluid">                
                <ul id="sti-menu" class="sti-menu clearfix">
				<li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Wordpress Development</h2>
						<h3 data-type="sText" class="sti-item">Understanding visually</h3>
						<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span>
					</a>
				</li>
				<li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Sophisticated Team</h2>
						<h3 data-type="sText" class="sti-item">Professionals in action</h3>
						<span data-type="icon" class="sti-icon sti-icon-alternative sti-item"></span>
					</a>
				</li>
				<li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Web Site Design</h2>
						<h3 data-type="sText" class="sti-item">Personalized to your needs</h3>
						<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span>
					</a>
				</li>
				<li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Web Development</h2>
						<h3 data-type="sText" class="sti-item">Advanced use of technology</h3>
						<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
					</a>
				</li>
				<li class="span3 clearfix" data-hovercolor="#49110D" style="margin-left:0;">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Corporate Identity</h2>
						<h3 data-type="sText" class="sti-item">Lorem ipsum dolor</h3>
						<span data-type="icon" class="sti-icon sti-icon-globe sti-item"></span>
					</a>
				</li>
                <li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Brand Creation</h2>
						<h3 data-type="sText" class="sti-item">24/7 for you needs</h3>
						<span data-type="icon" class="sti-icon sti-icon-brand sti-item"></span>
					</a>
				</li>
                <li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Corporate Identity</h2>
						<h3 data-type="sText" class="sti-item">Lorem ipsum dolor</h3>
						<span data-type="icon" class="sti-icon sti-icon-identity sti-item"></span>
					</a>
				</li>
                <li class="span3 clearfix" data-hovercolor="#49110D">
					<a href="#">
						<h2 data-type="mText" class="sti-item">Web Development</h2>
						<h3 data-type="sText" class="sti-item">Advanced use of technology</h3>
						<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span>
					</a>
				</li>
			</ul>
            
                </div>
               
               

Your CSS code.

              
              /*Sliding Text and Icon Style Services  Blocks*/
.sti-menu{
	position:relative;
	margin:20px auto 60px;
}
.sti-menu li {
  height: 325px;
  margin: 10px 0 ;
}
.sti-menu li a{
	display:block;
	overflow:hidden;
	background:#fcfcfc;
	text-align:center;
	height:100%;
	width:100%;
	position:relative;
	-moz-box-shadow:1px 1px 3px #ddd;
	-webkit-box-shadow:1px 1px 3px #ddd;
	box-shadow:1px 1px 3px #ddd;	
}
.sti-menu li a:hover{
	background:#F96E5B;
    -moz-box-shadow:inset 1px 1px 70px #EA6A57;
    -webkit-box-shadow:inset 1px 1px 70px #EA6A57;
    box-shadow:inset 1px 1px 70px #EA6A57;
	color:#FFF!important;
	}
.sti-menu li a h2{
	color:#575757;
	 font-family: 'Kelly Slab',cursive !important;
	font-size:24px;
	position:absolute;
	padding:10px;
	top:140px;
	left:0px;
	line-height:30px;
} 
.sti-menu li a h3{
	color:#575757;
	 font-family: 'Kelly Slab',cursive !important;
	font-size:18px;
	font-style:italic;
	position:absolute;
	top:215px;
	left:0px;
	padding:10px;
	line-height:25px;
}

.sti-icon{
	width:100px;
	height:100px;
	position:absolute;
	background-position:top left;
	background-repeat:no-repeat;
	background-color:transparent;
	left:33%;
	top:30px;
}
.sti-icon-care{
	background-image:url("../images/wordpress .png");
}
.sti-icon-alternative{
	background-image:url("../images/alternative.png");
}
.sti-icon-family{
	background-image:url("../images/development.png");
}
.sti-icon-info{
	background-image:url("../images/design.png");
}
.sti-icon-technology{
	background-image:url("../images/technology.png");
}
.sti-icon-globe{
	background-image:url("../images/globe.png");
}
.sti-icon-brand {
	background-image:url("../images/brand.png");
}
.sti-icon-identity{
	background-image:url("../images/identity.png");
}
              
              

Portfolio slideshow

Portfolio

Your code should look like the following.

              
              
              <div class="image_grid portfolio_4col lightbox">     
    <ul id="list" class="portfolio_list da-thumbs clearfix">
    	<li class="span3">
        <div>
            <img src="images/portfolio/s/portfolio1.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>              
<span class="zoom"><a href="images/portfolio/big/portfolio1.jpg"></a> 

</span>
            </article>
            </div>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio2.jpg" alt="img">
            <article class="da-animate da-slideFromTop" style="display: block;">
                 <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio2.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio3.jpg" alt="img">
            <article class="da-animate da-slideFromLeft" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
               <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio3.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio4.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                 <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                 <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio4.jpg"></a></span>
            </article>
        </li>
        <li class="span3" style="margin-left:0">
            <img src="images/portfolio/s/portfolio5.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio5.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio6.jpg" alt="img">
            <article class="da-animate da-slideFromTop" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio6.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio7.jpg" alt="img">
            <article class="da-animate da-slideFromLeft" style="display: block;">
                 <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
               <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio7.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio8.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                 <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio8.jpg"></a></span>
            </article>
        </li>
        <li class="span3" style="margin-left:0">
            <img src="images/portfolio/s/portfolio9.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
                <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio9.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio10.jpg" alt="img">
            <article class="da-animate da-slideFromTop" style="display: block;">
                 <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio10.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio11.jpg" alt="img">
            <article class="da-animate da-slideFromLeft" style="display: block;">
                 <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
               <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio11.jpg"></a></span>
            </article>
        </li>
        <li class="span3">
            <img src="images/portfolio/s/portfolio12.jpg" alt="img">
            <article class="da-animate da-slideFromRight" style="display: block;">
               <h3>Lorem ipsum dolor</h3>
                <em>Lorem ipsum </em>
                 <span class="link_post"><a href="#"></a></span>
                <span class="zoom"><a href="images/portfolio/big/portfolio12.jpg"></a></span>
            </article>
        </li>
    </ul>
    </div>
              
              

Your CSS code in the File portfolio_gallery.css & jquery.classybox.css

Gallery Photos

Lean Slider

Your code should look like the following.

              
              <div class="container clearfix">                            
                            <div class="row-fluid">
                                <div class="span12">  
                                
                                <div id="rg-gallery" class="rg-gallery">
					<div class="rg-thumbs">
						<!-- Elastislide Carousel Thumbnail Viewer -->
						<div class="es-carousel-wrapper">
							<div class="es-nav">
								<span class="es-nav-prev">Previous</span>
								<span class="es-nav-next">Next</span>
							</div>
							<div class="es-carousel">
								<ul>
									<li><a href="#"><img src="images/gallery_img/thumbs/1.jpg" data-large="images/gallery_img/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/2.jpg" data-large="images/gallery_img/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/3.jpg" data-large="images/gallery_img/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/4.jpg" data-large="images/gallery_img/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/5.jpg" data-large="images/gallery_img/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/6.jpg" data-large="images/gallery_img/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/7.jpg" data-large="images/gallery_img/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/8.jpg" data-large="images/gallery_img/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/9.jpg" data-large="images/gallery_img/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/10.jpg" data-large="images/gallery_img/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/11.jpg" data-large="images/gallery_img/11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/12.jpg" data-large="images/gallery_img/12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/13.jpg" data-large="images/gallery_img/13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/14.jpg" data-large="images/gallery_img/14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/15.jpg" data-large="images/gallery_img/15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/16.jpg" data-large="images/gallery_img/16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/17.jpg" data-large="images/gallery_img/17.jpg" alt="image17" data-description="Which on it had conceited characters" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/18.jpg" data-large="images/gallery_img/18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/19.jpg" data-large="images/gallery_img/19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/20.jpg" data-large="images/gallery_img/20.jpg" alt="image20" data-description="And often reading what contents it bears" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/21.jpg" data-large="images/gallery_img/21.jpg" alt="image21" data-description="As often shrieking undistinguish'd woe" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/22.jpg" data-large="images/gallery_img/22.jpg" alt="image22" data-description="In clamours of all size, both high and low" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/23.jpg" data-large="images/gallery_img/23.jpg" alt="image23" data-description="Sometimes her levell'd eyes their carriage ride" /></a></li>
									<li><a href="#"><img src="images/gallery_img/thumbs/24.jpg" data-large="images/gallery_img/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></a></li>
								</ul>
							</div>
						</div>
						<!-- End Elastislide Carousel Thumbnail Viewer -->
					</div><!-- rg-thumbs -->
				</div>        
                                </div>
                                </div>
                                </div>
              
              

Your CSS code in the File elastislide.css

3D Slider

Lean Slider

Your code should look like the following.

               
               <div class="wrapper">

				<ul id="sb-slider" class="sb-slider">
					<li>
						<a href="#" target="_blank"><img src="images/1.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Creative Lifesaver</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/2.jpg" alt="image2"/></a>
						<div class="sb-description">
							<h3>Honest Entertainer</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/3.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Brave Astronaut</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/4.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Affectionate Decision Maker</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/5.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Faithful Investor</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/6.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Groundbreaking Artist</h3>
						</div>
					</li>
					<li>
						<a href="#" target="_blank"><img src="images/7.jpg" alt="image1"/></a>
						<div class="sb-description">
							<h3>Selfless Philantropist</h3>
						</div>
					</li>
				</ul>

				<div id="shadow" class="shadow"></div>

				<div id="nav-arrows" class="nav-arrows">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>

			</div>
               
               

Your CSS code in the File slicebox.css

Layer Slider

Lean Slider

Your code should look like the following.

  
         <div id="layer_slider">
		<div class="container-fluid">				
			<div class="row">				
				<div class="span12">
					
					<div style="position: relative; overflow: hidden;" id="slideShow">
						
<!--FIRST SLIDE-->
<div class="SlideNo" data-out="top:1000;opacity:0;" data-in="left:-100;opacity:.2;duration:500">

<img src="images/grid/large/2.jpg">					
		
<div class="span12">
<div data-in="top:-100;delay:1550;duration:550"><h2 class="layer_slider">Responsive Design</h2></div>
<div data-in="left:-1000;delay:700;duration:1550" class="content span4">Awesome Slider</div>
<div data-in="left:-1000;delay:800;duration:1550" class="content span4">Multiple Animations</div>
<div data-in="left:-1000;delay:900;duration:1550" class="content span4">Easing Included</div>
<div data-in="left:-1000;delay:1000;duration:1550" class="content span4">Parallax Effect</div>
</div></div>
		
<!--SECOND SLIDE-->
<div class="SlideNo" data-out="left:-1000;opacity:0;delay:9000" data-in="top:-500;duration:1200;ease:easeOutBounce;">

<img src="images/grid/large/4.jpg">	

<div class="span12">
<div data-in="opacity:0;left:100;delay:2050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;"><h2 class="layer_slider">Many Slider</h2></div>
</div>
						
<div class="span3">								
<div class="content span12" data-in="opacity:0;left:100;delay:2050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" >Unlimited</div>
<div class="content span12" data-in="opacity:0;left:150;delay:2550;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4300;" >Animations</div></div>
							
<div class="span3">
<div class="content span12" data-in="opacity:0;left:100;delay:3050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" >Embed</div>
<div class="content span12" data-in="opacity:0;left:150;delay:3550;duration:800;ease:linear" data-out="left:-100;opacity:0;delay:4300;" >Any HTML</div> </div>
							
 <div class="span3">
<div class="content span12" data-in="opacity:0;left:100;delay:4050;duration:1050;ease:linear" data-out="left:-100;opacity:0;delay:4000;" >Use</div>
<div class="content span12" data-in="opacity:0;left:150;delay:4550;duration:800;ease:linear" data-out="left:-100;opacity:0;delay:4300;" >Your Imagination</div></div>
							
</div>
						
<!--THIRD SLIDE-->
<div class="SlideNo" data-out="top:-1000;opacity:0;delay:7000" data-in="left:1000;ease:linear;duration:400;delay:50">

<img src="images/grid/large/19.jpg">
							
<div class="span12" style="margin-top:15px;">
<div data-in="top:-1000;delay:1850;duration:550"><h2 class="layer_slider">Really Flexible</h2></div>
<div data-in="top:-1000;delay:1650;duration:550" class="content span4">Design Your Layout</div>
<div data-in="top:-1000;delay:1450;duration:550" class="content  span4">Animate Every Element</div>
<div data-in="top:-1000;delay:1250;duration:550" class="content  span4">Embed Any HTML</div>
<div data-in="top:-1000;delay:1050;duration:550" class="content  span4">Does't Force Styles</div>
</div>
</div>

<!--FOUR SLID-->
<div class="SlideNo" data-out="left:-1000;opacity:0;delay:3000">
							
<img data-in="opacity:0;left:-100;duration:1000;ease:linear;" src="images/grid/large/17.jpg">

<div class="span12">
<div data-in="top:-100;delay:1550;duration:550"><h2 class="layer_slider">HTNL5 AND CSS3</h2></div>
<div data-in="left:-1000;delay:700;duration:1550" class="content span4">Mutiple Slides</div>
<div data-in="left:-1000;delay:800;duration:1550" class="content span4">Multiple Animations</div>
<div data-in="left:-1000;delay:900;duration:1550" class="content span4">Easing Included</div>
<div data-in="left:-1000;delay:1000;duration:1550" class="content span4">Easing Included</div>
</div>

</div>
</div>

<div class="slideControlBTN">
<ul class="slideControl">
<li class=""></li>
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
                
</div>
</div>
</div>
        
		
	<div class="_ayaSlider_timer" style="position: absolute; z-index: 4; width: 947.454px; height: 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; margin: 0px; padding: 0px; opacity: 0.5; top: 550px; overflow: hidden;"></div></div>
                 
               

Your CSS code in the File app.css

Nivo Slider

Lean Slider

Your code should look like the following.

    
               
               <div class="theme-default">
            <div id="nivo" class="nivoSlider">
<img src="images/grid/large/2.jpg" data-thumb="images/grid/large/2.jpg" alt="" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
<img src="images/grid/large/5.jpg" data-thumb="images/grid/large/5.jpg" alt="" title="Aliquam eu libero. Integer molestie, turpis vel ultrices facilisis." />
<img src="images/grid/large/8.jpg" data-thumb="images/grid/large/8.jpg" alt="" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
<img src="images/grid/large/1.jpg" data-thumb="images/grid/large/1.jpg" alt="" title="Aliquam eu libero. Integer molestie, turpis vel ultrices facilisis." />
            </div>
        </div>
                   
               

Your CSS code in the File nivo-slider.css

Parallax Slider

Lean Slider

Your code should look like the following.

        
               
               <div id="da-slider" class="da-slider span12">
				<div class="da-slide">
					<h2>Responsive Design</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/parallax_slider/2.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Really Flexible</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/parallax_slider/3.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Parallax Effect</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/parallax_slider/1.png" alt="image01" /></div>
				</div>
				<div class="da-slide">
					<h2>Awesome Slider</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie.</p>
					<a href="#" class="da-link">Read more</a>
					<div class="da-img"><img src="images/parallax_slider/4.png" alt="image01" /></div>
				</div>
				<nav class="da-arrows">
					<span class="da-arrows-prev"></span>
					<span class="da-arrows-next"></span>
				</nav>
			</div>
                   
               

Your CSS code in the File parallax_slider.css

Portfolio Slider

Lean Slider

Your code should look like the following.

      
               
               <div id="portfolio" class="clearfix">
			<div id="background"></div>		
			<div class="arrows">
				<a href="#" class="up">Up</a>
				<a href="#" class="down">Down</a>
				<a href="#" class="prev">Previous</a>
				<a href="#" class="next">Next</a>
			</div>
			<div class="gallery">
				<div class="inside">
					<div class="item">
						<div><img src="images/grid/large/5.jpg" alt="image1" /></div>
						<div><img src="images/grid/large/2.jpg" alt="image2" /></div>
						<div><img src="images/grid/large/3.jpg" alt="image3" /></div>
					</div>
					<div class="item">
						<div><img src="images/grid/large/6.jpg" alt="image4" /></div>
						<div><img src="images/grid/large/19.jpg" alt="image5" /></div>
					</div>
					<div class="item">
						<div><img src="images/grid/large/9.jpg" alt="image6" /></div>
						<div><img src="images/grid/large/7.jpg" alt="image7" /></div>
						<div><img src="images/grid/large/8.jpg" alt="image8" /></div>
						<div><img src="images/grid/large/1.jpg" alt="image9" /></div>
						<div><img src="images/grid/large/20.jpg" alt="image10" /></div>
						<div><img src="images/grid/large/22.jpg" alt="image11" /></div>
					</div>
					<div class="item">
						<div><img src="images/grid/large/7.jpg" alt="image12" /></div>
						<div><img src="images/grid/large/27.jpg" alt="image13" /></div>
						<div><img src="images/grid/large/4.jpg" alt="image14" /></div>
						<div><img src="images/grid/large/5.jpg" alt="image15" /></div>
					</div>
				</div>
			</div>
		</div>
                 
               

Your CSS code in the File portfolio_slider.css

Grid SlideShow

           
           /***grid slidShow***/
            $(function() {
			
				var $ibWrapper	= $('#ib-main-wrapper'),
				 
					Template	= (function() {
							
							// true if dragging the container
						var kinetic_moving				= false,
							// current index of the opened item
							current						= -1,
							// true if the item is being opened / closed
							isAnimating					= false,
							// items on the grid
							$ibItems					= $ibWrapper.find('div.ib-main > a'),
							// image items on the grid
							$ibImgItems					= $ibItems.not('.ib-content'),
							// total image items on the grid
							imgItemsCount				= $ibImgItems.length,
							init						= function() {
								
								// add a class ib-image to the image items
								$ibImgItems.addClass('ib-image');
								// apply the kinetic plugin to the wrapper
								loadKinetic();
								// load some events
								initEvents();
						
							},
							loadKinetic					= function() {
								
								setWrapperSize();
								
								$ibWrapper.kinetic({
									moved	: function() {
										
										kinetic_moving = true;
										
									},
									stopped	: function() {
										
										kinetic_moving = false;
										
									}
								});
								
							},
							setWrapperSize				= function() {
								
								var containerMargins	= $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
								$ibWrapper.css( 'height', $(window).height() - containerMargins )
								
							},
							initEvents					= function() {
							
								// open the item only if not dragging the container
								$ibItems.bind('click.ibTemplate', function( event ) {
									
									if( !kinetic_moving )
										openItem( $(this) );
								
									return false;	
								
								});
								
								// on window resize, set the wrapper and preview size accordingly
								$(window).bind('resize.ibTemplate', function( event ) {
									
									setWrapperSize();
									
									$('#ib-img-preview, #ib-content-preview').css({
										width	: $(window).width(),
										height	: $(window).height()
									})
									
								});
							
							},
							openItem					= function( $item ) {
								
								if( isAnimating ) return false;
								
								// if content item
								if( $item.hasClass('ib-content') ) {
									
									isAnimating	= true;
									current	= $item.index('.ib-content');
									loadContentItem( $item, function() { isAnimating = false; } );
									
								}
								// if image item
								else {
								
									isAnimating	= true;
									current	= $item.index('.ib-image');
									loadImgPreview( $item, function() { isAnimating = false; } );
									
								}
								
							},
							// opens one image item (fullscreen)
							loadImgPreview				= function( $item, callback ) {
								
								var largeSrc		= $item.children('img').data('largesrc'),
									description		= $item.children('span').text(),
									largeImageData	= {
										src			: largeSrc,
										description	: description
									};
								
								// preload large image
								$item.addClass('ib-loading');
								
								preloadImage( largeSrc, function() {
									
									$item.removeClass('ib-loading');
									
									var hasImgPreview	= ( $('#ib-img-preview').length > 0 );
									
									if( !hasImgPreview )
										$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
									else
										$('#ib-img-preview').children('img.ib-preview-img')
															.attr( 'src', largeSrc )
															.end()
															.find('span.ib-preview-descr')
															.text( description );
										
									//get dimentions for the image, based on the windows size
									var	dim	= getImageDim( largeSrc );
									
									$item.removeClass('ib-img-loading');
									
									//set the returned values and show/animate preview
									$('#ib-img-preview').css({
										width	: $item.width(),
										height	: $item.height(),
										left	: $item.offset().left,
										top		: $item.offset().top
									}).children('img.ib-preview-img').hide().css({
										width	: dim.width,
										height	: dim.height,
										left	: dim.left,
										top		: dim.top
									}).fadeIn( 400 ).end().show().animate({
										width	: $(window).width(),
										left	: 0
									}, 500, 'easeOutExpo', function() {
									
										$(this).animate({
											height	: $(window).height(),
											top		: 0
										}, 400, function() {
										
											var $this	= $(this);
											$this.find('span.ib-preview-descr, span.ib-close').show()
											if( imgItemsCount > 1 )
												$this.find('div.ib-nav').show();
												
											if( callback ) callback.call();
										
										});
									
									});
									
									if( !hasImgPreview )
										initImgPreviewEvents();
									
								} );
								
							},
							// opens one content item (fullscreen)
							loadContentItem				= function( $item, callback ) {
								
								var hasContentPreview	= ( $('#ib-content-preview').length > 0 ),
									teaser				= $item.children('div.ib-teaser').html(),
									content				= $item.children('div.ib-content-full').html(),
									contentData			= {
										teaser		: teaser,
										content		: content
									};
									
								if( !hasContentPreview )
									$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );
									
								//set the returned values and show/animate preview
								$('#ib-content-preview').css({
									width	: $item.width(),
									height	: $item.height(),
									left	: $item.offset().left,
									top		: $item.offset().top
								}).show().animate({
									width	: $(window).width(),
									left	: 0
								}, 500, 'easeOutExpo', function() {
								
									$(this).animate({
										height	: $(window).height(),
										top		: 0
									}, 400, function() {
										
										var $this	= $(this),
											$teaser	= $this.find('div.ib-teaser'),
											$content= $this.find('div.ib-content-full'),
											$close	= $this.find('span.ib-close');
											
										if( hasContentPreview ) {
											$teaser.html( teaser )
											$content.html( content )
										}
									
										$teaser.show();
										$content.show();
										$close.show();
										
										if( callback ) callback.call();
									
									});
								
								});
								
								if( !hasContentPreview )
									initContentPreviewEvents();	
								
							},
							// preloads an image
							preloadImage				= function( src, callback ) {
							
								$('').load(function(){
								
									if( callback ) callback.call();
								
								}).attr( 'src', src );
							
							},
							// load the events for the image preview : navigation ,close button, and window resize
							initImgPreviewEvents		= function() {
							
								var $preview	= $('#ib-img-preview');
								
								$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {
									
									navigate( 'prev' );
									
								}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {
									
									navigate( 'next' );
									
								}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {
									
									closeImgPreview();
									
								});
								
								//resizing the window resizes the preview image
								$(window).bind('resize.ibTemplate', function( event ) {
									
									var $largeImg	= $preview.children('img.ib-preview-img'),
										dim			= getImageDim( $largeImg.attr('src') );
									
									$largeImg.css({
										width	: dim.width,
										height	: dim.height,
										left	: dim.left,
										top		: dim.top
									})
									
								});
								
							},
							// load the events for the content preview : close button
							initContentPreviewEvents	= function() {
							
								$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {
									
									closeContentPreview();
									
								});
								
							},
							// navigate the image items in fullscreen mode
							navigate					= function( dir ) {
								
								if( isAnimating ) return false;
								
								isAnimating		= true;
								
								var $preview	= $('#ib-img-preview'),
									$loading	= $preview.find('div.ib-loading-large');
								
								$loading.show();
								
								if( dir === 'next' ) {
									
									( current === imgItemsCount - 1 ) ? current	= 0 : ++current;
									
								}
								else if( dir === 'prev' ) {
									
									( current === 0 ) ? current	= imgItemsCount - 1 : --current;
									
								}
								
								var $item		= $ibImgItems.eq( current ),
									largeSrc	= $item.children('img').data('largesrc'),
									description	= $item.children('span').text();
									
								preloadImage( largeSrc, function() {
									
									$loading.hide();
									
									//get dimentions for the image, based on the windows size
									var	dim	= getImageDim( largeSrc );
									
									$preview.children('img.ib-preview-img')
												    .attr( 'src', largeSrc )
													.css({
										width	: dim.width,
										height	: dim.height,
										left	: dim.left,
										top		: dim.top
													})
													.end()
													.find('span.ib-preview-descr')
													.text( description );
									
									$ibWrapper.scrollTop( $item.offset().top )
											  .scrollLeft( $item.offset().left );
									
									isAnimating	= false;
									
								});
								
							},
							// closes the fullscreen image item
							closeImgPreview				= function() {
							
								if( isAnimating ) return false;
								
								isAnimating	= true;
								
								var $item	= $ibImgItems.eq( current );
								
								$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
												.hide()
												.end()
												.animate({
													height	: $item.height(),
													top		: $item.offset().top
													}, 500, 'easeOutExpo', function() {
													
													$(this).animate({
														width	: $item.width(),
														left	: $item.offset().left
														}, 400, function() {
														
															$(this).fadeOut(function() {isAnimating	= false;});
														
													} );
												
												});
							
							},
							// closes the fullscreen content item
							closeContentPreview			= function() {
								
								if( isAnimating ) return false;
								
								isAnimating	= true;
								
								var $item	= $ibItems.not('.ib-image').eq( current );
								
								$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
														.hide()
														.end()
														.animate({
															height	: $item.height(),
															top		: $item.offset().top
														}, 500, 'easeOutExpo', function() {
															
															$(this).animate({
																width	: $item.width(),
																left	: $item.offset().left
															}, 400, function() {
																
																$(this).fadeOut(function() {isAnimating	= false;});
																
															} );
														
														});
							
							},
							// get the size of one image to make it full size and centered
							getImageDim					= function( src ) {
								
								var img     	= new Image();
								img.src     	= src;
								
								var w_w	= $(window).width(),
									w_h	= $(window).height(),
									r_w	= w_h / w_w,
									i_w	= img.width,
									i_h	= img.height,
									r_i	= i_h / i_w,
									new_w, new_h,
									new_left, new_top;
								
								if( r_w > r_i ) {
								
									new_h	= w_h;
									new_w	= w_h / r_i;
								
								}	
								else {
								
									new_h	= w_w * r_i;
									new_w	= w_w;
								
								}
								
								return {
									width	: new_w,
									height	: new_h,
									left	: (w_w - new_w) / 2,
									top		: (w_h - new_h) / 2
								};
							
							};
						
						return { init : init };
						
					})();
				
				Template.init();
				
            });

           

Lean Slider

              $(document).ready(function() {
                var slider = $('#slider').leanSlider({
                    directionNav: '#slider-direction-nav',
                    controlNav: '#slider-control-nav'
                });
            });
              

Our Services Section with animation

             $(function() {
				$('#sti-menu').iconmenu();
			});
            

Portfolio slideshow

                       jQuery(document).ready(function(){
                        jQuery(function() {
                            jQuery('ul.da-thumbs > li').hoverdir();
                        });
                        });
                       

Gallery

                       
                         <script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">	
			<div class="rg-image-wrapper">
				{{if itemsCount > 1}}
					<div class="rg-image-nav">
						<a href="#" class="rg-image-nav-prev">Previous Image</a>
						<a href="#" class="rg-image-nav-next">Next Image</a>
					</div>
				{{/if}}
				<div class="rg-image"></div>
				<div class="rg-loading"></div>
				<div class="rg-caption-wrapper">
					<div class="rg-caption" style="display:none;">
						<p></p>
					</div>
				</div>
			</div>
		</script>
                       

3D Slider

                       
                       			$(function() {
				
				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$shadow.show();

							},
							orientation : 'r',
							cuboidsRandom : true,
							disperseFactor : 30
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

						};

						return { init : init };

				})();

				Page.init();

			});
                       
                       

Layer Slider

                       
                       $(document).ready(function(){
                        $('#slideShow').ayaSlider({
                           easeIn : 'easeOutBack',
                           easeOut : 'linear',
                           delay : 5000,
                           timer : $('#layer_slider'),
                           previous : $('.prev'),
                           next : $('.next'),
                           list : $('.slideControl')
                        });
                    });	
                       
                       

Nivo Slider

                       
                        $(window).load(function() {
                        $('#nivo').nivoSlider();
                    });
                       
                       

Parallax Slider

                       
                       $(function() {			
                        $('#da-slider').cslider({
                            autoplay	: true,
                            bgincrement	: 50
                        });
                    
                    });                       
                       

Portfolio Slider

                       
                       var o = {
                        init: function(){
                            this.portfolio.init();
                        },
                        portfolio: {
                            data: {
                            },
                            init: function(){
                                $('#portfolio').portfolio(o.portfolio.data);
                            }
                        }
                    }
                    
                    $(function(){ o.init(); });
                       
                       

Icon glyphs

140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons.

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen

Glyphicons attribution

Glyphicons Halflings are normally not available for free, but an arrangement between Bootstrap and the Glyphicons creators have made this possible at no cost to you as developers. As a thank you, we ask you to include an optional link back to Glyphicons whenever practical.


How to use

All icons require an <i> tag with a unique class, prefixed with icon-. To use, place the following code just about anywhere:

<i class="icon-search"></i>

There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.

<i class="icon-search icon-white"></i>

Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.


Icon examples

Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Buttons

Button group in a button toolbar
<div class="btn-toolbar">
  <div class="btn-group">

    <a class="btn" href="#"><i class="icon-align-left"></i></a>
    <a class="btn" href="#"><i class="icon-align-center"></i></a>
    <a class="btn" href="#"><i class="icon-align-right"></i></a>
    <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  </div>
</div>
Dropdown in a button group
<div class="btn-group">
  <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
  </ul>
</div>
Button sizes
<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-small" href="#"><i class="icon-star"></i> Star</a>
<a class="btn btn-mini" href="#"><i class="icon-star"></i> Star</a>

Navigation

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="i"></i> Misc</a></li>
</ul>

Form fields

<div class="control-group">
  <label class="control-label" for="inputIcon">Email address</label>
  <div class="controls">
    <div class="input-prepend">
      <span class="add-on"><i class="icon-envelope"></i></span>
      <input class="span2" id="inputIcon" type="text">
    </div>
  </div>
</div>