tkbtim/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>TKBInst</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 data-spy="scroll" data-target=".navbar">
 <!--navbar starts here-->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       …
  </nav> <!-- end navbar-->

  <!-- Collect the nav links, forms, and other content for toggling -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse"
  data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
      </button>

        <div class="projectName navbar-brand">
          <a href="#">tim mclean</a>
        </div> <!--end projectName -->
    </div> <!--end navbar-header -->

       <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
         <li><a href="#homepage">Home</a></li>
         <li><a href="#resume">Resume</a></li>
          <li><a href="#work">Work</a></li>
          <li><a href="#contact">Contact Page</a></li>
          <li><a href="#faq">FAQ</a></li>


        </ul>
      </div> <!-- nav -->
    </div> <!-- end nav container-->
  </nav> <!-- end navbar-->


  <div class = "container-fluid" id="homepage">

    <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/img_1151_resized7.jpg" class="img-responsive" alt="Transmitter">
          <div class="carousel-caption">
        Graduate of NAIT Instrumentation Engineering Technology
          </div>
        </div>
         <div class="item">
        <img src="img/img_1152_resized.jpg" class="img-responsive" alt="Control Valve">
          <div class="carousel-caption">
           Alberta Journeyman and Interprovincial Journeyman
          </div>
        </div>
      <div class="item">
        <img src="img/img_1165_resized.jpg" class="img-responsive" alt="Plant">
          <div class="carousel-caption">
             Member of Alberta Society of Engineering Technologists (C.E.T)
          </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 class="carousel-caption">
    <h3></h3>
    <p></p>
  </div>
  </div>
</div>
</div>

  </div><!--end div container-fluid-->

  <div class="container-fluid" id="resume">

      <h3>Profile</h3>
     <p>
        <ul>
          <li>Instrumentation Engineering Technology Diploma, Northern Alberta Institute of Technology</li>
          <li>Alberta Journeyman and Interprovincial Instrumentation Technician
          <li>Member Alberta Society of Engineering Technologists-C.E.T. Designation</li>
          <li>Gas and Liquids Measurement Coordinator experience</li>
          <li>Leads and manages the instrumentation component of major projects and turnarounds</li>
          <li>ExxonMobil Hazop and Risk Assessment training</li>
          <li>Safely conducts corrective and planned instrumentation maintenance in live plants on a wide variety of instruments</li>
          <li>Proficient with various process control systems (Honeywell/Bailey/DeltaV, AB/GE PLC)</li>
          <li>Performed FAT on 4300HP Gas Turbine Compressor Package, San Diego, CA</li>
          <li>Commissioning and Start up Technician CNRL Horizon Extraction/Froth Treatment Expansion</li>
          <li>ExxonMobil Maintenance Supervisory experience, familiar with project gate process</li>
          <li>Able to reconcile differing requirements of Eng., Const, Ops and Maint groups</li>
          <li>Experience with walk-downs and punch list closure</li>
          <li>Proficient with various electronic flow measurement systems (Bristol XFC, Fisher FloBoss)</li>
          <li>Proficient with AER Directive 17 and EPAP requirements</li>
          <li> Proficient with CEMS and Alberta Environment Regulatory Reporting</li>
          <li>Proficient with Wonderware Intouch HMI</li>
          <li>Strong belief in life-long learning and expanding my knowledge base</li>

        </ul>
     </p>

    </div>
  </div>

    <div class="row">
        <div class="col-xs-12 col-md-4">
          <h2>Work History</h2>
          <p><a class="btn btn-default" href="work history.html" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-xs-12 col-md-4">
          <h2>Education</h2>
          <p><a class="btn btn-default" href="education.html" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-xs-12 col-md-4">
          <h2>More About Tim</h2>
          <p><a class="btn btn-default" href="About2.html" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->


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

     <div class="container-fluid" id="work"><!--container work-->
        <div class ="row2" id="work">
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1154.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1158.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1150.jpg" class="img-responsive" alt="cliffs">
             </div>
            <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1151.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1161.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1162.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1220.jpg" class="img-responsive" alt="cliffs">
             </div>
             <div class="col-xs-6 col-md-3">
                <img src="img/IMG_1250.jpg" class="img-responsive" alt="cliffs">
             </div>

        </div><!--end row2-->

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


   <!--  ================container-->


      <div class="container-fluid" id="contact">
        <div class="row3">
          <div class="col-xs-3 col-md-12">
            <div class="header2">
              <h1>Contact Me</h1>
            </div><!--end div header-->
            <div class="content" id="symbols">
            <p><span class="glyphicon glyphicon-hand-right"></span> Tim McLean</p>
            <P><span class="glyphicon glyphicon-phone"></span> 780-898-4242</P>
            <P><span class="glyphicon glyphicon-envelope"></span> tkbinst@gmail.com</p>
            </div><!--end div content-->
            <div class="description">
              <h2>A fully functional instrument tech able to quickly be effective in a wide range of oil and gas or oil sands facilities.</h2>
            </div><!--end description-->
          </div><!--end col-->
        </div><!--end row3-->
     </div><!--end div contact-->

<div class="container-fluid" id="faq"><!--container faq-->
  <div class="header">
    <h1>Frequently Asked Questions</h1>
  </div><!--end div header-->

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordian" href="#collapseOne">
        Why should you hire me?
        </a>
        </h4>
      </div><!--end panel heading-->
      <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
         I have repeatably shown that I have the skills and experience necessary, in a very short amount of time, to be effective troubleshooting and repairing instrumentation, controls and process issues.
        </div><!--end panel-body-->
      </div><!--end collapseOne-->
  </div><!--end accordian-->

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordian" href="#collapseTwo">
         How did I gain these skills?
        </a>
        </h4>
      </div><!--end panel heading-->
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          A good portion of my early years in the industry where spent working in norhtern Canada. It was necessary for me to be self sufficient in troubleshooting because there simply wasn't anyone else to call.
        </div><!--end panel-body-->
    </div><!--end collapseTwo-->
  </div><!--end accordian-->

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordian" href="#collapseThree">
          My plans for the future
        </a>
        </h4>
      </div><!--end panel heading-->
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
        I hope to continue working and learning as an instrumentationn technician. I feel I have lots to offer potential employers either as an employee or on a contract basis.
        </div><!--end panel-body-->
      </div><!--end collapseThree-->
    </div><!--end accordian-->

 </div><!--end container faq-->


    <!-- ============================= -->
    <!-- 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>

    <script type="text/javascript">
  var $root = $('html, body');
    $('.navbar-nav a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
</script>

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

  </body>
</html>

## styles.css
.body {
  position: relative;
}

/*Styles for nav-bar*/
.projectName {
    text-transform: uppercase;
}

.projectName a {
    color: white;
}


/*Styles for home page*/

#homepage{
    padding-bottom: 5%;
    padding-top: 5%;
    padding-left: 7%;
    background-color: #E0F8F1;

}

.carousel-caption{
    color: #58FAF4;
    font-size: 5em;
    }


/*Styles for Resume*/

#resume{
    padding-top: 5%;
    padding-bottom: 0%;
    background-color: #E0F8F1;
}
.row{
    background-color: #E0F8F1


}


/*Styles for About page*/

.header h1 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 5em;
    font-style: italic;
    font-variant: normal;
    font-weight: 500;
    padding-top: 70px;
    padding-bottom: 50px;
    color: blue;

}

.column {
     display: inline-block;
            width: 100%;
             float:left;
}

.intro{
    width: 100%;
    float:left;
    color: white;
}
.intro h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 26.4px;
    text-align: center;
    color: blue;
}

.intro p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 50;
    line-height: 26.4px;
    padding-left: 20px;
    padding-bottom: 34px;
    color: blue;
}

.skills h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 26.4px;
    text-align: left;
    color: blue;
}

.skills{
    display: inline-block;
    float: left;

}
#skill-list{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 50;
    line-height: 26.4px;
    color: blue;

}
.main-text{
    clear: both;
    padding-top: 30px;
    padding-bottom: 50px;
    font-size: 25px;
    color: blue;

}

#about{
    padding-bottom: 2%;
    background-color: #E0F8F1;
}

/*Styles for Contact Page*/

.header2 h1{
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10em;
    font-style: italic;
    font-variant: normal;
    padding-top: .5em;
    padding-bottom: .3em;
    color: #E0F8F1;
}

.content {
    position: relative;
    left: 30%;
    top: 5%;
    width: 60%;
    text-align: left;
    color: #E0F8F1;
}

#symbols{
    font-size: 5em;
}

.description h2{
    padding-top: 5%;
    position: relative;
    left: 0;
    top: 90%;
    width: 100%;
    text-align: center;
    font-size: 5em;
    padding-bottom: 2em;
    color: #E0F8F1;
}
.description p{
    position: relative;
    left: 0;
    top: 65%;
    width: 100%;
    text-align: center;
    font-size: 25px;
    font-weight: 35;
}

#contact{
    padding-bottom: .5em;
        background-image: url("../img/IMG_1165_resized.jpg");
/*Add a background image*/
    background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
    background-size: cover;
/*Have the background cover the entire div section*/
    color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
    padding-top: 50px;
    height: 1200px;
}


/*Styles for work*/

#work{
    padding-top: 4%;
    padding-bottom: 15%;
    background-color: #E0F8F1;
}

.col-md-3{
    padding-bottom: 1em;
}


/*styles for faq page*/

.panel-group{
    background-color: #E0F8F1;
}

.panel-heading{
    background-color:#E0F8F1 !important;
}


.panel-title{
	background-color:#E0F8F1;
	width: 30%;
    height: auto;
	margin-left: 35%;
	text-align: center;
}
.panel-title a{
	color: blue;
	 background-color: #E0F8F1;
}

.panel-body{
	text-align: center;
    color:blue;
    background-color: #E0F8F1;

}

#faq{
    background-color: #E0F8F1;
    padding-bottom: 25%;
}

.resume{
    padding-left: 15%;
    background-color:#E0F8F1;
}
#work_history h1{
    color: red;
}
#work_history h3{
    color: red;

}
	<!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>TKBInst</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 data-spy="scroll" data-target=".navbar">
	<!--navbar starts here-->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	…
	</nav> <!-- end navbar-->

	<!-- Collect the nav links, forms, and other content for toggling -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse"
	data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>

	<div class="projectName navbar-brand">
	<a href="#">tim mclean</a>
	</div> <!--end projectName -->
	</div> <!--end navbar-header -->

	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#homepage">Home</a></li>
	<li><a href="#resume">Resume</a></li>
	<li><a href="#work">Work</a></li>
	<li><a href="#contact">Contact Page</a></li>
	<li><a href="#faq">FAQ</a></li>


	</ul>
	</div> <!-- nav -->
	</div> <!-- end nav container-->
	</nav> <!-- end navbar-->


	<div class = "container-fluid" id="homepage">

	<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/img_1151_resized7.jpg" class="img-responsive" alt="Transmitter">
	<div class="carousel-caption">
	Graduate of NAIT Instrumentation Engineering Technology
	</div>
	</div>
	<div class="item">
	<img src="img/img_1152_resized.jpg" class="img-responsive" alt="Control Valve">
	<div class="carousel-caption">
	Alberta Journeyman and Interprovincial Journeyman
	</div>
	</div>
	<div class="item">
	<img src="img/img_1165_resized.jpg" class="img-responsive" alt="Plant">
	<div class="carousel-caption">
	Member of Alberta Society of Engineering Technologists (C.E.T)
	</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 class="carousel-caption">
	<h3></h3>
	<p></p>
	</div>
	</div>
	</div>
	</div>

	</div><!--end div container-fluid-->

	<div class="container-fluid" id="resume">

	<h3>Profile</h3>
	<p>
	<ul>
	<li>Instrumentation Engineering Technology Diploma, Northern Alberta Institute of Technology</li>
	<li>Alberta Journeyman and Interprovincial Instrumentation Technician
	<li>Member Alberta Society of Engineering Technologists-C.E.T. Designation</li>
	<li>Gas and Liquids Measurement Coordinator experience</li>
	<li>Leads and manages the instrumentation component of major projects and turnarounds</li>
	<li>ExxonMobil Hazop and Risk Assessment training</li>
	<li>Safely conducts corrective and planned instrumentation maintenance in live plants on a wide variety of instruments</li>
	<li>Proficient with various process control systems (Honeywell/Bailey/DeltaV, AB/GE PLC)</li>
	<li>Performed FAT on 4300HP Gas Turbine Compressor Package, San Diego, CA</li>
	<li>Commissioning and Start up Technician CNRL Horizon Extraction/Froth Treatment Expansion</li>
	<li>ExxonMobil Maintenance Supervisory experience, familiar with project gate process</li>
	<li>Able to reconcile differing requirements of Eng., Const, Ops and Maint groups</li>
	<li>Experience with walk-downs and punch list closure</li>
	<li>Proficient with various electronic flow measurement systems (Bristol XFC, Fisher FloBoss)</li>
	<li>Proficient with AER Directive 17 and EPAP requirements</li>
	<li> Proficient with CEMS and Alberta Environment Regulatory Reporting</li>
	<li>Proficient with Wonderware Intouch HMI</li>
	<li>Strong belief in life-long learning and expanding my knowledge base</li>

	</ul>
	</p>

	</div>
	</div>

	<div class="row">
	<div class="col-xs-12 col-md-4">
	<h2>Work History</h2>
	<p><a class="btn btn-default" href="work history.html" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-xs-12 col-md-4">
	<h2>Education</h2>
	<p><a class="btn btn-default" href="education.html" role="button">View details »</a></p>
	</div><!-- /col -->
	<div class="col-xs-12 col-md-4">
	<h2>More About Tim</h2>
	<p><a class="btn btn-default" href="About2.html" role="button">View details »</a></p>
	</div><!-- /col -->
	</div><!-- /row -->


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

	<div class="container-fluid" id="work"><!--container work-->
	<div class ="row2" id="work">
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1154.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1158.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1150.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1151.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1161.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1162.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1220.jpg" class="img-responsive" alt="cliffs">
	</div>
	<div class="col-xs-6 col-md-3">
	<img src="img/IMG_1250.jpg" class="img-responsive" alt="cliffs">
	</div>

	</div><!--end row2-->

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



	<!-- ================container-->


	<div class="container-fluid" id="contact">
	<div class="row3">
	<div class="col-xs-3 col-md-12">
	<div class="header2">
	<h1>Contact Me</h1>
	</div><!--end div header-->
	<div class="content" id="symbols">
	<p><span class="glyphicon glyphicon-hand-right"></span> Tim McLean</p>
	<P><span class="glyphicon glyphicon-phone"></span> 780-898-4242</P>
	<P><span class="glyphicon glyphicon-envelope"></span> tkbinst@gmail.com</p>
	</div><!--end div content-->
	<div class="description">
	<h2>A fully functional instrument tech able to quickly be effective in a wide range of oil and gas or oil sands facilities.</h2>
	</div><!--end description-->
	</div><!--end col-->
	</div><!--end row3-->
	</div><!--end div contact-->

	<div class="container-fluid" id="faq"><!--container faq-->
	<div class="header">
	<h1>Frequently Asked Questions</h1>
	</div><!--end div header-->

	<div class="panel-group" id="accordion">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordian" href="#collapseOne">
	Why should you hire me?
	</a>
	</h4>
	</div><!--end panel heading-->
	<div id="collapseOne" class="panel-collapse collapse">
	<div class="panel-body">
	I have repeatably shown that I have the skills and experience necessary, in a very short amount of time, to be effective troubleshooting and repairing instrumentation, controls and process issues.
	</div><!--end panel-body-->
	</div><!--end collapseOne-->
	</div><!--end accordian-->

	<div class="panel-group" id="accordion">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordian" href="#collapseTwo">
	How did I gain these skills?
	</a>
	</h4>
	</div><!--end panel heading-->
	<div id="collapseTwo" class="panel-collapse collapse">
	<div class="panel-body">
	A good portion of my early years in the industry where spent working in norhtern Canada. It was necessary for me to be self sufficient in troubleshooting because there simply wasn't anyone else to call.
	</div><!--end panel-body-->
	</div><!--end collapseTwo-->
	</div><!--end accordian-->

	<div class="panel-group" id="accordion">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#accordian" href="#collapseThree">
	My plans for the future
	</a>
	</h4>
	</div><!--end panel heading-->
	<div id="collapseThree" class="panel-collapse collapse">
	<div class="panel-body">
	I hope to continue working and learning as an instrumentationn technician. I feel I have lots to offer potential employers either as an employee or on a contract basis.
	</div><!--end panel-body-->
	</div><!--end collapseThree-->
	</div><!--end accordian-->

	</div><!--end container faq-->








	<!-- ============================= -->
	<!-- 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>

	<script type="text/javascript">
	var $root = $('html, body');
	$('.navbar-nav a').click(function() {
	var href = $.attr(this, 'href');
	$root.animate({
	scrollTop: $(href).offset().top
	}, 500, function () {
	window.location.hash = href;
	});
	return false;
	});
	</script>

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

	</body>
	</html>
	.body {
	position: relative;
	}

	/Styles for nav-bar/
	.projectName {
	text-transform: uppercase;
	}

	.projectName a {
	color: white;
	}



	/Styles for home page/

	#homepage{
	padding-bottom: 5%;
	padding-top: 5%;
	padding-left: 7%;
	background-color: #E0F8F1;

	}

	.carousel-caption{
	color: #58FAF4;
	font-size: 5em;
	}


	/Styles for Resume/

	#resume{
	padding-top: 5%;
	padding-bottom: 0%;
	background-color: #E0F8F1;
	}
	.row{
	background-color: #E0F8F1


	}


	/Styles for About page/

	.header h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 5em;
	font-style: italic;
	font-variant: normal;
	font-weight: 500;
	padding-top: 70px;
	padding-bottom: 50px;
	color: blue;

	}

	.column {
	display: inline-block;
	width: 100%;
	float:left;
	}

	.intro{
	width: 100%;
	float:left;
	color: white;
	}
	.intro h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 26.4px;
	text-align: center;
	color: blue;
	}

	.intro p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	font-weight: 50;
	line-height: 26.4px;
	padding-left: 20px;
	padding-bottom: 34px;
	color: blue;
	}

	.skills h2{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 26.4px;
	text-align: left;
	color: blue;
	}

	.skills{
	display: inline-block;
	float: left;

	}
	#skill-list{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	font-weight: 50;
	line-height: 26.4px;
	color: blue;

	}
	.main-text{
	clear: both;
	padding-top: 30px;
	padding-bottom: 50px;
	font-size: 25px;
	color: blue;

	}

	#about{
	padding-bottom: 2%;
	background-color: #E0F8F1;
	}

	/Styles for Contact Page/

	.header2 h1{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10em;
	font-style: italic;
	font-variant: normal;
	padding-top: .5em;
	padding-bottom: .3em;
	color: #E0F8F1;
	}

	.content {
	position: relative;
	left: 30%;
	top: 5%;
	width: 60%;
	text-align: left;
	color: #E0F8F1;
	}

	#symbols{
	font-size: 5em;
	}

	.description h2{
	padding-top: 5%;
	position: relative;
	left: 0;
	top: 90%;
	width: 100%;
	text-align: center;
	font-size: 5em;
	padding-bottom: 2em;
	color: #E0F8F1;
	}
	.description p{
	position: relative;
	left: 0;
	top: 65%;
	width: 100%;
	text-align: center;
	font-size: 25px;
	font-weight: 35;
	}

	#contact{
	padding-bottom: .5em;
	background-image: url("../img/IMG_1165_resized.jpg");
	/Add a background image/
	background-attachment: fixed;
	/Give the background a fixed position does it not scroll when you scroll/
	background-size: cover;
	/Have the background cover the entire div section/
	color: white;
	/Change the color of the text on top so it is readable, and adjust the padding as needed./
	padding-top: 50px;
	height: 1200px;
	}


	/Styles for work/

	#work{
	padding-top: 4%;
	padding-bottom: 15%;
	background-color: #E0F8F1;
	}

	.col-md-3{
	padding-bottom: 1em;
	}


	/styles for faq page/

	.panel-group{
	background-color: #E0F8F1;
	}

	.panel-heading{
	background-color:#E0F8F1 !important;
	}


	.panel-title{
	background-color:#E0F8F1;
	width: 30%;
	height: auto;
	margin-left: 35%;
	text-align: center;
	}
	.panel-title a{
	color: blue;
	background-color: #E0F8F1;
	}

	.panel-body{
	text-align: center;
	color:blue;
	background-color: #E0F8F1;

	}

	#faq{
	background-color: #E0F8F1;
	padding-bottom: 25%;
	}

	.resume{
	padding-left: 15%;
	background-color:#E0F8F1;
	}
	#work_history h1{
	color: red;
	}
	#work_history h3{
	color: red;

	}