FrankWiebe/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="css/normalize.css" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- Custom styles for this template go here -->
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

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

    <script src="js/jQuery.media.js" type="text/javascript"></script>
    <!-- Latest compiled and minified Bootstrap Javascript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

      <!-- <script type="text/javascript" src="https://www.googleleapis.com/maps/api/js?key=AIzaSyCwnAOLqhi_qgMf4djvZtYJEd91M3D0kAs"></script> -->

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtlAEKvpByIIBSd6j_-7B9huqHYT6ngMg&v=3.20"></script>


    <title>Frank Wiebe | Web developer</title>

    <!-- 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 id="index" data-spy="scroll" data-target=".navbar">
   <!--Main Navigation-->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">  <!--Nav Container-->
        <div class="container anchor" id="process">
          <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="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#index">Home</a></li>
              <li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#work">Projects</a></li>
                  <li><a href="http://www.frankwiebe.me">Project 1</a></li>
                </ul>
              </li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li><a href="#faq">Faq</a></li>
            </ul>
            <div class="projectName">
              <a href="#">Frank Wiebe</a>
            </div>
          </div>
        </div>
      </div><!--Nav Container ends-->
    </nav> --><!-- Main Navigation Ends -->


    <!-- Main jumbotron for a primary marketing message or call to action -->
    <section>
      <div id="container-fluid" class="container-fluid">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="img/dark-cityscape.jpg" alt="City Scape">
              <div class="carousel-caption">
                 <h1 id="h1">Frank Wiebe</h1>
                   <p><strong>Christian, Husband,</strong><br>Soon to be Father and<br> Web Developer.</p>
                   <div class="container" id="learn-more">
                    <a href="#about">Learn more.</a>
                  </div>
              </div>
            </div>
            <div class="item">
              <img src="img/heroimage2.jpg" alt="Typewriter">
              <div class="carousel-caption">
                Typewriter
              </div>
            </div>
            <div class="item">
              <img src="img/heroimage31.jpg" alt="Desk">
              <div class="carousel-caption">
                Desk
              </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>

      <div class="container-fluid">
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-md-4 col-xs-6">
            <h2>Web Development</h2>
            <p>When building a new <a href="#" data-toggle="tooltip" data-placement="bottom" title="More Information">site</a> I start with mobile first, that way it will be responsive right from the get go!</p>
            <p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">View details &raquo;</button></p>
          </div>
          <div class="col-md-4 col-xs-6">
            <h2>Web Design</h2>
            <p>Designing a beautiful and unique website is what I take pride in, after all it's what people see when they look you up online.</p>
            <p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button></p>
         </div>
          <div class="col-md-4 col-xs-6">
            <h2>Course Goals,</h2>
            <p>(1) Change career's, I have left my job as an Quality control manager at Horizon Seeds to pursue a career in the tech industry. (2) Start a new career as a entry level web developer. (3) Start Freelancing after this course.</p>
            <p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View details &raquo;</button></p>
          </div>
        </div>
      </div>
    </section>
    <!-- /container -->


<!-- WORK -->

    <section id="work">
      <div class="container-fluid">
        <div class="header">
          <h2>Projects</h2>
        </div>
        <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>
    </section>


<!-- ABOUT -->

    <section id="about">
      <div class="container">
        <div class="header">
          <h2>About Me</h2>
        </div>
        <div class="image" id="profile">
          <img src="img/profile.jpg" class="img-responsive" alt="Profile Picture">
        </div>
        <div class="intro column">
          <h2>Who am I?</h2>
          <p>I'm a Full Stack Web Developer.</p>
        </div>
        <div class="skills column">
          <h3>My Skills</h3>
          <ul id="skill_list">
            <li>HTML</li>
            <li>CSS</li>
          </ul>
        </div>
        <div class="main_text">
          <h3>More about me</h3>
          <p>Flannel farm-to-table fingerstache Bushwick forage, distillery Schlitz before they sold out tofu meggings slow-carb scenester. Thundercats squid tousled Shoreditch church-key. Yr gentrify hoodie DIY, kale chips Austin umami Echo Park Odd Future mumblecore. Four loko locavore Pitchfork Truffaut, tofu tote bag semiotics tousled PBR forage cold-pressed Echo Park literally four dollar toast. Bitters meggings cred, four dollar toast trust fund vegan put a bird on it taxidermy VHS kale chips locavore sartorial polaroid. Wayfarers Intelligentsia ennui Vice Tumblr. Chillwave American Apparel artisan asymmetrical PBRB slow-carb mustache.</p>
        </div>
      </div><!-- end container -->
    </section>


<!-- CONTACT -->

    <section id="contact"  class="container">
      <div class="col-lg-4 col-md-4">
        <div class="header">
          <div>
          <h2>Contact Info</h2>
          </div>
        </div>
        <div class="phone">
          <h2><span class="glyphicon glyphicon-phone"></span>Phone:</h2>
          <p>519-902-3974</p>
        </div>
        <div class="email">
          <h2><span class="glyphicon glyphicon-envelope"></span>E-mail</h2>
          <p>frankwiebe85@hotmail.com</p>
        </div>
        <div class="address">
          <h2><span class="glyphicon glyphicon-map-marker"></span>Location</h2>
          <p>201 Elk Street Aylmer Ontaio</p>
        </div>
        <div id="map-canvas" style="height: 300px; width: 300px">
        <!-- <iframe
          width="600"
          height="450"
          frameborder="0" style="border:0"
          src="https://www.google.com/maps/embed/v1/place?q=201%20Elk%20Street%2C%20Aylmer%2C%20ON%2C%20Canada&key=AIzaSyDuQNh1BS5WV2wTQVqrJZQVyzcOLucsYPo" allowfullscreen></iframe> -->
        </div>
      </div>
      <div class="col-lg-8 col-md-8">
        <form action="/login" method="post" name="login">
          <div class="form-group">
            <label for="name">Name *</label>
            <input placeholder="Enter name" type="text" class="form-control" id="name" required="required" title="Enter your name here!" maxlength=40>
          </div>
          <div class="form-group">
            <label for="tel">Phone umber</label>
            <input placeholder="Enter phone number" name="tel" type="tel" class="form-control" id="tel" title="Enter your Phone number here!" maxlength=30>
          </div>
          <div class="form-group">
            <label for="email">E-mail *</label>
            <input placeholder="Enter e-mail" name="email" type="email" class="form-control" id="email" required="required" title="Enter your E-mail address here!" maxlength=30>
          </div>
          <div class="form-group">
            <label for="comments">Comments *</label>
            <textarea placeholder="Write your comments here" class="message-box" type="textbox" id="comments" style="resize:none" cols="40" rows="5" required="required" title="Add comments you have here!" maxlength="150"></textarea>
            <p id="charCount"></p>
            <button type="submit" id="submit" class="btn btn-default">Sign in</button>
            <p id="visible-comment"></p>
          </div>
        </form>
      </div>
    </section>


<!-- FAQ -->

    <section id="faq">
      <!-- Small Modal -->
      <div class="row">
        <h2 class="learn-more">Learn More</h2>
        <div class="modal-button">
          <button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Resume/CV</button>
        </div>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" 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="modalframe" src="http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf"></iframe>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Small Modal ends -->

      <table>
        <tr class="my-row">
          <th>Services</th>
          <th>Service 1</th>
          <th>Service 2</th>
        </tr>
        <tr class="my-row">
          <th>Feature 1</th>
          <th>Property 1</th>
          <th>Property 2</th>
        </tr>
        <tr class="my-row">
          <th>Feature 2</th>
          <th>Property 1</th>
          <th>Property 2</th>
        </tr>
        <tr class="my-row">
          <th>Feature 3</th>
          <th>Property 1</th>
          <th>Property 2</th>
        </tr>
        <tr class="my-row">
          <th>Feature 4</th>
          <th>Property 1</th>
          <th>Property 2</th>
        </tr>
        <tr class="my-row">
          <th>Feature 5</th>
          <th>Property 1</th>
          <th>Property 2</th>
        </tr>
      </table>


      <div class="container">
        <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-plus"></span>
                  What made you decide to become a Web developer?
                </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                I've always been interested in web design and coding.
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"><span class="glyphicon glyphicon-plus"></span>
                  What school did you go to for Web Development?
                </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                I did a 3 month course at Career Foundry.
              </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="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-plus"></span>
                  Is designing websites one of your passions?
                </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                It is one of my all time passions to work in the tech industry as a Web developer.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
      </div>
    </section>

<!-- FOOTER -->

    <footer class="main-footer">
      <div class="container">&copy; Copyright 2015 Frank Wiebe | All Rights Reserved</div>
      <div class="twitter">
        <a href="https://twitter.com/FrankFyshWiebe" class="twitter-follow-button" data-show-count="false">Follow @FrankFyshWiebe</a>
      </div>
      <div class="facebook">
        <div id="fb-root"></div>
        <div class="fb-like" data-href="https://www.facebook.com/fyshw" data-width="200" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></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>

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

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


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

    <script>
      $(function () {
        $('#[item1]').tooltip();
      });
    </script>


  </body>
</html>

## scripts.js
$(document).ready(function() {
	$("#comments").css("background-color", "#c7c7c7");
	$("#visible-comment").css("text-transform", "uppercase");

	$("#submit").on("click", function() {
		console.log("clicked");
		var comment = $("#comments").val();
		console.log(comment);
		$("#visible-comment").html(comment);
		return false;
	});

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

		if(charCount > 50) {
			$("#charCount").css("color", "red");
		} else {
			$("#charCount").css("color", "black");
		};
	});

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

	for(var i=0; i<myKitties.length; ++i) {
		$("#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" );
	};

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

	function initialize() {
		var mapOptions = {
			center: new google.maps.LatLng(42.7692743,-80.970145,16),
			zoom: 15
		};
		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(15);
			map.setCenter(marker.getPosition());
		});
	};
	google.maps.event.addDomListener(window, 'load', initialize);

});


var myKitties = [ { title: "First Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
{title: "Second Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
{title: "Third Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
{title: "Fourth Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"}
];

## styles.css
/*********** MAIN ***********/

* { box-sizing: border-box; }

.header h1 {
	margin-top: 1.58em;
	text-align: center;
	font-family: Futura, Helvetica, Arial, Sans-serif;
}

body {
	position: relative;
}

.container-fluid {
	padding: 0;
}

.jumbotron p {
	color: white;
}

.nav {
	float: right;
}

.projectName {
	text-transform: uppercase;
	font-size: 1.15em;
	padding: 0.813em;
}

.projectName a {
	color: white;
	padding: 0.938em;
}

.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
}

.col-md-4 {
	padding-bottom: 2em;
}

.carousel-caption {
	margin-bottom: 20em;
}

#h1 {
	font-size: 4.5em;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	text-shadow: 0.125em 0.125em 0.500em black;
}

#learn-more {
	width: 50%;
}


/*********** WORK ***********/

#work {
	margin: 15em 0;
	text-align: center;
}

.image {
	box-sizing: border-box;
	border: 2px solid lightgray;
	width: 200px;
	height: 200px;
	margin: 5px;
	display: inline-block;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
}

.info {
	display: inline-block;
	color: black;
	font-family: futura;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5em;
	line-height: 1.6;
	position: absolute;
	top: 15%;
	left: 22%;
}

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


/*********** ABOUT ***********/

#profile {
	display: inline-block;
	float: left;
}

#profile img {
	width: auto;
	height: 15.625em;
	border-radius: 100px;
}

.column {
	display: inline-block;
	float: left;
	width: 30%;
	padding: 0 1.250em;
	position: relative;
}

.main_text {
	float: left;
	padding-top: 3.750em;
	padding-bottom: 3.750em;
}

#skill_list {
	margin-left: 3.125em;
}


/*********** TYPOGRAPHY ***********/

h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, Sans-serif;
}

p {
	font-family: Raleway, cursive;
	font-size: 1.220em;
}

.intro p {
	font-family: Futura, Helvetica, Arial, Sans-serif;
	font-size: 3em;
	font-weight: 100;
	-webkit-margin-before: 0;
}

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

.panel-title {
	font-family: Futura, Helvetica, Arial, Sans-serif;

}


/*********** CONTACT ***********/

.header {
	text-align: center;
	margin-bottom: 3.125em;
}

.phone {
	text-align: center;
	margin-bottom: 3.125em;
}

.email {
	text-align: center;
	margin-bottom: 3.125em;
}

.address {
	text-align: center;
	margin-bottom: 3.125em;
}

.image img {
	display: block;
	height: 20.00em;
	width: auto;
	margin: 0 auto;
	text-align: center;
}

.glyphicon glyphicon-envelope:hover {
	transition: gray;
}

#contact {
	background-image: url("../img/cross2.jpg");
	background-attachment: fixed;
	background-size: cover;
	color: white;
	padding: 6.250em;
	padding-top: 3.125em;
	height: auto;
	width: auto;
}

.form-control {
	width: 100%;
}

.form-group {
	margin: 1em auto;
	width: 30%;
}

.btn {
	width: 100%;
	background-color: lightgrey;
	margin-top: 1.250em;
}

.message-box {
	width: 100%;
	color: black;
	padding: 0;
}


/***********FAQ***********/

.panel-heading {

}

.panel-collapse {
	color: gray;
}

.glyphicon glyphicon-plus:hover {
	transition: gray;
}

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

.modal-button {
	float: right;
	padding: 0.938em;
}

.modal-body {
	height: 31.250em;
}

#modalframe {
	padding: 0.625em;
	width: 100%;
	height: 100%;
}

.row {
	padding: 5em 11.5em 0em 12.5em;
}

table {
	margin: 0 auto;
}


/***********FOOTER***********/

footer {
	text-align: center;
	padding: 2.5% 0;
	bottom: 0;
	background-color: gray;
	color: white;
}

.twitter {
	text-align: center;
}

.video {
	text-align: center;
	margin: 5em 0;
	padding: 3em;
}

.facebook {
	text-align: center;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<link href="css/normalize.css" rel="stylesheet">
	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<!-- Custom styles for this template go here -->
	<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

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

	<script src="js/jQuery.media.js" type="text/javascript"></script>
	<!-- Latest compiled and minified Bootstrap Javascript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

	<!-- <script type="text/javascript" src="https://www.googleleapis.com/maps/api/js?key=AIzaSyCwnAOLqhi_qgMf4djvZtYJEd91M3D0kAs"></script> -->

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtlAEKvpByIIBSd6j_-7B9huqHYT6ngMg&v=3.20"></script>


	<title>Frank Wiebe \| Web developer</title>

	<!-- 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 id="index" data-spy="scroll" data-target=".navbar">
	<!--Main Navigation-->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid"> <!--Nav Container-->
	<div class="container anchor" id="process">
	<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="navbar-collapse collapse">
	<ul class="nav navbar-nav">
	<li><a href="#index">Home</a></li>
	<li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#work">Projects</a></li>
	<li><a href="http://www.frankwiebe.me">Project 1</a></li>
	</ul>
	</li>
	<li><a href="#about">About</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#faq">Faq</a></li>
	</ul>
	<div class="projectName">
	<a href="#">Frank Wiebe</a>
	</div>
	</div>
	</div>
	</div><!--Nav Container ends-->
	</nav> --><!-- Main Navigation Ends -->


	<!-- Main jumbotron for a primary marketing message or call to action -->
	<section>
	<div id="container-fluid" class="container-fluid">
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
	<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-example-generic" data-slide-to="1"></li>
	<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">
	<div class="item active">
	<img src="img/dark-cityscape.jpg" alt="City Scape">
	<div class="carousel-caption">
	<h1 id="h1">Frank Wiebe</h1>
	<p><strong>Christian, Husband,</strong><br>Soon to be Father and<br> Web Developer.</p>
	<div class="container" id="learn-more">
	<a href="#about">Learn more.</a>
	</div>
	</div>
	</div>
	<div class="item">
	<img src="img/heroimage2.jpg" alt="Typewriter">
	<div class="carousel-caption">
	Typewriter
	</div>
	</div>
	<div class="item">
	<img src="img/heroimage31.jpg" alt="Desk">
	<div class="carousel-caption">
	Desk
	</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>

	<div class="container-fluid">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-md-4 col-xs-6">
	<h2>Web Development</h2>
	<p>When building a new <a href="#" data-toggle="tooltip" data-placement="bottom" title="More Information">site</a> I start with mobile first, that way it will be responsive right from the get go!</p>
	<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">View details »</button></p>
	</div>
	<div class="col-md-4 col-xs-6">
	<h2>Web Design</h2>
	<p>Designing a beautiful and unique website is what I take pride in, after all it's what people see when they look you up online.</p>
	<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details »</button></p>
	</div>
	<div class="col-md-4 col-xs-6">
	<h2>Course Goals,</h2>
	<p>(1) Change career's, I have left my job as an Quality control manager at Horizon Seeds to pursue a career in the tech industry. (2) Start a new career as a entry level web developer. (3) Start Freelancing after this course.</p>
	<p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View details »</button></p>
	</div>
	</div>
	</div>
	</section>
	<!-- /container -->


	<!-- WORK -->

	<section id="work">
	<div class="container-fluid">
	<div class="header">
	<h2>Projects</h2>
	</div>
	<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>
	</section>


	<!-- ABOUT -->

	<section id="about">
	<div class="container">
	<div class="header">
	<h2>About Me</h2>
	</div>
	<div class="image" id="profile">
	<img src="img/profile.jpg" class="img-responsive" alt="Profile Picture">
	</div>
	<div class="intro column">
	<h2>Who am I?</h2>
	<p>I'm a Full Stack Web Developer.</p>
	</div>
	<div class="skills column">
	<h3>My Skills</h3>
	<ul id="skill_list">
	<li>HTML</li>
	<li>CSS</li>
	</ul>
	</div>
	<div class="main_text">
	<h3>More about me</h3>
	<p>Flannel farm-to-table fingerstache Bushwick forage, distillery Schlitz before they sold out tofu meggings slow-carb scenester. Thundercats squid tousled Shoreditch church-key. Yr gentrify hoodie DIY, kale chips Austin umami Echo Park Odd Future mumblecore. Four loko locavore Pitchfork Truffaut, tofu tote bag semiotics tousled PBR forage cold-pressed Echo Park literally four dollar toast. Bitters meggings cred, four dollar toast trust fund vegan put a bird on it taxidermy VHS kale chips locavore sartorial polaroid. Wayfarers Intelligentsia ennui Vice Tumblr. Chillwave American Apparel artisan asymmetrical PBRB slow-carb mustache.</p>
	</div>
	</div><!-- end container -->
	</section>


	<!-- CONTACT -->

	<section id="contact" class="container">
	<div class="col-lg-4 col-md-4">
	<div class="header">
	<div>
	<h2>Contact Info</h2>
	</div>
	</div>
	<div class="phone">
	<h2><span class="glyphicon glyphicon-phone"></span>Phone:</h2>
	<p>519-902-3974</p>
	</div>
	<div class="email">
	<h2><span class="glyphicon glyphicon-envelope"></span>E-mail</h2>
	<p>frankwiebe85@hotmail.com</p>
	</div>
	<div class="address">
	<h2><span class="glyphicon glyphicon-map-marker"></span>Location</h2>
	<p>201 Elk Street Aylmer Ontaio</p>
	</div>
	<div id="map-canvas" style="height: 300px; width: 300px">
	<!-- <iframe
	width="600"
	height="450"
	frameborder="0" style="border:0"
	src="https://www.google.com/maps/embed/v1/place?q=201%20Elk%20Street%2C%20Aylmer%2C%20ON%2C%20Canada&key=AIzaSyDuQNh1BS5WV2wTQVqrJZQVyzcOLucsYPo" allowfullscreen></iframe> -->
	</div>
	</div>
	<div class="col-lg-8 col-md-8">
	<form action="/login" method="post" name="login">
	<div class="form-group">
	<label for="name">Name *</label>
	<input placeholder="Enter name" type="text" class="form-control" id="name" required="required" title="Enter your name here!" maxlength=40>
	</div>
	<div class="form-group">
	<label for="tel">Phone umber</label>
	<input placeholder="Enter phone number" name="tel" type="tel" class="form-control" id="tel" title="Enter your Phone number here!" maxlength=30>
	</div>
	<div class="form-group">
	<label for="email">E-mail *</label>
	<input placeholder="Enter e-mail" name="email" type="email" class="form-control" id="email" required="required" title="Enter your E-mail address here!" maxlength=30>
	</div>
	<div class="form-group">
	<label for="comments">Comments *</label>
	<textarea placeholder="Write your comments here" class="message-box" type="textbox" id="comments" style="resize:none" cols="40" rows="5" required="required" title="Add comments you have here!" maxlength="150"></textarea>
	<p id="charCount"></p>
	<button type="submit" id="submit" class="btn btn-default">Sign in</button>
	<p id="visible-comment"></p>
	</div>
	</form>
	</div>
	</section>


	<!-- FAQ -->

	<section id="faq">
	<!-- Small Modal -->
	<div class="row">
	<h2 class="learn-more">Learn More</h2>
	<div class="modal-button">
	<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Resume/CV</button>
	</div>
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" 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="modalframe" src="http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf"></iframe>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- Small Modal ends -->

	<table>
	<tr class="my-row">
	<th>Services</th>
	<th>Service 1</th>
	<th>Service 2</th>
	</tr>
	<tr class="my-row">
	<th>Feature 1</th>
	<th>Property 1</th>
	<th>Property 2</th>
	</tr>
	<tr class="my-row">
	<th>Feature 2</th>
	<th>Property 1</th>
	<th>Property 2</th>
	</tr>
	<tr class="my-row">
	<th>Feature 3</th>
	<th>Property 1</th>
	<th>Property 2</th>
	</tr>
	<tr class="my-row">
	<th>Feature 4</th>
	<th>Property 1</th>
	<th>Property 2</th>
	</tr>
	<tr class="my-row">
	<th>Feature 5</th>
	<th>Property 1</th>
	<th>Property 2</th>
	</tr>
	</table>


	<div class="container">
	<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-plus"></span>
	What made you decide to become a Web developer?
	</a>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
	<div class="panel-body">
	I've always been interested in web design and coding.
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingTwo">
	<h4 class="panel-title">
	<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"><span class="glyphicon glyphicon-plus"></span>
	What school did you go to for Web Development?
	</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	<div class="panel-body">
	I did a 3 month course at Career Foundry.
	</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="true" aria-controls="collapseOne"><span class="glyphicon glyphicon-plus"></span>
	Is designing websites one of your passions?
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	<div class="panel-body">
	It is one of my all time passions to work in the tech industry as a Web developer.
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="video">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
	</div>
	</section>

	<!-- FOOTER -->

	<footer class="main-footer">
	<div class="container">© Copyright 2015 Frank Wiebe \| All Rights Reserved</div>
	<div class="twitter">
	<a href="https://twitter.com/FrankFyshWiebe" class="twitter-follow-button" data-show-count="false">Follow @FrankFyshWiebe</a>
	</div>
	<div class="facebook">
	<div id="fb-root"></div>
	<div class="fb-like" data-href="https://www.facebook.com/fyshw" data-width="200" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></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>

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

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


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

	<script>
	$(function () {
	$('#[item1]').tooltip();
	});
	</script>


	</body>
	</html>
	$(document).ready(function() {
	$("#comments").css("background-color", "#c7c7c7");
	$("#visible-comment").css("text-transform", "uppercase");

	$("#submit").on("click", function() {
	console.log("clicked");
	var comment = $("#comments").val();
	console.log(comment);
	$("#visible-comment").html(comment);
	return false;
	});

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

	if(charCount > 50) {
	$("#charCount").css("color", "red");
	} else {
	$("#charCount").css("color", "black");
	};
	});

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

	for(var i=0; i<myKitties.length; ++i) {
	$("#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" );
	};

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

	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(42.7692743,-80.970145,16),
	zoom: 15
	};
	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(15);
	map.setCenter(marker.getPosition());
	});
	};
	google.maps.event.addDomListener(window, 'load', initialize);

	});


	var myKitties = [ { title: "First Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
	{title: "Second Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
	{title: "Third Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"},
	{title: "Fourth Project", pic: "http://www.maccabiart.com/media/wysiwyg/comingsoonGB.jpg"}
	];
	/********* MAIN *********/

	* { box-sizing: border-box; }

	.header h1 {
	margin-top: 1.58em;
	text-align: center;
	font-family: Futura, Helvetica, Arial, Sans-serif;
	}

	body {
	position: relative;
	}

	.container-fluid {
	padding: 0;
	}

	.jumbotron p {
	color: white;
	}

	.nav {
	float: right;
	}

	.projectName {
	text-transform: uppercase;
	font-size: 1.15em;
	padding: 0.813em;
	}

	.projectName a {
	color: white;
	padding: 0.938em;
	}

	.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	}

	.col-md-4 {
	padding-bottom: 2em;
	}

	.carousel-caption {
	margin-bottom: 20em;
	}

	#h1 {
	font-size: 4.5em;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	text-shadow: 0.125em 0.125em 0.500em black;
	}

	#learn-more {
	width: 50%;
	}



	/********* WORK *********/

	#work {
	margin: 15em 0;
	text-align: center;
	}

	.image {
	box-sizing: border-box;
	border: 2px solid lightgray;
	width: 200px;
	height: 200px;
	margin: 5px;
	display: inline-block;
	position: relative;
	background-size: contain;
	background-repeat: no-repeat;
	}

	.info {
	display: inline-block;
	color: black;
	font-family: futura;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5em;
	line-height: 1.6;
	position: absolute;
	top: 15%;
	left: 22%;
	}

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


	/********* ABOUT *********/

	#profile {
	display: inline-block;
	float: left;
	}

	#profile img {
	width: auto;
	height: 15.625em;
	border-radius: 100px;
	}

	.column {
	display: inline-block;
	float: left;
	width: 30%;
	padding: 0 1.250em;
	position: relative;
	}

	.main_text {
	float: left;
	padding-top: 3.750em;
	padding-bottom: 3.750em;
	}

	#skill_list {
	margin-left: 3.125em;
	}



	/********* TYPOGRAPHY *********/

	h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, Sans-serif;
	}

	p {
	font-family: Raleway, cursive;
	font-size: 1.220em;
	}

	.intro p {
	font-family: Futura, Helvetica, Arial, Sans-serif;
	font-size: 3em;
	font-weight: 100;
	-webkit-margin-before: 0;
	}

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

	.panel-title {
	font-family: Futura, Helvetica, Arial, Sans-serif;

	}



	/********* CONTACT *********/

	.header {
	text-align: center;
	margin-bottom: 3.125em;
	}

	.phone {
	text-align: center;
	margin-bottom: 3.125em;
	}

	.email {
	text-align: center;
	margin-bottom: 3.125em;
	}

	.address {
	text-align: center;
	margin-bottom: 3.125em;
	}

	.image img {
	display: block;
	height: 20.00em;
	width: auto;
	margin: 0 auto;
	text-align: center;
	}

	.glyphicon glyphicon-envelope:hover {
	transition: gray;
	}

	#contact {
	background-image: url("../img/cross2.jpg");
	background-attachment: fixed;
	background-size: cover;
	color: white;
	padding: 6.250em;
	padding-top: 3.125em;
	height: auto;
	width: auto;
	}

	.form-control {
	width: 100%;
	}

	.form-group {
	margin: 1em auto;
	width: 30%;
	}

	.btn {
	width: 100%;
	background-color: lightgrey;
	margin-top: 1.250em;
	}

	.message-box {
	width: 100%;
	color: black;
	padding: 0;
	}



	/*********FAQ*********/

	.panel-heading {

	}

	.panel-collapse {
	color: gray;
	}

	.glyphicon glyphicon-plus:hover {
	transition: gray;
	}

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

	.modal-button {
	float: right;
	padding: 0.938em;
	}

	.modal-body {
	height: 31.250em;
	}

	#modalframe {
	padding: 0.625em;
	width: 100%;
	height: 100%;
	}

	.row {
	padding: 5em 11.5em 0em 12.5em;
	}

	table {
	margin: 0 auto;
	}



	/*********FOOTER*********/

	footer {
	text-align: center;
	padding: 2.5% 0;
	bottom: 0;
	background-color: gray;
	color: white;
	}

	.twitter {
	text-align: center;
	}

	.video {
	text-align: center;
	margin: 5em 0;
	padding: 3em;
	}

	.facebook {
	text-align: center;
	}