Skip to content

Instantly share code, notes, and snippets.

@andrefe90

andrefe90/index.html

Created November 13, 2015 12:36
Show Gist options
  • Save andrefe90/0e6c4cf272cac98b07ba to your computer and use it in GitHub Desktop.
Save andrefe90/0e6c4cf272cac98b07ba to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- 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.2/js/bootstrap.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script> $(window).stellar() </script>
<!-- Custom styles for this template go here -->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel="stylesheet">
<!-- 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]-->
<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>
<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 = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- 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 data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="project-name pull-left"> <a href="#">Project Name</a>
</div>
<div class="navbar-header pull-right">
<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 class="navbar-collapse collapse">
<ul class="nav navbar-pills navbar-nav">
<li class=""><a href="#about">About</a>
</li>
<li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> Work <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#work">Work</a>
</li>
<li><a href="#work">Work 2</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#work">Work 3</a>
</li>
</ul>
<li><a href="#contact">Contact</a>
</li>
<li><a href="#faq">Learn More</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end navcontainer -->
</nav>
<div 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/portfolioheroimage_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3_edited.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</div>
</div>
<div class="item">
<img src="img/lesson8-portfolioheroimage2.jpg" alt="hello">
<div class="carousel-caption">
<h1>Welcome!</h1>
<p>Have fun exploring my website.</p>
</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 class="container anchor">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-12">
<h2>Portfolio Concept</h2>
<p>One of the websites that I would like to have in my concept is a site similar to www.heuteinhamburg.de. Just something where you can list events, parties, projects and the like while giving everything a simple, intuitive and novel look that stays in your mind and that is not readily forgotten after the user has left the website</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Project Goals</h2>
<p>My course officially runs for 6 months but i want to try to do a lot of work during july and august as I am basically free then. From september on, I will either continue to study or work. Depending on which it will be i might have to go a bit slower then.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4 col-xs-12">
<h2>Course Goals</h2>
<p>I am not changing careers, because I dont even have one yet. I would like to build something own and me and my friends already had some nice ideas, but its just impossible to do anything today without knowing how to write at least some code. I would also find it extremely helpful to be able to earn some extra money as a freelancer all the while doing something I (probabyl) like and which will be helpful for me. So in that sense I am trying to enhance my skill set. And in the future, when I have succesfully finished this course I might even go further and start a mobile developing course.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
</div>
<hr>
</div>
<!-- /container -->
</div>
<!--container-fluid-->
<!-- START ABOUT -->
<div class="container anchor" id="about">
<div class="row">
<div class="intro">
<div class="col-xs-12">
<h1>Awesome Stuff About Me</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-xs-12">
<h3>Even more about me</h3>
<p>Drinking vinegar roof party mlkshk, kogi pour-over paleo banjo. Food truck distillery fixie, meditation kogi fingerstache Austin jean shorts PBR&B cronut squid. Asymmetrical freegan fingerstache XOXO. Chambray narwhal selvage Bushwick, pork belly 90's four dollar toast lo-fi polaroid actually seitan DIY. Viral cred organic 3 wolf moon, forage food truck tilde Carles polaroid retro Schlitz distillery aesthetic tofu American Apparel. Sartorial Truffaut polaroid migas four loko chillwave, DIY selfies messenger bag artisan. Truffaut artisan put a bird on it, art party Carles twee chillwave locavore messenger bag gentrify seitan hoodie.</p>
</div>
<div class="col-md-4 col-xs-12" id="skills">
<h3>My Skills</h3>
<ul id="skill-set">
<li>Not web development</li>
<li>not coding of any sort</li>
<li>especially not web design</li>
<li>especially not web design</li>
<li>especially not web design</li>
<li>especially not web design</li>
</ul>
</div>
</div>
<!-- 16:9 aspect ratio -->
<div class="videowrapper embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2pv3DzRKnec" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<!-- END ABOUT -->
<!-- START Work -->
<div class="contaniner anchor" id="work">
<div class="header">
<h1>Work</h1>
</div>
<div class="row" id="puppyrow">
<div class="col-lg-3 col-md-6 col-xs-12">
<img src="img/puppy.jpg" class="img-responsive">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<img src="img/puppy.jpg">
</div>
</div>
</div>
<!-- <END WORK -->
<!-- START CONTACT -->
<div class="container-fluid anchor" id="contact">
<div class="contact">
<div class="col-lg-4 col-md-4">
<div class="header">
<h1> Contact </h1>
</div>
<div class="contact-details">
<h2> Phone: 123345656</h2>
<p>Email: [email protected]</p>
<p>Address: Nowaythisistrue St. gangstaCity</p>
</div>
</div>
<div class="col-lg-8 col-md-8">
<div class="Sayhello">
<h2> Say Hi to me </h2>
<div class="form-group">
<label for="name">Name</label>
<input placeholder="Your Name Here" type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email *</label>
<input required="required" placeholder="Your Email Here" type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea placeholder="Your Comments Here" style="resize:none" cols="40" rows="5" class="form-control" id="comments"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit This Shit</button>
</div>
</div>
</div>
</div>
<!-- END CONTACT -->
<!-- START FAQ/LEARN MORE -->
<div class="container anchor" id="faq">
<div class="row">
<div class="header">
<h2 class="learn-more"> Learn More </h2>
</div>
<div class="modalbutton">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Awesomeness</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="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">Modal title</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src=" http://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Large modal -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading hvr-bounce-to-bottom" 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-asterisk"></span>Collapsible Group Item #1 </a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading hvr-bounce-to-bottom" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-asterisk"></span>
Collapsible Group Item #2
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading hvr-bounce-to-bottom" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-asterisk"></span>
Collapsible Group Item #3
</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div>
</div>
</div>
</div>
</div>
<!-- END FAQ/LEARN MORE -->
<!-- START fOOTER -->
<footer class="container-fluid">
<div class="copyright">© 2015 Andre Feldhuis | All rights reserved</div>
<div id="twitter" class="socialbuttons"> <a href="https://twitter.com/AFeldhuis" class="twitter-follow-button" data-show-count="false">Follow @AFeldhuis</a>
</div>
<div class="socialbuttons fb-like" data-href="https://www.facebook.com/fabian.wahlers.3?fref=ts" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>
</footer>
<!-- END FOOTER -->
<!--==================================================- ->
<!-- Can place script tags with JavaScript files here -->
<!-- ============================= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script src="js/jquery.stellar.min.js"></script>
<script>$('#stellar').stellar();</script>
<script>
$.stellar({
horizontalScrolling: false,
responsive: true
});
</script>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment