Skip to content

Instantly share code, notes, and snippets.

@FrankWiebe

FrankWiebe/index.html

Last active August 29, 2015 14:26
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/4b1ddddd2b4144842a84 to your computer and use it in GitHub Desktop.
Save FrankWiebe/4b1ddddd2b4144842a84 to your computer and use it in GitHub Desktop.
Download ZIP
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-->
<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">
<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">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/kitten.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/kitten.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<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>
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 ul li {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 20px 10px;
}
.nav {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 0;
}
.nav ul li a {
color: gray;
}
.nav ul {
float: right;
}
.nav a:hover {
color: #000;
text-decoration: none;
transition: color 600ms;
}
.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment