Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <!--AngularJS code-->
    <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js" type="text/javascript"></script>
  </head>

  <body>
    <!-- Adding the ng-app declaration to initialize AngularJS -->
    <div id="main" ng-app="">
      <!-- The navigation menu will get the value of the "active" variable as a class.
		 The $event.preventDefault() stops the page from jumping when a link is clicked. -->
      <div id="header">
        <div id="title">
          <h3 class="pull-left company-heading">Tool Title</h3>
        </div>
        <nav class="pull-right {{active}}" ng-click="$event.preventDefault()">
          <!-- When a link in the menu is clicked, we set the active variable -->
          <a href="#" class="home" ng-click="active='home'">Home</a>
          <a href="#" class="projects" ng-click="active='projects'">Projects</a>
          <a href="#" class="services" ng-click="active='services'">Services</a>
          <a href="#" class="contact" ng-click="active='contact'">Contact</a>
        </nav>
        <div class="clear"></div>
        <div id="bar">
        <!-- ng-show will show an element if the value in the quotes is truthful,
    		 while ng-hide does the opposite. Because the active variable is not set
    		 initially, this will cause the first paragraph to be visible. -->
          <p ng-hide="active">Please click a menu item</p>
          <p ng-show="active">You chose         <b>{{active}}</b>
          </p>
        </div>
      </div>
    </div>
    

fd



  </body>

</html>

// Code goes here

/* Styles go here */

*{
	margin:0;
	padding:0;
}

body{
	font:15px/1.3 'Open Sans', sans-serif;
	color: #5e5b64;
}

#header {
  position: relative;
	background: none repeat scroll 0% 0% #185A82;
	margin-bottom:45px;
	line-height: normal; 	
}

#title {
	display:inline-block;
	position: relative;
	top: 18px;
	left: 200px;
	color:#fff;
	font-weight:bold;
	font-size:18px;

}

#bar {
  float: left;
}

.clear {
  clear: both;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}

section, footer, header, aside, nav{
	display: block;
}

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}


/*-------------------------
	The menu
--------------------------*/

nav{
	display:inline-block;
	border-radius:2px;
	
}

nav a{
	color:#fff;
	text-transform: uppercase;
	display:inline-block;
	padding: 18px 30px;
	text-decoration:none !important;
	-webkit-transition:background-color 0.25s;
	-moz-transition:background-color 0.25s;
	transition:background-color 0.25s;
}

nav a:first-child{
	border-radius:2px 0 0 2px;
}

nav a:last-child{
	border-radius:0 2px 2px 0;
}

nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{
	background-color:#e35885;
}

p{
	font-size:22px;
	font-weight:bold;
	color:#7d9098;
}

p b{
	color:#ffffff;
	display:inline-block;
	padding:5px 10px;
	background-color:#c4d7e0;
	border-radius:2px;
	text-transform:uppercase;
	font-size:18px;
}