FrankWiebe/about.html

## about.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/about_styles.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>

	<title>About</title>
	<!--[if lt IE 9]>
	<script scr="dist/html5shiv.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="nav">
		      <ul>
		        <li><a href="index.html">Home</a></li>
		        <li><a href="#">About</a></li>
		        <li><a href="contact.html">Contact</a></li>
		      </ul>
		    </div>
			<h1>About Me</h1>
		</div>
		<div class="image">
			<img src="img/profile.jpg" alt="Profile Picture">
		</div>
		<div class="intro column">
			<h2>Who am I?</h2>
			<p>I'm a Full Stack Web Developer.</p>
		</div>
		<div class="skills column">
			<h3>My Skills</h3>
			<ul id="skill_list">
				<li>HTML</li>
				<li>CSS</li>
			</ul>
		</div>
		<div class="main_text">
			<h3>More about me</h3>
			<p>Flannel farm-to-table fingerstache Bushwick forage, distillery Schlitz before they sold out tofu meggings slow-carb scenester. Thundercats squid tousled Shoreditch church-key. Yr gentrify hoodie DIY, kale chips Austin umami Echo Park Odd Future mumblecore. Four loko locavore Pitchfork Truffaut, tofu tote bag semiotics tousled PBR forage cold-pressed Echo Park literally four dollar toast. Bitters meggings cred, four dollar toast trust fund vegan put a bird on it taxidermy VHS kale chips locavore sartorial polaroid. Wayfarers Intelligentsia ennui Vice Tumblr. Chillwave American Apparel artisan asymmetrical PBR&B slow-carb mustache.</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;
}

.image {
	display: inline-block;
	float: left;
}

.image img {
	height: 250px;
	width: auto;
}

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

.main_text {
	float: left;
	padding-top: 60px;
}

.header {
	margin-bottom: 40px;
}

#skill_list {
	margin-left: 50px;
}

body {
	background-color: #fffeea;
	color: #34495e;
}

.nav ul li {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 20px 10px;
}

.nav {
	background-color: darkgrey;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}

.nav ul li a {
	color: white;
}

.nav ul {
	float: right;
}

.nav a:hover {
	color: #000;
	text-decoration: none;
	transition: color 600ms;
}


/*typography*/

h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, Sans-serif;
}

p {
	font-family: 'Courgette', cursive;
}

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

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

## contact.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/contact_styles.css" rel="stylesheet">

</head>
<body>
	<div class="header">
		<div class="nav">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
		<h1>Contact Info</h1>
	</div>
	<div class="phone">
		<h2>Phone:</h2>
		<p>519-902-3974</p>
	</div>
	<div class="email">
		<h2>E-mail</h2>
		<p>frankwiebe85@hotmail.com</p>
	</div>
	<div class="address">
		<h2>Location</h2>
		<p>201 Elk Street Aylmer Ontaio</p>
	</div>
	<div class="image">
		<img src="img/map.jpg" alt="Map">
	</div>


	</div>
</body>

</html>

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

.container {
	margin: 0 auto;
}

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

.phone {
	text-align: center;
	margin-bottom: 50px;
}

.email {
	text-align: center;
	margin-bottom: 50px;
}

.address {
	text-align: center;
}

body {
	background-color: #fffeea;
	color: #34495e;
}

.header h1 {

}

.image img {
	display: block;
	height: 400px;
	width: auto;
	margin: 0 auto;
}

.nav ul li {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 20px 10px;
}

.nav {
	background-color: darkgrey;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}

.nav ul li a {
	color: white;
}

.nav ul {
	float: right;
}

.nav a:hover {
	color: #000;
	text-decoration: none;
	transition: color 600ms;
}


/*typography*/

h1, h2 {
	font-family: Futura, Helvetica, Arial, Sans-serif;
}

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

    <title>Frank Wiebe | Web developer</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template go here -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- 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="jumbotron">
      <div class="container">
        <div class="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <h1>Frank Wiebe | Web Developer</h1>
        <p><strong>I am a web developer, </strong><br>Here for all your web developing needs.</p>
      </div>
      <div class="container">
        <p></p>
        <a href="http://www.google.ca">Learn more.</a>
      </div>
    </div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Portfolio Concept,</h2>
          <p>This is my portfolio site I did on treehouse <a href="http://www.frankwiebe.me">here</a> </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>My goal is to take my time and make sure I learn everything I need to learn, I can commit atleast 8-10 hours daily if not more, end of september my wifes due to have our first baby so there will be some slower days as I help out.</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>(1) Change career's, I have left my job as an Quality control manager at Horizon Seeds to pursue a career in the tech industry. (2) Start a new career as a entry level web developer. (3) Start Freelancing after this course.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

      <hr>


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


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

  </body>
</html>

## styles.css
* { box-sizing: border-box; }
.jumbotron {
	background-image: url("../img/lightwood.jpg");
	background-size: cover;
}

.jumbotron p {
	color: white;
}

.nav ul li {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 20px 10px;
}

.nav {
	background-color: darkgrey;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}

.nav ul li a {
	color: white;
}

.nav ul {
	float: right;
}

.nav a:hover {
	color: #000;
	text-decoration: none;
	transition: color 600ms;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/about_styles.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>

	<title>About</title>
	<!--[if lt IE 9]>
	<script scr="dist/html5shiv.js"></script>
	<![endif]-->
	</head>
	<body>
	<div class="container">
	<div class="header">
	<div class="nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="contact.html">Contact</a></li>
	</ul>
	</div>
	<h1>About Me</h1>
	</div>
	<div class="image">
	<img src="img/profile.jpg" alt="Profile Picture">
	</div>
	<div class="intro column">
	<h2>Who am I?</h2>
	<p>I'm a Full Stack Web Developer.</p>
	</div>
	<div class="skills column">
	<h3>My Skills</h3>
	<ul id="skill_list">
	<li>HTML</li>
	<li>CSS</li>
	</ul>
	</div>
	<div class="main_text">
	<h3>More about me</h3>
	<p>Flannel farm-to-table fingerstache Bushwick forage, distillery Schlitz before they sold out tofu meggings slow-carb scenester. Thundercats squid tousled Shoreditch church-key. Yr gentrify hoodie DIY, kale chips Austin umami Echo Park Odd Future mumblecore. Four loko locavore Pitchfork Truffaut, tofu tote bag semiotics tousled PBR forage cold-pressed Echo Park literally four dollar toast. Bitters meggings cred, four dollar toast trust fund vegan put a bird on it taxidermy VHS kale chips locavore sartorial polaroid. Wayfarers Intelligentsia ennui Vice Tumblr. Chillwave American Apparel artisan asymmetrical PBR&B slow-carb mustache.</p>
	</div>
	</div><!-- end container -->

	</body>

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

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

	.header h1 {
	text-align: center;
	}

	.image {
	display: inline-block;
	float: left;
	}

	.image img {
	height: 250px;
	width: auto;
	}

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

	.main_text {
	float: left;
	padding-top: 60px;
	}

	.header {
	margin-bottom: 40px;
	}

	#skill_list {
	margin-left: 50px;
	}

	body {
	background-color: #fffeea;
	color: #34495e;
	}

	.nav ul li {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 20px 10px;
	}

	.nav {
	background-color: darkgrey;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	}

	.nav ul li a {
	color: white;
	}

	.nav ul {
	float: right;
	}

	.nav a:hover {
	color: #000;
	text-decoration: none;
	transition: color 600ms;
	}




	/typography/

	h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, Sans-serif;
	}

	p {
	font-family: 'Courgette', cursive;
	}

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

	.skills h3 {
	text-align: center;
	text-transform: uppercase;
	}
	* { box-sizing: border-box; }
	.jumbotron {
	background-image: url("../img/lightwood.jpg");
	background-size: cover;
	}

	.jumbotron p {
	color: white;
	}

	.nav ul li {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 20px 10px;
	}

	.nav {
	background-color: darkgrey;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	}

	.nav ul li a {
	color: white;
	}

	.nav ul {
	float: right;
	}

	.nav a:hover {
	color: #000;
	text-decoration: none;
	transition: color 600ms;
	}