Navigational Bar

The navigation is a fixed header that appears after scrolling past the welcome section. It will shrink to a dropdown menu on top on smaller devices.

To change links in the menu, change the li tags in ul tag with the nav class.

<ul class="nav navbar-nav">
  <li><a href="#about"><span class="glyphicon glyphicon-user"></span>Team</a></li>
  <li><a href="#services"><i class="icon-gear"></i>Services</a></li>
  <li><a href="#work"><span class="glyphicon glyphicon-briefcase"></span>Work</a></li>
  <li><a href="#pricing"><i class="icon-dollar"></i></span>Pricing</a></li>
  <li><a href="#clients"><i class="icon-comments"></i></span>Clients</a></li>
</ul>

Team Portraits

The team portraits consists of 3 team member profiles. This is a cutout of one of them.

The name is in the h2 tag and the member description is in the p tag

To change the social media links, add the links to the href fields of the a tags

<div class="col-md-4 col-sm-4 col-xs-12">
  <h2>Michael Chang</h2>
  <h3 class="italic">Developer</h3>
  <div class="portrait">
    <img src="img/portrait2.jpg" alt="Team Portrait">              
  </div>
  <p>Hi, I'm Michael Chang. I am a developer who specializes on CSS, HTML and Javascript. I'm excited to work more and learn more about design.</p>
  <div class="social-media">
    <a href="#" data-toggle="tooltip" title="twitter"><i class="icon-twitter"></i></a>
    <a href="#" data-toggle="tooltip" title="facebook"><i class="icon-facebook"></i></a>
    <a href="#" data-toggle="tooltip" title="linkedin"><i class="icon-linkedin"></i></a>
    <a href="#" data-toggle="tooltip" title="github"><i class="icon-github"></i></a>
    <a href="#" data-toggle="tooltip" title="pinterest"><i class="icon-pinterest"></i></a>
  </div>
</div>

Services

The services section consists of 4 circles that represent different services one could offer. They also have a tooltip that appears on hover.

You can change the title of the circle in thespan tag, and also change the tooltip text in the title field of the icon.

<div class="col-md-3 col-sm-3 col-xs-6">
  <div class="service-icon">
    <i class="icon-sitemap" data-toggle="tooltip" title="Professional application planning, including mockups, wireframes, and designs."></i>
    <span>PLANNING</span>                
  </div>
</div>

Portfolio Items

The portfolio uses MixItUp to sort and filter categories of items. To learn how to use that check the javascript section.

To change the portfolio image change the img tag. You can also change the link in the a tag

<li class="col-md-4 col-sm-4 col-xs-12 mix category_1" data-cat="1">
  <a href="#" class="mix-cover">
    <img src="img/sintel-bedroom.png">
    <span class="cover"><h2>Sintel Bedroom</h2></span>
  </a>
</li>
        

Pricing

The pricing section contains 3 pricing options. It uses a table structure to organize the information.

To change the price change the h2 tag. You can edit the features of each option in the tbody.

<div class="wrapper">
  <h3 class="text-center"><span class="glyphicon glyphicon-leaf"></span>Single Application</h3>
  <table class="table">
    <thead>
      <tr><th><h2><i class="icon-dollar"></i>9</h2></th></tr>
    </thead>
    <tbody>
      <tr><td>One Time Installation</td></tr>
      <tr><td>No reselling </td></tr>
      <tr><td>Free Email Support</td></tr>  
      <tr><td><a class="btn" href="#">PURCHASE NOW</a></td></tr>  
    </tbody>
  </table>
</div>

Clients and Testimonials

This section consists of 2 parts, the logos and the testimonials. When you hover over a logo it switches to the correct testimonial.

To change the logos change the img tags within the logo divs.

To change the testimonials change the tab-pane divs within tab-content

<div class="row">
  <div class="logo col-md-3 col-sm-3 col-xs-12"><a class="tab" href="http://webdesigncrowd.com" data-target="#wdc" data-toggle="tab"><img src="img/logo.png"></a></div>
  <div class="logo col-md-3 col-sm-3 col-xs-12"><a class="tab" href="https://creativemarket.com/webdesigncrowd/" data-target="#creativemarket" data-toggle="tab"><img src="img/CreativeMarket-Logo.png"></a></div>
</div>
    
<div class="row">
  <div class="empty col-md-1 col-sm-1 col-xs-12"></div>
  <div class="col-md-10 col-sm-10 col-xs-12">
    <div class="tab-content">
      <div class="tab-pane fade" id="wdc">WebDesignCrowd</div>
      <div class="tab-pane active fade in" id="creativemarket">Creative Market is a platform for handcrafted, mousemade design content from independent creatives around the world. We’re passionate about making beautiful design simple and accessible to everyone.</div>
    </div>
  </div>
  <div class="empty col-md-1 col-sm-1 col-xs-12"></div>
</div>

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

How To Edit CSS

Here are some popular things you can edit easily with CSS. Obviously I can't list everything so if there is a specific css question feel free to email me.

    #primaryContent a {
        color: #someColor;
        font-size: 40px;
     	font-family: Arial, Helvetica, sans-serif;
    }
    #item {
        background-color: #someColor;
    }
    

CSS Structure

The style.css sheet contains all my styles. It's organized so you can easily find what styles correspond to what.

/*  NAVBAR
 *    stylings for fixed navbar
 */

CSS code

/*  SECTION
 *    stylings for sections
 */

CSS code

/*  SERVICES
 *    stylings for services content
 *    image background parallax
 *    Supports grids of multiple sizes (half, thirds, quarters, etc.)
 */

CSS code

/*  PORTFOLIO
 *    stylings for portfolio
 */

CSS code

/*  CLIENTS and TESTIMONIALS
 *    stylings for testimonials
 */

CSS code

etc, etc.
					

JavaScript Files

Only edit init.js, the rest of the files are plugins or libraries that shouldn't be edited

MixItUp Portfolio / Gallery

The gallery uses a jQuery plugin called mixitup where you can tag items with certain categories which you can then hide and show depending on specific categories.

You can assign categories to your gallery items by adding a category name as a class to the li tags with class mix

For the button filters, you can add data-filters that correspond to classes you assign gallery items.

      <div class="controls">	
  <a class="btn filter" data-filter="all">SHOW ALL</a>
  <a class="btn filter" data-filter="category_1">CATEGORY 1</a>
  <a class="btn filter" data-filter="category_2">CATEGORY 2</a>
  <a class="btn filter" data-filter="category_3">CATEGORY 3</a>
  <a class="btn filter" data-filter="category_1 category_3">CATEGORY 1 &amp; 3</a>
</div>
      <li class="col-md-4 col-sm-4 col-xs-12 mix category_1" data-cat="1">
        <a href="#" data-toggle="modal" data-target="#myModal" class="mix-cover"><span class="cover"><h2>Sintel Bedroom</h2></span>
    </a>
</li>
  <li class="col-md-4 col-sm-4 col-xs-12 mix category_2" data-cat="3">
    <a href="#" class="mix-cover"><span class="cover"><h2>Ishtar Alley</h2></span>
    </a>  
  </li>
  <li class="col-md-4 col-sm-4 col-xs-12 mix category_3" data-cat="3">
    <a href="#" class="mix-cover"><span class="cover"><h2>Ishtar Wallpaper</h2></span>
    </a>
  </li>
</div>
	</div>
  </div>
  
  <hr />
	<div class="row">
	<div class="span3">
	  <h3>Parallax Backgrounds</h3>
	  <p>Besides the first background image, you can also set content sections to have custom background images with parallax scrolling.</p>   
	  <p>To do this, add the class image to the desired section. Then you can edit the css file and add a background image to that sections background class.</p>
	</div>
<div class="span9">
<pre class="prettyprint js linenums:103">
<xmp class="prettyprint"><div id="services" class="section image">
  <div class="background parallax"></div>
</div>

#services .background {
  background: url("../img/office.jpg") fixed no-repeat; 
}