bmikol/about.html

## about.html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/styles.css">
		<title>About Me</title>
		<!--[if lt IE 9]>
			<script src="dist/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body>
		<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>
				<li><a href="work.html">Work</a></li>
				<li><a href="faq.html">FAQ</a></li>
			</ul>
		</div><!-- end nav -->
		<div class="container-fluid">
			<div class="header">
				<h1>About Me</h1>
			</div><!-- end header -->
		</div><!--end container-fluid -->
		<div class="container-fluid">
			<div class="col-md-4 col-xs-12 about">
				<img class="img-responsive" src="img/kitten.jpg" alt="Kittens wearing frog hats" />
				<div class="froghat">(<a href="http://www.totalgirl.com.au/gallery/your-space-pets-cutest-kitten-photos">Source</a>)</div>
		</div><!-- end image -->
			<div class="col-md-4 col-xs-12 about">
				<h2>Introduction</h2>
				<p>All about me.</p>
			</div><!-- end intro -->
			<div class="col-md-4 col-xs-12 skills">
				<h3>My Skills</h3>
				<ul id="skill-list">
					<li>Product Management</li>
					<li>Project Management</li>
					<li>Marketing</li>
					<li>HTML &amp; CSS</li>
				</ul>
			</div><!-- end skills -->
		</div><!-- end container-fluid -->
		<div class="container-fluid">
			<div class="main-text">
				<h3>More About Me</h3>
				<p>Bacon ipsum dolor amet turducken cupim corned beef venison prosciutto shankle. Biltong shankle pancetta shank, sausage fatback porchetta ground round. Pork chop ground round bresaola porchetta fatback tongue sausage cupim sirloin kielbasa pancetta landjaeger capicola strip steak bacon. Kevin shoulder andouille, sirloin prosciutto shankle swine venison.</p>

				<p>Boudin kielbasa ham bresaola alcatra pig cupim brisket frankfurter tenderloin swine capicola leberkas shankle pork belly. Venison spare ribs hamburger, beef ribs shank alcatra ball tip. Tri-tip bacon short ribs meatball, short loin cow shank drumstick t-bone ball tip. Venison corned beef landjaeger frankfurter rump short ribs pork ball tip alcatra pork belly pancetta strip steak bacon sausage. Meatball alcatra tenderloin, rump pastrami turducken swine tongue pork chop corned beef pig spare ribs meatloaf beef ribs salami. Landjaeger alcatra jerky venison, jowl filet mignon bresaola porchetta drumstick rump boudin.</p>

				<p>Pork biltong filet mignon turkey frankfurter short ribs strip steak. Tail ribeye strip steak short ribs capicola. Shoulder pancetta cupim tri-tip salami, chuck chicken meatloaf prosciutto pork ham hock corned beef. Pork chop tongue spare ribs turducken pork belly bresaola ribeye salami sausage picanha fatback pork loin meatloaf turkey corned beef.</p>

				<p>Salami doner t-bone tail, tongue kevin pork picanha pastrami short loin ball tip andouille bacon tenderloin flank. Pork loin beef capicola drumstick jerky doner corned beef venison tail swine sausage kielbasa tri-tip. Sausage alcatra ball tip, strip steak bacon shankle pork chop pancetta brisket. Turducken hamburger corned beef, shoulder ball tip landjaeger sirloin kevin. Turkey t-bone landjaeger hamburger pork chop capicola. Kielbasa tenderloin filet mignon, chuck bacon ham hock sirloin swine shoulder ball tip picanha short ribs.</p>

				<p>Shank cupim cow, pastrami short loin turducken beef ribs jowl. Boudin beef fatback meatloaf rump filet mignon. Rump biltong sausage leberkas turducken. Strip steak short ribs prosciutto, pastrami andouille spare ribs hamburger tongue tail brisket ham swine ball tip pork loin meatloaf. Cupim flank picanha, beef leberkas short loin pork loin doner kielbasa tongue. Pork chop alcatra ribeye brisket, doner salami shank shankle pork loin cow strip steak sausage tri-tip.</p>
			</div><!-- end main-text -->
		</div><!-- end container-fluid -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

	</body>
</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 -->
    <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 class="img-responsive" 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 class="img-responsive" 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 class="img-responsive" 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><!-- end carousel slide -->
    <div class="container-fluid">
      <h1>Brian Mikol</h1>

      <p><strong>Product Manager, Marketer,</strong> and soon-to-be <strong>Full-Stack Web Developer</strong>.</p>
    </div><!-- /container-fluid -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4 col-xs-12">
          <div class="threecol">
            <h2>Portfolio Concept</h2>
            <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><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div><!-- end 3-column -->
        </div><!-- /col -->
        <div class="col-md-4 col-xs-12">
          <div class="threecol">
           <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><!-- end 3-column -->
        </div><!-- /col -->
        <div class="col-md-4 col-xs-12">
          <div class="threecol">
            <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><!-- end 3-column -->
        </div><!-- /col -->
      </div><!-- /row -->

      <hr>

    </div> <!-- /container-fluid -->
      <div class="container-fluid">
        <div class="row" id="work">
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
          <div class="col-md-3 col-xs-6">
            <img class="img-responsive coffee-kitten" src="img/kitten2.jpg" alt="'Whoah; so that's coffee' statement over picture of wide-eyed black kitten" />
          </div><!-- end col-md-3 col-xs-6 -->
        </div><!-- end row -->
      </div><!-- end container-fluid -->

    <!-- ============================= -->
    <!-- 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: -0.76em;
}

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

.coffee-kitten {
	margin: 0.25em;
}

.threecol {
	margin: 0.5em;
	padding: 0.5em;
}

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

* {
	box-sizing: border-box;
}

body {
	background-color: #fffeea;
	color: #34495e;
	padding-top: 6.95em;
}

/* Large desktop */
@media (min-width: 1200px) {
	body {
		background-color: #f1f1f1;
	}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	body {
		background-color: #d8d8d8;
	}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	body {
		background-color: #bfbfbf;
	}
}

/* Landscape phones and down */
@media (max-width: 480px) {
	body {
		background-color: white;
	}
}

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

.header h1 {
	text-align: center;
}

.froghat img {
	height: auto;
	margin: 0 auto;
}

.froghat {
	text-align: center;
}

.about {
	padding: 0 1em;
	margin-top: 0.75em;
	margin-bottom: 1em;
}

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

.skills {
	background-color: #5ad4c2;
	color: #fff;
	padding: 1em 0;
}

.contact {
	width: 50%;
	min-width: 19em;
	margin: 0 auto;
	padding: 5% 10%;
	border: 0.05em gray solid;
}

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

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

#skill-list {
	margin-left: 2.5em;
}

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

.nav ul {
	float: right;
}

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

/* Typography */

body {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 1.25em;
 }

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;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<title>About Me</title>
	<!--[if lt IE 9]>
	<script src="dist/html5shiv.js"></script>
	<![endif]-->
	</head>
	<body>
	<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>
	<li><a href="work.html">Work</a></li>
	<li><a href="faq.html">FAQ</a></li>
	</ul>
	</div><!-- end nav -->
	<div class="container-fluid">
	<div class="header">
	<h1>About Me</h1>
	</div><!-- end header -->
	</div><!--end container-fluid -->
	<div class="container-fluid">
	<div class="col-md-4 col-xs-12 about">
	<img class="img-responsive" src="img/kitten.jpg" alt="Kittens wearing frog hats" />
	<div class="froghat">(<a href="http://www.totalgirl.com.au/gallery/your-space-pets-cutest-kitten-photos">Source</a>)</div>
	</div><!-- end image -->
	<div class="col-md-4 col-xs-12 about">
	<h2>Introduction</h2>
	<p>All about me.</p>
	</div><!-- end intro -->
	<div class="col-md-4 col-xs-12 skills">
	<h3>My Skills</h3>
	<ul id="skill-list">
	<li>Product Management</li>
	<li>Project Management</li>
	<li>Marketing</li>
	<li>HTML & CSS</li>
	</ul>
	</div><!-- end skills -->
	</div><!-- end container-fluid -->
	<div class="container-fluid">
	<div class="main-text">
	<h3>More About Me</h3>
	<p>Bacon ipsum dolor amet turducken cupim corned beef venison prosciutto shankle. Biltong shankle pancetta shank, sausage fatback porchetta ground round. Pork chop ground round bresaola porchetta fatback tongue sausage cupim sirloin kielbasa pancetta landjaeger capicola strip steak bacon. Kevin shoulder andouille, sirloin prosciutto shankle swine venison.</p>

	<p>Boudin kielbasa ham bresaola alcatra pig cupim brisket frankfurter tenderloin swine capicola leberkas shankle pork belly. Venison spare ribs hamburger, beef ribs shank alcatra ball tip. Tri-tip bacon short ribs meatball, short loin cow shank drumstick t-bone ball tip. Venison corned beef landjaeger frankfurter rump short ribs pork ball tip alcatra pork belly pancetta strip steak bacon sausage. Meatball alcatra tenderloin, rump pastrami turducken swine tongue pork chop corned beef pig spare ribs meatloaf beef ribs salami. Landjaeger alcatra jerky venison, jowl filet mignon bresaola porchetta drumstick rump boudin.</p>

	<p>Pork biltong filet mignon turkey frankfurter short ribs strip steak. Tail ribeye strip steak short ribs capicola. Shoulder pancetta cupim tri-tip salami, chuck chicken meatloaf prosciutto pork ham hock corned beef. Pork chop tongue spare ribs turducken pork belly bresaola ribeye salami sausage picanha fatback pork loin meatloaf turkey corned beef.</p>

	<p>Salami doner t-bone tail, tongue kevin pork picanha pastrami short loin ball tip andouille bacon tenderloin flank. Pork loin beef capicola drumstick jerky doner corned beef venison tail swine sausage kielbasa tri-tip. Sausage alcatra ball tip, strip steak bacon shankle pork chop pancetta brisket. Turducken hamburger corned beef, shoulder ball tip landjaeger sirloin kevin. Turkey t-bone landjaeger hamburger pork chop capicola. Kielbasa tenderloin filet mignon, chuck bacon ham hock sirloin swine shoulder ball tip picanha short ribs.</p>

	<p>Shank cupim cow, pastrami short loin turducken beef ribs jowl. Boudin beef fatback meatloaf rump filet mignon. Rump biltong sausage leberkas turducken. Strip steak short ribs prosciutto, pastrami andouille spare ribs hamburger tongue tail brisket ham swine ball tip pork loin meatloaf. Cupim flank picanha, beef leberkas short loin pork loin doner kielbasa tongue. Pork chop alcatra ribeye brisket, doner salami shank shankle pork loin cow strip steak sausage tri-tip.</p>
	</div><!-- end main-text -->
	</div><!-- end container-fluid -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

	</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: -0.76em;
	}

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

	.coffee-kitten {
	margin: 0.25em;
	}

	.threecol {
	margin: 0.5em;
	padding: 0.5em;
	}

	/** About/Contact Page **/

	* {
	box-sizing: border-box;
	}

	body {
	background-color: #fffeea;
	color: #34495e;
	padding-top: 6.95em;
	}

	/* Large desktop */
	@media (min-width: 1200px) {
	body {
	background-color: #f1f1f1;
	}
	}

	/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {
	body {
	background-color: #d8d8d8;
	}
	}

	/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
	body {
	background-color: #bfbfbf;
	}
	}

	/* Landscape phones and down */
	@media (max-width: 480px) {
	body {
	background-color: white;
	}
	}

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

	.header h1 {
	text-align: center;
	}

	.froghat img {
	height: auto;
	margin: 0 auto;
	}

	.froghat {
	text-align: center;
	}

	.about {
	padding: 0 1em;
	margin-top: 0.75em;
	margin-bottom: 1em;
	}

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

	.skills {
	background-color: #5ad4c2;
	color: #fff;
	padding: 1em 0;
	}

	.contact {
	width: 50%;
	min-width: 19em;
	margin: 0 auto;
	padding: 5% 10%;
	border: 0.05em gray solid;
	}

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

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

	#skill-list {
	margin-left: 2.5em;
	}

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

	.nav ul {
	float: right;
	}

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

	/* Typography */

	body {
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 1.25em;
	}

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