PC Hourly rate

PC Hourly rate for Africoders

by Good Muyis

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<section style="background:#efefe9;">
  <div class="container">
    <div class="row">
      <div class="board">
      <!--<h2>Welcome to Africoder Hourly Rate Calculator!<sup>™</sup></h2>-->
        <div class="board-inner">
          <ul class="nav nav-tabs" id="myTab">
            <div class="liner"></div>
            <li class="active">
                <a href="#home" data-toggle="tab" title="welcome">
			    <span class="round-tabs one"><i class="glyphicon glyphicon-home"></i></span></a>
			</li>

            <li>
                <a href="#profile" data-toggle="tab" title="profile">
                <span class="round-tabs two"><i class="glyphicon glyphicon-user"></i></span></a>
            </li>
            <li>
                <a href="#messages" data-toggle="tab" title="bootsnipp goodies">
                <span class="round-tabs three"><i class="glyphicon glyphicon-gift"></i></span> </a>
            </li>

            <li>
                <a href="#settings" data-toggle="tab" title="blah blah">
				<span class="round-tabs four"><i class="glyphicon glyphicon-comment"></i></span></a>
			</li>

            <li>
                <a href="#doner" data-toggle="tab" title="completed">
                <span class="round-tabs five"><i class="glyphicon glyphicon-ok"></i></span></a>
            </li>
          </ul>
        </div>

        <div class="tab-content">
          <div class="tab-pane fade in active"...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/

.board {
  width: 75%;
  margin: 60px auto;
  height: 500px;
  background: #fff;
  /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}

.board .nav-tabs {
  position: relative;
  /* border-bottom: 0; */
  /* width: 80%; */
  margin: 40px auto;
  margin-bottom: 0;
  box-sizing: border-box;
}

.board>div.board-inner {
  background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png);
  background-size: 30%;
}

p.narrow {
  width: 60%;
  margin: 10px auto;
}

.liner {
  height: 2px;
  background: #ddd;
  position: absolute;
  width: 80%;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 1;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: #555555;
  cursor: default;
  /* background-color: #ffffff; */
  border: 0;
  border-bottom-color: transparent;
}

span.round-tabs {
  width: 70px;
  height: 70px;
  line-height: 70px;
  display: inline-block;
  border-radius: 100px;
  background: white;
  z-index: 2;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 25px;
}

span.round-tabs.one {
  color: rgb(34, 194, 34);
  border: 2px solid rgb(34, 194, 34);
}

li.active span.round-tabs.one {
  background: #fff !important;
  border: 2px solid #ddd;
  color: rgb(34, 194, 34);
}

span.round-tabs.two {
  color: #febe29;
  border: 2px solid #febe29;
}

li.active span.round-tabs.two {
  background: #fff !important;
  border: 2px solid #ddd;
  color: #febe29;
}

span.round-tabs.three {
  color: #3e5e9a;
  border: 2px solid #3e5e9a;
}

li.active span.round-tabs.three {
  background: #fff !important;
  border: 2px solid #ddd;
  color: #3e5e9a;
}

span.round-tabs.four {
  color: #f1685e;
  border: 2px solid #f1685e;
}

li.active span.round-tabs.four {
  background: #fff !important;
  border: 2px solid #ddd;
  color: #f1685e;
}

span.round-tabs.five {
  color:...

JavaScript

$(function() {
  $('a[title]').tooltip();
});

$('.next').click(function() {
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

$('.previous').click(function() {
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});