Skip to content

Instantly share code, notes, and snippets.

@FrankWiebe

FrankWiebe/index.html

Created August 5, 2015 21: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/354e34a241fb1a9cd6c7 to your computer and use it in GitHub Desktop.
Save FrankWiebe/354e34a241fb1a9cd6c7 to your computer and use it in GitHub Desktop.
Download ZIP
Project 12
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=Courgette' 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>
<!-- Latest compiled and minified Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.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">
<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><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 -->
<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">
CityScape
</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="jumbotron">
<div class="container">
<div class="header">
<h1>Frank Wiebe | Web Developer</h1>
<p><strong>I am a web developer, </strong><br>Here for all your web developing needs.</p>
</div>
</div>
<div class="container" id="learnmore">
<p></p>
<a href="#about">Learn more.</a>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept,</h2>
<p>This is my portfolio site I did on treehouse <a href="http://www.frankwiebe.me">here</a> </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<h2>Project Goals,</h2>
<p>My goal is to take my time and make sure I learn everything I need to learn, I can commit atleast 8-10 hours daily if not more, end of september my wifes due to have our first baby so there will be some slower days as I help out.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<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><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
<div class="container">
<div class="row" id="row">
<div class="col-md-12">
<h2>Work</h2>
</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 class="col-md-3 col-xs-6">
<img src="img/kitten.jpg" class="img-responsive" alt="kitten">
</div>
</div>
</div>
</div>
<!-- /container -->
<!-- ABOUT -->
<section id="about">
<div class="container">
<div class="container">
<div class="header">
<h2>About Me</h2>
</div>
<div class="image" id="profile">
<img src="img/profile.jpg" 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 -->
</div>
</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="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 Number</label>
<input placeholder="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="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="Comments" id="comments" style="resize:none" cols="40" rows="5" required="required" title="Add comments you have here!" maxlength=150>
</textarea>
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="header">
<h2>Frequently asked Questions</h2>
</div>
<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>
<footer class="main-footer">
<div class="container">&copy; Frank Wiebe 2015</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>
</section>
<!--
================================================== -->
<!-- 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>
</body>
</html>
Raw
styles.css
* { box-sizing: border-box; }
.header h1 {
margin-top: 1.58em;
text-align: center;
font-family: Futura, Helvetica, Arial, Sans-serif;
}
.container-fluid {
padding: 0;
}
.jumbotron p {
color: white;
}
.nav {
float: right;
}
.projectName {
text-transform: uppercase;
font-size: 1em;
padding: 0.813em;
}
.projectName a {
color: white;
padding: 0.938em;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.row {
padding: 3em;
}
.col-md-12 {
text-align: center;
font-family: Futura, Helvetica, Arial, Sans-serif;
padding-bottom: 3em;
}
.col-md-3 {
padding-bottom: 2em;
}
/***********About***********/
.container {
width: 80%;
margin: 0 auto;
}
#profile {
display: inline-block;
float: left;
}
#profile img {
height: 15.625em;
width: auto;
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;
}
.header {
margin-bottom: 2.50em;
}
#skill_list {
margin-left: 3.125em;
}
/***********typography***********/
h1, h2, h3 {
font-family: Futura, Helvetica, Arial, Sans-serif;
}
p {
font-family: 'Courgette', cursive;
}
.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;
}
/***********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/dark-cityscape.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;
}
#comments {
width: 100%;
}
/***********FAQ***********/
.panel-title {
font-family: Futura, Helvetica, Arial, Sans-serif;
}
.panel-heading {
}
.panel-collapse {
color: gray;
}
.glyphicon glyphicon-plus:hover {
transition: gray;
}
/***********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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment