Tinusw/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Tinus Wagner. Developer</title>

   <!--  Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700|Source+Sans+Pro:400,600|Raleway:400,300,700|Arimo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css">


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


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

  </head>

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

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Tinus Wagner. Webmaster</h1>
        <br>
        <p><strong>Hopefully serving all of your web development needs (soon)</strong> </p>
        <p>Hi there! I'm Tinus and I'm a budding programmer. I'm immensely interested in building interactive sites, web-based audio tools and toys, and visually stunning sites. Let's do this.</p>

      </div><!-- /container -->
      <div class="container">
        <p>
          <a href="about.html">About Me  </a>
          <a href="contact.html">  Contact Me</a>
      </div>
    </div><!-- /jumbotron -->

    <div class="container3">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Portfolio Concept</h2>
          <p>For my portfolio I've collected a few sites that I really like. They're mostly quite minimal and clean. Have a look! </p>
          <p><a class="btn btn-default" href="concepts.html" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-md-4">
          <h2>Project Goals</h2>
          <p>Obviously this is just the beginning, but I have a few goals </p>
          <p><a class="btn btn-default" href="goals.html" role="button">View details &raquo;</a></p>
       </div><!-- /col -->
        <div class="col-md-4">
          <h2>Course Goals</h2>
          <p>Why I'm doing this, what I'd like to do, and where I'd like to end up</p>
          <p><a class="btn btn-default" href="course.html" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->

      <hr>


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


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <!-- Bootstrap core JS -->

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

  </body>
</html>

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

body {
	padding-top: 20px;
}

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

.nav a {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 1.2em;
	color: white;
	/*transition color dictates how quick mouse.hover takes to happen*/
	transition: color 800ms;
	-webkit-transition: color 600ms;
}

/*dope on-mouse hover effect*/
.nav a:hover {
	color: #ff0;
	text-decoration: none;
}

.nav ul {
	float: right;
}

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

.nav ul li a {
  padding: 20px 10px 5px 5px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}


.jumbotron {
	background-image: url("../img/landscape.jpg");
	background-size: #%;
}

.container {
	color: white;
}

/*typography*/
h1,
h2,
h3 {
	font-family: 'Raleway', 'Arimo', Arial, sans-serif;
	font-weight: 800;
}

li {
	font-family: 'Arimo', Times, 'Times New Roman', serif;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->

	<title>Tinus Wagner. Developer</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700\|Source+Sans+Pro:400,600\|Raleway:400,300,700\|Arimo' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/styles.css">




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


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

	</head>

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

	<!-- Main jumbotron for a primary marketing message or call to action -->
	<div class="jumbotron">
	<div class="container">
	<h1>Tinus Wagner. Webmaster</h1>
	<br>
	<p><strong>Hopefully serving all of your web development needs (soon)</strong> </p>
	<p>Hi there! I'm Tinus and I'm a budding programmer. I'm immensely interested in building interactive sites, web-based audio tools and toys, and visually stunning sites. Let's do this.</p>

	</div><!-- /container -->
	<div class="container">
	<p>
	<a href="about.html">About Me </a>
	<a href="contact.html"> Contact Me</a>
	</div>
	</div><!-- /jumbotron -->

	<div class="container3">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-md-4">
	<h2>Portfolio Concept</h2>
	<p>For my portfolio I've collected a few sites that I really like. They're mostly quite minimal and clean. Have a look! </p>
	<p><a class="btn btn-default" href="concepts.html" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-md-4">
	<h2>Project Goals</h2>
	<p>Obviously this is just the beginning, but I have a few goals </p>
	<p><a class="btn btn-default" href="goals.html" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-md-4">
	<h2>Course Goals</h2>
	<p>Why I'm doing this, what I'd like to do, and where I'd like to end up</p>
	<p><a class="btn btn-default" href="course.html" role="button">View details »</a></p>
	</div><!-- /col -->
	</div><!-- /row -->

	<hr>


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


	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->

	<!-- Bootstrap core JS -->

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

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

	body {
	padding-top: 20px;
	}

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

	.nav a {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 1.2em;
	color: white;
	/transition color dictates how quick mouse.hover takes to happen/
	transition: color 800ms;
	-webkit-transition: color 600ms;
	}

	/dope on-mouse hover effect/
	.nav a:hover {
	color: #ff0;
	text-decoration: none;
	}

	.nav ul {
	float: right;
	}

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

	.nav ul li a {
	padding: 20px 10px 5px 5px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	}


	.jumbotron {
	background-image: url("../img/landscape.jpg");
	background-size: #%;
	}

	.container {
	color: white;
	}

	/typography/
	h1,
	h2,
	h3 {
	font-family: 'Raleway', 'Arimo', Arial, sans-serif;
	font-weight: 800;
	}

	li {
	font-family: 'Arimo', Times, 'Times New Roman', serif;
	}