Skip to content

Instantly share code, notes, and snippets.

@edhiley

edhiley/Fullpage.html

Created April 27, 2012 15:58
Show Gist options
  • Save edhiley/2510372 to your computer and use it in GitHub Desktop.
Save edhiley/2510372 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
Fullpage.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Code Pen &middot; 1</title>
<style>
body {
position: absolute; font-family: helvetica;
background: #bbbbbb;
background-image: url("http://i48.tinypic.com/doq4ag.jpg"), url("http://i49.tinypic.com/23ubswn.jpg");
background-repeat: repeat-x, repeat;
}
h1, h2, h3 { text-align: center; }
header {
display: -webkit-box;
-webkit-box-orient: horizontal;
background: rgb(40,40,40);
color: white;
}
header span { width: 200px; display: block;}
header > *:before {
content: "";
position: absolute;
width: 3px;
height: 900px;
background-color: rgb(40,40,40);
opacity: 0.5;
z-index: -1;
}
section {
display: -webkit-box;
-webkit-box-orient: vertical;
}
section span, header span {
border-radius: 0px;
padding: 5px;
}
section span {
display: block;
margin-bottom: 5px;
-webkit-box-shadow: 2px 2px 2px 0px rgba(20, 20, 20, 0.5);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(173,173,173)),
color-stop(0.5, rgb(230,230,230))
);}
span.p1-a { width: 400px; }
span.p1-b { margin-left: 250px; width: 200px; }
span.p1-c { margin-left: 400px; width: 200px; }
span.p1-d { margin-left: 600px; width: 400px; }
span.p2-a { margin-left: 200px; width: 100px; } span.p2-b { margin-left: 400px; width: 150px; }
</style>
</head>
<body>
<h1>Development roadmap</h1>
<header>
<span>April</span>
<span>May</span>
<span>June</span>
<span>July</span>
<span>August</span>
</header>
<section>
<h3>Programme 1</h3>
<span class="p1-a">App 1</span>
<span class="p1-b">App 2</span>
<span class="p1-c">App 3</span>
<span class="p1-d">Future app?</span>
</section>
<section>
<h3>Programme 2</h3>
<span class="p2-a">App 1</span>
<span class="p2-b">App 2</span>
</section>
</body>
</html>
Raw
index.html
<h1>Development roadmap</h1>
<header>
<span>April</span>
<span>May</span>
<span>June</span>
<span>July</span>
<span>August</span>
</header>
<section>
<h3>Programme 1</h3>
<span class="p1-a">App 1</span>
<span class="p1-b">App 2</span>
<span class="p1-c">App 3</span>
<span class="p1-d">Future app?</span>
</section>
<section>
<h3>Programme 2</h3>
<span class="p2-a">App 1</span>
<span class="p2-b">App 2</span>
</section>
Raw
style.css
body {
position: absolute; font-family: helvetica;
background: #bbbbbb;
background-image: url("http://i48.tinypic.com/doq4ag.jpg"), url("http://i49.tinypic.com/23ubswn.jpg");
background-repeat: repeat-x, repeat;
}
h1, h2, h3 { text-align: center; }
header {
display: -webkit-box;
-webkit-box-orient: horizontal;
background: rgb(40,40,40);
color: white;
}
header span { width: 200px; display: block;}
header > *:before {
content: "";
position: absolute;
width: 3px;
height: 900px;
background-color: rgb(40,40,40);
opacity: 0.5;
z-index: -1;
}
section {
display: -webkit-box;
-webkit-box-orient: vertical;
}
section span, header span {
border-radius: 0px;
padding: 5px;
}
section span {
display: block;
margin-bottom: 5px;
-webkit-box-shadow: 2px 2px 2px 0px rgba(20, 20, 20, 0.5);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(173,173,173)),
color-stop(0.5, rgb(230,230,230))
);}
span.p1-a { width: 400px; }
span.p1-b { margin-left: 250px; width: 200px; }
span.p1-c { margin-left: 400px; width: 200px; }
span.p1-d { margin-left: 600px; width: 400px; }
span.p2-a { margin-left: 200px; width: 100px; } span.p2-b { margin-left: 400px; width: 150px; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment