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 hidden or 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