bmikol/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>Hello World!</title>

    <!-- Bootstrap core CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

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

    <link rel="stylesheet" href="css/styles.css">

    <!-- 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">
      <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="work.html">Work</a></li>
        <li><a href="faq.html">FAQ</a></li>
      </ul>
    </div><!-- end nav -->
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <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/portfolioheroimage.jpeg" alt="Top-down view of a computer desk">
            <div class="carousel-caption first">
              <h3>Ready to work</h3>
              <p>Here is an example description</p>
            </div><!-- end carousel-caption -->
          </div><!-- end item active -->
          <div class="item">
            <img src="img/portfolioheroimage2.jpg" alt="Typewriter">
            <div class="carousel-caption">
              <h3>…be it writing</h3>
              <p>Here is an example description</p>
            </div><!-- carousel-caption -->
          </div><!-- end item -->
          <div class="item">
            <img src="img/portfolioheroimage3a.jpg" alt="Top-down view of a wooden desk with design tools">
            <div class="carousel-caption">
              <h3>…or designing</h3>
              <p>Here is an example description</p>
            </div><!-- carousel-caption -->
          </div><!-- end item -->
        </div><!-- carousel-inner -->

        <!-- 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 class="container">
        <h1>Brian Mikol</h1>

        <p><strong>Product Manager, Marketer,</strong> and soon-to-be <strong>Full-Stack Web Developer</strong>.</p>

        <a href="./about.html">About</a> | <a href="./contact.html">Contact</a> | <a href="./faq.html">FAQ</a>

      </div><!-- /container -->
      <div class="container">

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

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4">
          <h2>Portfolio Concept</h2>
          <p>
          <ul>
            <li>2+ years providing product management, marketing, and user experience consulting services to a wide variety of clients.</li>
            <li>2.5 years Product Manager at Ingenio; 4 years Marketing before that.</li>
            <li>All predicated by acheivements in Marketing and Sales at various Bay Area B2C companies.</li>
          </ul>
          </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-md-4">
          <h2>Project Goals</h2>
          <p>Stay on track, even if I&rsquo;m starting a little late.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div><!-- /col -->
        <div class="col-md-4">
          <h2>Course Goals</h2>
          <p>In taking this course, I&rsquo;m looking to augment my technical skillset to either further my career in Product Management or pivot closer to the code as a web developer. Assuming the pivot, ideally I would like to hire on as an entry level developer before considering freelance opportunities.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->

      <hr>


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


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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Bootstrap core JS -->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

  </body>
</html>

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

.jumbotron p {
	color: white;
}

.panel-heading {
	background-color: white;
}

#carousel-example-generic {
	margin-top: -20px;
}

/**** About/Contact Page ****/

* {
	box-sizing: border-box;
}

body {
	background-color: #fffeea;
	color: #34495e;
	padding-top: 90px;
}

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

.header h1 {
	text-align: center;
}

.image {
	display: inline;
	float: left;
	width: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

.image p {
	margin-top: -85%;
	text-align: center;
}

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

.main-text {
	clear: both;
	padding: 60px 20px;
	position: relative;
	border: 1px black dotted;
}

.skills {
	background-color: #5ad4c2;
	color: #fff;
	padding: 20px 0;
}

.contact {
	width: 50%;
	min-width: 433px;
	margin: 0 auto;
	padding: 5% 10%;
	border: 1px gray solid;
}

.contact ul {
	list-style: none;
	padding-left: 0;
}

span.codedirection {
	unicode-bidi: bidi-override; direction: rtl;
}

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

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

.nav ul {
	float: right;
}

.nav ul li {
	display: inline-block;
	list-style: none;
}

/* Typography */

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

p,
li {
	font-family: Georgia, Times, "Times New Roman", serif;
}

.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,
.contact p,
.contact h2,
.contact li {
	font-family: 'Shadows Into Light', cursive;
}

.nav ul li a {
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 600ms;
	-webkit-transition: color 600ms;
}

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

.panel-body p,
.panel-body li,
.panel-title {
	font-family: Futura, Helvetica, Arial, sans-serif;
}

.carousel-caption {
	background-color: rgba(0, 0, 0, 0.25);
}
	<!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>Hello World!</title>

	<!-- Bootstrap core CSS -->

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

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

	<link rel="stylesheet" href="css/styles.css">

	<!-- 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">
	<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="work.html">Work</a></li>
	<li><a href="faq.html">FAQ</a></li>
	</ul>
	</div><!-- end nav -->
	<!-- Main jumbotron for a primary marketing message or call to action -->
	<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/portfolioheroimage.jpeg" alt="Top-down view of a computer desk">
	<div class="carousel-caption first">
	<h3>Ready to work</h3>
	<p>Here is an example description</p>
	</div><!-- end carousel-caption -->
	</div><!-- end item active -->
	<div class="item">
	<img src="img/portfolioheroimage2.jpg" alt="Typewriter">
	<div class="carousel-caption">
	<h3>…be it writing</h3>
	<p>Here is an example description</p>
	</div><!-- carousel-caption -->
	</div><!-- end item -->
	<div class="item">
	<img src="img/portfolioheroimage3a.jpg" alt="Top-down view of a wooden desk with design tools">
	<div class="carousel-caption">
	<h3>…or designing</h3>
	<p>Here is an example description</p>
	</div><!-- carousel-caption -->
	</div><!-- end item -->
	</div><!-- carousel-inner -->

	<!-- 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 class="container">
	<h1>Brian Mikol</h1>

	<p><strong>Product Manager, Marketer,</strong> and soon-to-be <strong>Full-Stack Web Developer</strong>.</p>

	<a href="./about.html">About</a> \| <a href="./contact.html">Contact</a> \| <a href="./faq.html">FAQ</a>

	</div><!-- /container -->
	<div class="container">

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

	<div class="container">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-md-4">
	<h2>Portfolio Concept</h2>
	<p>
	<ul>
	<li>2+ years providing product management, marketing, and user experience consulting services to a wide variety of clients.</li>
	<li>2.5 years Product Manager at Ingenio; 4 years Marketing before that.</li>
	<li>All predicated by acheivements in Marketing and Sales at various Bay Area B2C companies.</li>
	</ul>
	</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-md-4">
	<h2>Project Goals</h2>
	<p>Stay on track, even if I’m starting a little late.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-md-4">
	<h2>Course Goals</h2>
	<p>In taking this course, I’m looking to augment my technical skillset to either further my career in Product Management or pivot closer to the code as a web developer. Assuming the pivot, ideally I would like to hire on as an entry level developer before considering freelance opportunities.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->
	</div><!-- /row -->

	<hr>


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


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

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<!-- Bootstrap core JS -->

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

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

	.jumbotron p {
	color: white;
	}

	.panel-heading {
	background-color: white;
	}

	#carousel-example-generic {
	margin-top: -20px;
	}

	/** About/Contact Page **/

	* {
	box-sizing: border-box;
	}

	body {
	background-color: #fffeea;
	color: #34495e;
	padding-top: 90px;
	}

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

	.header h1 {
	text-align: center;
	}

	.image {
	display: inline;
	float: left;
	width: 100%;
	}

	img {
	max-width: 100%;
	height: auto;
	}

	.image p {
	margin-top: -85%;
	text-align: center;
	}

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

	.main-text {
	clear: both;
	padding: 60px 20px;
	position: relative;
	border: 1px black dotted;
	}

	.skills {
	background-color: #5ad4c2;
	color: #fff;
	padding: 20px 0;
	}

	.contact {
	width: 50%;
	min-width: 433px;
	margin: 0 auto;
	padding: 5% 10%;
	border: 1px gray solid;
	}

	.contact ul {
	list-style: none;
	padding-left: 0;
	}

	span.codedirection {
	unicode-bidi: bidi-override; direction: rtl;
	}

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

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

	.nav ul {
	float: right;
	}

	.nav ul li {
	display: inline-block;
	list-style: none;
	}

	/* Typography */

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

	p,
	li {
	font-family: Georgia, Times, "Times New Roman", serif;
	}

	.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,
	.contact p,
	.contact h2,
	.contact li {
	font-family: 'Shadows Into Light', cursive;
	}

	.nav ul li a {
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color 600ms;
	-webkit-transition: color 600ms;
	}

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

	.panel-body p,
	.panel-body li,
	.panel-title {
	font-family: Futura, Helvetica, Arial, sans-serif;
	}

	.carousel-caption {
	background-color: rgba(0, 0, 0, 0.25);
	}