Parallax606

Welcome to Parallax606.

Hello, firstly I would like to thank you for purchasing " Parallax606 - 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/01/2013

Installation:

Parallax606 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. Parallax606 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-fixed-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="#" > Parallax606 < /a > 
           < div class="nav-collapse collapse" > 
             < ul class="nav" > 
               < li class="active" >  < a href="#intro" > Home < /a >  < /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 > 
             < /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: #3ABEB4 !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: #3ABEB4 !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;
            }
              
              

BlurSlideShow

Blur Slide Show

Your code should look like the following.

             
             <div id="welcome">
                    <div class="container-fluid clearfix" style="padding:0; overflow:hidden">
                        <ul class="cb-slideshow">
                            <li><span>Image 01</span>
                                <div>
                                    <h3>One morning, when Gregor Samsa woke from troubled </h3>
                                </div>
                            </li>
                            <li><span>Image 02</span>
                                <div>
                                    <h3>dreams, he found himself transformed in his bed into a </h3>
                                </div>
                            </li>
                            <li><span>Image 03</span>
                                <div>
                                    <h3>horrible vermin. He lay on his armour-like back, and if he</h3>
                                </div>
                            </li>
                            <li><span>Image 04</span>
                                <div>
                                    <h3>lifted his head a little he could see his brown belly, slightly</h3>
                                </div>
                            </li>
                            <li><span>Image 05</span>
                                <div>
                                    <h3>domed and divided by arches into stiff sections.</h3>
                                </div>
                            </li>
                            <li><span>Image 06</span>
                                <div>
                                    <h3>The bedding was hardly.</h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
             
              

Your CSS code.

              
              ul, ol {
  margin: 0;
  padding: 0;
}

.cb-slideshow {
  height: 770px;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 0;
}

.cb-slideshow:after {
  content: '';
  background: transparent url(../images/blur_slider/pattern.png) repeat top left;
  position: absolute;
  height: 770px;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}

.cb-slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 36s linear infinite 0s;
  -moz-animation: imageAnimation 36s linear infinite 0s;
  -o-animation: imageAnimation 36s linear infinite 0s;
  -ms-animation: imageAnimation 36s linear infinite 0s;
  animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li div {
  z-index: 1000;
  position: absolute;
  bottom: 205px;
  left: 0px;
  width: 100%;
  text-align: center;
  opacity: 0;
  -webkit-animation: titleAnimation 36s linear infinite 0s;
  -moz-animation: titleAnimation 36s linear infinite 0s;
  -o-animation: titleAnimation 36s linear infinite 0s;
  -ms-animation: titleAnimation 36s linear infinite 0s;
  animation: titleAnimation 36s linear infinite 0s;
}

.cb-slideshow li div h3 {
  font-family: 'Kelly Slab', cursive;
  font-size: 45px;
  padding: 0 30px;
  line-height: 65px;
  color: rgba(255,255,255,0.8);
  text-shadow: 4px 5px 0 rgba(0, 0, 0, 0.4);
}

.cb-slideshow li:nth-child(1) span {
  background-image: url(../images/blur_slider/1.jpg);
}

.cb-slideshow li:nth-child(2) span {
  background-image: url(../images/blur_slider/2.jpg);
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) span {
  background-image: url(../images/blur_slider/3.jpg);
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) span {
  background-image: url(../images/blur_slider/4.jpg);
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) span {
  background-image: url(../images/blur_slider/5.jpg);
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) span {
  background-image: url(../images/blur_slider/6.jpg);
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) div {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) div {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) div {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) div {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

@-webkit-keyframes imageAnimation {
 
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }

  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes imageAnimation {
 
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }

  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }

  25% {
    opacity: 0;
    -moz-transform: scale(1.1) translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes imageAnimation {
 
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -o-transform: scale(1.1);
  }

  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }

  25% {
    opacity: 0;
    -o-transform: scale(1.1) translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes imageAnimation {
 
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -ms-transform: scale(1.1);
  }

  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }

  25% {
    opacity: 0;
    -ms-transform: scale(1.1) translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}

@keyframes imageAnimation {
 
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    transform: scale(1.1);
  }

  22% {
    opacity: 0;
    -webkit-transform: scale(1.1) translateY(-20%);
  }

  25% {
    opacity: 0;
    -transform: scale(1.1) translateY(-100%);
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes titleAnimation {
 
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300%);
  }

  8% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }

  17% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }

  19% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-moz-keyframes titleAnimation {
 
  0% {
    opacity: 0;
    -moz-transform: translateY(-300%);
  }

  8% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }

  17% {
    opacity: 1;
    -moz-transform: translateY(0%);
  }

  19% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-o-keyframes titleAnimation {
 
  0% {
    opacity: 0;
    -o-transform: translateY(-300%);
  }

  8% {
    opacity: 1;
    -o-transform: translateY(0%);
  }

  17% {
    opacity: 1;
    -o-transform: translateY(0%);
  }

  19% {
    opacity: 0;
    -o-transform: translateY(100%);
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@-ms-keyframes titleAnimation {
 
  0% {
    opacity: 0;
    -ms-transform: translateY(-300%);
  }

  8% {
    opacity: 1;
    -ms-transform: translateY(0%);
  }

  17% {
    opacity: 1;
    -ms-transform: translateY(0%);
  }

  19% {
    opacity: 0;
    -ms-transform: translateY(100%);
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes titleAnimation {
 
  0% {
    opacity: 0;
    transform: translateY(-300%);
  }

  8% {
    opacity: 1;
    transform: translateY(0%);
  }

  17% {
    opacity: 1;
    transform: translateY(0%);
  }

  19% {
    opacity: 0;
    transform: translateY(100%);
  }

  25% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}

@media screen and (max-width: 1140px) {
 
  .cb-slideshow li div h3 {
    font-size: 100px;
  }
}

@media screen and (max-width: 600px) {
 
  .cb-slideshow li div h3 {
    font-size: 50px;
  }
}
              
              
              

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">
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">A</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Web Design</h2>

                                                     <h3 class="ca-sub">Personalized to your needs</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">I</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Web Development</h2>

                                                     <h3 class="ca-sub">Advanced use of technology</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">C</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Wordpress</h2>

                                                     <h3 class="ca-sub">Understanding visually</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">S</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Sophisticated Team</h2>

                                                     <h3 class="ca-sub">Professionals in action</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row-fluid">
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">d</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Brand Creation</h2>

                                                     <h3 class="ca-sub">24/7 for you needs</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="span6">
                                    <div class="ca-menu">
                                        <div>
                                            <a href="#"> <span class="ca-icon">O</span>

                                                <div class="ca-content">
                                                     <h2 class="ca-main">Corporate Identity</h2>

                                                     <h3 class="ca-sub">Lorem ipsum dolor</h3>

                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
              
              

Your CSS code.

              
              /****Services*****/
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.ca-menu {
    font-family: 'Kelly Slab',cursive !important;
    padding: 0;
    margin: 20px auto;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    background: #fff;
}

.ca-menu h1,.ca-menu h2 {
    font-family: 'Kelly Slab',cursive !important;
}

.ca-menu div {
    overflow: hidden;
    position: relative;
    display: block;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.ca-menu div a {
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #575757;
    position: relative;
}

.ca-icon {
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 60px;
    color: #575757;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-content {
    position: absolute;
    left: 120px;
    top: 0;
}

.ca-content h2 {
    line-height: 25px;
    margin-top: 23px;
    width: 70%;
}

.ca-content h3 {
    line-height: 27px;
    margin-bottom: 15px;
    width: 75%;

}

.ca-main {
    font-size: 25px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-menu:hover {
    background: #3ABEB4;
}

.ca-menu a:hover {
    background: #3ABEB4;
}

.ca-sub {
    font-size: 14px;
    color: #666;
}

.ca-menu div:hover .ca-icon {
    color: #fff;
    font-size: 120px;
    opacity: 0.3;
    left: -20px;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    text-shadow: 1px 1px 0px #1f7a71!important;
    filter: dropshadow(color=#1f7a71, offx=2, offy=1)!important;
}

.ca-menu div:hover .ca-main {
    text-shadow: 1px 1px 0px #1f7a71!important;
    filter: dropshadow(color=#1f7a71, offx=2, offy=1)!important;
    color: #fff;
    opacity: 0.9;
}

.ca-menu div:hover .ca-sub {
    text-shadow: 1px 1px 0px #1f7a71!important;
    filter: dropshadow(color=#1f7a71, offx=2, offy=1)!important;
    color: #fff;
    opacity: 0.8;
}

              
              
              

Camera slideshow

Lean Slider

Your code should look like the following.

              
               < div class="container-fluid clearfix LargeSlider" > 
             < div class="camera_wrap camera_emboss" id="camera_wrap_3" > 
            
             < div data-src="images/camera/slides/1.jpg" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/3.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/poster.jpg" > 
             < iframe width="100%" height="100%" src="http://www.youtube.com/embed/EokWzMUJcCU?feature=player_detailpage" frameborder="0" allowfullscreen >  < /iframe > 
             < /div > 
            
             < div data-src="images/camera/slides/4.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/5.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/6.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/7.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/8.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < div data-src="images/camera/slides/9.jpg" data-time="1500" data-trasPeriod="4000" data-link="#" data-target="_blank" > 
             < div class="fadeIn camera_effected Caption" > " Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero " < /div > 
             < /div > 
            
             < /div >  < !-- #camera_wrap_3 -- > 
        
    
     < /div > 
              
              

Your CSS code in the File camera.css

Portfolio filter Photos

Lean Slider

Your code should look like the following.

              
              <div id="Portfolio" > 
                    <div class="container-fluid clearfix Portfolio" > 
                        <div class="container clearfix TitleSection" > 
                            
<h1 > Our <span > Portfolio</span >  </h1 >  
                            
<h1 > <span > Lorem</span >  ipsum <span > dolor</span >  sit <span > amet</span > </h1 > 

                        </div > 
                        <div class="container clearfix" > 
                            <div class="span12" > 
                                <p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat,
                                    sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis
                                    vel ultrices facilisis, nisi mauris sollicitudin mauris.</p > 
                            </div > 
                            <div class="row-fluid" > 
                                <div class="span12" > 
                                    <nav id="filter" > </nav > 
                                    <section id="container" > 
                                        <ul id="stage" > 
                                            <li data-tags="Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/1.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Video,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/2.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design,Video" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/3.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/4.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Video" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/5.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design,Video,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/6.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Video,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/7.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/8.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design,Video" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/9.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/10.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Video,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/11.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Video,Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/12.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Photographies" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/13.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Web Design,Video" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/14.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                            <li data-tags="Audio" > 
                                                <div class="filter-thumb-container" > 
                                                    <div class="filter-thumb" >  <span > <img src="images/portfolio/18.jpg" alt="Portfolio Filter" / > </span > 

                                                    </div > 
                                                </div > 
                                                <div > 
                                                     <h4 > Lorem ipsum dolor </h4 >  
                                                    <p > Lorem ipsum</p > 
                                                </div > 
                                            </li > 
                                        </ul > 
                                    </section > 
                                </div > 
                            </div > 
                        </div > 
                    </div > 
                </div > 
              
              
              
              

Your CSS code.

              
              

#filter {
    display: block;
    margin: 55px auto;
    text-align: center;
}

#filter a {
    color: #666;
    display: inline-block;
    height: 39px;
    line-height: 37px;
    padding: 0 15px;
    margin: 0 15px;
    text-shadow: 1px 1px 0 #FFF;
    text-decoration: none;
}

#filter a:hover {
    text-decoration: underline;
}

#filter a.active {
    color: #FFF;
    background-color: #3ABEB4;
    text-shadow: 1px 1px 1px #06666D;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2),
				-1px 0 0 rgba(255, 255, 255, 0.2),
				1px 0 1px rgba(0,0,0,0.2) inset,
				-1px 0 1px rgba(0,0,0,0.2) inset;
}

/**** Portfolio filter Photos ****/

#container {
    display: block;
    overflow: hidden;
    margin: 0 auto;
}

#container li {
    float: left;
    list-style: none outside none;
    margin: 25px 19px 20px;
    position: relative;
    width: 190px;
    height: 240px;
    border-bottom: 1px solid #CCCCCC;
}

#container li:hover {
    border-bottom: 1px solid #3ABEB4;
}

#container li > div {
    float: left;
}

#container li > div >p , #container li > div >h4 {
    text-shadow: 1px 1px 0 #FFF;
}

#container li img {
    width: 150px;
    height: 150px;
}

#container li img:hover {
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.30);
}

#container ul.hidden {
    display: none;
}
/*filter-thumbs*/
.filter-thumb-container {
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.filter-thumb {
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 0px 7px rgba(255,255,255,0.4);
    -moz-box-shadow: inset 0px 0px 0px 7px rgba(255,255,255,0.4);
    box-shadow: inset 0px 0px 0px 7px rgba(255,255,255,0.4);
}

.filter-thumb span {
    width: 100%;
    float: left;
}

.filter-thumb, .filter-thumb span, .filter-thumb span img {
    max-width: 250px;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    overflow: hidden;
}

.filter-thumb span img {
    position: relative;
    z-index: -1;
    max-width: 100%;
    margin: 0 auto;
    -ms-interpolation-mode: bicubic;
    overflow: hidden;
}


              

Lean Slider

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

Camera slideshow

              jQuery(function(){                
                jQuery('#camera_wrap_3').camera({
                    height: '65%',
                    pagination: false,
                    thumbnails: true,
                    imagePath: '../images/'
                });    
                    });
                      

Portfolio filter Photos

                      
                     /***Filter Page***/
        $(document).ready(function() {
        
            var items = $('#stage li'),
            itemsByTags = {};
        
            // Looping though all the li items:
            items.each(function(i) {
                var elem = $(this),
                tags = elem.data('tags').split(',');
        
                // Adding a data-id attribute. Required by the Quicksand plugin:
                elem.attr('data-id', i);
        
                $.each(tags, function(key, value) {
        
                    // Removing extra whitespace:
                    value = $.trim(value);
        
                    if (! (value in itemsByTags)) {
                        // Create an empty array to hold this item:
                        itemsByTags[value] = [];
                    }
        
                    // Each item is added to one array per tag:
                    itemsByTags[value].push(elem);
                });
        
            });
        
            // Creating the "Everything" option in the menu:
            createList('Show All', items);
        
            // Looping though the arrays in itemsByTags:
            $.each(itemsByTags, function(k, v) {
                createList(k, v);
            });
        
            $('#filter a').live('click', function(e) {
                var link = $(this);
        
                link.addClass('active').siblings().removeClass('active');
        
                // Using the Quicksand plugin to animate the li items.
                // It uses data('list') defined by our createList function:
                $('#stage').quicksand(link.data('list').find('li'));
                e.preventDefault();
            });
        
            $('#filter a:first').click();
        
            function createList(text, items) {
        
                // This is a helper function that takes the
                // text of a menu button and array of li items
                // Creating an empty unordered list:
                var ul = $(' < ul > ', {
                    'class': 'hidden'
                });
        
                $.each(items, function() {
                    // Creating a copy of each li item
                    // and adding it to the list:
                    $(this).clone().appendTo(ul);
                });
        
                ul.appendTo('#container');
        
                // Creating a menu item. The unordered list is added
                // as a data parameter (available via .data('list'):
                var a = $(' < a > ', {
                    html: text,
                    href: '#',
                    data: {
                        list: ul
                    }
                }).appendTo('#filter');
            }
        });

              

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>