Created
November 10, 2015 14:56
-
-
Save Kaiserhaynes/11c9e7b4b9e6d595aaa2 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
| <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> | |
| <title> David Haynes-Guenther</title> | |
| <!-- /link section/ --> | |
| <link href="css/bootstrap.css" type="text/css" rel="stylesheet"> | |
| <link href="css/normalize.css" type="text/css" rel="stylesheet"> | |
| <link href="css/styles.css" type="text/css" rel="stylesheet"> | |
| </head> | |
| <!--/scrollplaybar/--> | |
| <body data-spy="scroll" data-target=".navbar"> | |
| <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.5"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| </script> | |
| <!--/scrollplaybar/--> | |
| <!--/Navigation Bar/--> | |
| <nav class="container anchor" id="process"> | |
| <nav class="navbar navbar-inverse navbar-fixed-top"> | |
| <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 class="logo"> | |
| <a href="#">David Haynes-Guenther</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end navbar-header --> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#aboutme"> About</a></li> | |
| <li><a href="#portfolio">Portfolio</a></li> | |
| <li><a href="#contact"> Contact</a></li> | |
| <li><a href="#faq">Learn More</a></li> | |
| </ul> | |
| </div> | |
| <!-- end navbar collapse --> | |
| </nav> | |
| <!-- end navbar container --> | |
| </nav> | |
| <!-- navbar ends here --> | |
| <!--/HERO IMAGE/--> | |
| <div id="mycarousel" class= "carousel slide"> | |
| <ol class= "carousel-indicators"> | |
| <li data-target="#mycarousel" data-slide-to="0" class="active"></li> | |
| <li data-target="#mycarousel" data-slide-to="1"></li> | |
| <li data-target="#mycarousel" data-slide-to="2"></li> | |
| </ol> | |
| <div class="carousel-inner"> | |
| <div class="item active"> | |
| <img src="img/berlinhero1.jpg" alt="hero1" class= "img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3> Header 1 </h3> | |
| <p> description</p> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="img/heroimg23.png" alt="hero2" class= "img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3> Header 2 </h3> | |
| <p> description</p> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="img/woodhero.jpg" alt="hero3" class="img-responsive"> | |
| <div class="carousel-caption"> | |
| <h3> Header 3 </h3> | |
| <p> description</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a class= "carousel-control left" href="#mycarousel" data-slide="prev"> | |
| <span class="icon-prev"></span> | |
| </a> | |
| <a class= "carousel-control right" href="#mycarousel" data-slide="next"> | |
| <span class="icon-next"></span> | |
| </a> | |
| </div> | |
| <!-- Example row of columns --> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4 col-xs-6"> | |
| <h2>Portfolio Concept</h2> | |
| <p>I am new to web development, so I do not have any projects to display...yet. I do however, have some basic ideas I'd like my portfolio to have. Simple things like an easy to use navigation, so that people could easily look at my work, contact information, I'd like to have linkable images, and relatively few images, as I'd like it to be clutter free. </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>The plan is to dedicate 40 hours a week to learning we development, I'd like to complete this course in three months in order to start my career as quickly as possible.</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>Through this course, I hope to gain the skills necessary to be qualified for an entry level junior web developer position. I am making a career change, web development is an exciting field, ever-changing and expanding. </p> | |
| <p><a class="btn btn-default" href="#" role="button">View details »</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/ABOUT ME/--> | |
| <div class="container" id="aboutme"> | |
| <div class="header"> | |
| <h1>ABOUT ME</h1> | |
| </div> | |
| <div class="image"> | |
| <img src="img/suit.gif" alt="suit"> | |
| </div> | |
| <div class="Intro"> | |
| <h2>Introduction</h2> | |
| <p>Life in a New York alley was never as much fun as in this 1961 </p> | |
| <p>Top Cat! | |
| The most effectual Top Cat! | |
| Whose intellectual close friends get to call him T.C.Providing it's with dignity. | |
| </p> | |
| </div> | |
| <div class="Skills"> | |
| <h3> My skills</h3> | |
| <ul id="skill_list"> | |
| <li> An item in a list</li> | |
| <li> Another item </li> | |
| <li> Item Three</li> | |
| </ul> | |
| </div> | |
| <div class="maintext"> | |
| <h4> My Story</h4> | |
| <p> Top Cat, a clever hustler whose close friends get to call him TC, leads his faithful followers Benny the Ball, Choo Choo, Brain, Fancy-Fancy and Spook in assorted scams, gambling activities and harebrained stunts, all in the pursuit of a fast dollar. Keeping an eye on things is Officer Dibble, a beat cop who has his hands full trying to break up TC's shenanigans.</p> | |
| </div> | |
| <!--/PORTFOLIO/--> | |
| <div class="container" id="portfolio"> | |
| <div class="header"> | |
| <h1>MY WORK</h1> | |
| </div> | |
| <div class="container"> | |
| <div class="row" id="name"> | |
| <div class="col-md-3 col-xs-12">1<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">2<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">3<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">4<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">5<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">6<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">7<img src="img/web1.jpg" class="img-responsive"></div> | |
| <div class="col-md-3 col-xs-6">8<img src="img/web1.jpg" class="img-responsive"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/CONTACT/--> | |
| <div class="container" id="contact"> | |
| <div class="big-paragraph"> | |
| <p>HOW TO CONTACT ME</p> | |
| </div> | |
| <!--/FORM/--> | |
| <div class="container-fluid"> | |
| <div class="row" id="contact-form"> | |
| <div class="col-md-7 col-md-5"> | |
| <div class="text_transbox"> | |
| <p class="contact-text">Contact me for Awesome stuff</p> | |
| <a href="mailto:donovan@donovanclarke.com"><span class="glyphicon glyphicon-envelope"></span></a> | |
| <p class="contact-text">Davidhaynesjoseph@gmail.com</p> | |
| <p class="contact-text"><span class="glyphicon glyphicon-tower"></span> | |
| Niemetzstrasse 7, | |
| Neukolln,Berlin, | |
| 12055 | |
| <p class="contact-text"><span class="glyphicon glyphicon-phone"></span>+49 17680709458</p> | |
| </div> | |
| </div> | |
| <div class="col-md-7 col-md-5"> | |
| <h3>You talking to me?</h3> | |
| <form> | |
| <div class="form-group"> | |
| <label for="name">Name*</label> | |
| <input type="text" class="form-control" id="name" required="required" placeholder="Enter name"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="tel">Telephone number (optional)</label> | |
| <input type="tel" class="form-control" id="tel" required="required" placeholder="Enter phone number (optional)"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email address*</label> | |
| <input type="email" class="form-control" id="email" required="required" placeholder="Enter email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Your message below.</label><br> | |
| <textarea style="resize:none" cols="40" rows="5" placeholder="Your message here" class="form-control" id="message" minlength=5></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <button type="submit" class="btn btn-default">Submit</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/FAQ'S/--> | |
| <div class="container" id="faq"> | |
| <div class="header"> | |
| <h1>FAQ'S</h1> | |
| </div> | |
| <div class="container"> | |
| <h2>Frequently Asked Questions</h2> | |
| </div> | |
| <div class="container"> | |
| <div class="accordion" id="accordion1"> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> | |
| Will the Kick Dummy fall over? | |
| </a> | |
| </div> | |
| <div id="collapseOne" class="accordion-body collapse in"> | |
| <div class="accordion-inner"> | |
| The DVD is an instructional guide that leads you through the moves step by step. Once you have been instructed in the correct actions it is necessary to practice the moves. The DVD includes a great 3 minute routine which forms the basis of your day to day practice. Follow along for just two weeks and you will have learned these moves and made them your automatic response. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> | |
| What should I wear when using Kick Dummy? | |
| </a> | |
| </div> | |
| <div id="collapseTwo" class="accordion-body collapse"> | |
| <div class="accordion-inner"> | |
| Relaxed clothing. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion" id="accordion2"> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsethree"> | |
| How can I store away Kick Dummy? | |
| </a> | |
| </div> | |
| <div id="collapsethree" class="accordion-body collapse in"> | |
| <div class="accordion-inner"> | |
| There is a quick release valve - so the Kick Dummy can be deflated effortlessly and folded away. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion" id="accordion3"> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsefour"> | |
| What's on the DVD? | |
| </a> | |
| </div> | |
| <div id="collapsefour" class="accordion-body collapse in"> | |
| <div class="accordion-inner"> | |
| The DVD is an instructional guide that leads you through the moves step by step. Once you have been instructed in the correct actions it is necessary to practice the moves. The DVD includes a great 3 minute routine which forms the basis of your day to day practice. Follow along for just two weeks and you will have learned these moves and made them your automatic response. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="accordion" id="accordion4"> | |
| <div class="accordion-group"> | |
| <div class="accordion-heading"> | |
| <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapsefive"> | |
| How do I put clothing on Kick Dummy | |
| </a> | |
| </div> | |
| <div id="collapsefive" class="accordion-body collapse in"> | |
| <div class="accordion-inner"> | |
| Dressing your Kick Dummy is optional. If you want your Dummy to wear shorts or cut-off jeans then you must put them on the Dummy before you inflate it. Put shorts on your Dummy in an deflated state and then inflate. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Youtube --> | |
| <div class="container"> | |
| <div class="space"> | |
| <div class="embed-responsive embed-responsive-16by9"> | |
| <iframe width="420" height="315" src="https://www.youtube.com/embed/25DXcFg1TFo" frameborder="0" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- footer --> | |
| <footer> | |
| <div class="social-media"> | |
| <a href="https://twitter.com/kaiserhaynes" class="twitter-follow-button" data-show-count="false">Follow @kaiserhaynes</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-like" data-href="http://google.com" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| David Haynes-Gunther © 2015 | |
| </div> | |
| </footer> | |
| <!-- ============================= --> | |
| <!-- All your JavaScript comes now --> | |
| <!-- ============================= --> | |
| <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 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; | |
| } | |
| body { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| body{ | |
| position: relative; | |
| } | |
| .header h1{ | |
| text-align: center; | |
| } | |
| .image { | |
| display: inline; | |
| float: left; | |
| margin-right: 0.5rem; | |
| } | |
| .column { | |
| display: inline-block; | |
| float: left; | |
| width: 30%; | |
| position: relative; | |
| margin: 0 0.75rem; | |
| } | |
| .intro { | |
| background-color: #fff; | |
| color: #000; | |
| border-radius: 5px; | |
| padding: 0 0.5rem; | |
| } | |
| .skills { | |
| background-color: #fff; | |
| color: #000; | |
| border-radius: 5px; | |
| text-align: center; | |
| } | |
| .main_text { | |
| clear: both; | |
| padding-top: 4rem; | |
| } | |
| .header { | |
| margin-bottom: 40px; | |
| } | |
| body{ | |
| margin:0; | |
| padding:0; | |
| font/size:30px; | |
| } | |
| body{ | |
| background-image: url('../img/bg.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| color: #fff; | |
| } | |
| body{ | |
| margin:0; | |
| padding:0; | |
| font/size:30px; | |
| } | |
| body{ | |
| position: relative; | |
| } | |
| .anchor{ | |
| padding-top: 25px; | |
| } | |
| nav{ | |
| background-color: #000000; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 9999; | |
| width: 100%; | |
| height: 50px; | |
| } | |
| nav ul{ | |
| margin:0; | |
| padding:0; | |
| } | |
| nav ul li{ | |
| display: inline-block; | |
| list-style-type: none; | |
| } | |
| nav >ul >li >a { | |
| color: #fffff0; | |
| background-color:#000000; | |
| display: block; | |
| line-height: 2em; | |
| padding: 0.5em 0.5em; | |
| text-decoration: none; | |
| } | |
| .nav:hover { | |
| color: #ff0; | |
| transition: color 500ms; | |
| -webkit-transition: color 500ms; | |
| } | |
| body{ | |
| background-image: url('../img/bg.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| color: #fff; | |
| } | |
| ./* Background and Colors */ | |
| body { | |
| background-color:#008b8b;; | |
| color: #000000; | |
| } | |
| .skills { | |
| background-color: #5ad4c2; | |
| color: #FFF; | |
| } | |
| .contact { | |
| background-image: url('../img/bg.jpg'); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| color: #fff; | |
| } | |
| /* Positioning */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| p { | |
| -webkit-margin-before: 0; | |
| } | |
| #skill_list { | |
| margin-left: 50px; | |
| } | |
| .main_text { | |
| clear: both; | |
| padding-top: 4rem; | |
| } | |
| .header { | |
| margin-bottom: 40px; | |
| } | |
| .header h1 { | |
| text-align: center; | |
| } | |
| .image { | |
| display: inline-block; | |
| float: left; | |
| margin-right: 0.5rem; | |
| } | |
| .column { | |
| display: inline-block; | |
| float: left; | |
| width: 30%; | |
| position: relative; | |
| margin: 0 0.75rem; | |
| } | |
| .big-paragraph { | |
| margin: 10% 20% 0 20%; | |
| text-align: center; | |
| } | |
| .email-address { | |
| text-transform: uppercase; | |
| text-align: center; | |
| } | |
| .small-paragraph { | |
| margin: 2.5% 20% 0 20%; | |
| text-align: center; | |
| font-style: italic; | |
| font-weight: 300; | |
| } | |
| .address { | |
| margin-top: 2.5%; | |
| } | |
| .address > h1 { | |
| margin: auto; | |
| text-align: center; | |
| } | |
| /* Typography */ | |
| h1,h2,h3 { | |
| font-family: Futura, Helvetica, Arial, sans-serif; | |
| } | |
| .intro p { | |
| font-family: Futura, Helvetica, Arial, sans-serif; | |
| font-size: 3em; | |
| font-weight: 100; | |
| } | |
| .skills h3 { | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .maintext { | |
| clear: both; | |
| padding-top: 4rem; | |
| } | |
| .header { | |
| margin-bottom: 40px; | |
| } | |
| #contact { | |
| background-image: url("../img/contact.jpg"); | |
| background-size: cover; | |
| color: white; | |
| background-attachment: fixed; | |
| } | |
| .contact-header h1 { | |
| text-align: center; | |
| font-size: 3.5em; | |
| padding-top: 20px; | |
| margin-bottom: 0px; | |
| } | |
| .contact-header p { | |
| text-align: center; | |
| font-size: 1.3em; | |
| margin-top: 5px; | |
| font-weight: 200; | |
| } | |
| .space { | |
| padding-top: 120px; | |
| } | |
| .contact-text { | |
| color: white; | |
| padding-top: 1px; | |
| padding-bottom: 1px; | |
| font-size: 1em; | |
| font-weight: 100; | |
| text-align: center; | |
| } | |
| div.text_transbox { | |
| background-color: black; | |
| border-radius: 20px; | |
| opacity: 0.8; | |
| padding-top: 1px; | |
| padding-left: 2px; | |
| padding-right: 2px; | |
| padding-bottom: 6px; | |
| width: 95%; | |
| margin-left: 1%; | |
| margin-top: 15%; | |
| } | |
| div.text_transbox a { | |
| color: white; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-size: 1.2em; | |
| font-weight: 500; | |
| padding-bottom: 1px; | |
| padding-left: 50%; | |
| text-align: center; | |
| } | |
| div.text_transbox a:hover { | |
| color: #00CC99; | |
| text-decoration: none; | |
| transition: color 600ms; | |
| -webkit-transition: color 600ms; | |
| } | |
| /* Footer */ | |
| footer .copyright { | |
| float: left; | |
| } | |
| footer .social-media { | |
| float: right; | |
| } | |
| footer .social-media .fb-like { | |
| float: right; | |
| } | |
| /* Form */ | |
| .form-control { | |
| width: 90%; | |
| } | |
| .btn-default { | |
| opacity: 0.7; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment