kingrichardiii/work.css

## work.css
body {
	background-color: #6fd9f4;
}


.nav ul li {
	display: inline-block;
	float: right;
}

.nav {
	background-color: #6d7276;
	position: fixed;
	width: 100%;
	top: 0;
	padding: 20px 10px 20px;
	z-index: 1;

}

.nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #FFF;
	padding-right: 10px;
	-webkit-transition: color 600ms;
}

.nav a:hover {
	color: #4b9dd0;
	text-decoration: none;
}

.container {
	margin-top: 100px;
}

.col-md-4 {
	margin-top: 30px;
}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

h2 {
	width: 240px
}


 /*typography*/

.nav ul li {
	font-size: 1em;
}

.nav {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
 }

 h2 {
 	font-family: Josefin Sans, Times, Times New Roman, serif;
 	font-size: 1.75em;
 	color: #FFF;
 	text-align: center;
 }

## work.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title> Portfolio of Richard Rabeau III</title>

    <!-- JQuery -->
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <!-- Latest compiled and minified Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="css/bootstrap.css" rel="stylesheet">

    <!-- My CSS -->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/work_style.css" rel="main stylesheet">

    <!-- My Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

<body>

 <div class="nav">
    <ul>
      <li><a href="contact.html"> Contact </a></li>
      <li><a href="FAQ.html"> FAQ </a></li>
      <li><a href="work.html"> Work </a></li>
      <li><a href="about.html"> About </a></li>
      <li><a href="index.html"> Home </a></li>
    </ul>
  </div>

<div class="container">
  <div class="row" id="projects">
    <div class="col-md-4 col-xs-6">
      <img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
    <div class="col-xs-6 col-md-4">
      <img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
     <div class="col-xs-6 col-md-4">
      <img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
     <div class="col-xs-6 col-md-4">
      <img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
      <h2> Jersey Shore Illustrations </h2>
    </div>
  </div>
</div>


</body>
</html>
	body {
	background-color: #6fd9f4;
	}


	.nav ul li {
	display: inline-block;
	float: right;
	}

	.nav {
	background-color: #6d7276;
	position: fixed;
	width: 100%;
	top: 0;
	padding: 20px 10px 20px;
	z-index: 1;

	}

	.nav ul li a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #FFF;
	padding-right: 10px;
	-webkit-transition: color 600ms;
	}

	.nav a:hover {
	color: #4b9dd0;
	text-decoration: none;
	}

	.container {
	margin-top: 100px;
	}

	.col-md-4 {
	margin-top: 30px;
	}

	.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	}

	h2 {
	width: 240px
	}



	/typography/

	.nav ul li {
	font-size: 1em;
	}

	.nav {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
	}

	h2 {
	font-family: Josefin Sans, Times, Times New Roman, serif;
	font-size: 1.75em;
	color: #FFF;
	text-align: center;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title> Portfolio of Richard Rabeau III</title>

	<!-- JQuery -->
	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
	<!-- Latest compiled and minified Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<!-- Bootstrap CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">

	<!-- My CSS -->
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/work_style.css" rel="main stylesheet">

	<!-- My Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

	<!-- Just for debugging purposes. Don't actually copy this line! -->
	<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	</head>

	<body>

	<div class="nav">
	<ul>
	<li><a href="contact.html"> Contact </a></li>
	<li><a href="FAQ.html"> FAQ </a></li>
	<li><a href="work.html"> Work </a></li>
	<li><a href="about.html"> About </a></li>
	<li><a href="index.html"> Home </a></li>
	</ul>
	</div>

	<div class="container">
	<div class="row" id="projects">
	<div class="col-md-4 col-xs-6">
	<img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/lifeguard.jpg" alt="lifeguard" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/lucy.jpg" alt="lucy the elephant" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/lighthouse.jpg" alt="lighthouse" class="img-responsive">
	<h2> Jersey Shore Illustrations </h2>
	</div>
	</div>
	</div>



	</body>
	</html>