tengiao/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>Ernest's Portfolio</title>

    <!-- Custom styles for this template go here -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">

    <!-- 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">
      <div class="home">
        <a href="#">#Home</a>
      </div><!-- home -->
      <ul>
        <li><a href="about.html">#About</a></li>
        <li><a href="#">#Work</a></li>
        <li><a href="contact.html">#Contact</a></li>
        <li><a href="faq.html">#FAQ</a></li>
      </ul>
    </div><!-- end nav -->

    <!-- <div class="blurb">
      <h2>This is the professional portfolio page for Ernest. <br> This is the space to watch as Ernest goes through the process of training to be a full-fledged web developer within 6 months beginning on Feb 26, 2018! </h2>
    </div> -->

    <div 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 ad1">
            <img src="./img/AntiqueToySwing.jpg" alt="Antique toy swing">
            <div class="carousel-caption">
              <h3>Web Presence</h3>
              <p>We help you build a web front for your business or organization.</p>
            </div>
          </div>
          <div class="item ad2">
            <img src="./img/PlimmertonBeach.jpg" alt="Seaside-themed Mural">
            <div class="carousel-caption">
              <h3>Blog & Content Management</h3>
              <p>We provide content or blog management for your web presence.</p>
            </div>
          </div>
          <div class="item ad3">
            <img src="./img/Octopus.jpg" alt="Octupus with stop sign">
            <div class="carousel-caption">
              <h3>Design & Redesign</h3>
              <p>Come to us for design ideas and web overhaul leaving you to focus on your content or brick and mortar business.</p>
            </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><!-- /carousel slide -->
    </div><!-- /container-fluid -->

    <div class="container" id="rowcol">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-xs-12 col-md-4">
          <div class="title-container">
            <h2># Portfolio Concept</h2>
          </div><!-- end title-container -->
          <div class="col-body">
            <p>I envision my portfolio to highlight my skills and abilities as a full stack developer who is able to deliver commercial websites that cater for an ever-expanding customer base and robust business transactions.</p>
            <p>Ideas currently brewing in my mind include a website for New Zealand's used and valuable book trade (which is also a place for book collectors and readers who are interested in buying and selling books), a subscription-based music theory education platform, and an air ticket swapping platform.</p>
            <p>My professional experience is wide and varied. I have worked in the semiconductor design industry, done brief research work on Software Defined Networking, lectured in electronic engineering and maths, and also composed acoustic/electronic experimental music and audiovisual works.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div><!-- end col-body -->
        </div><!-- /col -->

        <div class="col-xs-12 col-md-4">
          <div class="title-container">
            <h2># Project Goals</h2>
          </div><!-- end title-container -->
          <div class="col-body">
            <p>My goal is to complete all CareerFoundry Web Development course projects within 4 months. That amounts to approximately 7 to 8 Achievements in total, 2 Achievements per month, 22 Exercises per month, which comes to 1 exercise completion per day. </p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div><!-- end col-body -->
        </div><!-- /col -->

        <div class="col-xs-12 col-md-4">
          <div class="title-container">
            <h2># Course Goals</h2>
          </div><!-- end title-container -->
          <div class="col-body">
            <p>Even though my previous work experience has equipped me with plenty of transferrable professional skills, taking this course would be my first step to breaking into a new career as a software developer. </p>
            <p>It would be highly valuable to gain experience as an entry level developer and then move on to becoming a freelancer.</p>
            <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
          </div><!-- end col-body -->
        </div><!-- /col -->
      </div><!-- /row -->
      <!-- <hr> -->
    </div><!-- /rowcol -->

    <div class="container">
      <div class="row" id= "work">
        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

        <div class="col-xs-6 col-md-3">
          <img src="img/ProfilePic.jpeg" class="img-responsive">
        </div><!-- /col-xs-6 col-md-3 -->

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


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Bootstrap core JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

  </body>
</html>

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

/**** Index page ****/

body,
html {
  height: 100%;
  top: 0;
}

.carousel {
  margin-left: -15px;
  margin-right: -15px;
}

.carousel-inner .item {
    /* width: 100%; */
    height: 925px;
    /* -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */
}

/* .col-xs-6,
.col-md-3 {
  margin: 5px;
} */

/**** About page ****/

.about_bg {
  /* The image used */
  background-image: url("../img/MeAtBeaudry.jpg");
  /* Full height */
  height: 95%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.intro-title h1,
.skills-title h1 {
  text-align: center;
  /* text-transform: uppercase; */
  font-size: 3em;
  font-weight: 500;
  padding: 0 0;
  margin: 0 0;
  color: #8FBFE0;
}

.intro-title {
  position: absolute;
  top: 80px;
  background-color: #000;
  padding: 7px 100px 9px 15px;
  margin-right: 0px;
  margin-top: 40px;

}

.intro {
  position: absolute;
  /* background-color: #000; */
  padding: 10px 15px 5px 30px;
  top: 182px;
  margin-right: 1100px;
  margin-top: 0px;
}

.intro,
.skills {
  /* color: #000; */
  background-color: rgba(0, 163, 108, 0.8); /*00A36C*/
  -webkit-margin-before: 0;
}

.intro p {
  font-size: 1.5em;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

.skills-title {
  position: absolute;
  top: 200px;
  background-color: #000;
  padding: 7px 15px 9px 15px;
  margin-right: 120px;
  margin-left: 1280px;
  margin-top: 0px;
  margin-bottom: 0;
}

.skills {
  position: absolute;
  top: 300px;
  /* background-color: #000; */
  padding:20px 15px 5px 15px;
  margin-top: 0;
  margin-right: 120px;
  margin-left: 1280px;
}

#skill-list {
  margin-top: 0;
  margin-left: 10px;
  font-size: 2.0em;
  font-weight: 1000;
  color: #000;
}

/* Navigator Texts */
/* h4 {
  font-size: 2em;
  font-weight: 100;
  color: #000;
  background-color: rgba(171, 200, 192, 0.7);
  text-align: center;
  margin: 0 0;
} */

.main-text {
  padding-top: 10px;
  margin: 0 10% 5% 10%;
  position: relative;
  top: 20px;
}

.main-text h2 {
  font-size: 2.5em;
  -webkit-margin-before: 15px;
  -webkit-margin-after: 0;
}

.main-text p {
  font-size: 1em;
}

/* Typography */

h1,
h2,
#skill-list {
  font-family: "Oswald", sans-serif;
}

p {
    font-family: "Roboto", sans-serif;
}

/**** Contact page ****/

body,
html {
  height: 100%;
  top: 0;
}

.contact_bg {
  /* The image used */
  background-image: url("../img/OttawaMuseum.jpg");

  /* Full height */
  height: 95%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* top: 0;
  margin-top: 0; */
}

.nav {
  top: 0;
  width: 100%;
  padding: 0 10px 0 0;
  /* margin-bottom: 10px; */
  /* background-color: #ABC8C0; */
  background-color: rgba(171, 200, 192, 1);
  position: fixed;
  z-index: 1;
}

.nav ul {
  margin-top: 10px;
}

.nav li {
  display: inline-block;
  float: left;
  width: 20%;
  padding-left: 80px;
}

.nav a {
  color: white;
  -webkit-transition: 600ms; /* Safari */
  transition: 600ms;
  text-transform: none;
  letter-spacing: 0.05em;
  margin-left: 25px;
}

.home a {
  font-family: "Oleo Script", Helvetica, sans-serif;
  font-size: 3em;
  color: #000;
  text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
  background-color: #F45B69;
  text-align: center;
  margin: 0;
  padding: 0 10px 0 0;
  width: 150px;
  display: inline-block;
  float: left;
  clear: right;
}

.nav ul li a {
  font-family: "Monofett", cursive;
  font-size: 2em;
  color: #000;
  text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
  /* background-color: #ABC8C0; */
  background-color: rgba(171, 200, 192, 0);
  margin: 10px 0 0 0;
  padding: 10px 0 0 0;
  width: 250px;
}

.nav a:hover {
  /* color: #FF0; */
  /* text-transform: uppercase; */
  font-size: 3.5em;
  text-decoration: none;
  /* background-color: #000; */
}

.blurb {
  position: absolute;
  top: 50px;
  right: 0;
  left: 600px;
}

.contact_info {
  position: absolute;
  top: 280px;
  left: 10px;
}

h3 {
  font-family: "Oswald", sans-serif;
  font-size: 1.7em;
  font-weight: 200;
  color: #8FBFE0;
  background-color: #000;
  padding: 15px 15px 30px 15px;
  margin-top: 50px;
}

h4 {
  display: inline;
  font-size: 3em;
  color: #000;
  position: relative;
  left: 20px;
}

h5 {
  display: inline;
  font-family: "Zilla Slab Highlight", cursive;
  font-size: 3.5em;
  font-weight: 100;
  /* background-color: #5AD4C2; */
  color: #000;
  margin-top: 15px;
  padding: 0 15px 15px 15px;
  position: relative;
  left: 10px;
}

.contact_info p {
  line-height: 1.3;
  margin: 0;
  display: inline;
}

/**** FAQ page ****/

.faq_bg {
  /* The image used */
  background-image: url("../img/GraffitiWall.jpg");

  /* Full height */
  height: 95%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* top: 0;
  margin-top: 0; */
}

#accordion {
  position: absolute;
  top: 300px;
  margin: 0 10% 0;
}

.panel-default > .panel-heading {
  background-color: #000;
}

.panel-heading h6{
  font-family: "Oswald", sans-serif;
  font-size: 1.5em;
  color: #FFF;
}

.panel-default {
  background-color: rgba(171, 200, 192, 0.75);
}

.panel-body {
  color: #000;
  font-size: 1.15em;
  font-weight: 500;
}
	<!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>Ernest's Portfolio</title>

	<!-- Custom styles for this template go here -->
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" type="text/css" href='http://fonts.googleapis.com/css?family=Oleo+Script'>
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Monofett">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oswald">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto">
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Zilla+Slab+Highlight">

	<!-- 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">
	<div class="home">
	<a href="#">#Home</a>
	</div><!-- home -->
	<ul>
	<li><a href="about.html">#About</a></li>
	<li><a href="#">#Work</a></li>
	<li><a href="contact.html">#Contact</a></li>
	<li><a href="faq.html">#FAQ</a></li>
	</ul>
	</div><!-- end nav -->

	<!-- <div class="blurb">
	<h2>This is the professional portfolio page for Ernest. <br> This is the space to watch as Ernest goes through the process of training to be a full-fledged web developer within 6 months beginning on Feb 26, 2018! </h2>
	</div> -->

	<div 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 ad1">
	<img src="./img/AntiqueToySwing.jpg" alt="Antique toy swing">
	<div class="carousel-caption">
	<h3>Web Presence</h3>
	<p>We help you build a web front for your business or organization.</p>
	</div>
	</div>
	<div class="item ad2">
	<img src="./img/PlimmertonBeach.jpg" alt="Seaside-themed Mural">
	<div class="carousel-caption">
	<h3>Blog & Content Management</h3>
	<p>We provide content or blog management for your web presence.</p>
	</div>
	</div>
	<div class="item ad3">
	<img src="./img/Octopus.jpg" alt="Octupus with stop sign">
	<div class="carousel-caption">
	<h3>Design & Redesign</h3>
	<p>Come to us for design ideas and web overhaul leaving you to focus on your content or brick and mortar business.</p>
	</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><!-- /carousel slide -->
	</div><!-- /container-fluid -->

	<div class="container" id="rowcol">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-xs-12 col-md-4">
	<div class="title-container">
	<h2># Portfolio Concept</h2>
	</div><!-- end title-container -->
	<div class="col-body">
	<p>I envision my portfolio to highlight my skills and abilities as a full stack developer who is able to deliver commercial websites that cater for an ever-expanding customer base and robust business transactions.</p>
	<p>Ideas currently brewing in my mind include a website for New Zealand's used and valuable book trade (which is also a place for book collectors and readers who are interested in buying and selling books), a subscription-based music theory education platform, and an air ticket swapping platform.</p>
	<p>My professional experience is wide and varied. I have worked in the semiconductor design industry, done brief research work on Software Defined Networking, lectured in electronic engineering and maths, and also composed acoustic/electronic experimental music and audiovisual works.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- end col-body -->
	</div><!-- /col -->

	<div class="col-xs-12 col-md-4">
	<div class="title-container">
	<h2># Project Goals</h2>
	</div><!-- end title-container -->
	<div class="col-body">
	<p>My goal is to complete all CareerFoundry Web Development course projects within 4 months. That amounts to approximately 7 to 8 Achievements in total, 2 Achievements per month, 22 Exercises per month, which comes to 1 exercise completion per day. </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- end col-body -->
	</div><!-- /col -->

	<div class="col-xs-12 col-md-4">
	<div class="title-container">
	<h2># Course Goals</h2>
	</div><!-- end title-container -->
	<div class="col-body">
	<p>Even though my previous work experience has equipped me with plenty of transferrable professional skills, taking this course would be my first step to breaking into a new career as a software developer. </p>
	<p>It would be highly valuable to gain experience as an entry level developer and then move on to becoming a freelancer.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- end col-body -->
	</div><!-- /col -->
	</div><!-- /row -->
	<!-- <hr> -->
	</div><!-- /rowcol -->

	<div class="container">
	<div class="row" id= "work">
	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

	<div class="col-xs-6 col-md-3">
	<img src="img/ProfilePic.jpeg" class="img-responsive">
	</div><!-- /col-xs-6 col-md-3 -->

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



	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Bootstrap core JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

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

	/** Index page **/

	body,
	html {
	height: 100%;
	top: 0;
	}

	.carousel {
	margin-left: -15px;
	margin-right: -15px;
	}

	.carousel-inner .item {
	/* width: 100%; */
	height: 925px;
	/* -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover; */
	}

	/* .col-xs-6,
	.col-md-3 {
	margin: 5px;
	} */

	/** About page **/

	.about_bg {
	/* The image used */
	background-image: url("../img/MeAtBeaudry.jpg");
	/* Full height */
	height: 95%;
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	}

	.intro-title h1,
	.skills-title h1 {
	text-align: center;
	/* text-transform: uppercase; */
	font-size: 3em;
	font-weight: 500;
	padding: 0 0;
	margin: 0 0;
	color: #8FBFE0;
	}

	.intro-title {
	position: absolute;
	top: 80px;
	background-color: #000;
	padding: 7px 100px 9px 15px;
	margin-right: 0px;
	margin-top: 40px;

	}

	.intro {
	position: absolute;
	/* background-color: #000; */
	padding: 10px 15px 5px 30px;
	top: 182px;
	margin-right: 1100px;
	margin-top: 0px;
	}

	.intro,
	.skills {
	/* color: #000; */
	background-color: rgba(0, 163, 108, 0.8); /00A36C/
	-webkit-margin-before: 0;
	}

	.intro p {
	font-size: 1.5em;
	line-height: 20px;
	margin: 0;
	padding: 0;
	}

	.skills-title {
	position: absolute;
	top: 200px;
	background-color: #000;
	padding: 7px 15px 9px 15px;
	margin-right: 120px;
	margin-left: 1280px;
	margin-top: 0px;
	margin-bottom: 0;
	}

	.skills {
	position: absolute;
	top: 300px;
	/* background-color: #000; */
	padding:20px 15px 5px 15px;
	margin-top: 0;
	margin-right: 120px;
	margin-left: 1280px;
	}

	#skill-list {
	margin-top: 0;
	margin-left: 10px;
	font-size: 2.0em;
	font-weight: 1000;
	color: #000;
	}

	/* Navigator Texts */
	/* h4 {
	font-size: 2em;
	font-weight: 100;
	color: #000;
	background-color: rgba(171, 200, 192, 0.7);
	text-align: center;
	margin: 0 0;
	} */

	.main-text {
	padding-top: 10px;
	margin: 0 10% 5% 10%;
	position: relative;
	top: 20px;
	}

	.main-text h2 {
	font-size: 2.5em;
	-webkit-margin-before: 15px;
	-webkit-margin-after: 0;
	}

	.main-text p {
	font-size: 1em;
	}

	/* Typography */

	h1,
	h2,
	#skill-list {
	font-family: "Oswald", sans-serif;
	}

	p {
	font-family: "Roboto", sans-serif;
	}

	/** Contact page **/

	body,
	html {
	height: 100%;
	top: 0;
	}

	.contact_bg {
	/* The image used */
	background-image: url("../img/OttawaMuseum.jpg");

	/* Full height */
	height: 95%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* top: 0;
	margin-top: 0; */
	}

	.nav {
	top: 0;
	width: 100%;
	padding: 0 10px 0 0;
	/* margin-bottom: 10px; */
	/* background-color: #ABC8C0; */
	background-color: rgba(171, 200, 192, 1);
	position: fixed;
	z-index: 1;
	}

	.nav ul {
	margin-top: 10px;
	}

	.nav li {
	display: inline-block;
	float: left;
	width: 20%;
	padding-left: 80px;
	}

	.nav a {
	color: white;
	-webkit-transition: 600ms; /* Safari */
	transition: 600ms;
	text-transform: none;
	letter-spacing: 0.05em;
	margin-left: 25px;
	}

	.home a {
	font-family: "Oleo Script", Helvetica, sans-serif;
	font-size: 3em;
	color: #000;
	text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
	background-color: #F45B69;
	text-align: center;
	margin: 0;
	padding: 0 10px 0 0;
	width: 150px;
	display: inline-block;
	float: left;
	clear: right;
	}

	.nav ul li a {
	font-family: "Monofett", cursive;
	font-size: 2em;
	color: #000;
	text-shadow: 3px 3px 0px rgba(255,255,255,1.0);
	/* background-color: #ABC8C0; */
	background-color: rgba(171, 200, 192, 0);
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
	width: 250px;
	}

	.nav a:hover {
	/* color: #FF0; */
	/* text-transform: uppercase; */
	font-size: 3.5em;
	text-decoration: none;
	/* background-color: #000; */
	}

	.blurb {
	position: absolute;
	top: 50px;
	right: 0;
	left: 600px;
	}

	.contact_info {
	position: absolute;
	top: 280px;
	left: 10px;
	}

	h3 {
	font-family: "Oswald", sans-serif;
	font-size: 1.7em;
	font-weight: 200;
	color: #8FBFE0;
	background-color: #000;
	padding: 15px 15px 30px 15px;
	margin-top: 50px;
	}

	h4 {
	display: inline;
	font-size: 3em;
	color: #000;
	position: relative;
	left: 20px;
	}

	h5 {
	display: inline;
	font-family: "Zilla Slab Highlight", cursive;
	font-size: 3.5em;
	font-weight: 100;
	/* background-color: #5AD4C2; */
	color: #000;
	margin-top: 15px;
	padding: 0 15px 15px 15px;
	position: relative;
	left: 10px;
	}

	.contact_info p {
	line-height: 1.3;
	margin: 0;
	display: inline;
	}

	/** FAQ page **/

	.faq_bg {
	/* The image used */
	background-image: url("../img/GraffitiWall.jpg");

	/* Full height */
	height: 95%;

	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* top: 0;
	margin-top: 0; */
	}

	#accordion {
	position: absolute;
	top: 300px;
	margin: 0 10% 0;
	}

	.panel-default > .panel-heading {
	background-color: #000;
	}

	.panel-heading h6{
	font-family: "Oswald", sans-serif;
	font-size: 1.5em;
	color: #FFF;
	}

	.panel-default {
	background-color: rgba(171, 200, 192, 0.75);
	}

	.panel-body {
	color: #000;
	font-size: 1.15em;
	font-weight: 500;
	}