index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OnePager - One Page Responsive Portfolio Template</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="styles/style.css" media="screen" />
<link rel="stylesheet" href="styles/media-queries.css" />
<link rel="stylesheet" href="./flex-slider/flexslider.css" type="text/css" media="screen" />
<link href="styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/tipsy.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript" src="./scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./flex-slider/jquery.flexslider-min.js"></script>
<script src="scripts/jquery.prettyPhoto.js" type="text/javascript"></script>
<script src="scripts/jquery.tipsy.js" type="text/javascript"></script>
<script src="scripts/jquery.knob.js" type="text/javascript"></script>
<script type="text/javascript" src="./scripts/jquery.isotope.min.js"></script>
<script type="text/javascript" src="./scripts/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="./scripts/waypoints.min.js"></script>
<script type="text/javascript" src="./scripts/setup.js"></script>


</head>
<body>
<div id="wrap"> 
  <!-- wrapper -->
  <div id="sidebar"> 
    <!-- the  sidebar --> 
    <!-- logo --> 
    <a href="#" id="logo"> <img src="./images/logo.png" alt="" /></a> 
    <!-- navigation menu -->
    <ul id="navigation">
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#about">About Us</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#skills">Our Skills</a></li>
      <li><a href="#industries">Industries</a></li>
      <li><a href="#myclients">Our Clients</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="container"> 
    <!-- page container -->
    <div class="page" id="home"> 
      <!-- page home -->
      <div class="page_content">
        <div class="gf-slider"> 
          <!-- slider -->
          <ul class="slides">
            <li> <img src="images/01.jpg" alt="" />
              <p class="flex-caption"> Super-awesome simplistic-styled easily customizable one page scrolling portfolio
                template</p>
            </li>
            <li> <img src="images/02.jpg" alt="" />
              <p class="flex-caption"> With Special Customization this template is perfect to be used as a blog template
                also</p>
            </li>
            <li> <img src="images/03.jpg" alt="" />
              <p class="flex-caption"> Fully responsive layout supported on all devices including tablet and smartphones</p>
            </li>
            <li> <img src="images/04.jpg" alt="" />
              <p class="flex-caption"> Purchase it now to grab it and use it on your work and make experiments with it</p>
            </li>
            <li> <img src="images/05.jpg" alt="" />
              <p class="flex-caption"> Fully responsive layout supported on all devices including tablet and smartphones</p>
            </li>
          </ul>
        </div>
        <div class="space"> </div>
        <div class="clear"> </div>
        <!-- services -->
        <div class="one_half first">
          <div class="column_content">
            <h4> Coded with Love!</h4>
            <img src="images/coded-with-love.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="one_half last">
          <div class="column_content">
            <h4> Responsive Layout</h4>
            <img src="images/responsive.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="space"> </div>
        <div class="one_half first">
          <div class="column_content">
            <h4> Perfect for Portfolios</h4>
            <img src="./images/for-portfolio.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="one_half last">
          <div class="column_content">
            <h4> Easily Customizable</h4>
            <img src="./images/customizable.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="space"> </div>
        <div class="one_half first">
          <div class="column_content">
            <h4> Image Gallery </h4>
            <img src="./images/image-gallery.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="one_half last">
          <div class="column_content">
            <h4> jQuery Powered</h4>
            <img src="./images/jquery-code.png" class="left no_border" alt="" style="margin-top: 10px;
                                margin-right: 10px" />
            <p> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at feugiat
              felis. Ut faucibus molestie turpis, sit amet scelerisque ipsum scelerisque quis.
              Quisque suscipit fermentum sodales.</small></p>
          </div>
        </div>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="page" id="about"> 
      <!-- page about -->
      <h3 class="page_title"> About Us</h3>
      <div class="page_content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.</p>
        <h4 class="blue"> Why Choose Us</h4>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
          deserunt mollit anim id est laborum.</p>
        <blockquote> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua.
          <p> <small><b>Sarfraz Shoukat</b> - Owner <a href="#">Greepit.com</a></small></p>
        </blockquote>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="page" id="portfolio"> 
      <!-- page portfolio -->
      <h3 class="page_title"> Portfolio</h3>
      <div class="page_content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <ul id="works_filter">
          <li><a href="#" data-filter="*" class="selected">Show All</a></li>
          <li><a href="#" data-filter=".css">CSS</a></li>
          <li><a href="#" data-filter=".html_php">HTML / PHP</a></li>
          <li><a href="#" data-filter=".js">JavaScript</a></li>
        </ul>
        <div class="clear"> </div>
        <div id="works"> 
          <!-- works --> 
          <a rel="prettyPhoto[gallery]" href="images/photos/01.jpg"> <img class="work js" src="images/photos/01.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/03.jpg"> <img class="work css" src="images/photos/03.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/04.jpg"> <img class="work html_php" src="images/photos/04.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/05.jpg"> <img class="work html_php" src="images/photos/05.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/06.jpg"> <img class="work css" src="images/photos/06.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/07.jpg"> <img class="work js" src="images/photos/07.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/08.jpg"> <img class="work html_php" src="./images/photos/08.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/09.jpg"> <img class="work js" src="images/photos/09.jpg" alt="" /> </a><a rel="prettyPhoto[gallery]" href="images/photos/10.jpg"> <img class="work html_php" src="images/photos/10.jpg" alt="" /> </a> </div>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="page" id="skills"> 
      <!-- page skills -->
      <h3 class="page_title"> Our Skills</h3>
      <div class="page_content"> 
   
        <div class="one_fourth first">
          <div class="column_content">
            <h4 class="blue"> Photoshop</h4>
            <input class="knob" data-readonly="true" data-width="120" data-min="0" data-angleoffset="0"
                                data-displayprevious="true" data-fgcolor="#cfdee7" data-bgcolor="#0d4667" value="65">
          </div>
        </div>
        <div class="one_fourth">
          <div class="column_content">
            <h4 class="blue"> HTML5</h4>
            <input class="knob" data-readonly="true" data-width="120" data-min="0" data-angleoffset="0"
                                data-displayprevious="true" value="45" data-fgcolor="#cfdee7" data-bgcolor="#0d4667">
          </div>
        </div>
        <div class="one_fourth">
          <div class="column_content">
            <h4 class="blue"> jQuery</h4>
            <input class="knob" data-readonly="true" data-width="120" data-min="0" data-angleoffset="0"
                                data-displayprevious="true" value="85" data-fgcolor="#cfdee7" data-bgcolor="#0d4667">
          </div>
        </div>
        <div class="one_fourth last">
          <div class="column_content">
            <h4 class="blue"> CSS3</h4>
            <input class="knob" data-readonly="true" data-width="120" data-min="0" data-angleoffset="0"
                                data-displayprevious="true" value="95" data-fgcolor="#cfdee7" data-bgcolor="#0d4667">
          </div>
        </div>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>
    <div class="page" id="industries"> 
      <!-- page industries -->
      <h3 class="page_title"> Industries We Serve!</h3>
      <div class="page_content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="space"> </div>
        <div class="clear"> </div>
        <ul class="sublist">
          <li><a href="#">Freebies</a></li>
          <li><a href="#">Category Names</a></li>
          <li><a href="#">Graphic Design</a></li>
          <li><a href="#">Akay Akagunduz</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Themeforest</a></li>
          <li><a href="#">Reviews</a></li>
          <li><a href="#">Links</a></li>
          <li><a href="#">Tutorials</a></li>
          <li><a href="#">Others</a></li>
          <li><a href="#">Web Development</a></li>
        </ul>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="page" id="myclients"> 
      <!-- page clients -->
      <h3 class="page_title"> Our Clients</h3>
      <div class="page_content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="space"> </div>
        <div class="clear"> </div>
        <ul id="clients" class="grid">
          <li class="altoids"><a href="#" rel="altoids"> <img src="images/clients/Altoids.png" alt="Altoids"></a></li>
          <li class="facebook"><a href="#" rel="facebook"> <img src="images/clients/Facebook.png" alt="Facebook"></a></li>
          <li class="ge"><a href="#" rel="general-electric"> <img src="images/clients/GE.png" alt="General Electric"></a></li>
          <li class="orbit"><a href="#" rel="orbit"> <img src="images/clients/orbitlogo.png" alt="Orbit"></a></li>
          <li class="skittles"><a href="#" rel="skittles"> <img src="images/clients/Skittles.png" alt="Skittles"></a></li>
          <li class="jameson"><a href="#" rel="jameson"> <img src="images/clients/Jameson.png" alt="Jameson"></a></li>
          <li class="juicy_fruit"><a href="#" rel="juicy-fruit"> <img src="images/clients/Juicy-Fruit.png" alt="Juicy Fruit"></a></li>
          <li class="microsoft"><a href="#" rel="microsoft"> <img src="images/clients/Microsoft.png" alt="Microsoft"></a></li>
          <li class="a_e"><a href="#" rel="ae"> <img src="images/clients/AE.png" alt="A&amp;E"></a></li>
          <li class="zynga"><a href="#" rel="zynga"> <img src="images/clients/Zynga.png" alt="Zynga"></a></li>
          <li class="smuin"><a href="#" rel="smuin"> <img src="images/clients/Smuin.png" alt="Smuin"></a></li>
          <li class="westfield"><a href="#" rel="westfield"> <img src="images/clients/Westfield.png" alt="Westfield"></a></li>
        </ul>
        <div class="clear"> </div>
      </div>
    </div>
    <div class="page" id="contact"> 
      <!-- page contact -->
      <h3 class="page_title"> Let's Get in Touch</h3>
      <div class="page_content">
        <fieldset id="contact_form">
          <div id="msgs"> </div>
          <form id="cform" name="cform" method="post" action="">
            <input type="text" id="name" name="name" value="Full Name*" onFocus="if(this.value == 'Full Name*') this.value = ''"
                            onblur="if(this.value == '') this.value = 'Full Name*'" />
            <input type="text" id="email" name="email" value="Email Address*" onFocus="if(this.value == 'Email Address*') this.value = ''"
                            onblur="if(this.value == '') this.value = 'Email Address*'" />
            <input type="text" id="subject" name="subject" value="Subject*" onFocus="if(this.value == 'Subject*') this.value = ''"
                            onblur="if(this.value == '') this.value = 'Subject*'" />
            <textarea id="msg" name="message" onFocus="if(this.value == 'Your Message*') this.value = ''"
                            onblur="if(this.value == '') this.value = 'Your Message*'">Your Message*</textarea>
            <button id="submit" class="button"> Send Message</button>
          </form>
        </fieldset>
        <div class="clear"> </div>
        <ul class="social_icons">
          <li><a href="#" id="fb" original-title="Join My Fan Club"> <img src="images/facebook.png" alt="Facebook" /></a></li>
          <li><a href="#" id="tw" original-title="Follow Me on Twitter"> <img src="images/twitter.png" alt="Twitter" /></a></li>
          <li><a href="#" id="ld" original-title="Find me on LinkedIn"> <img src="images/linkedin.png" alt="LinkedIn" /></a></li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <p> &copy; 2012 . Some Rights Reserved.</p>
      <p> More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
    </div>
  </div>
</div>
<a class="gotop" href="#top">Top</a>
</body>
</html>