html page about me, linked to portfolio, quick mockup

about_style.css

/* Universal Values *****************************************************************/

* {box-sizing: border-box;}
* h1, 
  h2, 
  h3 {
	font-weight: 200;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

/* Portfolio/Course *****************************************************************/

.row { 
	width: 80%;
	margin: auto;
}

body {
	background-color: #FFF;
	color: #3C3A41;
	position: relative;
}

.card4,
.card1,
.card2,
.card5,
.card6 {
	width: 100%;
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 15px;
}

.card1 {
	margin-top: -30px;
}

.card6 {margin-top: -50px;
}

.card4 {
	background-image: url("../img/cameralens.jpg");
	background-attachment: fixed;
}

.card4 {
	margin-top: 40px;
	margin-bottom: 40px;
}

.glyphicon-list-alt,
.glyphicon-blackboard,
.glyphicon-send {
	font-size: 8em;
    padding-top: 10px;
    transition:color 1500ms;
}

.portfolio-descriptors {
	text-align: center;
}

.skills {
	background-color: #6441A5;
	color: #FFF;
	padding-top: 10px;
    padding-bottom: 25px;
}

.md-list {
	padding: 10px;
	border-radius: 10px;
}

.md-list p {
	text-align: center;
}

.md-list a:link {
	color:gray;
}

.md-list a:visited {
	color:black;
}

.course-goals {
	background-color: #D3D3D3;
	padding: 10px;
	border-radius: 10px;
}

#details-buttons,
#details-button-last {
	float: right;
}

#details-button-last {
	margin-top: 12px;
}

.btn {
	border-radius: 5px;
    color: #fff;
    background-color: #302F3A;
}

.skills {
	background-color: rgba(100, 65, 165, 0.71);
	border-radius: 10px;
	margin-right: 25px;
}

.main-text p {
	border-radius: 10px;
    padding: 1%;
}

#steps-images {
	margin-top: 50px;
}

@media (max-width: 768px) {
	.steps-images img{
		display: none;
	}
}

/* Sample Project Images ************************************************************/

.work-images {
	margin: 15px;
}

.work-img {
	display: block; /* centers in margin */
	margin: auto;
	width: 200px;
	position: relative; /* is needed for .info pos absolute to work */
	margin-top: 15px;
}

.info {
	position: absolute;
	top: 14%;
	left: 22%;
	color: #fff;
	font-family: FogtwoNo5, sans-serif;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 0.5em;
	line-height: 1.6;
	display: none;
	margin-left: -43px;
    margin-right: 2px;
    margin-top: 2px;
    min-width: 196px;
    min-height: 80px;
    background-color:rgba(100,65,165,.71);
    text-align:center;
}

.proj-title {
	font-weight: 100;
}

/* Youtube Videos *****************************************************************/

#youtube-video {
    margin-left: 15px;
    margin-right: 15px;
}

#video-spanner {
	line-height: 150px;
	width: 150px;
}

.headphones {
	text-align: center;
	font-size: 6em;
}

/* About *****************************************************************/

#about-boxes {
	margin-top: 30px;
}

#about-section {
	margin-right: -30px;
	margin-left: -30px;
}

/* Footer *****************************************************************/

.twittericon {
	float: right;
	margin-top: -17px;
}

.fb-like {
	float: right;
	margin-top: -17px;
}

.twitter-follow-button {
	margin-left: 5px;
}

.copyright {
	color: white;
}

footer {
	bottom: 0;
	position: fixed;
	height: 25px;
	background-color: black;
	width: 100%;
	margin-left: -15px;
}

/* Modal *****************************************************************/

.modal-title {
	float: left;
}

.modal-button {
	float: right;
}

#modal-button-style {
	border-radius: 5px;
    color: white;
    background-color: #302F3A;
    border-color: white;
}

.Learn-more {
    width: 80%;
    text-align: center;
    margin-left: 10%;
    background-color: #6441A5;
    padding: 1%;
    border-radius: 10px;
    color: white;
    margin-top:30px;
}

.modal-content {
	color: black;
}

#modalclose {
	margin-top: -10px;
}

#myModalLabel {
	margin-top: -8px;
	font-family: Futura, Helvetica, Arial, sans-serif;
}

.modal-header {
	background-color: #6441A5;
	color: white;
}

.modal-content {
	height: 650px;
}

.modal-body {
	height: 620px;
}

#resume {
	height:100%;
	width: 100%;
}

/* carousel *****************************************************************/

.carousel-inner {
	max-height: 260px;
    margin-bottom: 50px;
    border: 1px solid black;
}

#carousel-example-generic {
	margin-top: 51px;
	margin-left: -15px;
	margin-right: -17px;
}

.carousel-indicators li {
	background-color: black;
}

/* Contact section *****************************************************************/

.par4 {
	margin-top: 10%;
}

.par1 h2,
.par2 h2,
.par3 h2 {
	max-width: 280px;
    padding: 10px;
}

.contact-paragraphs {
	margin-bottom: 50px;
}

#contact-section {
	background-image: url("../img/cellphone.jpg");
	background-attachment: fixed;
		color: white;
	padding-bottom: 100px;
	margin-bottom: 100px;
	margin-left: -15px;
	margin-right: -15px;
}

#center-section {
	width: 80%;
}

#map {
	margin: auto;
	border: 1px solid white;
}

#message-relay {
	margin-bottom:50px;
}
/* Forms *****************************************************************/

.form-control {
	width: 100%;
}

#email-box,
#message-box{
	margin: 1%;
	margin-left: -1px;
}

#name-box,
#phone-box {
	width: 50%;
	display: inline-block;
}

#phone-box {
	margin-left: -4px;
}

#contact-button {
	border-radius: 5px;
    color: white;
    background-color: #302F3A;
    margin-top: -70px;
    transition: color 1000ms;
}

#contact-button:hover {
	background-color: #6441A5;
}

/* Accordion *****************************************************************/

.panel-title a {
	text-decoration: none;
	transition: color 1000ms;
}

.panel-title a:hover {
	color: black;
}

#headingOne,
#headingTwo,
#headingThree,
#headingFour,
#headingFive {
	background-color: #999;
	color: white;
	border-radius: 0px;
}

.faq-accordion {
	margin-top: 50px;
	margin-bottom: 50px;
}

/* Nav Bar styles *****************************************************************/

@media (min-width: 768px) {
	.navbar {
		background-color:black;
		border-left: 20px solid #6441a5;
	}
}

@media (max-width: 768px) {
	.navbar {
		background-color:transparent;
	}
	.navbar-header {
		background-color: black;
	}
	.nav li {
		background-color: white;
	}
}

@media screen and (min-width: 768px) and (max-width: 768px) {
	.navbar {
		background-color: black;
		border-left: 20px solid #6441a5;
	}

	.nav li {background-color:black;}
	.dropdown-menu a {
		background-color: white;
	}
}

.icon-bar {
	background-color: white;
}

.nav {
	border: 1px solid black;
	float: right;
}

.nav a:hover {
	color: black;
}

.nav a {
	color: #a6a6a6;
	transition:color 800ms;
}

.home a {
	color: white;
}

.navbar {
    border: 0;
}

.navbar-brand {
	font-family: FogtwoNo5, sans-serif;
	font-size:2em;
}

/* Map API ****************************************************************/

#map {
	height: 230px;
	width: 330px;
}

/* Typography *****************************************************************/
/* about page */

.main-text h3 {
	font-family: FogtwoNo5, Futura, Helvetica, Arial, sans-serif;
	font-weight: 400;
}

.intro p {
	font-size: 3em;
	font-weight: 200;
	-webkit-margin-before: 0;
	color: gray;
}

.skills li,
.main-text p {
	font-weight: 200;
}

#main-text-col p {
		background-color: rgba(238, 238, 238, 0.65);
}

.main-text {
	margin-top: 30px;
	margin-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.skills h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 100;
}

.md-list {
	background-color: #6441A5;
	color: #FFF;
	font-weight: 100;
}

#char-count {
	width: 40px;
    background-color: rgba(0, 0, 0, 0.682353);
    border-radius: 4px;
    padding: 1%;
}
/* Typography *****************************************************************/
/* Contact */

#contact-title {
	text-align: center;
	margin-bottom: 50px;
	margin-top: 50px;
	letter-spacing: 0.5em;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	width: 100%;
	font-family: Lucida, Palatino, Georgia, Garamond, serif;
}

.par1 h2,
.par2 h2 {
	color: white;
	font-weight: 100;
	margin-top: 0;
}

.par1 p,
.par2 p {
	font-weight: 100;
}

.par1 a {
	color: white;
}

.par4 img {
	margin-left: 45px;
}
.glyphicon-list-alt:hover,
.glyphicon-blackboard:hover,
.glyphicon-send:hover,
.glyphicon-envelope:hover {
	color: #6441A5;
}

.glyphicon-envelope {
	padding-left: 15px;
	transition: color 1500ms;
}

.glyphicon-comment:hover {
	color: #6441A5;
}

.glyphicon-comment {
	padding-left: 15px;
	transition:color 1500ms;
}

.glyphicon-user:hover {
	color: #6441A5;
}

.glyphicon-user {
	padding-left: 15px;
	transition:color 1500ms;
}

#visible-comment {
	font-size:3em;
	font-weight:100;
}

#message-relay {
	color: rgba(0, 0, 0, 0.41);
	text-align: center;
}

.form-control {
	color:white;
}

#char-count {
	border: 1px solid white;
    text-align: center;
    font-weight: 100;
}

/* Typography *****************************************************************/
/* Font General */

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

.carousel-caption {
	position: absolute;
	top: 50px;
}

.carousel-caption h2,
.carousel-caption h1 {
	letter-spacing: 0.5em;
	font-size: 3em;
	text-shadow: 1px 1px black;
	font-family: FogtwoNo5, Lucida, Palatino, Georgia, Garamond, serif;
}

@media (min-width: 768px) {
	.carousel-caption h2,
	.carousel-caption h1 {
		letter-spacing: 1em;
	}
}

#port-concept h2 {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 15px;
	letter-spacing: 0.5em;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	width: 100%;
	font-family: FogtwoNo5, Lucida, Palatino, Georgia, Garamond, serif;
}

#port-concept p {
	margin-bottom: 70px;
	text-align:center;
}

#proj-goals h2 {
	margin-top: 5px;
}

.samples h2 {
		text-align: center;
	margin-bottom: 30px;
	margin-top: 30px;
	letter-spacing: 0.5em;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	width: 100%;
	font-family: FogtwoNo5, Lucida, Palatino, Georgia, Garamond, serif;
}

.main-text {
	text-align: center;
}

@font-face {
	font-family: FogtwoNo5;
	src: url(../fonts/FogtwoNo5.ttf);
}

.course-goals h2 {
	font-family: FogtwoNo5, sans-serif;
}

#proj-goals h2 {
	font-family: FogtwoNo5, sans-serif;
}

.faq-accordion h2 {
		text-align: center;
	margin-bottom: 30px;
	margin-top: 15px;
	letter-spacing: 0.5em;
	border-bottom: 1px solid black;
	padding-bottom: 10px;
	width: 100%;
	font-family: FogtwoNo5, Lucida, Palatino, Georgia, Garamond, serif;
}

.panel-title {
	font-weight: 100;
}

.Learn-more h4 {
	font-family: Futura, Helvetica, Arial, sans-serif;
}

#work-title {
	font-size: 4em;
	font-weight: 100;
	color: black;
	text-align:center;
	font-family: FogtwoNo5, Lucida, Palatino, Georgia, Garamond, serif;
}

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>Keenan</title>

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

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

    <link rel="stylesheet" href="../css/tooltipster-noir.css">

    <link rel="stylesheet" href="../css/style.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]-->
   <div id="fb-root"></div>
  </head>

    <!-- Scrollspy code -->
    <body data-spy="scroll" data-target=".navbar">
    <div class="container-fluid">

     <nav class="navbar navbar-inverse navbar-fixed-top">
       <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>                        
           </button>
           <a class="navbar-brand" href="#">Return</a>
         </div>
         <div>
           <div class="collapse navbar-collapse" id="myNavbar">
             <ul class="nav navbar-nav">
               <li><a href="#about-section">About</a></li>
               <li><a href="#faq-section">FAQ</a></li>
               <li><a href="#contact-section">Contact</a></li>
               <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Work<span class="caret"></span></a>
                 <ul class="dropdown-menu">
                   <li><a href="#work-section">Projects</a></li>
                 </ul>
               </li>
             </ul>
           </div>
         </div>
       </div>
     </nav> 

      <!-- insert carousel here -->
      <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/phone_carousel.jpg" alt="office">
          <div class="carousel-caption" id="keenan_parker">
            <h1>KEENAN PARKER</h1>
              <p></p>
          </div>
        </div>
        <div class="item">
          <img src="../img/library_carousel.jpg" alt="library">
          <div class="carousel-caption">
            <h2>Impress</h2>
              <p>Websites that deliver the message you want</p>
         </div>
        </div>
        <div class="item">
          <img src="../img/office_carousel.jpg" alt="library">
          <div class="carousel-caption">
            <h2>Passion</h2>
              <p>no project is too large, no detail too small</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><!-- end carousel here -->
   </div><!-- / container-fluid -->

   <!-- Portfolio concept section -->
   <div class="container-fluid">
   <div class="card1"> <!--these cards function best after the container but wrapping around the row in that section. Apparently they don't break the container-row requirement. -->
      <div class="row">
        <div class="col-md-12" id="port-concept">
          <h2>Portfolio</h2>
        </div>
        <div class="col-xs-12 col-sm-4 portfolio-descriptors">
          Informational websites<br>
          E-commerce<br>
          <span class="glyphicon glyphicon-list-alt">
        </div>
        <div class="col-xs-12 col-sm-4 portfolio-descriptors">
          Multimedia websites<br>
          Product Placement<br>
          <span class="glyphicon glyphicon-blackboard">
        </div>
        <div class="col-xs-12 col-sm-4 portfolio-descriptors">
          Web apps<br>
          Communication<br>
          <span class="glyphicon glyphicon-send">
        </div>
    </div><!-- /row -->
    </div> <!-- / end card1 -->

    <div class="card2">
    <div class="row" id="center-section">
        <div class="col-xs-12">
           <div class="md-list">
            <p><strong>Portfolio Concept</strong> includes
            <ul>
              <li> Developing and displaying sound coding
              <li> Experimenting with dynamic front-end themes
              <li> Crafting responsive page structures
              <li> A medium for studying great web development and developers: <a href="http://seanhalpin.io" target="_blank">Sean Halpin</a>, <a href="http://www.pierre.io" target="_blank">Pierre Nel</a>
            </ul>
            </div> <!-- md-list -->
           </p>
          <p id="details-buttons"><button type="button" class="btn btn-default" title="Check in regularly to see what I've been learning!"><span class="glyphicon glyphicon-info-sign"> Details</button></p>
        </div><!-- /col -->

        <div class="col-xs-12" id="proj-goals">
          <h2>Project Goals</h2>
          <p>
          I am dedicating a minimum of three hours a day on weekdays, and 6 hours on weekends to this project (27 hours a week).
          </p> 
          <p>
          At the minimum, I will complete 5 exercises per week, with more if time permits. I am aiming for completion of the entire web development program by the begining of August. However, my priority is developing my <a href="#" title="Learning new skills is a mindset as well as a process. People are rarely either capable or incapable. The answer to most challenges is, I need to learn more!." id="tool1">skills</a>--practice makes perfect!</p>
          <p id="details-buttons"><button type="button" class="btn btn-default" title="Ground up: HTML/CSS/Javascript/Ruby, Bootstrap and Rails frameworks, and jQuery plugins"><span class="glyphicon glyphicon-info-sign"> Details</button></p>

       </div><!-- /col -->

        <div class="col-xs-12">
        <div class="course-goals">
          <h2>Course Goals</h2>
          <p>I. Developing the necessary skills to not only be a great web developer, but build a strong foundation to increase my technical expertise over my lifetime.<br> II. Changing career streams into full-time web development.</p>
          </div><!-- course goals-->
          <p id="details-button-last"><button type="button" class="btn btn-default" title="Robot overlords look kindly on tech skills"><span class="glyphicon glyphicon-info-sign"> Details</button></p>
        </div><!-- /col -->
      </div> <!-- end card2 -->
    </div><!-- /container fluid -->
    
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-4 steps-images">
          <img src="../img/step1.jpg" class="img-responsive">
        </div>
        <div class="col-sm-4 steps-images">
          <img src="../img/step2.jpg" class="img-responsive">
        </div>
        <div class="col-sm-4 steps-images">
          <img src="../img/step3.jpg" class="img-responsive">
        </div>      
      </div><!-- end row -->
    </div> <!-- /container -->

      <!-- About Section -->
    <div class="container-fluid" id="about-section">
    <div class="card4" data-stellar-background-ratio="0.3">
      <div class="row" id="about-boxes">
        <div class="col-xs-12 col-sm-8 col-md-8">
          <div class="intro column">
            <p>
            Avid reader, you can find me by the beach, soaking in Vancouver's local West-coast culture or otherwise typing away behind a keyboard. 
            </p>
          </div> <!-- intro -->
        </div><!-- /col -->
        <div class="col-xs-12 col-sm-4 col-md-4">
          <div class="skills column" title="Be sure to check out the FAQ section, and send me an email" id="skillid">
            <h3>Skills</h3>
            <ul id="skill-list">
              <li>Ineractive and responsive web page construction and design</li>
              <li>(Pen) Ruby based applications</li>
              <li>(Pen) Javascript</li>
              <li>(Pen) ITIL Certification</li>
              <li>(Pen) SQL</li>
            </ul>
          </div> <!-- skills column -->
        </div><!-- /col -->
        <div class="col-xs-12" id="main-text-col">
          <div class="main-text">
            <h3></h3>
            <p>
            Stories are hard, but that doesn't mean you can't read some nifty Latin in the meantime! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel vehicula eros, vitae laoreet augue. Etiam sagittis leo quis lacus fringilla, eu euismod erat vulputate. Nam eleifend malesuada odio. Nam fringilla, odio eget sodales maximus, metus mauris vulputate massa, at rutrum mi libero id nisi. Maecenas sit amet malesuada enim, et interdum lorem. Cras id placerat sem. Quisque nec laoreet magna, eu fermentum lacus. Sed dictum leo eget consequat rhoncus. Mauris mollis eros justo, a imperdiet tortor euismod a. Aenean tristique urna et est bibendum dapibus et at est. Donec at orci vel nisi posuere sagittis.
            </p>
          </div> <!-- main-text -->
        </div><!-- /col -->
      </div><!-- row -->
      </div><!-- end card -->
    </div><!-- / container -->
    
   
   <div class="container-fluid">
     <h2 id="work-title">Work &amp; Media</h2>
   </div><!-- / container-fluid -->

   <div class="headphones">
     <span class="glyphicon glyphicon-headphones gly-rotate-180" aria-hidden="true" id="video-spanner" title="Click here for my latest video/favourite media"></span><!-- / glyphicon -->
   </div><!-- / headphones -->

    <div class="embed-responsive embed-responsive-16by9" id="youtube-video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/vBdnfyfBSKg" frameborder="0" allowfullscreen></iframe>
    </div>

    <div class="container-fluid" id="work-section">
      <div class="row" id="work">
      </div><!-- row -->
  </div><!-- / container-fluid -->

    <div class="container-fluid">
      <div class="card7">
        <div class="col-xs-12 Learn-more">
          <h4 class="modal-title">Learn More</h4>
            <div class="modal-button">
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg" id="modal-button-style">My Resume/CV</button>
              <!-- Small Modal -->
              <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    
                    <div class="modal-header">
                      <h5 class="modal-title" id="myModalLabel">Resume</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="close" id="modalclose"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                      <embed id="resume" src="keenans_resume.pdf">
                    </div>

                  </div><!-- end modal content -->
                </div><!-- end modal dialog -->
              </div><!-- end Small Modal -->
            </div><!-- end modal button -->
        </div><!-- end col -->
      </div><!-- end card7 -->
    </div><!-- end container -->

     <!-- FAQ section -->
    <div class="container-fluid" id="faq-section">
    <div class="card6">
      <div class="row faq-accordion">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  <span class="glyphicon glyphicon-tag">  </span> What motivates you to be a web developer?
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
              My motivation comes from a passion to create. Web development requires technical expertise, an artistic eye, and an insatiable curiosity for new things. What could be more fun?
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a data-toggle="collapse" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  <span class="glyphicon glyphicon-tag">  </span> What is your design process?
                </a>
             </h4>
           </div>
           <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
             <div class="panel-body">
             I believe in starting with a clear vision of what we want and where we are going, from colour schemes to layouts, and technical functions. Mark Twain said, "the secret of getting ahead is getting started", and I start from the bottom up. A little coffee never hurt anyone either.
             </div>
           </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  <span class="glyphicon glyphicon-tag">  </span> What sets you apart?
               </a>
              </h4>
            </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <!-- should this be headingFour -->
            <div class="panel-body">
            Easy! I won't rest until the job is done to perfection. That means keeping open lines of communication so I know exactly what I need to make a website or application, sourcing the best artistic resources, and creating a smooth user experience. This isn't just web development. This is about creating something beautiful and functional. 
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFour">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                <span class="glyphicon glyphicon-tag">  </span> What are you currently working on?
             </a>
           </h4>
         </div>
         <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour"> <!-- should this be headingFour -->
           <div class="panel-body">
           I'm working on building interactive websites, as well as creating some pretty nifty programs in Ruby. You can check them out [here]. Make sure to keep an eye on my portfolio for my latest web applications and websites.
           </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingFive">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                <span class="glyphicon glyphicon-tag">  </span> How can I get ahold of you?
              </a>
            </h4>
          </div>
          <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> <!-- should this be headingFour -->
            <div class="panel-body">
            Simple! Just select that handy link at the top of the page titled Contact to see how to get ahold of me.
            </div>
          </div>
        </div>
      </div><!-- panel group -->
     </div><!-- row -->
     </div><!-- end card6 -->
    </div><!-- / container -->

    <div class="container-fluid" id="contact-section" data-stellar-background-ratio="0.1">
    <div class="row">
      <h2 id="contact-title">Contact</h2>
      <div class="contact-paragraphs col-xs-12 col-sm-12 col-md-5">
        <div class="par1">
          <h2>Email  
            <span class="glyphicon glyphicon-envelope"> 
            </span>
          </h2>
          <p>Send me a message with any questions you may have!<br><a href="mailto:keenanguyparker@gmail.com">KeenanGuyParker@gmail.com</a></p>
        </div> <!--par1-->
        <div class="par2">
          <h2>Prefer to chat?  
            <span class="glyphicon glyphicon-comment"></span> 
          </h2>
          <p>Add me on skype! <br> Keenan.parker3</p>
        </div><!--par2-->
      </div><!-- end col -->

      <div class="col-xs-12 col-sm-12 col-md-7">
        <form>
          <div class="form-group">

            <label for="name-box" class="sr-only">Your name here</label><input type="text" class="form-control" placeholder="Your name" id="name-box" title="not required">

            <label for="phone-box" class="sr-only">Your phone number here (not required)</label><input type="tel" class="form-control" placeholder="phone number" id="phone-box">

            <label for="email-box" class="sr-only">Your email here*</label><input type="email" class="form-control" placeholder="email*" id="email-box" required>

            <label for="message-box" class="sr-only">Your message here*</label><textarea style="resize:none" cols="40" rows="5" class="form-control" id="message-box" placeholder="Your message*" title="Please ensure you enter a message. (expect a reply within 48 hours)" required maxlength="100"></textarea>

            <p id="char-count"></p>

            <p id="visible-comment"></p>
            <p id="message-relay"></p>

            <button type="submit" class="btn btn-default" id="contact-button">Send</button>
          </div><!-- end form-group -->
        </form>
      </div><!-- end col -->

      <div class="col-xs-12">
        <div id="map"></div>
      </div><!-- end col -->
    </div><!-- row --> 
  </div><!-- container -->

  <footer>
    <div class="copyright">
      &copy; Keenan Parker
    </div><!-- copyright -->
    <div class="twittericon">
      <a href="https://twitter.com/Keenanwebd" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @Keenanwebd</a>
    </div>
    <div class="fb-like" data-href="http://keenansportfolio.bitballoon.com/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
  </footer>



    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->
  <!-- jquery cdn  [must come before your javascript so JS can query it]-->
<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>

<script src="../js/jquery.stellar.min.js"></script>

<script src="../js/jquery.tooltipster.min.js"></script>

<script src="../js/work.js"></script> 
<!-- we are linking work.js before our scripts.js so our scripts have priority application -->

<script src="../js/scripts.js"></script>

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzkeZEgG54rVapidIbJAJPAVMK8BqZGTE&callback=initMap">
    </script>
  </body>
</html>

scripts.js

//script for twitter icon *****************************************************************/

 !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

 //script for facebook icon *****************************************************************/

 (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

// Document ready *****************************************************************/

$(document).ready(function(){ 
	
	//stellar initiator for parallax *****************************************************************/

	$.stellar();

	//bootstrap tooltip *****************************************************************/

	$(function() {
        $("#tool1").tooltip();
    });

    //tooltipster plugin: support @http://iamceege.github.io/tooltipster/#getting-started *****************************************************************/

        $('.skills').tooltipster({
            animation: 'grow',
            theme: 'tooltipster-noir'
        });

        $('.btn').tooltipster({
            animation: 'grow',
            theme: 'tooltipster-noir',
            position: 'left'
        });

        $('#video-spanner').tooltipster({
            animation: 'grow',
            theme: 'tooltipster-noir'
        });

    

    //smooth scrolling *****************************************************************/

    $('.navbar-nav a').click(function() {
       var href = $.attr(this, 'href');
       $root.animate({
           scrollTop: $(href).offset().top
       }, 500, function () {
           window.location.hash = href;
       });
       return false;
    }); //end smooth scrolling 

    //text-area button event listener *****************************************************************/

    $("#contact-button").on("click", function() {

    	var comment = $("#message-box").val();

    	if(comment === "") {
    		$("#message-box").css("border", "1px solid rgba(255, 0, 0, 0.49)")
    	} else {

    	console.log(comment);

    	$("#visible-comment").html("Thank you for your message!");

    	$("#message-relay").html(comment);

    	$("#message-box, #name-box, #phone-box, #email-box, #contact-button, #char-count").hide("slow");

    	console.log("clicked");
    	return false;

    };

    }); // end contact-button on click

    //forms background-color *****************************************************************/

    $("#message-box, #name-box, #phone-box, #email-box, #contact-button").css("background-color", "rgba(0, 0, 0, 0.68)");

    //character counter *****************************************************************/

    //hides the counter by default due to background colouration
    $("#char-count").hide();

    $("#message-box").on("keyup", function () {
    	console.log("keyup happened");

    	var charCount = $("#message-box").val().length;

    	$("#char-count").show();

    	$("#char-count").html(charCount);

    	console.log(charCount)

    	//sets character and border colours
        if(charCount > 50) {
    	$("#char-count").css("color", "red")
        } else {
    	$("#char-count").css("color", "white")
        };

        if(charCount >= 1) {
        	$("#message-box").css("border", "1px solid white")
        };



    }); // end char counter

    //Work section *****************************************************************/

    for(var i = 0; i < works.length; ++i) {
    	$("#work").append("\
    	<div class='col-sm-6 col-md-4 col-lg-3'>\
          <a href=' " + works[i].url + " ' class='work-img'>\
            <img class='img-responsive' src=' " + works[i].pic + " '>\
            <span class='info'>" + works[i].title + " </span>\
          </a>\
        </div>\
        ");
        
       
        images = $("#work img")
        if(i%2 === 0){
        $(images[i]).css("border", "2px dotted #6441A5");
        } else {
        $(images[i]).css("border", "2px dotted gray");
        };
        $(images).css("border-radius", "10px");

    };

    $(".work-img").mouseenter(function() {
        $(".info", this).show("fast");
    }).mouseleave(function() {
        $(".info", this).hide("fast");
    });

    //Youtube Button *****************************************************************/
    $("#youtube-video").hide();

    $("#video-spanner").click(function(){
        console.log("button works");
        $("#youtube-video").toggle("fast");
        $(".gly-rotate-180").css({
            'filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)',
            '-webkit-transform': 'rotate(180deg)'});
    }); //dont forget to add other vendors

}); // end document ready


// Google Maps ****************************************************************/
 

function initMap() {
  var myLatLng = {lat: 49.2797576, lng: -123.1178675};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: myLatLng
  });

  var image = "http://individual.icons-land.com/IconsPreview/Sport/PNG/16x16/Ball_Violet.png"
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: image,
    draggable: true,
    animation: google.maps.Animation.DROP,
    title: "Home is where the heart is."
  });

  marker.addListener('click', toggleBounce);

   function toggleBounce() {
   if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
   } else {
     marker.setAnimation(google.maps.Animation.BOUNCE);
   }
 }

}

work.js

//this is an array of objects or object literals:

var works = [
{
  url: "http://sailor-locker-24226.bitballoon.com/",
  title: "First Project",
  pic: "../img/product_display.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Second Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Third Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Fourth Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Fifth Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Sixth Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Seventh Project",
  pic: "../img/coming-soon-smaller.jpg"
},
{
  url: "http://keenansportfolio.bitballoon.com/#work-section",
  title: "Eighth Project",
  pic: "../img/coming-soon-smaller.jpg"
}
];

Building my first webpage from scratch. Let me know if the formatting is alright. :)