Created
August 10, 2015 18:35
-
-
Save FrankWiebe/7eaae29a059ee09d0b66 to your computer and use it in GitHub Desktop.
Exercise 16
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> | |
<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="row" id="row"> | |
<div class="col-md-3 col-xs-6"> | |
<img src="img/kitten.jpg" class="img-responsive" alt="kitten"> | |
</div> | |
<div class="col-md-3 col-xs-6"> | |
<img src="img/kitten.jpg" class="img-responsive" alt="kitten"> | |
</div> | |
<div class="col-md-3 col-xs-6"> | |
<img src="img/kitten.jpg" class="img-responsive" alt="kitten"> | |
</div> | |
<div class="col-md-3 col-xs-6"> | |
<img src="img/kitten.jpg" class="img-responsive" alt="kitten"> | |
</div> | |
</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 class="image"> | |
<img src="img/map.jpg" alt="Map"> | |
</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> | |
<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 --> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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; | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment