Created
March 5, 2012 00:34
-
-
Save jimryan/1975649 to your computer and use it in GitHub Desktop.
The first commented line is your dabblet’s title
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
| /** | |
| * The first commented line is your dabblet’s title | |
| */ | |
| body { | |
| -webkit-perspective: 900; | |
| background:#E7E7E7; | |
| } | |
| .doorway { | |
| background: url('http://dl.dropbox.com/u/6727078/dursos-site.jpg'); | |
| width: 250px; | |
| height: 350px; | |
| border: black solid 1px; | |
| margin: 100px auto; | |
| /*-webkit-transition: -webkit-transform ease-in-out 1s;*/ | |
| box-shadow: inset 0 0 20px black; | |
| } | |
| p { | |
| position: relative; | |
| /*position: absolute;*/ | |
| /*bottom: -10px;*/ | |
| top:-10px; | |
| left: -250px; | |
| height: 320px; | |
| width: 220px; | |
| /*opacity: 0;*/ | |
| /*display: none;*/ | |
| /*display: none;*/ | |
| font-family: "Arial"; | |
| font-size: 12px; | |
| color: white; | |
| background: rgba(0,0,0,.8); | |
| padding: 15px; | |
| text-shadow: 0 0 2px black; | |
| /*border-top-left-radius: 20px;*/ | |
| /*border-top-right-radius: 20px;*/ | |
| /*box-shadow: 2px 0 4px black;*/ | |
| box-shadow: 0 0 4px black; | |
| -webkit-transition-property: -webkit-transform; | |
| /*-webkit-transition-timing-function: ease-out;*/ | |
| /*-webkit-transition-duration: 400ms;*/ | |
| -webkit-transform-origin: right center; | |
| -webkit-transition-duration: 900ms; | |
| /*-webkit-transition-delay: 400ms;*/ | |
| -webkit-transition-timing-function: ease-out; | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-transform: rotateY(180deg); | |
| z-index: 1; | |
| } | |
| .doorway .door{ | |
| position: absolute; | |
| background: rgba(255,255,255,.5); | |
| border: black solid 1px; | |
| box-shadow: 0 0 5px black; | |
| width: 250px; | |
| height: 350px; | |
| -webkit-transition-property: z-index, -webkit-transform; | |
| -webkit-transition-duration: 900ms; | |
| /*-webkit-transition-delay: 400ms;*/ | |
| -webkit-transition-timing-function: ease-out; | |
| -webkit-transform-origin: left center; | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-backface-visibility: hidden; | |
| z-index: 2; | |
| } | |
| .doorway .door:before { | |
| content: ''; | |
| position: absolute; | |
| top: 170px; | |
| right: 15px; | |
| width: 20px; | |
| height: 20px; | |
| background: black; | |
| border-radius: 10px; | |
| box-shadow: 0 0 2px black; | |
| } | |
| .door .above_window, .door .left_of_window, .door .right_of_window, | |
| .door .below_window { | |
| background: #0094cb; | |
| } | |
| .door .above_window { | |
| line-height: 40px; | |
| text-align: center; | |
| font-family: "Lucida Sans"; | |
| color: black; | |
| } | |
| .door .left_of_window, | |
| .door .right_of_window { | |
| height: 120px; | |
| width: 40px; | |
| } | |
| .door .left_of_window { | |
| float: left; | |
| } | |
| .door .right_of_window { | |
| float: right; | |
| } | |
| .door .below_window { | |
| clear: both; | |
| height: 190px; | |
| } | |
| .door .below_window .technologies { | |
| position: relative; | |
| background: rgba(255,255,255,.3); | |
| box-shadow: inset 0 0 5px black; | |
| width: 170px; | |
| height: 130px; | |
| top: 25px; | |
| margin: 0 auto; | |
| font-family: "Lucida Sans"; | |
| } | |
| .door .technologies h2 { | |
| background: rgba(0,0,0,.3); | |
| color: white; | |
| padding: 5px; | |
| text-align: center; | |
| font-size: 20px; | |
| } | |
| .door .technologies ul { | |
| list-style-type: none; | |
| } | |
| .doorway:hover p{ | |
| /*-webkit-transition-delay: 300ms;*/ | |
| /*-webkit-transition-duration: 1s;*/ | |
| -webkit-transform: rotateY(0); | |
| /*display: block;*/ | |
| /*opacity: 1;*/ | |
| /*z-index: 2;*/ | |
| } | |
| .doorway:hover .door{ | |
| /*z-index: 1;*/ | |
| -webkit-transition-delay: 0; | |
| /*-webkit-transition: -webkit-transform ease-out 900ms;*/ | |
| -webkit-transform: rotateY(-180deg); | |
| } |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <div class="doorway"> | |
| <div class="door"> | |
| <div class="above_window">SiteSwan</div> | |
| <div class="left_of_window"></div> | |
| <div class="right_of_window"></div> | |
| <div class="below_window"> | |
| <div class="technologies"> | |
| <h2>Technologies</h2> | |
| <ul> | |
| <li>Ruby on Rails</li> | |
| <li>MySQL</li> | |
| <li>jQuery</li> | |
| <li>Backbone</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="description"> | |
| SiteSwan wanted a platform for creating web sites for small businesses that was “social friendly, search-optimized, and mobile ready”. All web site owners are given a variety of tools allowing them to give their site’s their own personal touch and post the information and media that showcases their offerings. Whether it’s a slideshow of their latest products, their latest posts on Twitter, or upcoming events, there’s plenty of options for adding content to keep the customers engaged. | |
| </p> | |
| </div> |
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
| {"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment