kingrichardiii/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Richard Rabeau III</title>

    <!-- JQuery -->
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <!-- Latest compiled and minified Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Latest compiled and minified Bootstrap JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <!-- Bootstrap CSS -->
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="js/bootstrap.js">

  <!-- JQuery Meida Script -->
  <script src="js/jquery.media.js" type="text/javascript"></script>

  <!-- Stellar Paralex Scrolling Script -->
  <script src="jquery.stellar.min.js" type="text/javascript"></script>
    <!-- My CSS -->
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="main stylesheet">

    <!-- My Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

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

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

  </head>

  <body data-spy="scroll" data-target=".navbar">

    <!-- Facebook Button JavaScript for Footer -->
    <div id="fb-root"></div>
    <script>(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_GB/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

    <!-- Navbar -->
    <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>
        <div class="rrlogo">
          <a class="navbar-brand" href="#">
          <img class="img-responsive" src="img/rrthirdlogo.png" alt="rrlogo">
          </a>
        </div>
         <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#top"><strong> Home </strong></a></li>
            <li><a href="#about"><strong> About </strong></a></li>
            <li><a href="#work"><strong> Work </strong></a></li>
            <li><a href="#FAQ"><strong> FAQ </strong></a></li>
            <li><a href="#contact"><strong> Contact </strong></a></li>
          </ul>
        </div> <!--Navbar Collapse Ends -->
    </div> <!-- Container Fluid Ends -->
   </nav> <!-- Navbar Ends -->

   <!-- Bootstrap Carosuel -->
   <div class="container-fluid" id="top">
      <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/stock2.jpg" alt="Computer">
        <div class="carousel-caption">
          <h3> Web Design + Development </h3>
        </div>
      </div>
      <div class="item">
        <img src="img/stock3.jpg" alt="Paper">
        <div class="carousel-caption">
          <h3> Illustration </h3>
        </div>
      </div>
      <div class="item">
        <img src="img/stock1.jpg" alt="Computer Two">
        <div class="carousel-caption">
          <h3> Graphic Design </h3>
        </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>
  <!-- End Bootstrap Carosuel -->

       <!-- About Section -->
      <div class="container" id="about">
        <div class="header">
          <h4> About Me </h4>
        </div>
          <div class="image-column">
            <img src="img/richardiii.png" alt="richard">
          </div>
            <div class="intro-column">
              <h2> Introduction </h2>
                <p>
                  Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code.
                </p>
            </div>
            <div class="skills-column">
              <h2> My Skills </h2>
                <ul id="skill-list">
                  <li>Graphic Design</li>
                  <li>Web Design</li>
                  <li>Web Development</li>
                  <li>Branding</li>
                  <li>Copywriting</li>
                </ul>
            </div>
            <div class="main-text">
              <h2> My Story </h2>
                <p>
                  I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks.
                <p/>
                <p>
                  As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness.
                </p>
            </div>
          </div>
       <!-- End About Section -->

        <!-- Work Section -->
          <div class="container-fluid" id="work">
           <h4> Work </h4>
            <div class="row" id="projects">
              <div class="col-xs-6 col-md-4">
                <img src="img/bookletsm.jpg" alt="booklet" class="img-responsive">
                <h2 class="description"> Graphic Design </h2>
                <p> Digital may be king, but print still has a sense of permanence. From business cards to brochures and displays, I design printed materials and marketing collateral that makes a lasting impression. </p>
              </div>
               <div class="col-xs-6 col-md-4">
                <img src="img/flamingo.jpg" alt="lifeguard" class="img-responsive">
                <h2 class="description"> Illustrations </h2>
                <p> When it comes to differentiating your brand, it’s tough to beat custom illustration. From infographics to conceptual drawings, I provide designs that appeal to your audience.  </p>
              </div>
              <div class="col-xs-6 col-md-4">
                <img src="img/webmockup.jpg" alt="laptop" class="img-responsive">
                <h2 class="description"> Web Design </h2>
                <p> Coming soon...  I create websites that enable clients to establish their brand presence online while making use of the latest technologies to ensure their website delivers results. </p>
              </div>
            </div>
          </div>
        <!-- End Work Section -->

        <!-- FAQ Section -->
        <div class="container" id="FAQ">
          <h4> FAQ </h4>

          <div class="video">
            <iframe  width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
          </div>

          <div class="row" id="learn-more">
            <h2 class="learn-more"> Learn More </h2>
            <div class="modal-button">
              <button class="btn btn-primary modal_button" data-toggle="modal" data-target=".bs-example-modal-lg">Resume</button>
              <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" and data-keyboard="false">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Resume</h4>
                    </div>
                    <div class="modal-body">
                      <iframe id="modal-frame" src="src/ResumeRichardIII.pdf"></iframe>
                    </div>
                  </div>
                </div>
              </div>
           </div>
          </div>

          <!-- Accordian Begins -->
          <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">
                    Why did you decide to become a web developer? <span class="glyphicon glyphicon-plus"></span>
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                  As a graphic designer, I knew how to create content for the web but not to code. I wanted to do more than ‘splice’ images in Photoshop into perfectly positioned tables. I eventually decided to take the plunge and enrolled in a full-stack web development course.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    What is your design process? <span class="glyphicon glyphicon-plus"></span>
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                  My creative process begins with identifying a client’s needs, and familiarizing myself with their brand. Based on your marketing message and content, I then begin to develop design sketches and a skeletal framework. Once refined, it’s onto the development process.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    What is your average project turnaround? <span class="glyphicon glyphicon-plus"></span>
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                  Delivery dates are contingent on the client’s needs and differ with each project. Most custom websites move through the steps of conception, design, and development within 30 days.
                </div>
              </div>
            </div>
          </div>
            <!-- End Accordian -->
         </div>
        <!-- End FAQ Section -->

        <!-- Contact Section -->
        <div class="container-fluid" id="contact">


  <div class="contact_main">
        <div class="container">
          <div class="row">
            <div class="col-md-4 col-xs-12 contactbox">
              <div class="contactInfo">
                <h2>Contact Me</h2>
                <p>Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow.</p>
                <div class="email">
                <p>
                  <span class="glyphicon glyphicon-envelope"></span> richard.rabeau@gmail.com
                </p>
                </div>
                <div class="phone">
                  <p>
                    <span class="glyphicon glyphicon-phone"></span>  609.668.7828
                  </p>
                </div>
                <div class="location">
                  <p>
                    <span class="glyphicon glyphicon-home"></span> Philadelphia, PA
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-8 col-xs-12">
              <form>
                <div class="form-group">
                  <label class="label" for="name">Name:</label>
                  <input type="textBox" class="form-control" id="name" placeholder="Your name" title="Enter your name here" minlength="20">
                </div>
                <div class="form-group">
                  <label class="label" for="email">Email(*):</label>
                  <input type="email" class="form-control" id="email" placeholder="Your email address" required="required" title="Enter your email address here" minlength="20">
                </div>
                <div class="form-group">
                  <label class="label" for="tel">Phone:</label>
                  <input type="tel" class="form-control" id="tel" placeholder="Your telephone number" title="Enter your telephone number here" minlength="10">
                </div>
                <label class="label" id="message_label" for="message">Your Massage(*):</label>
                <textarea class="message-box" id="message" style="resize:none" cols="40" rows="5" placeholder="Enter your message here" required="required" title="Leave your message here" minlenght="20"></textarea>
                <button type="submit" class="btn btn-info" id="btn_form">Submit</button>
              </form>
            </div>
          </div> <!-- /row -->
        </div> <!-- /container -->
      </div> <!-- /contact_main -->

  </div> <!-- End Contact Section -->

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

  <!--footer -->
 <!--footer -->
  <footer>
    <div class="copyright">
      <p> &copy; Richard Rabeau III 2015 </p>
    </div>
    <div class="socialmedia">
      <div class="twitter-icon">
        <a href="https://twitter.com/richeze" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @richeze</a>
          <script>!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>
      </div>
       <div class="fb-like" data-href="https://www.facebook.com/richard.rabeau.7" data-layout="button" data-action="like" data-show-faces="false" data-share="false">
       </div>
    </div>
  </footer>


  <!-- End footer -->

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


</body>
</html>

## style.css
body {
	position: relative;
 	background-color: #a7c5df;
 	color: #FFF;
}

.container-fluid {
	z-index: -1;
	padding-left: 0;
	padding-right: 0;
}

.container {
	padding-top: 50px;
}

img-responsive {
	margin-top: auto;
}

.main-text {
 	clear: both;
 	padding-top: 30px;
 }

.row {
	padding-left: 100px;
	padding-right: 100px;
	margin-bottom: 30px;
}

/* Nav Bar */

.navbar {
	background-color: #C0C0C0;
	border: none;
	color: black:!important;
	height: auto;
}

.nav {
	float: right;
	height: auto;
}

.navbar-fixed-top .active a {
	background-color: #6d7276!important;
}

.navbar-brand img {
	margin-top: auto;
	margin-left: 10px;
}

/* About */

.image-column,
.skills-column,
.intro-column {
	display: inline-block;
	float: left;
 	width: 30%;
 	padding: 30px 20px;
}

#about {
	margin-bottom: 50px;
}


/* Work  */

.description {
	margin-top: 10px;
}

#work {
	background-color:  #e1e1e1;
	color: #6d7276;
}

.learn-more {
	float: left;
	text-align: left;
	padding: 15px;
}

.modal-button {
	float: right;
	padding: 15px;
}

#learn-more {
	padding-left: 0px;
	padding-right: 0px;
	margin: 10px;
}

.modal-body {
	height: 500px;
}

#modal-frame {
	padding: 10px;
	width: 100%;
	height: 100%;

}

.modal-title {
	color: black;
}

/* FAQ */

.panel-body {
	background-color: #e1e1e1;
	color: #000;
}


#FAQ {
	margin-bottom: 50px;
}

.video {
	text-align: center;
}

/* Contact */

.contact {
	background-color: #FFF;
 	text-align: center;
 	font-size: 1.25em;
}

#contact {
	text-align: center;
}

#contact {
    background-image: url("../img/blackdesk.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: 100px;
    padding-top: 50px;
    height: 100%;
}


.glyphicon-plus {
	color:#6d7267;
}


/* Footer */

.socialmedia {
	display: inline-block;
	float: right;
	padding-top: 10px;
	padding-right: 10px;
}

.copyright {
	display: inline-block;
	float: left;
	padding-left: 10px;
}


/* Form */

.form-group {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

.form-control {
  width: 100%;
}

.message-box {
  width: 80%;
  margin-bottom: 10px;
  margin-left: 10%;
  margin-right: 10%;
}

.label {
  color: white;
  font-family: Josefin Slab, serif;
  font-size: 18px;
}

.contactInfo {
	margin: 10px;
}

 /*typography*/

 h1,
 h2 {
 	font-family: Josefin Slab, Times, Times New Roman, serif;
 	font-size: 1.75em;
 }

 h3 {
 	font-family: Bitter, Times, Times New Roman, serif;
 	font-size: 4em;
 	padding-bottom: 20px;
 }

h4 {
	font-family: Bitter, Times, Times New Roman, serif;
 	font-size: 3em;
	text-align: center;
}
p{
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
 }

.navbar {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
 }

 .panel-title {
 	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
 }

 .panel-body {
 	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
 }
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">

	<title>Richard Rabeau III</title>

	<!-- JQuery -->
	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
	<!-- Latest compiled and minified Bootstrap CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<!-- Bootstrap CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="js/bootstrap.js">

	<!-- JQuery Meida Script -->
	<script src="js/jquery.media.js" type="text/javascript"></script>

	<!-- Stellar Paralex Scrolling Script -->
	<script src="jquery.stellar.min.js" type="text/javascript"></script>
	<!-- My CSS -->
	<link href="css/normalize.css" rel="stylesheet">
	<link href="css/style.css" rel="main stylesheet">

	<!-- My Fonts -->
	<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:700' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Bitter:700' rel='stylesheet' type='text/css'>

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

	<!-- Just for debugging purposes. Don't actually copy this line! -->
	<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

	</head>

	<body data-spy="scroll" data-target=".navbar">

	<!-- Facebook Button JavaScript for Footer -->
	<div id="fb-root"></div>
	<script>(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_GB/sdk.js#xfbml=1&version=v2.4";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<!-- Navbar -->
	<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>
	<div class="rrlogo">
	<a class="navbar-brand" href="#">
	<img class="img-responsive" src="img/rrthirdlogo.png" alt="rrlogo">
	</a>
	</div>
	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a href="#top"><strong> Home </strong></a></li>
	<li><a href="#about"><strong> About </strong></a></li>
	<li><a href="#work"><strong> Work </strong></a></li>
	<li><a href="#FAQ"><strong> FAQ </strong></a></li>
	<li><a href="#contact"><strong> Contact </strong></a></li>
	</ul>
	</div> <!--Navbar Collapse Ends -->
	</div> <!-- Container Fluid Ends -->
	</nav> <!-- Navbar Ends -->

	<!-- Bootstrap Carosuel -->
	<div class="container-fluid" id="top">
	<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/stock2.jpg" alt="Computer">
	<div class="carousel-caption">
	<h3> Web Design + Development </h3>
	</div>
	</div>
	<div class="item">
	<img src="img/stock3.jpg" alt="Paper">
	<div class="carousel-caption">
	<h3> Illustration </h3>
	</div>
	</div>
	<div class="item">
	<img src="img/stock1.jpg" alt="Computer Two">
	<div class="carousel-caption">
	<h3> Graphic Design </h3>
	</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>
	<!-- End Bootstrap Carosuel -->

	<!-- About Section -->
	<div class="container" id="about">
	<div class="header">
	<h4> About Me </h4>
	</div>
	<div class="image-column">
	<img src="img/richardiii.png" alt="richard">
	</div>
	<div class="intro-column">
	<h2> Introduction </h2>
	<p>
	Hello! I'm Richard Rabeau III. I'm a graphic and web designer from Philadelphia. I solve problems visually, and create various things for the web. I’m also learning how to code.
	</p>
	</div>
	<div class="skills-column">
	<h2> My Skills </h2>
	<ul id="skill-list">
	<li>Graphic Design</li>
	<li>Web Design</li>
	<li>Web Development</li>
	<li>Branding</li>
	<li>Copywriting</li>
	</ul>
	</div>
	<div class="main-text">
	<h2> My Story </h2>
	<p>
	I’m a graphic and web designer living and working in the City of Brotherly Love. Before pursuing a career in the design industry, I dabbled in a variety of other disciplines (including working part-time in college as a cake decorator), and switched majors at least three times (psychology to creative writing to digital media). I’m currently in the works of adding web developer to my bag of tricks.
	<p/>
	<p>
	As a design professional, I maintain a healthy balance between functionality and visual impact in all my work. I believe good design should simple and effective with a hint of playfulness.
	</p>
	</div>
	</div>
	<!-- End About Section -->

	<!-- Work Section -->
	<div class="container-fluid" id="work">
	<h4> Work </h4>
	<div class="row" id="projects">
	<div class="col-xs-6 col-md-4">
	<img src="img/bookletsm.jpg" alt="booklet" class="img-responsive">
	<h2 class="description"> Graphic Design </h2>
	<p> Digital may be king, but print still has a sense of permanence. From business cards to brochures and displays, I design printed materials and marketing collateral that makes a lasting impression. </p>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/flamingo.jpg" alt="lifeguard" class="img-responsive">
	<h2 class="description"> Illustrations </h2>
	<p> When it comes to differentiating your brand, it’s tough to beat custom illustration. From infographics to conceptual drawings, I provide designs that appeal to your audience. </p>
	</div>
	<div class="col-xs-6 col-md-4">
	<img src="img/webmockup.jpg" alt="laptop" class="img-responsive">
	<h2 class="description"> Web Design </h2>
	<p> Coming soon... I create websites that enable clients to establish their brand presence online while making use of the latest technologies to ensure their website delivers results. </p>
	</div>
	</div>
	</div>
	<!-- End Work Section -->

	<!-- FAQ Section -->
	<div class="container" id="FAQ">
	<h4> FAQ </h4>

	<div class="video">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
	</div>

	<div class="row" id="learn-more">
	<h2 class="learn-more"> Learn More </h2>
	<div class="modal-button">
	<button class="btn btn-primary modal_button" data-toggle="modal" data-target=".bs-example-modal-lg">Resume</button>
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" and data-keyboard="false">
	<div class="modal-dialog modal-lg">
	<div class="modal-content">
	<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	<h4 class="modal-title" id="myModalLabel">Resume</h4>
	</div>
	<div class="modal-body">
	<iframe id="modal-frame" src="src/ResumeRichardIII.pdf"></iframe>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Accordian Begins -->
	<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">
	Why did you decide to become a web developer? <span class="glyphicon glyphicon-plus"></span>
	</a>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	<div class="panel-body">
	As a graphic designer, I knew how to create content for the web but not to code. I wanted to do more than ‘splice’ images in Photoshop into perfectly positioned tables. I eventually decided to take the plunge and enrolled in a full-stack web development course.
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingTwo">
	<h4 class="panel-title">
	<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	What is your design process? <span class="glyphicon glyphicon-plus"></span>
	</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	<div class="panel-body">
	My creative process begins with identifying a client’s needs, and familiarizing myself with their brand. Based on your marketing message and content, I then begin to develop design sketches and a skeletal framework. Once refined, it’s onto the development process.
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingThree">
	<h4 class="panel-title">
	<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	What is your average project turnaround? <span class="glyphicon glyphicon-plus"></span>
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	<div class="panel-body">
	Delivery dates are contingent on the client’s needs and differ with each project. Most custom websites move through the steps of conception, design, and development within 30 days.
	</div>
	</div>
	</div>
	</div>
	<!-- End Accordian -->
	</div>
	<!-- End FAQ Section -->

	<!-- Contact Section -->
	<div class="container-fluid" id="contact">


	<div class="contact_main">
	<div class="container">
	<div class="row">
	<div class="col-md-4 col-xs-12 contactbox">
	<div class="contactInfo">
	<h2>Contact Me</h2>
	<p>Let's work together. Drop me a line. Tell me what you need. I'm here to help your business grow.</p>
	<div class="email">
	<p>
	<span class="glyphicon glyphicon-envelope"></span> richard.rabeau@gmail.com
	</p>
	</div>
	<div class="phone">
	<p>
	<span class="glyphicon glyphicon-phone"></span> 609.668.7828
	</p>
	</div>
	<div class="location">
	<p>
	<span class="glyphicon glyphicon-home"></span> Philadelphia, PA
	</p>
	</div>
	</div>
	</div>
	<div class="col-md-8 col-xs-12">
	<form>
	<div class="form-group">
	<label class="label" for="name">Name:</label>
	<input type="textBox" class="form-control" id="name" placeholder="Your name" title="Enter your name here" minlength="20">
	</div>
	<div class="form-group">
	<label class="label" for="email">Email(*):</label>
	<input type="email" class="form-control" id="email" placeholder="Your email address" required="required" title="Enter your email address here" minlength="20">
	</div>
	<div class="form-group">
	<label class="label" for="tel">Phone:</label>
	<input type="tel" class="form-control" id="tel" placeholder="Your telephone number" title="Enter your telephone number here" minlength="10">
	</div>
	<label class="label" id="message_label" for="message">Your Massage(*):</label>
	<textarea class="message-box" id="message" style="resize:none" cols="40" rows="5" placeholder="Enter your message here" required="required" title="Leave your message here" minlenght="20"></textarea>
	<button type="submit" class="btn btn-info" id="btn_form">Submit</button>
	</form>
	</div>
	</div> <!-- /row -->
	</div> <!-- /container -->
	</div> <!-- /contact_main -->

	</div> <!-- End Contact Section -->

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

	<!--footer -->
	<!--footer -->
	<footer>
	<div class="copyright">
	<p> © Richard Rabeau III 2015 </p>
	</div>
	<div class="socialmedia">
	<div class="twitter-icon">
	<a href="https://twitter.com/richeze" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @richeze</a>
	<script>!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>
	</div>
	<div class="fb-like" data-href="https://www.facebook.com/richard.rabeau.7" data-layout="button" data-action="like" data-show-faces="false" data-share="false">
	</div>
	</div>
	</footer>


	<!-- End footer -->

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


	</body>
	</html>
	body {
	position: relative;
	background-color: #a7c5df;
	color: #FFF;
	}

	.container-fluid {
	z-index: -1;
	padding-left: 0;
	padding-right: 0;
	}

	.container {
	padding-top: 50px;
	}

	img-responsive {
	margin-top: auto;
	}

	.main-text {
	clear: both;
	padding-top: 30px;
	}

	.row {
	padding-left: 100px;
	padding-right: 100px;
	margin-bottom: 30px;
	}

	/* Nav Bar */

	.navbar {
	background-color: #C0C0C0;
	border: none;
	color: black:!important;
	height: auto;
	}

	.nav {
	float: right;
	height: auto;
	}

	.navbar-fixed-top .active a {
	background-color: #6d7276!important;
	}

	.navbar-brand img {
	margin-top: auto;
	margin-left: 10px;
	}

	/* About */

	.image-column,
	.skills-column,
	.intro-column {
	display: inline-block;
	float: left;
	width: 30%;
	padding: 30px 20px;
	}

	#about {
	margin-bottom: 50px;
	}


	/* Work */

	.description {
	margin-top: 10px;
	}

	#work {
	background-color: #e1e1e1;
	color: #6d7276;
	}

	.learn-more {
	float: left;
	text-align: left;
	padding: 15px;
	}

	.modal-button {
	float: right;
	padding: 15px;
	}

	#learn-more {
	padding-left: 0px;
	padding-right: 0px;
	margin: 10px;
	}

	.modal-body {
	height: 500px;
	}

	#modal-frame {
	padding: 10px;
	width: 100%;
	height: 100%;

	}

	.modal-title {
	color: black;
	}

	/* FAQ */

	.panel-body {
	background-color: #e1e1e1;
	color: #000;
	}


	#FAQ {
	margin-bottom: 50px;
	}

	.video {
	text-align: center;
	}

	/* Contact */

	.contact {
	background-color: #FFF;
	text-align: center;
	font-size: 1.25em;
	}

	#contact {
	text-align: center;
	}

	#contact {
	background-image: url("../img/blackdesk.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: 100px;
	padding-top: 50px;
	height: 100%;
	}


	.glyphicon-plus {
	color:#6d7267;
	}


	/* Footer */

	.socialmedia {
	display: inline-block;
	float: right;
	padding-top: 10px;
	padding-right: 10px;
	}

	.copyright {
	display: inline-block;
	float: left;
	padding-left: 10px;
	}


	/* Form */

	.form-group {
	margin-top: 20px;
	margin-bottom: 20px;
	padding-left: 10%;
	padding-right: 10%;
	}

	.form-control {
	width: 100%;
	}

	.message-box {
	width: 80%;
	margin-bottom: 10px;
	margin-left: 10%;
	margin-right: 10%;
	}

	.label {
	color: white;
	font-family: Josefin Slab, serif;
	font-size: 18px;
	}

	.contactInfo {
	margin: 10px;
	}

	/typography/

	h1,
	h2 {
	font-family: Josefin Slab, Times, Times New Roman, serif;
	font-size: 1.75em;
	}

	h3 {
	font-family: Bitter, Times, Times New Roman, serif;
	font-size: 4em;
	padding-bottom: 20px;
	}

	h4 {
	font-family: Bitter, Times, Times New Roman, serif;
	font-size: 3em;
	text-align: center;
	}
	p{
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	}

	.navbar {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	}

	.panel-title {
	font-family: Josefin Sans, Helvetica, Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

	.panel-body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	}