Created
December 3, 2014 18:04
-
-
Save sashancruise/509b65bc3b591b897686 to your computer and use it in GitHub Desktop.
A css file for a tumblr theme for a single page website.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: "ROCK"; | |
src: url(../fonts/ROCK.ttf); | |
} | |
#wrapper { | |
min-height:100%; | |
margin: 0 auto; | |
} | |
#footer { | |
height: 140px; | |
width: 100%; | |
background-color: #C90101; | |
clear: both; | |
color: #fff; | |
font-size: 22px; | |
} | |
#footer-content { | |
width: 670px; | |
height: 60px; | |
margin: 0 auto; | |
text-align: left; | |
padding-left: 110px; | |
padding-top: 13px; | |
background-image: url(images/icon.png); | |
background-repeat: no-repeat; | |
background-position: 30px -770px; | |
background-size: 45px; | |
position: relative; | |
top: 30px; | |
} | |
#footer-content p { | |
font-size: 14px; | |
} | |
#footer-content:before { | |
content: ''; | |
background-image: url(images/icon.png); | |
background-repeat: no-repeat; | |
background-position: 0 -380px; | |
background-size: 100%; | |
height: 20px; | |
width: 20px; | |
display: inline-block; | |
} | |
#content { | |
float: left; | |
margin-left: 90px; | |
width: 100%; | |
z-index: 99; | |
} | |
[data-role="card"] { | |
margin: 0 auto; | |
vertical-align:middle; | |
overflow: hidden; | |
position: relative; | |
padding-right: 75px; | |
} | |
.none { | |
display: none; | |
} | |
#nav { | |
width: 50px; | |
float: left; | |
} | |
#nav ul { | |
width: 50px; | |
margin-left: 50px; | |
position: fixed; | |
} | |
#nav ul li { | |
height: 50px; | |
width: 50px; | |
cursor: pointer; | |
} | |
#nav_main,#nav_bullshit,#nav_ceo,#nav_markting,#nav_it,#nav_planning,#nav_finance { | |
background-image: url(images/icon.png); | |
background-size: 100%; | |
} | |
#nav_main {background-position: 0px 0px;} | |
#nav_bullshit {background-position: 0px -100px;} | |
#nav_ceo {background-position: 0px -200px;} | |
#nav_markting {background-position: 0px -300px;} | |
#nav_it {background-position: 0px -400px;} | |
#nav_planning {background-position: 0px -500px;} | |
#nav_finance {background-position: 0px -600px;} | |
#nav_main.current {background-position: 0px -50px;} | |
#nav_bullshit.current {background-position: 0px -150px;} | |
#nav_ceo.current {background-position: 0px -250px;} | |
#nav_markting.current {background-position: 0px -350px;} | |
#nav_it.current {background-position: 0px -450px;} | |
#nav_planning.current {background-position: 0px -550px;} | |
#nav_finance.current {background-position: 0px -650px;} | |
#logo { | |
margin: 0 auto; | |
width: 558px; | |
background-image: url(images/big-logo.png); | |
background-size: 30%; | |
background-position: center 5px; | |
} | |
#logo p { | |
font-size: 36px; | |
padding-top: 320px; | |
} | |
#logo span { | |
font-size: 22px; | |
} | |
#logo:after { | |
content: ""; | |
background-image: url(images/icon.png); | |
background-position: center -750px; | |
background-size: 50%; | |
background-repeat: no-repeat; | |
margin-left: 50%; | |
margin-top: 88px; | |
left: -75px; | |
display: block; | |
width: 100px; | |
height: 100px; | |
z-index: 1; | |
position: absolute; | |
} | |
#scroll { | |
margin: 120px 50% -60px; | |
width: 100px; | |
height: 30px; | |
line-height: 30px; | |
left: -75px; | |
background-color: #fff; | |
z-index: 99; | |
position: absolute; | |
cursor: pointer; | |
} | |
#bullshit span { | |
color: #C90101; | |
} | |
#weSay { | |
font-size: 14px; | |
height: 420px; | |
width: 174px; | |
margin: 0 auto; | |
} | |
#weSay:before { | |
content: ""; | |
background-image: url(images/icon.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: 0px -560px; | |
height: 40px; | |
width: 40px; | |
display: block; | |
margin: -35px -75px; | |
} | |
.person { | |
font-size: 14px; | |
text-align: left; | |
margin: 0 auto; | |
left: -346px; | |
margin-left: 50%; | |
width: 582px; | |
height: 250px; | |
-webkit-transition: all 2s; | |
-moz-transition: all 2s; | |
-o-transition: all 2s; | |
-ms-transition: all 2s; | |
transition: all 2s; | |
position: absolute; | |
} | |
.person p{ | |
font-size: 30px; | |
} | |
.person span,.hiring span { | |
color: #C90101; | |
} | |
.hiring { | |
font-size: 14px; | |
position: absolute; | |
} | |
.hiring h1 { | |
font-size: 26px; | |
} | |
.hiring h2 { | |
font-size: 20px; | |
} | |
.menu { | |
height: 100px; | |
} | |
.menu a { | |
padding-right: 5px; | |
} | |
.person:before { | |
content: ""; | |
background-image: url(images/icon.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: 0px -485px; | |
height: 35px; | |
width: 35px; | |
display: block; | |
margin: 35px 0px; | |
} | |
#suYao:after { | |
content: ""; | |
background-image: url(images/Norman.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 200px; | |
width: 200px; | |
display: block; | |
margin: -185px 380px; | |
} | |
#debbie { | |
padding-left: 100px;} | |
#baiYanYu { | |
padding-left: 80px; | |
} | |
#zhangBiao { | |
padding-left: 20px; | |
} | |
#xiaQing,#gaoKe{ | |
padding-left: 250px; | |
} | |
#abby { | |
padding-left: 380px; | |
} | |
#gaoKe:after { | |
content: ""; | |
background-image: url(images/Jason.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 250px; | |
width: 200px; | |
display: block; | |
margin: -210px -270px; | |
} | |
#huangPingPing p{ | |
font-size: 26px; | |
} | |
#debbie:after { | |
content: ""; | |
background-image: url(images/debbie.png); | |
background-size: 88%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 300px; | |
width: 200px; | |
display: block; | |
margin: -252px 388px; | |
} | |
#abby:after { | |
content: ""; | |
background-image: url(images/abby.png); | |
background-size: 88%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 300px; | |
width: 300px; | |
display: block; | |
margin: -252px -340px; | |
} | |
#zhangBiao:after { | |
content: ""; | |
background-image: url(images/Douglas.png); | |
background-size: 68%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 217px; | |
width: 200px; | |
display: block; | |
margin: -185px 400px; | |
} | |
#xiaQing:after { | |
content: ""; | |
background-image: url(images/sonia.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 250px; | |
width: 200px; | |
display: block; | |
margin: -180px -270px; | |
} | |
#fanTing:after { | |
content: ""; | |
background-image: url(images/oscar.png); | |
background-size: 68%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 200px; | |
width: 200px; | |
display: block; | |
margin: -185px 496px; | |
} | |
#baiYanYu:after { | |
content: ""; | |
background-image: url(images/Sarah.png); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 300px; | |
width: 240px; | |
display: block; | |
margin: -200px 385px; | |
} | |
#huangPingPing:after { | |
content: ""; | |
background-image: url(images/huangpingping.png); | |
background-size: 68%; | |
background-repeat: no-repeat; | |
background-position: center left; | |
height: 217px; | |
width: 200px; | |
display: block; | |
margin: -185px 400px; | |
} | |
.hr { | |
text-align: left; | |
margin: 0 auto; | |
width: 735px; | |
position: relative; | |
} | |
/*animation*/ | |
.wrapper-animation { | |
-webkit-transition:all 1s; | |
-moz-transition:all 1s; | |
-o-transition:all 1s; | |
transition:all 1s; | |
height: 600px; | |
overflow: hidden; | |
} | |
#abby,#debbie,#baiYanYu,#xiaQing { | |
left: 1000px; | |
opacity: 0; | |
-webkit-transform:rotateZ(179.9deg); | |
-moz-transform:rotateZ(179.9deg); | |
-o-transform:rotateZ(179.9deg); | |
transform:rotateZ(179.9deg); | |
} | |
#gk,#zb,#ft { | |
color: #000; | |
} | |
#markting .wrapper-animation .hiring,#planning .wrapper-animation .hiring { | |
-webkit-transition:all 1.5s; | |
-moz-transition:all 1.5s; | |
-o-transition:all 1.5s; | |
transition:all 1.5s; | |
position: relative; | |
opacity: 0; | |
left: 1371px; | |
-webkit-transform: rotateZ(-90.1deg) translateX(-1px); | |
-moz-transform: rotateZ(-90.1deg) translateX(-1px); | |
-o-transform: rotateZ(-90.1deg) translateX(-1px); | |
transform: rotateZ(-90.1deg) translateX(-1px); | |
} | |
.slideIn { | |
-webkit-transform:rotateZ(0deg) translateX(-1371px) !important; | |
-moz-transform:rotateZ(0deg) translateX(-1371px) !important; | |
-o-transform:rotateZ(0deg) translateX(-1371px) !important; | |
transform:rotateZ(0deg) translateX(-1371px) !important; | |
opacity: 1 !important; | |
} | |
.rotate3dIn{ | |
-webkit-transform: rotateZ(0deg) translateX(-1371px) !important; | |
-webkit-transform-origin: 100% 100% !important; | |
-moz-transform: rotateZ(0deg) translateX(-1371px) !important; | |
-moz-transform-origin: 100% 100% !important; | |
-o-transform: rotateZ(0deg) translateX(-1371px) !important; | |
-o-transform-origin: 100% 100% !important; | |
transform: rotateZ(0deg) translateX(-1371px) !important; | |
transform-origin: 100% 100% !important; | |
opacity: 1 !important; | |
} | |
.rotateOut{ | |
-webkit-transform:rotateZ(89.9deg) translateY(-500px) scale(0) !important; | |
-webkit-transform-origin:100% 100%; | |
-moz-transform:rotateZ(89.9deg) translateY(-500px) scale(0) !important; | |
-moz-transform-origin:100% 100%; | |
-o-transform:rotateZ(89.9deg) translateY(-500px) scale(0) !important; | |
-o-transform-origin:100% 100%; | |
transform:rotateZ(89.9deg) translateY(-500px) scale(0) !important; | |
transform-origin:100% 100%; | |
opacity: 0 !important; | |
} | |
/*reset */ | |
* { | |
margin: 0; | |
padding: 0; | |
background-repeat: no-repeat; | |
} | |
a { | |
cursor: pointer; | |
text-decoration: none; | |
color: #aaa; | |
} | |
li { | |
list-style:none; | |
} | |
body,html { | |
height: 100%; | |
width: 100%; | |
margin: 0px; | |
padding: 0px; | |
overflow-x: hidden; | |
text-align: center; | |
font-family: "ROCK","微软雅黑"; | |
background-color: #fff; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment