Skip to content

Instantly share code, notes, and snippets.

@Kaiserhaynes

Kaiserhaynes/onepagescroll.html

Created November 7, 2015 18:27
Show Gist options
  • Save Kaiserhaynes/1c581e9139fd742cba4f to your computer and use it in GitHub Desktop.
Save Kaiserhaynes/1c581e9139fd742cba4f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
onepagescroll.html
<!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>
<body>
<!--/scrollplaybar/-->
<body data-spy="scroll" data-target=".navbar">
<!--/Navigation Bar/-->
<div class="container anchor" id="process"></div>
<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 class="logo">
<a href="#">David Haynes-Guenther</a>
</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 -->
</div>
<!-- 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 &raquo;</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 &raquo;</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 &raquo;</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>
<div>
<h1 class="email-address"><span class="glyphicon glyphicon-envelope"></span>
Davidhaynesjoseph@gmail.com
</h1>
</div>
<p class="small-paragraph">Call me for awesome stuff
</p>
<div class="address">
<h1><span class="glyphicon glyphicon-tower"></span>
Niemetzstrasse 7,
</h1>
<h1>Neukolln,Berlin</h1>
<h1>12055</h1>
<h1><span class="glyphicon glyphicon-phone"></span>+49 17680709458</h1>
</div>
<p class="small-paragraph">Thank You! Come Again.</p>
<div class="social">
<button>
<a href="http://facebook.com" target="_blank">Facebook</a>
</button>
<button>
<a href="https://www.linkedin.com" target="_blank">LinkedIn</a>
</button>
</div>
<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="accordion2">
<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="accordion2">
<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="accordion2">
<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>
<!-- Smooth Scrolling -->
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquerz/1.11.3/jquerz.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Raw
styles.css
* {
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;
}
.social > button {
background-color: #000;
border: 2px #fff solid;
height: 2rem;
width: 6rem;
}
.social > button > a{
text-decoration: none;
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;
}
.social {
text-align: center;
margin-top: 2.5%;
}
.social > button {
margin: 0 0.25em;
}
/* 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-attachment:fixed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment