<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>CapitalCity Template</title>
		<meta name="generator" content="Bootply" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<!--[if lt IE 9]>
			<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>

<div class="navbar navbar-fixed-top alt" data-spy="affix" data-offset-top="1000">
  <div class="container">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">Home</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>
    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li><a href="#sec1">Section 1</a></li>
        <li><a href="#sec2">Section 2</a></li>
        <li><a href="#sec3">Section 3</a></li>
        <li><a href="#sec4">Section 4</a></li>
      </ul>
    </div>
   </div>
</div>

<div class="header alt vert">
  <div class="container">
    
    <h1>CapitalCity</h1>
      <p class="lead">Starter Template for Bootstrap 3</p>
      <div>&nbsp;</div>
      <a href="http://www.bootply.com/JU51oUMIye" class="btn btn-default btn-lg">Get Started</a>
  </div>
</div>

<hr>

<div id="sec1" class="blurb">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <h1>The Simplicity of Bootstrap</h1>
        <p class="lead">The Most Popular Responsive Framework</p>
      </div>
      <div class="col-md-5">
        <h1 class="pull-right"><i class="fa fa-mobile-phone fa-3x"></i> <i class="fa fa-tablet fa-3x"></i> <i class="fa fa-laptop fa-3x"></i></h1>
      </div>
    </div>
  </div>
</div>

<div class="featurette" id="sec2">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Amazing Features</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-2 text-center">
        <div class="featurette-item">
          <i class="fa fa-rocket"></i>
          <h4>Rocket</h4>
          <p>Up-up-and-away with this starter template.</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="fa fa-magnet"></i>
          <h4>Magnet</h4>
          <p>For you are a magnet and I am steel.</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="fa fa-shield"></i>
          <h4>Shield</h4>
          <p>Protect yourself. Don't design like it's 1999.</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="fa fa-pencil"></i>
          <h4>Scholar</h4>
          <p>Because lead pencils are pretty smart looking.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="callout" id="sec3">
  <div class="vert">
    <div class="col-md-12 text-center"><h2>Random People With Smiles</h2></div>
    <div class="col-md-12 text-center">&nbsp;</div>
    <div class="col-md-8 col-md-offset-2 text-center">
      <div class="row hidden-xs">
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/12.jpg"></div>
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/95.jpg"></div>
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/67.jpg"></div>
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/27.jpg"></div>
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/women/15.jpg"></div>  
       <div class="col-sm-2"><img class="img-circle grayscale" src="http://api.randomuser.me/portraits/thumb/men/18.jpg"></div>
      </div>
    </div>
  </div>
</div>

<div class="blurb" id="sec4">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1>Mobile-first</h1>
        <img src="templates/capital-city/images/bg_smartphones.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

<hr>

<div class="gallery">
  
  <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h5>This Template is Responsive</h5>
        <h2>Features Galore</h2>
        <br>
      </div>
  </div>
  
  <div class="container well well-lg">
    
    <div class="row">
    		
      	<div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-film"></i></span> Carousel</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-folder"></i></span> Tabs</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-credit-card"></i></span> Modal</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-reorder"></i></span> Navigation</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-mobile-phone"></i></span> Mobile-first</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-align-justify"></i></span> Accordion</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-list-alt"></i></span> Panel</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-check"></i></span> Form</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-table"></i></span> Table</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-eye"></i></span> Icons</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-th"></i></span> Responsive Grid</a>
          </div>
        </div>
        <div class="col-sm-3">
          <div class="list-group">
            <a href="#" class="list-group-item">
              <span class="text-success"><i class="fa fa-font"></i></span> Typography</a>
          </div>
        </div>      
    </div>
  </div>
</div>

<div class="blurb">
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <h1><i class="fa fa-plane fa-3x"></i></h1>
      </div>
      <div class="col-md-7">
        <h1 class="pull-right">Launch Your Web Design</h1>
        <p class="lead pull-right">With this Responsive Bootstrap Template</p>
      </div>
    </div>
  </div>
</div>

<div class="blurb bright">
  
  <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h3>Smashing Heading</h3>
        <br>
      </div>
  </div>
  
  <div class="row">
    <div class="col-sm-4 col-sm-offset-2">
         <div class="panel panel-default">
         <div class="panel-heading text-center"><h2><i class="fa fa-chevron-left"></i> Left</h2></div>
         <div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
          Aliquam in felis si.
            <div class="row">&nbsp;</div>
          <button class="btn btn-lg btn-primary btn-block">Login</button> 
          </div>
         </div>
 	</div>
    <div class="col-sm-4">
         <div class="panel panel-default">
         <div class="panel-heading text-center"><h2>Right <i class="fa fa-chevron-right"></i></h2></div>
         <div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
          Aliquam in felis sit.
           <div class="row">&nbsp;</div>
          <button class="btn btn-lg btn-primary btn-block">Sign Up</button> 
           
          </div>
         </div>
 	</div>
  </div>
</div>

<div class="blurb">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h3>Sharing the Bootstrap Love</h3>
        <p class="lead"></p>
      </div>
    </div>
  </div>
</div>


<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <ul class="list-inline">
          <li><i class="fa fa-facebook fa-2x"></i></li>
          <li><i class="fa fa-twitter fa-2x"></i></li>
          <li><i class="fa fa-google-plus fa-2x"></i></li>
          <li><i class="fa fa-pinterest fa-2x"></i></li>
        </ul>
        <hr>
        <p>Built with <i class="fa fa-heart-empty"></i> at <a href="http://www.bootply.com">Bootply</a>.<br>Company ©2014</p>
      </div>
    </div>
  </div>
</footer>

<ul class="nav pull-right scroll-down">
  <li><a href="#" title="Scroll down"><i class="fa fa-chevron-down fa-3x"></i></a></li>
</ul>
<ul class="nav pull-right scroll-top">
  <li><a href="#" title="Scroll to top"><i class="fa fa-chevron-up fa-3x"></i></a></li>
</ul>

	</body>
</html>