Skip to content

Instantly share code, notes, and snippets.

@sbernhardi
Last active November 7, 2016 17:14
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 sbernhardi/34ff7534b34b4e0536041356bdf34d9c to your computer and use it in GitHub Desktop.
Save sbernhardi/34ff7534b34b4e0536041356bdf34d9c to your computer and use it in GitHub Desktop.
CF Achievement 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>FutureDev's Firstborn</title>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" href="css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="home" data-spy="scroll" data-target=".navbar">
<!-- ### facebook API ### -->
<div id="fb-root"></div>
<!-- ### facebook API END ### -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class ="container-fluid">
<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="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<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/portfolioheroimage1.jpg" alt="typewriter">
<div class="carousel-caption">
<h3>At first&#133;</h3>
<p>&#133;comes the typing.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage2.jpg" alt="handwriting">
<div class="carousel-caption">
<h3>Then&#133;</h3>
<p>&#133;of course the sketching.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3.jpg" alt="monitor">
<div class="carousel-caption">
<h3>Finally&#133;</h3>
<p>&#133;the coding begins.</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>
<!-- END carousel-example-generic -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h2>Portfolio Concept</h2>
<p>Before too long you are going to see a bit about myself, what I've done and what I value. Furthermore some examples of my work, perhaps a little game or two. For integrity reasons you will find this differentiated into 'my stuff' and 'exercises'.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</a></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h2>Project Goals</h2>
<p>If all goes well, I will get the mandatory tasks done until christmas, so there's time to polish, diving deeper and of course some fun stuff afterwards. Not to forget 'official stuff' like a decent CV etc. To meet this goal, I plan to finish one task a day, approximately.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="right" title="Tooltip at the right">View details &raquo;</a></p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h2>Course Goals</h2>
<p>At the end of this course I will be able to build my own web app in ruby, hopefully with lots of JS, too, which I plan to learn more as well along the way. In addition I will have built up a nice little reliable network with other devs and UI/UX designers for exchange and collaboration.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip below">View details &raquo;</a></p>
</div>
</div>
<hr>
</div>
<div class="container" id="container_work">
<div class=”row” id="work">
<!-- filled by scripts.js "works - array" -->
</div>
<hr>
</div>
<!-- ### ABOUT ### -->
<div class="header" id="about">
<h1 id="about_title">About me</h1>
</div>
<div class="container" id="container_about">
<div class=”row”>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="img/me_park.jpg" alt="me" class="img-responsive">
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h1 class="column">Making the world more beautiful &#150; bit by bit.</h1>
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<ul class="column">
<lh><a href="#" title="mostly self-taught" id="some_skills">Some Skills</a></lh>
<li>clumsy coding</li>
<li>silly styling</li>
<li>tiring typography</li>
<li>awkward alliterations</li>
<li>&nbsp;</li>
<li>leaving white space</li>
</ul>
</div>
<p class="cont_footer">and to fill up some content here's a little lorem ipsum wisdom: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<hr>
</div>
<!-- ### END ABOUT ### -->
<!-- ### FAQ ### -->
<div class="header" id="faq">
<h1>Frequently Asked Questions</h1>
</div>
<div class="container" id="container_faq">
<div class=”row”>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img src="img/me_park.jpg" alt="me" class="img-responsive">
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h1 class="column">Welcome to the<br>FAQ-section.</h1>
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="column">
<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">What did you do before?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">You don't wanna know.</div>
</div>
</div>
<div class="panel panel-default">
<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">How did we get this far?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">Long story... 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" 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">Where do you want to go?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">Down the yellow brick road.</div>
</div>
</div>
<div class="panel panel-default">
<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">Why are we here?</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">You mean, What's life all about?<br>Is God really real, or is there some doubt?<br>Well, tonight, we're going to sort it all out,<br>For, tonight, it's 'The Meaning of Life'.</div>
</div>
</div>
<div class="panel panel-default">
<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">What do you want from life?</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">A baby's arm holding an apple.</div>
</div>
</div>
</div>
<h3 id="learn-more">Learn More</h2>
<!-- Small modal button -->
<button class="btn btn-primary modal-button" data-toggle="modal" data-target=".bs-example-modal-lg">See my CV</button>
<!-- Small modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="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">MY CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="emb/cv.pdf">
</div>
</div>
</div>
</div>
<!-- END Small modal -->
</div>
</div>
</div>
<p class="cont_footer">and to fill up some content here's a little lorem ipsum wisdom: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
<hr>
</div>
<!-- ### FAQ END ### -->
<!-- ### CONTACT ### -->
<div class="header" id="contact">
<h1>Contact me</h1>
</div><!-- END header -->
<div class="container" id="container_contact">
<div class=”row”>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="portrait" src="img/me_park.jpg" alt="me" class="img-responsive">
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<h1 class="column">How can I be<br>of service?</h1>
<form>
<div class="form-group">
<label for="name">Your name*</label>
<input type="text" id="name" class="form-control" placeholder="How may I call you?" required=”required”>
<label for="email">Your email address*</label>
<input type="email" id="email" class="form-control" placeholder="How can I reach you?" required=”required”>
<label for="message">Your message*</label>
<textarea id="message" class="form-control" style="resize:none;" cols="40" rows="4" placeholder="What do I need to know?" required=”required”></textarea>
<p id="visible_comment"></p>
<p id="charCount"></p>
<button id="button" type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
<div class = "col-lg-4 col-md-4 col-sm-6 col-xs-12">
<ul class="column">
<lh>Contact</lh>
<li><span class="glyphicon glyphicon-envelope"></span> s.bernhardi(#)posteo.de</li>
<li><span class="glyphicon glyphicon-phone"></span> +49 123 555 555</li>
<li>facebook</li>
<li>Skype</li>
<li>Twitter</li>
<li>Slack</li>
</ul>
<div id="map"><!-- GOOGLE MAP API--></div>
</div>
<p class="cont_footer">&nbsp;
<!-- for further information:<br><iframe src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>&emsp; -->
</p>
</div>
<!-- <hr> -->
</div>
<!-- ### CONTACT END ### -->
<footer>
<!-- ### TWITTER ### -->
&copy;2016 <a href="https://twitter.com/Ontonaut20" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow</a>
<!-- ### TWITTER END ### -->
<!-- ### FACEBOOK ### -->
<span class="fb-like" data-href="https://www.facebook.com/careerfoundryde" data-width="50" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="false"></span>
<!-- ### FACEBOOK END ### -->
</footer>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- external scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<!-- my scripts -->
<script src="js/work.js"></script>
<script src="js/scripts.js"></script>
<!-- google map API -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrpfIIfe2GReOJt7ParLhs69yf7ZzL2Jw&callback=initMap" async defer></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment