ThisBenRoberts/index.html

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

    <title>Hello World!</title>
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<!-- stellar.js plugin -->
<script src="js/jquery.stellar.min.js"></script>
 <!--jQuery Media Script-->
<script src="js/jquery.media.js" type="text/javascript"></script>
<!-- custom jQuery -->
<script src="js/scripts.js"></script>
<!--  google maps scripts -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL3lHWG_JXwRWNSqLrbz8EJbZkjIRs7XE"></script>


<!-- Custom styles for this template go here -->
<link href="css/styles.css" rel="stylesheet">
<link href="css/media_styles.css" rel="stylesheet">
<link href="css/nav_style.css" rel="stylesheet">
    <!-- 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]-->
    <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> <!-- /Script for Twitter Button -->

    <script>
 $(function () {
  $('#ttip1').tooltip();
   });
  </script>  <!-- tooltip script -->


<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip();
  });
</script>  <!-- button tooltip script -->


  </head>

  <body data-spy="scroll" data-target=".navbar">    <div id="fb-root"></div>


    <!-- Small modal -->
    <div class="modal fade bs-example-modal-lg" data-backdrop="static" and data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >
      <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">This is my awesome Modal title</h4>
          </div>
          <div class="modal-body">
            <iframe id="resume" width="100%" height="100%" src="file:res/Ben_Roberts_Resume_ex.pdf"#zoom:100%></iframe>
          </div>
        </div>
      </div>
    </div>


    <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_US/sdk.js#xfbml=1&version=v2.3";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"  data-toggle="collapse" data-target=".navbar-collapse" >
      <div class="container-fluid">

        <div class="navbar-header" ><!--  get rid ofthis border  -->
          <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">
            <a href="#">Ben Roberts</a>
            <a href="https://twitter.com/901_ideas" class="twitter-follow-button" data-show-count="false">
              Follow @901_ideas</a>

          </div>
        </div>

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav"><!-- style="background-color:#333333" -->
              <li><a href="#home">Home</a></li>
              <li><a href="#work">Work</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#faq">FAQ</a></li>

            </ul>
        </div>

      </div>

    </nav> <!-- /nav -->

    <!-- Main jumbotron for a primary marketing message or call to action -->


    <div class="jumbotron" >
      <div class="container-fluid anchor" >
        <h1>Ben Roberts </h1>

        <p><strong>Serving all of your web development needs.</strong></p>
      </div>
    </div>

    <div class="container-fluid anchor" id="home">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">


          <h2>Portfolio Concept</h2>
          <p>This will not be full of buzz-words and abstract exercises.  This is simply the stuff that I've done.  <span id="lg-txt"> Sites for friends, galleries for artists, code to solve problems, or whatever was asked of me.  Much of my developement 'belongs' to my employer but this should be all of the other stuff. </span>  </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>


        </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <h2>Project Goals</h2>
          <p>My goal is to finish this course in 3 months, not 6.  I expect to commit a minimum of 15 hours per week toward getting this done. <span id="lg-txt"> Pick up as many skills as I can in as short amount of time as possible.</span></p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-xs-4 col-sm-4 col-md-4">
          <h2>Course Goals</h2>
          <p>I'd lke to start applying for development jobs within the next 60 days.  <span id="lg-txt"> I'd like to change my career path, develop new, marketable skills, and create multiple streams of income with the same skill set.</span></p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
      </div>

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

    <div class="container-fluid anchor" id="work">

      <div class="image" id="0"></div>
      <div class="image" id="1"></div>
      <div class="image" id="2"></div>
      <div class="image" id="3"></div>

      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
          <h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
          <p>Work example from a fictional client with goals, deliverables, and customer response.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
          <h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
          <p>Work example from a fictional client with goals, deliverables, and customer response.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
          <h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
          <p>Work example from a fictional client with goals, deliverables, and customer response.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div>

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

    <div class="container-fluid anchor" id="contact">
        <div class="col-sm-4 col-md-4 col-lg-4">
          <div id="map-canvas" style="height: 300px; width:300px">

          </div>
          <!-- <iframe
            frameborder="0" style="border:0"
            src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyDL3lHWG_JXwRWNSqLrbz8EJbZkjIRs7XE
              &q=Space+Needle,Seattle+WA" allowfullscreen>
          </iframe> -->
          <h2><span class="glyphicon glyphicon-envelope"></span> E-Mail</h2>
          <p>BenRobertsMemphis@gmail.com or 901ideas@gmail.com   </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>

        </div> <!-- /google map-canvas -->

        <div class="col-sm-8 col-md-8 col-lg-8" >
        <form>
          <div class="form-group">
            <label for="name"> Your Name: </label>
            <input placeholder="First and Last Name" type="text" class="form-control" required=”required” name="flname" id="name">
          </div>
          <div class="form-group">
            <label for="teln"> Phone Number: </label>
            <input placeholder="Phone Number" type=”tel” minlength="10" maxlength="12" class="form-control" name="teln" id="teln" >  <!-- pattern="{3}[\-]\d{3}[\-]\d{4}" -->
          </div>
          <div class="form-group">
            <label for="email"> Email Address: </label>
            <input placeholder="Email" type="email" class="form-control" required=”required” name="email" id="email">
          </div>
          <div class="form-group">
            <label for="message"> Let me know what you think: </label>
            <textarea placeholder="What's on your mind?"  style="width:100%; resize:none; color:black" rows="3" class="message-box" required=”required” name="message" id="message"></textarea>

          </div>
          <button type="submit" class="btn btn-default">Send</button>
        </form>
      </div>
      <!-- Example row of columns -->
      <!-- <div class="row" > -->
    </div>  <!-- /contact container -->

    <div class="container-fluid anchor" id="about">
      <h2>Introduction</h2>
        <p>The text of your introductory paragraph. I'm just trying to fill enough space to look like  a paragraph. About 3 or 4 sentences.</p>
        <h3>My Skills</h3>
        <ul id="skill_list">
          <li>an item in a list</li>
          <li>yet another item</li>
        </ul>
        <h3>...a bit more.</h3>
        <p>i want to shoot the pigeons... off my roof. i took a viagra, got stuck in me throat, i've had a stiff neck for hours. my lord! you're a tripod. you know, your bobby dangler, giggle stick, your general-two-colonels, master of ceremonies... yeah, don't be shy, let's have a look. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world! your were only supposed to blow the bloody doors off. you're only supposed to blow the bloody doors off! you wouldn't hit a man with no trousers on, would you? when i get back, remind to tell you about the time i took 100 nuns to nairobi! yes, i used a machine gun. it's not the size mate, it's how you use it. jasper: your baby is the miracle the whole world has been waiting for. </p>
        <p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button></p>
    </div>  <!-- /about container -->


<div class="container-fluid anchor" id="faq">

    <div class="row faqrow" >
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        <h2 class=”learn-more”> Learn More</h2>
    </div>
    <div class="modal-button col-md-4 col-lg-4 faqrow">
    <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View Resume</button>
    </div>
  </div>
  <div class="row col-md-10 col-md-offset-1 faqrow"> <!-- table -->

    <table class="col-md-10 col-md-offset-1">
      <tr class="my-row ">
        <th>Services</th>
        <th id="heading">Simple Informative Website</th>
        <th id="heading" >Responsive and Interactive</th>
      </tr>
      <tr class="my-row">
        <td id="service">5 Info Pages</td>
        <td>Standard</td>
        <td>Optional</td>
      </tr>
      <tr class="my-row">
        <td id="service">Single Scrolling Pgae</td>
        <td>Optional</td>
        <td>Standard</td>
      </tr>
      <tr class="my-row">
        <td id="service">Menu</td>
        <td>PDF format only</td>
        <td>PDF or desgned page</td>
      </tr>
      <tr class="my-row">
        <td id="service">Directions</td>
        <td>Included</td>
        <td>Included</td>
      </tr>
      <tr class="my-row">
        <td id="service">Reservation Form</td>
        <td>Not available</td>
        <td>Optional</td>
      </tr>
    </table>
</div> <!-- /table -->

<div class="row col-md-10 col-md-offset-1 faqrow">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">  <!--  begin first panel -->
    <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="false" aria-controls="collapseOne" >
          <!-- changed aria-expanded="false" to prevent first panel from opening automatically -->
          What is question #1?
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <!-- removed class in to prevent first panel from opening automatically -->
      <div class="panel-body">
        According to Google, QUESTION 1: Law Proposed by Initiative Petition
Eliminating Gas Tax Indexing<br>
Do you approve of a law summarized below, on which no vote was taken by the Senate or the House of Representatives on or before May 6, 2014?<br><br>

SUMMARY<br>
This proposed law would eliminate the <a href="#" title="More information" id="ttip1">Tooltips</a> that the state’s gasoline tax, which was 24 cents per gallon as of September 2013, (1) be adjusted every year by the percentage change in the Consumer Price Index over the preceding year, but (2) not be adjusted below 21.5 cents per gallon.<br><br>

A YES VOTE would eliminate the requirement that the state’s gas tax be adjusted annually based on the Consumer Price Index.<br>

A NO VOTE would make no change in the laws regarding the gas tax.
<div id="youtubevid">
<iframe  width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
      </div>
    </div>
  </div> <!-- /first panel -->
  <div class="panel panel-default"> <!--  begin second panel -->
    <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">
          Who is question #2?
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        QUESTION 2: Law Proposed by Initiative Petition
Expanding the Beverage Container Deposit Law
Do you approve of a law summarized below, on which no vote was taken by the Senate or the House of Representatives on or before May 6, 2014?

SUMMARY
This proposed law would expand the state’s beverage container deposit law, also known as the Bottle Bill, to require deposits on containers for all non-alcoholic non-carbonated drinks in liquid form intended for human consumption, except beverages primarily derived from dairy products, infant formula, and FDA approved medicines. The proposed law would not cover containers made of paper-based biodegradable material and aseptic multi-material packages such as juice boxes or pouches.
      </div>
    </div>
  </div> <!-- /second panel -->
  <div class="panel panel-default"> <!--  begin third panel -->
    <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">
          Why did we create Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        No other developer site seems to have an FAQ but it is common on other type of sites.  This is simply an exercise, not a production site.  Don't sweat it.  You can do something different later.
      </div>
    </div>
  </div> <!-- /second panel -->
</div> <!-- /panel group -->
</div> <!-- /row -->
    </div>  <!-- /faq container -->


    <footer> &copy; Copyright 2015 901Ideas, Inc. | All Rights Reserved

      <div id="fbbtn" class="fb-page" data-href="https://www.facebook.com/901ideas" data-width="180" data-height="70" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false">
        <div class="fb-xfbml-parse-ignore">
          <blockquote id="" cite="https://www.facebook.com/901ideas">
            <a href="https://www.facebook.com/901ideas">Like us on fb</a>
          </blockquote>
        </div>
      </div>

    </footer>

    <!--
    ================================================== -->
    <!-- Can place script tags with JavaScript files here -->
    <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>

## scripts.js
var myProjects = [
{ title: "First Project", pic: "./img/ScreenShotMadameWoolite.png" },
{ title: "Second Project", pic: "./img/ScreenShotMetroAveOnline.png" },
{ title: "Third Project", pic: "./img/buildingconstruction_1.jpg" },
{ title: "Fourth Project", pic: "./img/buildingconstruction_1.jpg" }
];


$(document).ready(function(){

	// alert("Document is ready!");

	//Color the message box of the contact form
	$(".message-box").css("background-color", "pink");

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

		console.log("clicked");
		var comment = $(".message-box").val();
		console.log(comment)
		$("#visible-comment").html(comment);
		return false;

	});

	$(".message-box").on("keyup", function() {
		console.log("keyup happened!");
		var charCount = $(".message-box").val().length;
		console.log(charCount);
		$("#charCount").html(charCount);

		if(charCount > 50) {
       // need to turn character count red
	       $("#charCount").css("color","red");
		} else {
       // need it to be black
	      	$("#charCount").css("color","black");
		};
	});

	var rows = $(".my-row");
	console.log(rows);
	for(var i=0; i<rows.length; ++i) {
    	if (i%2===0) {
            $(rows[i]).css("background-color", "pink");
        } else {
        	// $(rows[i]).css("background-color", "blue");
        }
    };

    for(var i=0; i<myProjects.length; ++i) {
    	// console.log(myProjects[i].pic);
    	// $("#" + i ).css("background-color", "red" );
      	$("#" + i ).css("background-image", "url(" +myProjects[i].pic+ ")" );

	};

	$(".image").mouseenter( function() {
      // console.log(this);
      $(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myProjects[this.id].title + "</p>");
	}).mouseleave( function() {
		$("p.info").html("");
	});

	function initialize() {

	    var mapOptions = {
	    	center: new google.maps.LatLng(35.137304,-89.871425,17),
	    	zoom: 9
	    };
	    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

	    var marker = new google.maps.Marker({
	      position: map.getCenter(),
	      map: map,
	      title: 'Click to zoom'
		});

		google.maps.event.addListener(marker, 'click', function() {
	      map.setZoom(17);
	      map.setCenter(marker.getPosition());
		});
	};

	google.maps.event.addDomListener(window, 'load', initialize);


}); // lose the doc ready.
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8">

	<title>Hello World!</title>
	<!-- jQuery is required for Bootstrap to work -->
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
	<!-- Latest compiled and minified Bootstrap JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>



	<!-- stellar.js plugin -->
	<script src="js/jquery.stellar.min.js"></script>
	<!--jQuery Media Script-->
	<script src="js/jquery.media.js" type="text/javascript"></script>
	<!-- custom jQuery -->
	<script src="js/scripts.js"></script>
	<!-- google maps scripts -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL3lHWG_JXwRWNSqLrbz8EJbZkjIRs7XE"></script>


	<!-- Custom styles for this template go here -->
	<link href="css/styles.css" rel="stylesheet">
	<link href="css/media_styles.css" rel="stylesheet">
	<link href="css/nav_style.css" rel="stylesheet">
	<!-- 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]-->
	<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> <!-- /Script for Twitter Button -->

	<script>
	$(function () {
	$('#ttip1').tooltip();
	});
	</script> <!-- tooltip script -->


	<script>
	$(function () {
	$('[data-toggle="tooltip"]').tooltip();
	});
	</script> <!-- button tooltip script -->





	</head>

	<body data-spy="scroll" data-target=".navbar"> <div id="fb-root"></div>


	<!-- Small modal -->
	<div class="modal fade bs-example-modal-lg" data-backdrop="static" and data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >
	<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">This is my awesome Modal title</h4>
	</div>
	<div class="modal-body">
	<iframe id="resume" width="100%" height="100%" src="file:res/Ben_Roberts_Resume_ex.pdf"#zoom:100%></iframe>
	</div>
	</div>
	</div>
	</div>



	<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_US/sdk.js#xfbml=1&version=v2.3";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-toggle="collapse" data-target=".navbar-collapse" >
	<div class="container-fluid">

	<div class="navbar-header" ><!-- get rid ofthis border -->
	<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">
	<a href="#">Ben Roberts</a>
	<a href="https://twitter.com/901_ideas" class="twitter-follow-button" data-show-count="false">
	Follow @901_ideas</a>

	</div>
	</div>

	<div class="navbar-collapse collapse">
	<ul class="nav navbar-nav"><!-- style="background-color:#333333" -->
	<li><a href="#home">Home</a></li>
	<li><a href="#work">Work</a></li>
	<li><a href="contact.html">Contact</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#faq">FAQ</a></li>

	</ul>
	</div>

	</div>

	</nav> <!-- /nav -->

	<!-- Main jumbotron for a primary marketing message or call to action -->


	<div class="jumbotron" >
	<div class="container-fluid anchor" >
	<h1>Ben Roberts </h1>

	<p><strong>Serving all of your web development needs.</strong></p>
	</div>
	</div>

	<div class="container-fluid anchor" id="home">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-xs-4 col-sm-4 col-md-4">


	<h2>Portfolio Concept</h2>
	<p>This will not be full of buzz-words and abstract exercises. This is simply the stuff that I've done. <span id="lg-txt"> Sites for friends, galleries for artists, code to solve problems, or whatever was asked of me. Much of my developement 'belongs' to my employer but this should be all of the other stuff. </span> </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>



	</div>
	<div class="col-xs-4 col-sm-4 col-md-4">
	<h2>Project Goals</h2>
	<p>My goal is to finish this course in 3 months, not 6. I expect to commit a minimum of 15 hours per week toward getting this done. <span id="lg-txt"> Pick up as many skills as I can in as short amount of time as possible.</span></p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-xs-4 col-sm-4 col-md-4">
	<h2>Course Goals</h2>
	<p>I'd lke to start applying for development jobs within the next 60 days. <span id="lg-txt"> I'd like to change my career path, develop new, marketable skills, and create multiple streams of income with the same skill set.</span></p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	</div>

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

	<div class="container-fluid anchor" id="work">

	<div class="image" id="0"></div>
	<div class="image" id="1"></div>
	<div class="image" id="2"></div>
	<div class="image" id="3"></div>

	<div class="row">
	<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
	<h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
	<p>Work example from a fictional client with goals, deliverables, and customer response.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
	<h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
	<p>Work example from a fictional client with goals, deliverables, and customer response.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>
	<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
	<h2><span class="glyphicon glyphicon-th-large"></span> Work</h2>
	<p>Work example from a fictional client with goals, deliverables, and customer response.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div>

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

	<div class="container-fluid anchor" id="contact">
	<div class="col-sm-4 col-md-4 col-lg-4">
	<div id="map-canvas" style="height: 300px; width:300px">

	</div>
	<!-- <iframe
	frameborder="0" style="border:0"
	src="https://www.google.com/maps/embed/v1/directions?key=AIzaSyDL3lHWG_JXwRWNSqLrbz8EJbZkjIRs7XE
	&q=Space+Needle,Seattle+WA" allowfullscreen>
	</iframe> -->
	<h2><span class="glyphicon glyphicon-envelope"></span> E-Mail</h2>
	<p>BenRobertsMemphis@gmail.com or 901ideas@gmail.com </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

	</div> <!-- /google map-canvas -->

	<div class="col-sm-8 col-md-8 col-lg-8" >
	<form>
	<div class="form-group">
	<label for="name"> Your Name: </label>
	<input placeholder="First and Last Name" type="text" class="form-control" required=”required” name="flname" id="name">
	</div>
	<div class="form-group">
	<label for="teln"> Phone Number: </label>
	<input placeholder="Phone Number" type=”tel” minlength="10" maxlength="12" class="form-control" name="teln" id="teln" > <!-- pattern="{3}[\-]\d{3}[\-]\d{4}" -->
	</div>
	<div class="form-group">
	<label for="email"> Email Address: </label>
	<input placeholder="Email" type="email" class="form-control" required=”required” name="email" id="email">
	</div>
	<div class="form-group">
	<label for="message"> Let me know what you think: </label>
	<textarea placeholder="What's on your mind?" style="width:100%; resize:none; color:black" rows="3" class="message-box" required=”required” name="message" id="message"></textarea>

	</div>
	<button type="submit" class="btn btn-default">Send</button>
	</form>
	</div>
	<!-- Example row of columns -->
	<!-- <div class="row" > -->
	</div> <!-- /contact container -->

	<div class="container-fluid anchor" id="about">
	<h2>Introduction</h2>
	<p>The text of your introductory paragraph. I'm just trying to fill enough space to look like a paragraph. About 3 or 4 sentences.</p>
	<h3>My Skills</h3>
	<ul id="skill_list">
	<li>an item in a list</li>
	<li>yet another item</li>
	</ul>
	<h3>...a bit more.</h3>
	<p>i want to shoot the pigeons... off my roof. i took a viagra, got stuck in me throat, i've had a stiff neck for hours. my lord! you're a tripod. you know, your bobby dangler, giggle stick, your general-two-colonels, master of ceremonies... yeah, don't be shy, let's have a look. at this point, i'd set you up with a chimpanzee if it'd brought you back to the world! your were only supposed to blow the bloody doors off. you're only supposed to blow the bloody doors off! you wouldn't hit a man with no trousers on, would you? when i get back, remind to tell you about the time i took 100 nuns to nairobi! yes, i used a machine gun. it's not the size mate, it's how you use it. jasper: your baby is the miracle the whole world has been waiting for. </p>
	<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View More.</button></p>
	</div> <!-- /about container -->



	<div class="container-fluid anchor" id="faq">

	<div class="row faqrow" >
	<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
	<h2 class=”learn-more”> Learn More</h2>
	</div>
	<div class="modal-button col-md-4 col-lg-4 faqrow">
	<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View Resume</button>
	</div>
	</div>
	<div class="row col-md-10 col-md-offset-1 faqrow"> <!-- table -->

	<table class="col-md-10 col-md-offset-1">
	<tr class="my-row ">
	<th>Services</th>
	<th id="heading">Simple Informative Website</th>
	<th id="heading" >Responsive and Interactive</th>
	</tr>
	<tr class="my-row">
	<td id="service">5 Info Pages</td>
	<td>Standard</td>
	<td>Optional</td>
	</tr>
	<tr class="my-row">
	<td id="service">Single Scrolling Pgae</td>
	<td>Optional</td>
	<td>Standard</td>
	</tr>
	<tr class="my-row">
	<td id="service">Menu</td>
	<td>PDF format only</td>
	<td>PDF or desgned page</td>
	</tr>
	<tr class="my-row">
	<td id="service">Directions</td>
	<td>Included</td>
	<td>Included</td>
	</tr>
	<tr class="my-row">
	<td id="service">Reservation Form</td>
	<td>Not available</td>
	<td>Optional</td>
	</tr>
	</table>
	</div> <!-- /table -->

	<div class="row col-md-10 col-md-offset-1 faqrow">
	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default"> <!-- begin first panel -->
	<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="false" aria-controls="collapseOne" >
	<!-- changed aria-expanded="false" to prevent first panel from opening automatically -->
	What is question #1?
	</a>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <!-- removed class in to prevent first panel from opening automatically -->
	<div class="panel-body">
	According to Google, QUESTION 1: Law Proposed by Initiative Petition
	Eliminating Gas Tax Indexing<br>
	Do you approve of a law summarized below, on which no vote was taken by the Senate or the House of Representatives on or before May 6, 2014?<br><br>

	SUMMARY<br>
	This proposed law would eliminate the <a href="#" title="More information" id="ttip1">Tooltips</a> that the state’s gasoline tax, which was 24 cents per gallon as of September 2013, (1) be adjusted every year by the percentage change in the Consumer Price Index over the preceding year, but (2) not be adjusted below 21.5 cents per gallon.<br><br>

	A YES VOTE would eliminate the requirement that the state’s gas tax be adjusted annually based on the Consumer Price Index.<br>

	A NO VOTE would make no change in the laws regarding the gas tax.
	<div id="youtubevid">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
	</div>
	</div>
	</div>
	</div> <!-- /first panel -->
	<div class="panel panel-default"> <!-- begin second panel -->
	<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">
	Who is question #2?
	</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	<div class="panel-body">
	QUESTION 2: Law Proposed by Initiative Petition
	Expanding the Beverage Container Deposit Law
	Do you approve of a law summarized below, on which no vote was taken by the Senate or the House of Representatives on or before May 6, 2014?

	SUMMARY
	This proposed law would expand the state’s beverage container deposit law, also known as the Bottle Bill, to require deposits on containers for all non-alcoholic non-carbonated drinks in liquid form intended for human consumption, except beverages primarily derived from dairy products, infant formula, and FDA approved medicines. The proposed law would not cover containers made of paper-based biodegradable material and aseptic multi-material packages such as juice boxes or pouches.
	</div>
	</div>
	</div> <!-- /second panel -->
	<div class="panel panel-default"> <!-- begin third panel -->
	<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">
	Why did we create Group Item #3
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	<div class="panel-body">
	No other developer site seems to have an FAQ but it is common on other type of sites. This is simply an exercise, not a production site. Don't sweat it. You can do something different later.
	</div>
	</div>
	</div> <!-- /second panel -->
	</div> <!-- /panel group -->
	</div> <!-- /row -->
	</div> <!-- /faq container -->



	<footer> © Copyright 2015 901Ideas, Inc. \| All Rights Reserved

	<div id="fbbtn" class="fb-page" data-href="https://www.facebook.com/901ideas" data-width="180" data-height="70" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false" data-show-posts="false">
	<div class="fb-xfbml-parse-ignore">
	<blockquote id="" cite="https://www.facebook.com/901ideas">
	<a href="https://www.facebook.com/901ideas">Like us on fb</a>
	</blockquote>
	</div>
	</div>

	</footer>

	<!--
	================================================== -->
	<!-- Can place script tags with JavaScript files here -->
	<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>
	var myProjects = [
	{ title: "First Project", pic: "./img/ScreenShotMadameWoolite.png" },
	{ title: "Second Project", pic: "./img/ScreenShotMetroAveOnline.png" },
	{ title: "Third Project", pic: "./img/buildingconstruction_1.jpg" },
	{ title: "Fourth Project", pic: "./img/buildingconstruction_1.jpg" }
	];



	$(document).ready(function(){

	// alert("Document is ready!");

	//Color the message box of the contact form
	$(".message-box").css("background-color", "pink");

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

	console.log("clicked");
	var comment = $(".message-box").val();
	console.log(comment)
	$("#visible-comment").html(comment);
	return false;

	});

	$(".message-box").on("keyup", function() {
	console.log("keyup happened!");
	var charCount = $(".message-box").val().length;
	console.log(charCount);
	$("#charCount").html(charCount);

	if(charCount > 50) {
	// need to turn character count red
	$("#charCount").css("color","red");
	} else {
	// need it to be black
	$("#charCount").css("color","black");
	};
	});

	var rows = $(".my-row");
	console.log(rows);
	for(var i=0; i<rows.length; ++i) {
	if (i%2===0) {
	$(rows[i]).css("background-color", "pink");
	} else {
	// $(rows[i]).css("background-color", "blue");
	}
	};

	for(var i=0; i<myProjects.length; ++i) {
	// console.log(myProjects[i].pic);
	// $("#" + i ).css("background-color", "red" );
	$("#" + i ).css("background-image", "url(" +myProjects[i].pic+ ")" );

	};

	$(".image").mouseenter( function() {
	// console.log(this);
	$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myProjects[this.id].title + "</p>");
	}).mouseleave( function() {
	$("p.info").html("");
	});

	function initialize() {

	var mapOptions = {
	center: new google.maps.LatLng(35.137304,-89.871425,17),
	zoom: 9
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

	var marker = new google.maps.Marker({
	position: map.getCenter(),
	map: map,
	title: 'Click to zoom'
	});

	google.maps.event.addListener(marker, 'click', function() {
	map.setZoom(17);
	map.setCenter(marker.getPosition());
	});
	};

	google.maps.event.addDomListener(window, 'load', initialize);


	}); // lose the doc ready.