FrankWiebe/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css/normalize.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template go here -->

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

    <title>Frank Wiebe | Web developer</title>

    <!-- 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 id="container-fluid" class="container-fluid">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="img/dark-cityscape.jpg" alt="City Scape">
              <div class="carousel-caption">
                CityScape
              </div>
            </div>
            <div class="item">
              <img src="img/heroimage2.jpg" alt="Typewriter">
              <div class="carousel-caption">
                Typewriter
              </div>
            </div>
            <div class="item">
              <img src="img/heroimage31.jpg" alt="Desk">
              <div class="carousel-caption">
                Desk
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
      <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>
              <li><a href="faq.html">Faq</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>


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


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

  </body>
</html>

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

.header h1 {
	margin-top: 100px;
	text-align: center;
	font-family: Futura, Helvetica, Arial, Sans-serif;
}

.container-fluid {
	padding: 0;
}


.jumbotron p {
	color: white;
}

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

.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
}

.nav ul li a {
	color: gray;
}

.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">
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Custom styles for this template go here -->

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

	<title>Frank Wiebe \| Web developer</title>

	<!-- 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 id="container-fluid" class="container-fluid">
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
	<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-example-generic" data-slide-to="1"></li>
	<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
	<div class="item active">
	<img src="img/dark-cityscape.jpg" alt="City Scape">
	<div class="carousel-caption">
	CityScape
	</div>
	</div>
	<div class="item">
	<img src="img/heroimage2.jpg" alt="Typewriter">
	<div class="carousel-caption">
	Typewriter
	</div>
	</div>
	<div class="item">
	<img src="img/heroimage31.jpg" alt="Desk">
	<div class="carousel-caption">
	Desk
	</div>
	</div>
	</div>

	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
	</a>
	</div>
	</div>
	<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>
	<li><a href="faq.html">Faq</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 »</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 »</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 »</a></p>
	</div>
	</div>


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


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

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

	.header h1 {
	margin-top: 100px;
	text-align: center;
	font-family: Futura, Helvetica, Arial, Sans-serif;
	}

	.container-fluid {
	padding: 0;
	}


	.jumbotron p {
	color: white;
	}

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

	.nav {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 0;
	}

	.nav ul li a {
	color: gray;
	}

	.nav ul {
	float: right;
	}

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