Created
August 4, 2015 19:02
-
-
Save FrankWiebe/149af5b53227960e8ca4 to your computer and use it in GitHub Desktop.
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=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--> | |
<div 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><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--> | |
</div> --><!-- 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 col-xs-6"> | |
<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 »</a></p> | |
</div> | |
<div class="col-md-4 col-xs-6"> | |
<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 »</a></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><a class="btn btn-default" href="#" role="button">View details »</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 col-lg-6 col-sm-3"> | |
<img src="img/kitten.jpg" class="img-responsive"> | |
</div> | |
<div class="col-md-3 col-xs-6 col-lg-6 col-sm-3"> | |
<img src="img/kitten.jpg" class="img-responsive"> | |
</div> | |
<div class="col-md-3 col-xs-6 col-lg-6 col-sm-3"> | |
<img src="img/kitten.jpg" class="img-responsive"> | |
</div> | |
<div class="col-md-3 col-xs-6 col-lg-6 col-sm-3"> | |
<img src="img/kitten.jpg" class= "img-responsive"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> <!-- /container --> | |
<!-- ABOUT --> | |
<div class="container"> | |
<head> | |
<title>About</title> | |
<!--[if lt IE 9]> | |
<script scr="dist/html5shiv.js"></script> | |
<![endif]--> | |
</head> | |
<body> | |
<div class="container" id="about"> | |
<div class="header"> | |
<h1>About Me</h1> | |
</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 PBR&B slow-carb mustache.</p> | |
</div> | |
</div><!-- end container --> | |
</body> | |
</div> | |
<!-- CONTACT --> | |
<head> | |
<title>Contact</title> | |
</head> | |
<body> | |
<div class="container" id="contact"> | |
<div class="header"> | |
<div> | |
<h1>Contact Info</h1> | |
</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> | |
</body> | |
<!-- FAQ --> | |
<head> | |
<title>FAQ</title> | |
</head> | |
<body> | |
<div class="header" id="faq"> | |
<h1>Frequently asked Questions</h1> | |
</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> | |
</body> | |
<!-- | |
================================================== --> | |
<!-- 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> |
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
* { 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: 25.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; | |
} | |
/***********FAQ***********/ | |
.panel-title { | |
font-family: Futura, Helvetica, Arial, Sans-serif; | |
} | |
.panel-heading { | |
} | |
.panel-collapse { | |
color: gray; | |
} | |
.glyphicon glyphicon-plus:hover { | |
transition: gray; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment