kingrichardiii/FAQ.html

## about.html
<!doctype html>
<html lang="eng">
<head>
<meta charset="utf-8">

<!-- Bootstrap -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap t work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>

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

<title> About Richard Rabeau III </title>
	<!--[if lt IE 9]>
	<script src+"dist/html5shiv.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 </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="header">
				<h1> About Richard Rabeau III </h1>
			</div>
				<div class="image">
					<img src="img/richardiii.png" alt="richard">
				</div>
					<div class="intro column">
						<h2> Introduction </h2>
							<p>
								Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code.
							</p>
					</div>
						<div class="skills column">
		 					<h2> My Skills </h2>
		 						<ul id="skill-list">
		 							<li>Graphic Design</li>
		 							<li>Web Design</li>
		 							<li>Web Development</li>
		 							<li>Branding</li>
		 							<li>Copywriting</li>
		 						</ul>
						</div>
							<div class="main-text">
								<h3> My Story </h3>
									<p>
										I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks.
									<p/>
									<p>
										As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness.
									</p>
							</div>
	</div> <!--end container -->

</body>
</html>

## about_styles.css
* { box-sizing: border-box; }

.container {
 	width: 80%;
 	margin: 0 auto;
}

 .header h1 {
 	text-align: center;
 	margin-bottom: 30px;
 }

 .image {
 	display: inline-block;
 	float: left;
 	padding-right: 25px;
 }

 .column {
 	display: inline-block;
 	float: left;
 	width: 30%;
 	padding: 30px 20px;
 }


 .main-text {
 	clear: both;
 	padding-top: 30px;
 }

 .skills {
 	background-color: #e1e1e1;
 	color: #6d7276;

 }

 #skill-list {
 	margin-left: 30px;
 }

 body {
 	background-color: #6fd9f4;
 	color: #FFF;
 }

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

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

}

.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;
}

 /*typography*/

 h1,
 h2,
 h3 {
 	font-family: Josefin Slab, Times, Times New Roman, serif;
 	font-size: 1.5em;
 }

p,
li {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;;
 	font-size: 1.3em;
 }

 .into p {
 	font-family: Futura, Helvetica, Arial, sans-serif;
 	font-size: 3em;
 	font-weight: 100;
 	-webkit-margin-before: 0;
 }

 .skills h2 {
 	text-align: center;
 	text-transform: uppercase;
 }

.header h1 {
	font-size: 2.5em;
}

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

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

## contact.html
<!doctype html>
<html lang="eng">

<head>
<meta charset="utf-8">

<!-- Bootstrap -->
<link href="css/normalize.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap t work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>

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


<title> Contact Richard Rabeau III </title>
	<!--[if lt IE 9]>
	<script src+"dist/html5shiv.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 </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="header">
			<h1> Contact me </h1>
		</div>
			<div class="main-text">
				<p>
					Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow.
				</p>
			<div>
			<div class="email">
				<p>
					<span class="glyphicon glyphicon-envelope"></span> Message me
				</p>
					<h2> richard.rabeau@gmail.com </h2>
			</div>
			<div class="phone">
				<p>
					<span class="glyphicon glyphicon-phone"></span> Call Me
				</p>
					<p> 609.668.7828 </p>
			</div>
			<div class="location">
				<p>
					<span class="glyphicon glyphicon-home"></span> Meet me
				</p>
					<p> Philadelphia, PA </p>
			</div>
	</div>
</body>
</html>

## contact_styles.css
* { box-sizing: border-box; }


.container {
	width: 50%;
 	margin: 0 auto;
}

.header h1 {
 	text-align: center;
 	margin-bottom: 30px;
 }

.image {
 	display: inline-block;
 	float: left;
 	padding-right: 25px;
 }

.main-text {
 	clear: both;
 	margin-top: 50px;
 	text-align: center;
 }

 .email {
 	clear: both;
 	margin-top: 50px;
 	margin-bottom: 50px;
 }

 .phone {
 	margin-bottom: 50px;
 }

body {
	background-image: url("../img/skyline.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: #FFF;
 	text-align: center;
}

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

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

.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;
}

 /*typography*/

 h1,
 h2,
 p {
 	font-family: Josefin Slab, Times, Times New Roman, serif;
 	font-size: 2em;
 }

.main-text p {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 2em;
 }

.header h1 {
	font-size: 3em;
}

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


## FAQ.html
<!doctype html>
<html lang="eng">

<head>
    <meta charset="utf-8">
	<title>FAQ</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/FAQ_style.css" rel="stylesheet">

	<!-- My Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400' rel='stylesheet' type='text/css'>
</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 </a></li>
        <li><a href="about.html"> About </a></li>
        <li><a href="index.html"> Home </a></li>
      </ul>
   </div>
   <!-- accordian menu beings -->
	<div class="container">
		<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		  <div class="panel panel-default">
		    <div class="panel-heading" role="tab" id="headingOne">
		      <h4 class="panel-title">
		        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
		          Why did you decide to become a web developer? <span class="glyphicon glyphicon-plus"></span>
		        </a>
		      </h4>
		    </div>
		    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
		      <div class="panel-body">
		        As a graphic designer, I knew how to design but not to code. I wanted to do more than ‘splice’ images in Photoshop into perfectly positioned tables. I eventually decided to take the plunge and enrolled in a full-stack web development course.
		      </div>
		    </div>
		  </div>
		  <div class="panel panel-default">
		    <div class="panel-heading" role="tab" id="headingTwo">
		      <h4 class="panel-title">
		        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
		          What is your design process? <span class="glyphicon glyphicon-plus"></span>
		        </a>
		      </h4>
		    </div>
		    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
		      <div class="panel-body">
		        My creative process begins with identifying a client’s needs, and familiarizing myself with their brand. Based on your marketing message and content, I then begin to develop design sketches and a skeletal framework. Once refined, it’s onto the development process.
		      </div>
		    </div>
		  </div>
		  <div class="panel panel-default">
		    <div class="panel-heading" role="tab" id="headingThree">
		      <h4 class="panel-title">
		        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
		          What is your average project turnaround? <span class="glyphicon glyphicon-plus"></span>
		        </a>
		      </h4>
		    </div>
		    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
		      <div class="panel-body">
		        Delivery dates are contingent on the client’s needs and differ with each project. Most custom websites move through the steps of conception, design, and development within 30-60 days.
		      </div>
		    </div>
		  </div>
		</div>
	</div>
	<!-- accordian menu ends -->

</body>
</html>

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

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

.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;
}

body {
	background-color: #6fd9f4;
}

.container {
	width: 80%;
 	margin: 0 auto;
 	padding-top: 75px;
 }

 .panel-body {
 	background-color: #e1e1e1;
 }

 .glyphicon {
 	color: #6fd9f4;
 }


/*typography*/

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

 .panel-title {
 	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
 }

 .panel-body {
 	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
 }

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

    <title>Richard Rabeau III</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
   <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- jQuery is required for Bootstrap t work -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
    <!-- Latest compiled and minified Bootstrap JavaScript -->
    <script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>

    <!-- My CSS -->
    <link href="css/style.css" rel="main stylesheet">
    <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'>


    <!-- Custom styles for this template go here -->

    <!-- 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>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="nav">
      <ul>
        <li><a href="contact.html"> Contact </a></li>
        <li><a href="FAQ.html"> FAQ </a></li>
        <li><a href="#"> Work </a></li>
        <li><a href="about.html"> About </a></li>
        <li><a href="index.html"> Home </a></li>
      </ul>
   </div>

      <div class="jumbotron">
        <div class="container">
          <h1>Richard Rabeau III</h1>
          <p><strong>Graphic & Digital Designer. Developer-in-Training. Philadelphia.
    <strong><a href="about.html">About Me</a></p>
        </div>
      </div>

      <div class="container">
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-md-4">
            <h2>Portfolio Concepts</h2>
            <p>  I took a course in web design while studying at The New School, which gave me some exposure to HTML/CSS, and an eagerness to learn more. In terms of design, I am minimalist attracted to bold colors, so I would like my portfolio site to reflect that. I also dig the flat design trend and parallax scrolling.  </p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <h2>Project Goals</h2>
            <p>I currently work full-time as a graphic designer in the marketing department of a real estate firm. I’ll be dedicating my evenings (and slow days at work, shhh) to this course. As a somewhat recent college grad, I am hoping I am still a quick learner and haven’t yet lost my work ethic. </p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
         </div>
          <div class="col-md-4">
            <h2>Course Goals</h2>
            <p>I am taking this course to gain coding skills and experience, so I can transition my career from graphic design to web design and development. My goal is to find a entry-level, front-end developer job, preferably at a cool tech start-up or boutique marketing agency.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div>
        </div>
          <hr> </hr>
            <div class="contact">
              <p><strong><a href="contact.html">Contact Me</a></p>
            </div>
            <hr> </hr>


    </div> <!-- /container -->


    <!--
    ================================================== -->
    <!-- Can place script tags with JavaScript files here -->

  </body>
</html>

## styles.css
.jumbotron {
  background-image: url("../img/blurcity.jpg");
  background-size: cover;
}

.jumbotron p {
  color: white;
}

.jumbotron h1 {
  color: white;
  padding-top: 10px;
}

body {
 	background-color: #4b9dd0;
 	color: #FFF;
}

.contact {
	background-color: #FFF;
 	text-align: center;
 	font-size: 1.25em;
}

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

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

}

.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;
}


 /*typography*/

 h1,
 h2 {
 	font-family: Josefin Slab, Times, Times New Roman, serif;
 	font-size: 2em;
 }

p{
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
 }

.jumbotron h1 {
	font-size: 2.5em;
}

.nav {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
 }
	<!doctype html>
	<html lang="eng">
	<head>
	<meta charset="utf-8">

	<!-- Bootstrap -->
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Latest compiled and minified Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<!-- jQuery is required for Bootstrap t work -->
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>

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

	<title> About Richard Rabeau III </title>
	<!--[if lt IE 9]>
	<script src+"dist/html5shiv.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 </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="header">
	<h1> About Richard Rabeau III </h1>
	</div>
	<div class="image">
	<img src="img/richardiii.png" alt="richard">
	</div>
	<div class="intro column">
	<h2> Introduction </h2>
	<p>
	Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code.
	</p>
	</div>
	<div class="skills column">
	<h2> My Skills </h2>
	<ul id="skill-list">
	<li>Graphic Design</li>
	<li>Web Design</li>
	<li>Web Development</li>
	<li>Branding</li>
	<li>Copywriting</li>
	</ul>
	</div>
	<div class="main-text">
	<h3> My Story </h3>
	<p>
	I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks.
	<p/>
	<p>
	As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness.
	</p>
	</div>
	</div> <!--end container -->

	</body>
	</html>
	* { box-sizing: border-box; }

	.container {
	width: 80%;
	margin: 0 auto;
	}

	.header h1 {
	text-align: center;
	margin-bottom: 30px;
	}

	.image {
	display: inline-block;
	float: left;
	padding-right: 25px;
	}

	.column {
	display: inline-block;
	float: left;
	width: 30%;
	padding: 30px 20px;
	}


	.main-text {
	clear: both;
	padding-top: 30px;
	}

	.skills {
	background-color: #e1e1e1;
	color: #6d7276;

	}

	#skill-list {
	margin-left: 30px;
	}

	body {
	background-color: #6fd9f4;
	color: #FFF;
	}

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

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

	}

	.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;
	}

	/typography/

	h1,
	h2,
	h3 {
	font-family: Josefin Slab, Times, Times New Roman, serif;
	font-size: 1.5em;
	}

	p,
	li {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;;
	font-size: 1.3em;
	}

	.into p {
	font-family: Futura, Helvetica, Arial, sans-serif;
	font-size: 3em;
	font-weight: 100;
	-webkit-margin-before: 0;
	}

	.skills h2 {
	text-align: center;
	text-transform: uppercase;
	}

	.header h1 {
	font-size: 2.5em;
	}

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

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


	.container {
	width: 50%;
	margin: 0 auto;
	}

	.header h1 {
	text-align: center;
	margin-bottom: 30px;
	}

	.image {
	display: inline-block;
	float: left;
	padding-right: 25px;
	}

	.main-text {
	clear: both;
	margin-top: 50px;
	text-align: center;
	}

	.email {
	clear: both;
	margin-top: 50px;
	margin-bottom: 50px;
	}

	.phone {
	margin-bottom: 50px;
	}

	body {
	background-image: url("../img/skyline.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: #FFF;
	text-align: center;
	}

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

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

	.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;
	}

	/typography/

	h1,
	h2,
	p {
	font-family: Josefin Slab, Times, Times New Roman, serif;
	font-size: 2em;
	}

	.main-text p {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 2em;
	}

	.header h1 {
	font-size: 3em;
	}

	.nav {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Richard Rabeau III</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Latest compiled and minified Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<!-- jQuery is required for Bootstrap t work -->
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"> </script>
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script scr="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>

	<!-- My CSS -->
	<link href="css/style.css" rel="main stylesheet">
	<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'>


	<!-- Custom styles for this template go here -->

	<!-- 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>

	<!-- Main jumbotron for a primary marketing message or call to action -->
	<div class="nav">
	<ul>
	<li><a href="contact.html"> Contact </a></li>
	<li><a href="FAQ.html"> FAQ </a></li>
	<li><a href="#"> Work </a></li>
	<li><a href="about.html"> About </a></li>
	<li><a href="index.html"> Home </a></li>
	</ul>
	</div>

	<div class="jumbotron">
	<div class="container">
	<h1>Richard Rabeau III</h1>
	<p><strong>Graphic & Digital Designer. Developer-in-Training. Philadelphia.
	<strong><a href="about.html">About Me</a></p>
	</div>
	</div>

	<div class="container">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-md-4">
	<h2>Portfolio Concepts</h2>
	<p> I took a course in web design while studying at The New School, which gave me some exposure to HTML/CSS, and an eagerness to learn more. In terms of design, I am minimalist attracted to bold colors, so I would like my portfolio site to reflect that. I also dig the flat design trend and parallax scrolling. </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-md-4">
	<h2>Project Goals</h2>
	<p>I currently work full-time as a graphic designer in the marketing department of a real estate firm. I’ll be dedicating my evenings (and slow days at work, shhh) to this course. As a somewhat recent college grad, I am hoping I am still a quick learner and haven’t yet lost my work ethic. </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-md-4">
	<h2>Course Goals</h2>
	<p>I am taking this course to gain coding skills and experience, so I can transition my career from graphic design to web design and development. My goal is to find a entry-level, front-end developer job, preferably at a cool tech start-up or boutique marketing agency.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	</div>
	<hr> </hr>
	<div class="contact">
	<p><strong><a href="contact.html">Contact Me</a></p>
	</div>
	<hr> </hr>


	</div> <!-- /container -->


	<!--
	================================================== -->
	<!-- Can place script tags with JavaScript files here -->

	</body>
	</html>
	.jumbotron {
	background-image: url("../img/blurcity.jpg");
	background-size: cover;
	}

	.jumbotron p {
	color: white;
	}

	.jumbotron h1 {
	color: white;
	padding-top: 10px;
	}

	body {
	background-color: #4b9dd0;
	color: #FFF;
	}

	.contact {
	background-color: #FFF;
	text-align: center;
	font-size: 1.25em;
	}

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

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

	}

	.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;
	}


	/typography/

	h1,
	h2 {
	font-family: Josefin Slab, Times, Times New Roman, serif;
	font-size: 2em;
	}

	p{
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	}

	.jumbotron h1 {
	font-size: 2.5em;
	}

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