Team:TU-Delft/Team/General
From 2011.igem.org
(Difference between revisions)
Line 2: | Line 2: | ||
__NOTOC__ | __NOTOC__ | ||
<html> | <html> | ||
- | + | <div class="book_wrapper"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <a id="next_page_button"></a> | |
+ | <a id="prev_page_button"></a> | ||
- | + | <div id="loading" class="loading">Loading pages...</div> | |
- | < | + | |
- | < | + | |
- | + | <div id="mybook" style="display:none;"> | |
- | <div style=" | + | <div class="b-load"> |
- | < | + | |
- | <a | + | <div> |
- | <a href=" | + | <img src="images/1.jpg" alt=""/> |
- | < | + | <h1>Slider Gallery</h1> |
+ | <p>This tutorial is about creating a creative gallery...</p> | ||
+ | <a href="#" class="article">Article</a> | ||
+ | <a href="#" class="demo">Demo</a> | ||
+ | </div> | ||
+ | |||
+ | <div> | ||
+ | ... | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | .booklet{ | ||
+ | -moz-box-shadow:0px 0px 1px #fff; | ||
+ | -webkit-box-shadow:0px 0px 1px #fff; | ||
+ | box-shadow:0px 0px 1px #fff; | ||
+ | -moz-border-radius:10px; | ||
+ | -webkit-border-radius:10px; | ||
+ | border-radius:10px; | ||
+ | } | ||
+ | .booklet .b-wrap-left{ | ||
+ | background:#fff url(http://tympanus.net/Tutorials/MoleskineNotebook/images/left_bg.jpg) no-repeat top left; | ||
+ | -webkit-border-top-left-radius: 10px; | ||
+ | -webkit-border-bottom-left-radius: 10px; | ||
+ | -moz-border-radius-topleft:10px; | ||
+ | -moz-border-radius-bottomleft: 10px; | ||
+ | border-top-left-radius: 10px; | ||
+ | border-bottom-left-radius: 10px; | ||
+ | } | ||
+ | .booklet .b-wrap-right{ | ||
+ | background:#efefef url(http://tympanus.net/Tutorials/MoleskineNotebook/images/right_bg.jpg) no-repeat top left; | ||
+ | -webkit-border-top-right-radius: 10px; | ||
+ | -webkit-border-bottom-right-radius: 10px; | ||
+ | -moz-border-radius-topright: 10px; | ||
+ | -moz-border-radius-bottomright: 10px; | ||
+ | border-top-right-radius: 10px; | ||
+ | border-bottom-right-radius: 10px; | ||
+ | } | ||
+ | |||
+ | .booklet .b-counter{ | ||
+ | bottom:10px; | ||
+ | position:absolute; | ||
+ | display:block; | ||
+ | width:90%; | ||
+ | height:20px; | ||
+ | border-top:1px solid #ddd; | ||
+ | color:#222; | ||
+ | text-align:center; | ||
+ | font-size:12px; | ||
+ | padding:5px 0 0; | ||
+ | background:transparent; | ||
+ | -moz-box-shadow:0px -1px 1px #fff; | ||
+ | -webkit-box-shadow:0px -1px 1px #fff; | ||
+ | box-shadow:0px -1px 1px #fff; | ||
+ | opacity:0.8; | ||
+ | } | ||
+ | |||
+ | .book_wrapper{ | ||
+ | margin:0 auto; | ||
+ | padding-top:50px; | ||
+ | width:905px; | ||
+ | height:540px; | ||
+ | position:relative; | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/bg.png) no-repeat 9px 27px; | ||
+ | } | ||
+ | |||
+ | .book_wrapper h1{ | ||
+ | color:#13386a; | ||
+ | margin:5px 5px 5px 15px; | ||
+ | font-size:26px; | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/h1.png) no-repeat bottom left; | ||
+ | padding-bottom:7px; | ||
+ | } | ||
+ | |||
+ | .book_wrapper p{ | ||
+ | font-size:16px; | ||
+ | margin:5px 5px 5px 15px; | ||
+ | } | ||
+ | .book_wrapper a.article, | ||
+ | .book_wrapper a.demo{ | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/circle.png) no-repeat 50% 0px; | ||
+ | display:block; | ||
+ | width:95px; | ||
+ | height:41px; | ||
+ | text-decoration:none; | ||
+ | outline:none; | ||
+ | font-size:16px; | ||
+ | color:#555; | ||
+ | float:left; | ||
+ | line-height:41px; | ||
+ | padding-left:47px; | ||
+ | } | ||
+ | .book_wrapper a.demo{ | ||
+ | margin-left:50px; | ||
+ | } | ||
+ | .book_wrapper a.article:hover, | ||
+ | .book_wrapper a.demo:hover{ | ||
+ | background-position:50% -41px; | ||
+ | color:#13386a; | ||
+ | } | ||
+ | |||
+ | .book_wrapper img{ | ||
+ | margin:10px 0px 5px 35px; | ||
+ | width:300px; | ||
+ | padding:4px; | ||
+ | border:1px solid #ddd; | ||
+ | -moz-box-shadow:1px 1px 1px #fff; | ||
+ | -webkit-box-shadow:1px 1px 1px #fff; | ||
+ | box-shadow:1px 1px 1px #fff; | ||
+ | } | ||
+ | |||
+ | .booklet .b-wrap-right img{ | ||
+ | border:1px solid #E6E3C2; | ||
+ | } | ||
+ | |||
+ | a#next_page_button, | ||
+ | a#prev_page_button{ | ||
+ | display:none; | ||
+ | position:absolute; | ||
+ | width:41px; | ||
+ | height:40px; | ||
+ | cursor:pointer; | ||
+ | margin-top:-20px; | ||
+ | top:50%; | ||
+ | background:transparent url(http://tympanus.net/Tutorials/MoleskineNotebook/images/buttons.png) no-repeat 0px -40px; | ||
+ | } | ||
+ | a#prev_page_button{ | ||
+ | left:-30px; | ||
+ | } | ||
+ | a#next_page_button{ | ||
+ | right:-30px; | ||
+ | background-position:-41px -40px; | ||
+ | } | ||
+ | a#next_page_button:hover{ | ||
+ | background-position:-41px 0px; | ||
+ | } | ||
+ | a#prev_page_button:hover{ | ||
+ | background-position:0px 0px; | ||
+ | } | ||
+ | |||
+ | .loading{ | ||
+ | width:160px; | ||
+ | height:56px; | ||
+ | position: absolute; | ||
+ | top:50%; | ||
+ | margin-top:-28px; | ||
+ | right:135px; | ||
+ | line-height:56px; | ||
+ | color:#fff; | ||
+ | padding-left:60px; | ||
+ | font-size:15px; | ||
+ | background: #000 url(http://tympanus.net/Tutorials/MoleskineNotebook/images/ajax-loader.gif) no-repeat 10px 50%; | ||
+ | opacity: 0.7; | ||
+ | z-index:9999; | ||
+ | -moz-border-radius:20px; | ||
+ | -webkit-border-radius:20px; | ||
+ | border-radius:20px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
</html> | </html> | ||
{{TU-footer}} | {{TU-footer}} |
Revision as of 10:29, 16 June 2011