Skip to content

Instantly share code, notes, and snippets.

@airen

airen/Fullpage.html

Created June 20, 2012 09:51
Show Gist options
  • Save airen/2959128 to your computer and use it in GitHub Desktop.
Save airen/2959128 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>CodePen &middot; A Pen by airen</title>
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css">
<style>
html, body { height:100%; }
*{ margin:0; padding:0; }
body {
background:#c0c0c0 url(bg.jpg) repeat;
color:#464339;
font:400 12px/1.3 Arial, Helvetica, sans-serif;
}
/*--controls--*/
.leftSide {
margin: 20px auto;
position:relative;
width:590px;
z-index:2;
}
.panel {
height:auto;
position:relative;
width:560px;
}
.panel.one {
z-index:50;
}
.panel.two {
z-index:90;
}
.panel.three {
z-index:50;
}
.panelWrap {
padding-top: 10px;
}
.panelTitle,
.sliderMinus,
.sliderContainer,
.sliderPlus,
.largeInputContainer {
display: inline-block;
vertical-align: middle;
}
.panelContent {
background-color:#ddd;
background-image:-moz-linear-gradient(top, #eeeeee, #cccccc);
background-image:-ms-linear-gradient(top, #eeeeee, #cccccc);
background-image:-o-linear-gradient(top, #eeeeee, #cccccc);
background-image:-webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image:linear-gradient(top, #eeeeee, #cccccc);
border:1px solid #999;
border-top:0;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625);
height:50px;
margin:0 10px;
padding:0 15px;
position:relative;
width:515px;
}
.panelContent:after {
content:"";
position:absolute;
}
.panel.one .panelContent {
border-radius:5px 5px 0 0;
border-top:1px solid #999;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625),
0 -1px rgba(127, 127, 127, 0.25),
0 -2px rgba(127, 127, 127, 0.25),
0 -3px rgba(127, 127, 127, 0.0625);
}
.panel.three .panelContent {
border-radius:0 0 5px 5px;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625),
0 1px rgba(127, 127, 127, 0.25),
0 2px rgba(127, 127, 127, 0.125),
0 3px rgba(127, 127, 127, 0.0625);
height:52px;
}
.panelTitle {
width:93px;
display: inline-block;
vertical-align: middle;
}
.panelTitle p {
font-weight:700;
font-weight:400\0/;
text-shadow:0 1px #fff;
}
.sliderContainer {
margin:0 5px;
position:relative;
}
.slider {
background-color:#8d8374;
border-radius:5px;
box-shadow:
0 0 1px #000 inset,
0 3px 3px -3px #000 inset,
0 1px 1px -1px #fff;
eight:10px;
margin-top:1px;
position:relative;
width:304px;
}
.sliderThumb {
background-color:#b7b7b7;
background-image:-moz-linear-gradient(left,#ccc,#9b9b9b);
background-image:-ms-linear-gradient(left,#ccc,#9b9b9b);
background-image:-o-linear-gradient(left,#ccc,#9b9b9b);
background-image:-webkit-linear-gradient(left,#ccc,#9b9b9b);
background-image:linear-gradient(left,#ccc,#9b9b9b);
border:1px solid #999;
border-radius:10px;
box-shadow:2px 3px 5px -5px #000;
cursor:pointer;
height:19px;
left:45px;
position:absolute;
top:-6px;
width:49px;
}
.panel.two .sliderThumb {
left: 80px;
}
.panel.three .sliderThumb {
left: 25px;
}
.sliderThumb:before {
background-color:#ddd;
background-image:-moz-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-ms-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-o-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-webkit-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:linear-gradient(left,#9c9c9c,#c8c8c8);
border-radius:10px;
content:"";
height:19px;
left:10px;
position:absolute;
top:0;
width:30px;
}
.sliderThumb:after {
background-color:#eee;
background-image:-moz-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-ms-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-o-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-webkit-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-size:3px auto;
content:"";
height:19px;
left:21px;
position:absolute;
top:0;
width:9px;
}
.sliderMinus {
color:#8d8374;
font-size:29px;
margin-top:-5px;
text-shadow:0 1px #fff;
}
.sliderPlus {
color:#8d8374;
font-size:20px;
margin-right:16px;
text-shadow:0 1px #fff;
}
.largeInputContainer {
background-color:#e8e8e8;
border:1px solid #c1c1c1;
border-radius:7px;
box-shadow: 0 0 3px rgba(255, 255, 255, .2), 0 3px 5px -5px #666 inset;
font-size:18px;
font-weight:700;
height:27px;
padding:0;
width:43px;
}
.largeInputContainer:hover {
box-shadow:0 0 7px rgba(255, 255, 255, .7), 0 3px 5px -5px #666 inset;
}
.largeInput {
background-color:transparent;
border:none; color:#464339;
font:700 18px Arial, Helvetica, sans-serif;
height:27px;
margin:0;
padding:0;
text-align:center;
width:43px;
}
.openMore {
background-color:#b7b7b7;
background-image:-moz-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-ms-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-o-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-webkit-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:linear-gradient(top, #c8c8c8, #a5a5a5);
border:1px solid #666;
border-radius:9px;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:-6px;
top:27px;
width:16px;
}
.openMoreText {
font-size:17px;
font-weight:700;
line-height:16px;
padding-left:3px;
text-shadow:0 1px rgba(255, 255, 255, 0.3);
}
.openMore { top:15px; }
.panel.three .panelContent {
border-radius: 0 0 5px 5px;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.063),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.063),
0 1px rgba(127, 127, 127, 0.25),
0 2px rgba(127, 127, 127, 0.125),
0 3px rgba(127, 127, 127, 0.063);
eight: 52px;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<div class="leftSide">
<div class="panel one">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText">+</span>
</div>
<div class="panelWrap">
<div class="panelTitle"><p>Border-radius</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="45"/>
</div>
</div>
</div>
</div>
<div class="panel two">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText">+</span>
</div>
<div class="panelWrap"<
<div class="panelTitle"><p>Box-Shadow</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="80"/>
</div>
</div>
</div>
</div>
<div class="panel three">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText"<+>/span>
</div>
<div class="panelWrap">
<div class="panelTitle"><p>Text-shadow</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="25"/>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/airen/pen/1/1">Edit this Pen</a>
</div>
</body>
</html>
Raw
index.haml
<div class="leftSide">
<div class="panel one">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText">+</span>
</div>
<div class="panelWrap">
<div class="panelTitle"><p>Border-radius</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="45"/>
</div>
</div>
</div>
</div>
<div class="panel two">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText">+</span>
</div>
<div class="panelWrap"<
<div class="panelTitle"><p>Box-Shadow</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="80"/>
</div>
</div>
</div>
</div>
<div class="panel three">
<div class="panelContent">
<div class="openMore">
<span class="openMoreText"<+>/span>
</div>
<div class="panelWrap">
<div class="panelTitle"><p>Text-shadow</p></div>
<div class="sliderMinus">-</div>
<div class="sliderContainer">
<div id="brSlider" class="slider">
<div id="brThumb" class="sliderThumb"></div>
</div>
</div>
<div class="sliderPlus">+</div>
<div class="largeInputContainer">
<input id="brInput" class="largeInput" autocomplete="off" type="text" value="25"/>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
html, body { height:100%; }
*{ margin:0; padding:0; }
body {
background:#c0c0c0 url(bg.jpg) repeat;
color:#464339;
font:400 12px/1.3 Arial, Helvetica, sans-serif;
}
/*--controls--*/
.leftSide {
margin: 20px auto;
position:relative;
width:590px;
z-index:2;
}
.panel {
height:auto;
position:relative;
width:560px;
}
.panel.one {
z-index:50;
}
.panel.two {
z-index:90;
}
.panel.three {
z-index:50;
}
.panelWrap {
padding-top: 10px;
}
.panelTitle,
.sliderMinus,
.sliderContainer,
.sliderPlus,
.largeInputContainer {
display: inline-block;
vertical-align: middle;
}
.panelContent {
background-color:#ddd;
background-image:-moz-linear-gradient(top, #eeeeee, #cccccc);
background-image:-ms-linear-gradient(top, #eeeeee, #cccccc);
background-image:-o-linear-gradient(top, #eeeeee, #cccccc);
background-image:-webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image:linear-gradient(top, #eeeeee, #cccccc);
border:1px solid #999;
border-top:0;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625);
height:50px;
margin:0 10px;
padding:0 15px;
position:relative;
width:515px;
}
.panelContent:after {
content:"";
position:absolute;
}
.panel.one .panelContent {
border-radius:5px 5px 0 0;
border-top:1px solid #999;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625),
0 -1px rgba(127, 127, 127, 0.25),
0 -2px rgba(127, 127, 127, 0.25),
0 -3px rgba(127, 127, 127, 0.0625);
}
.panel.three .panelContent {
border-radius:0 0 5px 5px;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.0625),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.0625),
0 1px rgba(127, 127, 127, 0.25),
0 2px rgba(127, 127, 127, 0.125),
0 3px rgba(127, 127, 127, 0.0625);
height:52px;
}
.panelTitle {
width:93px;
display: inline-block;
vertical-align: middle;
}
.panelTitle p {
font-weight:700;
font-weight:400\0/;
text-shadow:0 1px #fff;
}
.sliderContainer {
margin:0 5px;
position:relative;
}
.slider {
background-color:#8d8374;
border-radius:5px;
box-shadow:
0 0 1px #000 inset,
0 3px 3px -3px #000 inset,
0 1px 1px -1px #fff;
eight:10px;
margin-top:1px;
position:relative;
width:304px;
}
.sliderThumb {
background-color:#b7b7b7;
background-image:-moz-linear-gradient(left,#ccc,#9b9b9b);
background-image:-ms-linear-gradient(left,#ccc,#9b9b9b);
background-image:-o-linear-gradient(left,#ccc,#9b9b9b);
background-image:-webkit-linear-gradient(left,#ccc,#9b9b9b);
background-image:linear-gradient(left,#ccc,#9b9b9b);
border:1px solid #999;
border-radius:10px;
box-shadow:2px 3px 5px -5px #000;
cursor:pointer;
height:19px;
left:45px;
position:absolute;
top:-6px;
width:49px;
}
.panel.two .sliderThumb {
left: 80px;
}
.panel.three .sliderThumb {
left: 25px;
}
.sliderThumb:before {
background-color:#ddd;
background-image:-moz-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-ms-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-o-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:-webkit-linear-gradient(left,#9c9c9c,#c8c8c8);
background-image:linear-gradient(left,#9c9c9c,#c8c8c8);
border-radius:10px;
content:"";
height:19px;
left:10px;
position:absolute;
top:0;
width:30px;
}
.sliderThumb:after {
background-color:#eee;
background-image:-moz-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-ms-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-o-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:-webkit-linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-image:linear-gradient(left,#999, #999 1px, #d1d1d1 1px, #d1d1d1 2px, #b7b7b7 2px, #b7b7b7);
background-size:3px auto;
content:"";
height:19px;
left:21px;
position:absolute;
top:0;
width:9px;
}
.sliderMinus {
color:#8d8374;
font-size:29px;
margin-top:-5px;
text-shadow:0 1px #fff;
}
.sliderPlus {
color:#8d8374;
font-size:20px;
margin-right:16px;
text-shadow:0 1px #fff;
}
.largeInputContainer {
background-color:#e8e8e8;
border:1px solid #c1c1c1;
border-radius:7px;
box-shadow: 0 0 3px rgba(255, 255, 255, .2), 0 3px 5px -5px #666 inset;
font-size:18px;
font-weight:700;
height:27px;
padding:0;
width:43px;
}
.largeInputContainer:hover {
box-shadow:0 0 7px rgba(255, 255, 255, .7), 0 3px 5px -5px #666 inset;
}
.largeInput {
background-color:transparent;
border:none; color:#464339;
font:700 18px Arial, Helvetica, sans-serif;
height:27px;
margin:0;
padding:0;
text-align:center;
width:43px;
}
.openMore {
background-color:#b7b7b7;
background-image:-moz-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-ms-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-o-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:-webkit-linear-gradient(top, #c8c8c8, #a5a5a5);
background-image:linear-gradient(top, #c8c8c8, #a5a5a5);
border:1px solid #666;
border-radius:9px;
cursor:pointer;
display:block;
height:16px;
position:absolute;
right:-6px;
top:27px;
width:16px;
}
.openMoreText {
font-size:17px;
font-weight:700;
line-height:16px;
padding-left:3px;
text-shadow:0 1px rgba(255, 255, 255, 0.3);
}
.openMore { top:15px; }
.panel.three .panelContent {
border-radius: 0 0 5px 5px;
box-shadow:
1px 0 rgba(127, 127, 127, 0.25),
2px 0 rgba(127, 127, 127, 0.125),
3px 0 rgba(127, 127, 127, 0.063),
-1px 0 rgba(127, 127, 127, 0.25),
-2px 0 rgba(127, 127, 127, 0.125),
-3px 0 rgba(127, 127, 127, 0.063),
0 1px rgba(127, 127, 127, 0.25),
0 2px rgba(127, 127, 127, 0.125),
0 3px rgba(127, 127, 127, 0.063);
eight: 52px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment