Skip to content

Instantly share code, notes, and snippets.

@moritzbecker-koch
Created August 25, 2015 22:16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> -->
<link href="css/styles.css" rel="stylesheet">
<!--<link rel="stylesheet" type="text/css" href="css/contact_styles.css">
<link rel="stylesheet" type="text/css" href="css/faq_styles.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>!function(d,s,id){var js,fjs=d.getElementByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.stc=p+'://platformm.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
<!-- Custom styles for this template go here -->
<!-- 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>
<div id="fb-root"></div>
<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<body data-spy="scroll" data target=".navbar">
<!-- navbar starts here -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<nav class="navbar-brand">
<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>
<span class="icon-bar"></span>
</button>
</nav>
<div class ="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="ProjektName" href="#">Project Name</a>
</li>
<li><a href="#" id="home">Home</a></li>
<li><a href="#abouts">About</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#work">work</a></li>
<li><a href="#faq">faq</a></li>
</ul>
</div>
</div> <!-- end of container -->
</nav>
<!-- navbar ends here -->
<!--<body data-spy="scroll" data target=".navbar">-->
<!--<nav class="navbar navbar-default navbar-fixed-top">-->
<!-- Collect the nav links, forms, and other content for toggling -->
<!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" id="home">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#work">work</a></li>
<li><a href="#faq">faq</a></li>
</ul>
</div>--><!-- /.navbar-collapse -->
<!-- /.container-fluid -->
<!--</nav>-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<!--<div class="jumbotron">
<div class="container">
<a href="contact.html"><strong>Contact</strong></a>
<h1>Moritz Becker-Koch</h1>
<p><strong>Serving all of your web development needs.</strong>
</p>
<a href="about.html" id="learnMore"><strong>Learn More</strong></a>
</div>
</div> -->
<div class="container">
<div class="container anchor" id="prcoess">
<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/tiger woods.jpg" alt="tiger woods">
<div class="carousel-caption">
<h3>Here is an example headline </h3>
<p>Here is an example description</p>
</div>
</div>
<div class="item">
<img src="img/federer.jpg" alt="federer">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/allen iverson.jpg" alt="allen iverson">
<div class="carousel-caption">
...
</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>
<div class="container">
<div class="container anchor" id="prcoess">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-xs-4">
<h2>Portfolio Concept</h2>
<p>Havent got a concept yet </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4 col-xs-4">
<h2>Project Goals</h2>
<p>I am running very very late but no I'm free and want to code as much as possible </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
<div class="col-md-4 col-xs-4">
<h2>Course Goals</h2>
<p>At least know how to create a proper website. If there is enough time I would be grateful to learn how to code apps.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>
</p>
</div>
</div>
<hr>
<div class="test"></div>
</div>
<div class="container" id="faq">
<div class="container">
<h1> FAQ </h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<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">
Collapsible Group Item #1 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</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-primary">
<div class="panel-heading" 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">
Collapsible Group Item #2 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</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-primary">
<div class="panel-heading" 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">
Collapsible Group Item #3 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</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 class="panel panel-primary">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Collapsible Group Item #4 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<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-primary">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
Collapsible Group Item #5 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<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-primary">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Collapsible Group Item #6 <span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<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="jumbotron"></div>
</div>
</div>
</div>
<div class="container" id="contact">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="container anchor" id="prcoess">
<div class="container" >
<div class="header">
<h1><strong>Moritz Becker-Koch</strong></h1>
</div>
</div>
<div class="container" id="anfang">
<div class="kontakt" >
<h1>Kontaktdaten</h1>
<span class="glyphicon glyphicon-arrow-down" id="glyphicon"></span>
<ul>
<li>Name: Moritz Becker-Koch</li>
<li>Universität: Zeppelin University</li>
<li>Email-Adresse: m.becker-koch@zeppelin-university.net</li>
<li>Adresse: 89155 Erbach, Haldenweg 12/1</li>
<li>Telefon</li>
<ul id="Telefon">
<li><span class="glyphicon glyphicon-earphone"></span> Mobil: 015120415801 </li>
<li><span class="glyphicon glyphicon-phone-alt"></span> Home: 07305/934060</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8">
<form>
<div class="form-group">
<label for="email">Email adress</label>
<input type="email" "required" "title" id="email" <div class="form-control" <textarea placeholder="Your email here"></textarea></div>
<label for="password">Password</label>
<input type="password" "required" "title" id="password" <div class="form-control" <textarea placeholder="Password"></textarea><textarea minlength=8></textarea>
</div>
<label for="message-box">Your Message</label>
<textarea style="resize:none" "title" cols="40" rows="5" id="message-box" <textarea placeholder="Your message here"></textarea>
</textarea>
<button type="submit class="btn btn-warning>Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="work">
<div class="container anchor" id="prcoess">
<div class="container">
<div class="header">
<h1><strong>Work</strong></h1>
</div>
</div>
<div class="container">
<div class="row" id="reiheeins">
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
</div>
<div class="row" id="reihezwei">
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
<div class="col-md-3 col-xs-6">
<img src="img/lordvader2.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
<div class="container" id="abouts">
<div class="container anchor" id="prcoess">
<div class="header">
<h1>Moritz Becker-Koch</h1>
</div>
<div class="intro column">
<h2>Introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="image">
<img src="img/basketball.jpg" alt="basketball">
</div>
<div class="skills column">
<h3>My skills</h3>
<ul id="skill-list">
<li>one item</li>
<li>another item</li>
<li>last item</li>
</ul>
</div>
<hr>
<div class="main_text">
<h1>My Story</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div><!-- end container -->
<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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/4OmdxQtOUJM" frameborder="0" allowfullscreen></iframe>
<footer>
<div class="container">
&copy;
<p>Moritz Becker-Koch</p>
<a href="https://twitter.com/BeckerKoch" class="twitter-follow-button" data-show-count="false">Follow @BeckerKoch</a>
<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>
<div class="fb-share-button" data-href="https://www.facebook.com/moritz.beckerkoch" data-layout="button_count"></div>
</div>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
</body>
</html>
/*.jumbotron {
background-image: url("../img/karibik.jpg");
background-size: cover;
padding-bottom: 30%;
}
.jumbotron p {
color: white;
text-align: center;
font-style: italic;
font-weight: 0;
font-size: 15px;
}
.jumbotron h1 {
color: white;
text-align: center;
}
.jumbotron a{
color: #33FF33;
position: absolute;
right: 5%;
font-size: 150%;
}*/
#learnMore {
padding-top: 20%;
}
.carousel {
margin-top: 40px;
}
.carousel-caption {
padding-bottom: 45%;
}
/* is jez mit dem das faq und contact in index.hmtl sind*/
.container {
margin-top: 5%;
}
body {
position: relative;
}
#contact{
background-image: url("../img/basketball.3.png");
background-attachment: fixed;
background-size: cover;
color:black;
padding: 100px;
padding-top: 50px;
}
}
#headingOne h4, #headingTwo, #headingThree, #headingFour, #headingFive, #headingSix {
color: blue;
}
.jumbotron {
background-color: blue;
}
.row {
margin-top: 5%;
}
.panel-body {
color: blue;
}
.nav li a {
transition: 800ms;
}
.ProjektName {
float:left;
}
.anchor {
padding-bottom: 5%;
}
.form-control {
width:50%;
}
/*.nav {
background-color: black;
}
.navbar-default .navbar-nav li a {
color: white;
}
.navbar-nav>li>a:hover{
color:#ff0;
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment