Skip to content

Instantly share code, notes, and snippets.

@FrankWiebe

FrankWiebe/index.html

Created August 12, 2015 13:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save FrankWiebe/953f3c9dd195b4de0c2f to your computer and use it in GitHub Desktop.
Save FrankWiebe/953f3c9dd195b4de0c2f to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 18
Raw
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>
<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="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>
<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>
Raw
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");
};
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment