Permalink
Browse files

add earth

  • Loading branch information...
2 parents df2147a + a5fe4d6 commit d621f417f42c909079a474c16702efb896b04fea Aleksandr Vladimirskiy committed Apr 8, 2012
View
@@ -1,4 +1,4 @@
Butchershop Creative UI Experiments
http://butchershopcreative.github.com/ui-experiments/
-1. Earth
+1. Earth Curtains
View
@@ -0,0 +1,263 @@
+
+/* Curtain.js - Example page */
+
+/* RESET */
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
+
+/* Clearfix */
+.cf:before,
+.cf:after {
+ content:"";
+ display:table;
+}
+.cf:after {clear:both;}
+.cf { zoom:1;}
+
+/* Base Style */
+body {
+ font: 16px/1.2 Arial, "Helvetica Neue", "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+ color: #555;
+}
+
+a{color:#AAA}
+a:hover{color:#CCC}
+img{max-width:100%}
+h1{font-size:30px;margin-bottom:16px;color:#111;}
+h2{font-size:26px;margin-bottom:12px;color:#111;padding-top:8px;}
+p{margin-bottom:12px}
+pre,code{color:#666;font-family:"Andale Mono", AndaleMono, monospace;font-size:12px}
+h3{font-size:20px;margin-bottom:12px;color:#111;padding-top:8px;}
+em{font-style:italic}
+pre {
+ display: block;
+ margin-bottom: 12px;
+ background-color: #F8F8F8;
+ border: 1px solid #CCC;
+ font-size: 13px;
+ line-height: 19px;
+ overflow: auto;
+ padding: 6px 10px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+}
+
+/* Sliding panels */
+.curtains>li {
+ box-shadow: 0 1px 14px 3px #333;
+}
+
+.curtains>li:nth-child(2n+1) {
+ background: #EEE;
+}
+
+.fixed {
+ position: fixed;
+ top: 0px;
+ left: 40px;
+ width: 200px;
+ background-color: #000;
+ padding: 100px 10px 100px 10px;
+ color: #FFF;
+ font-family: Georgia;
+ font-size: 12px;
+ text-align: center;
+
+}
+
+.content-wrapper {
+ padding: 150px 100px 100px 300px;
+}
+
+.steps-wrapper {
+ padding: 100px;
+}
+ .width50{
+ float:left;
+ width:50%;
+ padding:0 10px;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ box-sizing:border-box;
+ }
+
+.step-list {display:block;}
+.step-list li {display: block;}
+
+.number-wrapper {
+ position: absolute;
+ font-size: 126px;
+ width: 63px;
+ height: 151px;
+ top: 50%;
+ left: 50%;
+ margin-left: -31px;
+ margin-top: -75px;
+}
+
+.download-wrapper {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 30px;
+ top: 50%;
+ margin-top: -15px;
+ text-align: center;
+}
+
+.cover-wrapper img{
+ position:absolute;
+ top:0;
+ left:0;
+ /* Preserve aspet ratio */
+ min-width:100%;
+ min-height:100%;
+ max-width:none;
+}
+
+ .cover-wrapper span{
+ position:absolute;
+ top:50%;left:0;right:0;
+ height:20px;line-height:30px;
+ text-align:center;
+ font-size:30px;
+ font-family: Georgia;
+ margin-top:-10px;
+ color:#000;
+ text-shadow:0 1px 1px #999;
+ }
+
+/* Plugin Presentation */
+.presentation-wrapper {
+ width: 500px;
+ height: 514px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -257px;
+ margin-left: -250px;
+}
+
+.presentation-wrapper .btns{
+ padding:20px 0;
+}
+
+.presentation-wrapper em {
+ display: block;
+ margin-top: 14px;
+ color: #999;
+}
+
+/* Plugin instruction */
+.documentation-wrapper {
+ width: 600px;
+ margin: 0 auto;
+ padding: 40px 0
+}
+
+.documentation-wrapper ul {
+ list-style-type: square;
+ margin-left: 40px;
+ margin-bottom: 12px;
+}
+
+/* right menu */
+.menu {
+ z-index: 2;
+ position: fixed;
+ bottom:0;
+ text-align: right;
+ left: 0;
+}
+
+.menu button {
+ display: block;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ background-color: #383838;
+ position: relative;
+ text-align: center;
+ color: #e6e6e6;
+ text-decoration: none;
+ border:0;
+ cursor:pointer;
+}
+
+.menu a:hover {
+ color: #FFF;
+}
+
+.menu a:active {
+ background-color: #333;
+}
+
+/* Twitter follow */
+.follow {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 14px;
+ text-align: center;
+ color: #3e90e2;
+}
+
+.follow:hover {
+ color: #285c93;
+}
+
+/* Download button (from twitter bootstrap) */
+a.btn{
+ color: white;
+ text-decoration: none;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);
+ background-color: #383838;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(top, #555 0%, #383838 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#383838));
+ background-image: -webkit-linear-gradient(top, #555 0%,#383838 100%);
+ background-image: -ms-linear-gradient(top, #555 0%,#383838 100%);
+ background-image: -o-linear-gradient(top, #555 0%,#383838 100%);
+ background-image: linear-gradient(top, #555 0%,#383838 100%);
+ border: 1px solid #292929;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .4);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .4);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .4);
+ font-size: 18px;
+ padding: 8px 18px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+}
+a.btn span{opacity:.6;}
+a.btn:hover{
+ background-image: -moz-linear-gradient(top, #404040 0%, #383838 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(100%,#383838));
+ background-image: -webkit-linear-gradient(top, #404040 0%,#383838 100%);
+ background-image: -ms-linear-gradient(top, #404040 0%,#383838 100%);
+ background-image: -o-linear-gradient(top, #404040 0%,#383838 100%);
+ background-image: linear-gradient(top, #404040 0%,#383838 100%);
+}
+a.btn:active{
+ background-image: -moz-linear-gradient(top, #222 0%, #383838 100%);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#383838));
+ background-image: -webkit-linear-gradient(top, #222 0%,#383838 100%);
+ background-image: -ms-linear-gradient(top, #222 0%,#383838 100%);
+ background-image: -o-linear-gradient(top, #222 0%,#383838 100%);
+ background-image: linear-gradient(top, #222 0%,#383838 100%);
+}
+
+a.btn.btn-small{
+ font-size:14px;
+ padding:5px 11px;
+}
+
+.zissou {
+ font-size: 60px;
+ font-family: Georgia;
+ text-align: center;
+ display: block;
+ background-color: #000;
+ color: #FFF;
+ margin-top: 50px;
+ }
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -0,0 +1,24 @@
+html{
+ height: 100%;
+ overflow-x: hidden;
+}
+
+.curtains{
+ width: 100%;
+ z-index:1;
+ position:relative;
+}
+
+.curtains>li{
+ background: white;
+ position: fixed;
+ display:block;
+ top: 0;
+ left: 0;
+ width: 100%;
+ min-height: 100%;
+ overflow: hidden;
+ z-index:1;
+ -webkit-backface-visibility:hidden; /* Remove if you got display issues */
+}
+.curtains>li:first-child{z-index:2;}
Oops, something went wrong.

0 comments on commit d621f41

Please sign in to comment.