Skip to content

Instantly share code, notes, and snippets.

@andrefe90

andrefe90/index.html

Created October 14, 2015 16:11
Show Gist options
  • Save andrefe90/97d88aaa498a52a80295 to your computer and use it in GitHub Desktop.
Save andrefe90/97d88aaa498a52a80295 to your computer and use it in GitHub Desktop.
Download ZIP
Single page Scrolling Navigation (lesson 10)
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>
<!-- 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]-->
<!-- 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">
<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><a href="#contact">Contact</a></li>
<li><a href="#faq">FAQ</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>
</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-->
<div class="container anchor" id="about">
<div class= "header">
<h1>About me</h1>
</div>
<div class= row>
<div class="col-md-4 col-xs-12 image">
<img src="img/beach.jpg" width= "380" height="600" alt="beach">
</div>
<div class="col-md-4 col-xs-12 intro column">
<h2>Looks like an Introduction</h2>
<p>this is the text of my introductory paragraph</p>
</div>
<div class="col-md-4 col-xs-12 skills column">
<h3>My Skills</h3>
<ul id="skill set">
<li>Not web development
<li>not coding of any sort
</ul>
</div>
</div>
<div class="main_text">
<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>
<div class="contaniner anchor" id="work">
<div class="header">
<h1>Work</h>
</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>
<div class= "container-fluid anchor" id="contact">
<div class="contact">
<div class="header">
<h1> Contact </h1>
</div>
<div class="contactbox">
<h4> I am an aspiring web developer or something like that and if you ever feel the need to contact me, feel free to shoot me a message, just use the below address</h1>
</div>
<div class="address">
<h4> <span class="glyphicon glyphicon-cloud"></span> [email protected] <span class="glyphicon glyphicon-cloud"></span> </h2>
</div>
<div class="second contactbox">
<h4> This is again me saying that you should feel free to contact me, I can also give advice in the areas international Business and Finance, because that is what I actually studied</h1>
</div>
</div>
</div>
<div class= "container anchor" id="faq">
<div class="header">
<h1> FAQ </h1>
</div>
<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>
<!--
================================================== -->
<!-- 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>
Raw
styles.css
/* Start Nav Bar */
.nav {
z-index: 1;
}
.navbar-inverse {
background-color: #48485B;
padding: 0 50px;
}
.project-name {
display: inline;
padding-top: 4px;
font-family: 'Open Sans';
color: #fff;
font-size: 2em;
text-decoration: none;
}
/* End Nav Bar */
body {
position: relative;
}
.carousel {
height: 100%;
}
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
.anchor {
padding-top: 50px;
}
/*Start About*/
* { box-sizing: border-box;}
body {
background-color: #fffeea;
color: #34495e;
}
.container {
width: 80%;
margin: 0 auto;
padding-top: 50px;
}
.header h1 {
text-align: center;
margin-bottom: 50px;
}
.main_text {
clear: both;
padding-top: 60px;
}
.skills {
background-color: #5AD4C2;
color: #FFF;
padding-bottom: 490px;
}
/*Start FAQ*/
.container {
padding-top: 50px;
}
.panel-default>.panel-heading {
background-color: yellow;
font-family: 'Open Sans', sans-serif;
}
.panel-body {
font-family: 'Roboto Slab', sans-serif;
}
.hvr-bounce-to-bottom {
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098d1;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {
color: white;
}
.hvr-bounce-to-bottom:hover:before, .hvr-bounce-to-bottom:focus:before, .hvr-bounce-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/*END FAQ*/
/*Start Contact*/
#contact {
background-image: url("../img/contactpagebackground.jpg");
/*Add a background image*/
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
padding:100px;
padding-top: 50px;
height: 400px;
}
/*.address {
width: 60%;
margin: 0 auto;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 450px
}
.address span:hover {
color: #ff0;
text-decoration: none;
}
.second {
padding-top: 0
}
.contactbox {
width: 60%;
margin: 0 auto;
padding-left: 450px;
padding-top: 50px;
}*/
/*END Contact*/
/*Typography*/
h1,
h2,
h3 {
font-family: 'Open Sans', sans-serif;
}
p {
font-family: 'Roboto Slab', serif;
}
.skills column ul li {
font-family: 'Roboto Slab', serif;
}
.intro p {
font-family: 'Open Sans', sans-serif;
font-size: 3em;
font-weight: 100;
-webkit-margin-before: 0;
}
.skills h3 {
text-align: center;
text-transform: uppercase;
}
h1,
p {
color: black;
}
h4 {
color: white;
}
@dogweather
Copy link

Looks nearly perfect. There's some quirky behavior with the Work menu flickering when scrolling. It could be because of the ordering of the elements on the page vs. the ordering in the nav bar.

Also, something that may be affecting the page negatively is this div: https://gist.github.com/andrefe90/97d88aaa498a52a80295#file-index-html-L45 which is supposed to end before the .navbar-collapse.

See: http://careerfoundry.com/steps/single-page-scrolling-navigation#responsive-single-scrolling-navigation-bar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment