Pluton - Free Single Page Bootstrap Html Template Pluton - Free Single Page Bootstrap Html Template

Pluton portfolio section

The portfolio section is sortable, which means visitors can filter your work by what they are interested in. Also, when you hover over an image, there’s an indicator, letting you know you can see a larger view.

Portfolio navigation

<ul class="nav nav-pills">
     <li class="filter" data-filter="all"><a href="#noAction">All</a></li>
     <li class="filter" data-filter="web"><a href="#noAction">Web</a></li>
     <li class="filter" data-filter="photo"><a href="#noAction">Photo</a></li>
     <li class="filter" data-filter="identity"><a href="#noAction">Identity</a></li>
Each filter item requires the attribute data-filter containing a CSS selector of the elements you wish to show which is typically the class name of that category (eg. data‑filter="photo"). The data-filter attribute also accepts the values all.

Portfolio items

You want to change the title and description for portfolio item and image, find code like this in HTML file:
<li class="span4 mix photo">
    <div class="thumbnail">
        <img src="images/Portfolio05.png" alt="project 5">
        <a href="#single-project" class="show_hide more" rel="#slidingDiv"><i class="icon-plus"></i></a>
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...</p>
       <div class="mask"></div>
li element must contain class attribute with mix and the name of the appropriate data-filter from portfolio navigation. To connect portfolio item with portfolio details item set rel attribute in <a> tag with the id of portfolio detail with #.

Single portfolio item details

Click on portfolio item will be open details for the project. All detail items are placed in:
<div id="single-project"></div>
Html code for portfolio details are like this:
<div id="slidingDiv" class="toggleDiv row-fluid single-project">
   <div class="span6">
      <img src="images/Portfolio01.png" alt="project 1" />
   <div class="span6">
      <div class="project-description">
         <div class="project-title clearfix">
            <h3>Webste for Some Client</h3>
            <span class="show_hide close">
               <i class="icon-cancel"></i>
         <div class="project-info">
            <div><span>Client</span>Some Client Name</div>
            <div><span>Date</span>July 2013</div>
            <div><span>Skills</span>HTML5, CSS3, JavaScript</div>
         <p>Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.</p>

Need customization for this theme?

Hire Us