Line 1: | Line 1: | ||
{{DUT_China_B/test_style.css}} | {{DUT_China_B/test_style.css}} | ||
{{Template:DUT_China_B/nav}} | {{Template:DUT_China_B/nav}} | ||
+ | {{Template:DUT_China_B/jquery-1.11.0.min.js}} | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
Line 71: | Line 72: | ||
positon:fixed; | positon:fixed; | ||
top:20px; | top:20px; | ||
− | + | } | |
− | + | *, *:before, *:after { | |
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6, p { | ||
+ | font-weight: 300; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | header.hero { | ||
+ | background: rgba(255, 255, 255, 0.6); | ||
+ | text-align: center; | ||
+ | padding: 20px 0; | ||
+ | border-bottom: 4px solid rgba(255, 255, 255, 0.6); | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | header.hero h1 { | ||
+ | font-size: 3em; | ||
+ | color: #555; | ||
+ | margin: 0 0 5px; | ||
+ | } | ||
+ | |||
+ | hr { | ||
+ | border: 0; | ||
+ | border-top: 1px solid rgba(255, 255, 255, 0.6); | ||
+ | padding: 0 0 20px; | ||
+ | } | ||
+ | |||
+ | ul.cards { | ||
+ | width: 800px; | ||
+ | margin: 0 auto 20px; | ||
+ | height: 300px; | ||
+ | list-style-type: none; | ||
+ | position: relative; | ||
+ | padding: 20px 0; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | ul.cards li.title { | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | ul.cards li.title h2 { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | ul.cards li.card { | ||
+ | background: #FFF; | ||
+ | overflow: hidden; | ||
+ | height: 300px; | ||
+ | width: 300px; | ||
+ | border-radius: 10px; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | box-shadow: 1px 2px 2px 0 #aaa; | ||
+ | -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | } | ||
+ | ul.cards li.card img { | ||
+ | max-width: 100%; | ||
+ | padding: 5px; | ||
+ | height: auto; | ||
+ | } | ||
+ | ul.cards li.card div.content { | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | ul.cards li.card.card-1 { | ||
+ | z-index: 10; | ||
+ | -webkit-transform: rotateZ(-2deg); | ||
+ | transform: rotateZ(-2deg); | ||
+ | } | ||
+ | ul.cards li.card.card-2 { | ||
+ | z-index: 9; | ||
+ | -webkit-transform: rotateZ(-7deg); | ||
+ | transform: rotateZ(-7deg); | ||
+ | -webkit-transition-delay: 0.05s; | ||
+ | transition-delay: 0.05s; | ||
+ | } | ||
+ | ul.cards li.card.card-3 { | ||
+ | z-index: 8; | ||
+ | -webkit-transform: rotateZ(5deg); | ||
+ | transform: rotateZ(5deg); | ||
+ | -webkit-transition-delay: 0.1s; | ||
+ | transition-delay: 0.1s; | ||
+ | } | ||
+ | ul.cards.transition li.card { | ||
+ | -webkit-transform: rotateZ(0deg); | ||
+ | transform: rotateZ(0deg); | ||
+ | } | ||
+ | ul.cards.transition li.card.card-1 { | ||
+ | left: 440px; | ||
+ | } | ||
+ | ul.cards.transition li.card.card-2 { | ||
+ | left: 220px; | ||
+ | } | ||
+ | |||
+ | ul.card-stacks { | ||
+ | width: 660px; | ||
+ | list-style-type: none; | ||
+ | margin: 0 auto 20px; | ||
+ | padding: 0; | ||
+ | position: relative; | ||
+ | cursor: pointer; | ||
+ | height: 700px; | ||
+ | } | ||
+ | ul.card-stacks li.title { | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | ul.card-stacks li.title h2 { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | ul.card-stacks li.stack { | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.02); | ||
+ | transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.02); | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down { | ||
+ | position: relative; | ||
+ | margin: 0 0 20px; | ||
+ | padding: 20px; | ||
+ | list-style-type: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card { | ||
+ | -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22); | ||
+ | transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.22); | ||
+ | left: 0px; | ||
+ | -webkit-transition-delay: 0.4s; | ||
+ | transition-delay: 0.4s; | ||
+ | background: #FFF; | ||
+ | overflow: hidden; | ||
+ | height: 200px; | ||
+ | width: 200px; | ||
+ | border-radius: 10px; | ||
+ | position: absolute; | ||
+ | top: 0px; | ||
+ | box-shadow: 1px 2px 2px 0 #aaa; | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card img { | ||
+ | max-width: 100%; | ||
+ | padding: 5px; | ||
+ | height: auto; | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card div.content { | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card.card-1 { | ||
+ | z-index: 10; | ||
+ | -webkit-transform: rotateZ(-2deg); | ||
+ | transform: rotateZ(-2deg); | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card.card-2 { | ||
+ | z-index: 9; | ||
+ | -webkit-transform: rotateZ(-7deg); | ||
+ | transform: rotateZ(-7deg); | ||
+ | } | ||
+ | ul.card-stacks li.stack ul.cards-down li.card.card-3 { | ||
+ | z-index: 8; | ||
+ | -webkit-transform: rotateZ(5deg); | ||
+ | transform: rotateZ(5deg); | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack.stack-1 { | ||
+ | left: 0px; | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack.stack-2 { | ||
+ | left: 220px; | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack.stack-3 { | ||
+ | left: 440px; | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack ul.cards-down li.card { | ||
+ | -webkit-transform: rotateZ(0deg); | ||
+ | transform: rotateZ(0deg); | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack ul.cards-down li.card.card-1 { | ||
+ | top: 440px; | ||
+ | } | ||
+ | ul.card-stacks.transition li.stack ul.cards-down li.card.card-2 { | ||
+ | top: 220px; | ||
+ | } | ||
+ | |||
+ | ul.cards-split { | ||
+ | width: 660px; | ||
+ | height: 280px; | ||
+ | list-style-type: none; | ||
+ | position: relative; | ||
+ | margin: 0 auto 20px; | ||
+ | padding: 20px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | ul.cards-split li.title { | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | ul.cards-split li.title h2 { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | ul.cards-split li.card { | ||
+ | background: #FFF; | ||
+ | overflow: hidden; | ||
+ | height: 200px; | ||
+ | width: 200px; | ||
+ | border-radius: 10px; | ||
+ | position: absolute; | ||
+ | left: 220px; | ||
+ | box-shadow: 1px 2px 2px 0 #aaa; | ||
+ | -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | } | ||
+ | ul.cards-split li.card img { | ||
+ | max-width: 100%; | ||
+ | padding: 5px; | ||
+ | height: auto; | ||
+ | } | ||
+ | ul.cards-split li.card div.content { | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | ul.cards-split li.card.card-1 { | ||
+ | z-index: 10; | ||
+ | -webkit-transform: rotateZ(-2deg); | ||
+ | transform: rotateZ(-2deg); | ||
+ | } | ||
+ | ul.cards-split li.card.card-2 { | ||
+ | z-index: 9; | ||
+ | -webkit-transform: rotateZ(-7deg); | ||
+ | transform: rotateZ(-7deg); | ||
+ | -webkit-transition-delay: 0.05s; | ||
+ | transition-delay: 0.05s; | ||
+ | } | ||
+ | ul.cards-split li.card.card-3 { | ||
+ | z-index: 8; | ||
+ | -webkit-transform: rotateZ(5deg); | ||
+ | transform: rotateZ(5deg); | ||
+ | -webkit-transition-delay: 0.1s; | ||
+ | transition-delay: 0.1s; | ||
+ | } | ||
+ | ul.cards-split.transition li.card { | ||
+ | -webkit-transform: rotateZ(0deg); | ||
+ | transform: rotateZ(0deg); | ||
+ | } | ||
+ | ul.cards-split.transition li.card.card-1 { | ||
+ | left: 0px; | ||
+ | } | ||
+ | ul.cards-split.transition li.card.card-2 { | ||
+ | left: 440px; | ||
+ | } | ||
+ | ul.cards-split.transition li.card.card-3 { | ||
+ | left: 220px; | ||
+ | } | ||
+ | |||
+ | ul.cards-split-delay { | ||
+ | width: 660px; | ||
+ | height: 280px; | ||
+ | list-style-type: none; | ||
+ | position: relative; | ||
+ | margin: 0 auto 20px; | ||
+ | padding: 20px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | ul.cards-split-delay li.title { | ||
+ | margin: 0 0 20px; | ||
+ | } | ||
+ | ul.cards-split-delay li.title h2 { | ||
+ | font-weight: 700; | ||
+ | } | ||
+ | ul.cards-split-delay li.card { | ||
+ | background: #FFF; | ||
+ | overflow: hidden; | ||
+ | height: 200px; | ||
+ | width: 200px; | ||
+ | border-radius: 10px; | ||
+ | position: absolute; | ||
+ | left: 220px; | ||
+ | box-shadow: 1px 2px 2px 0 #aaa; | ||
+ | -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12); | ||
+ | } | ||
+ | ul.cards-split-delay li.card img { | ||
+ | max-width: 100%; | ||
+ | padding: 5px; | ||
+ | height: auto; | ||
+ | } | ||
+ | ul.cards-split-delay li.card div.content { | ||
+ | padding: 5px 10px; | ||
+ | } | ||
+ | ul.cards-split-delay li.card.card-1 { | ||
+ | z-index: 10; | ||
+ | -webkit-transform: rotateZ(-2deg); | ||
+ | transform: rotateZ(-2deg); | ||
+ | } | ||
+ | ul.cards-split-delay li.card.card-2 { | ||
+ | z-index: 9; | ||
+ | -webkit-transform: rotateZ(-7deg); | ||
+ | transform: rotateZ(-7deg); | ||
+ | -webkit-transition-delay: 0.6s; | ||
+ | transition-delay: 0.6s; | ||
+ | } | ||
+ | ul.cards-split-delay li.card.card-3 { | ||
+ | z-index: 8; | ||
+ | -webkit-transform: rotateZ(5deg); | ||
+ | transform: rotateZ(5deg); | ||
+ | -webkit-transition-delay: 0s; | ||
+ | transition-delay: 0s; | ||
+ | } | ||
+ | ul.cards-split-delay.transition li.card { | ||
+ | -webkit-transform: rotateZ(0deg); | ||
+ | transform: rotateZ(0deg); | ||
+ | } | ||
+ | ul.cards-split-delay.transition li.card.card-1 { | ||
+ | left: 0px; | ||
+ | } | ||
+ | ul.cards-split-delay.transition li.card.card-2 { | ||
+ | left: 440px; | ||
+ | } | ||
+ | ul.cards-split-delay.transition li.card.card-3 { | ||
+ | left: 220px; | ||
+ | -webkit-transition-delay: 0.6s; | ||
+ | transition-delay: 0.6s; | ||
+ | } | ||
} | } | ||
Line 105: | Line 423: | ||
<div class="cart"> | <div class="cart"> | ||
− | + | <div class="htmleaf-container"> | |
+ | <div class="htmleaf-content"> | ||
+ | <ul class="cards"> | ||
+ | <li class="title"> | ||
+ | |||
+ | <ul class="card-stacks"> | ||
+ | <li class="title"> | ||
+ | <h2>Expand to grid</h2> | ||
+ | </li> | ||
+ | <li class="stack stack-1"> | ||
+ | <ul class="cards-down"> | ||
+ | <li class="card card-1"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 1 Title</h1> | ||
+ | <p>Stack 1</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-2"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 2 Title</h1> | ||
+ | <p>Stack 1</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-3"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--DUT_China_B--fire.gif"/> | ||
+ | <div class="content"> | ||
+ | <h1>Card 3 Title</h1> | ||
+ | <p>The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface. </p> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="stack stack-2"> | ||
+ | <ul class="cards-down"> | ||
+ | <li class="card card-1"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 1 Title</h1> | ||
+ | <p>Stack 2</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-2"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 2 Title</h1> | ||
+ | <p>The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface. </p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-3"><img src=""/> | ||
+ | <div class="content"> | ||
+ | <h1>Card 3 Title</h1> | ||
+ | <p>The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface. </p> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="stack stack-3"> | ||
+ | <ul class="cards-down"> | ||
+ | <li class="card card-1"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--DUT_China_B--fire.gif"/> | ||
+ | <div class="content"> | ||
+ | <h1>Card 1 Title</h1> | ||
+ | <p>The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface. </p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-2"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 2 Title</h1> | ||
+ | <p>Stack 3</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li class="card card-3"> | ||
+ | <div class="content"> | ||
+ | <h1>Card 3 Title</h1> | ||
+ | <p>Stack 3</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <hr/> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
Line 137: | Line 534: | ||
} | } | ||
</script> | </script> | ||
+ | |||
+ | <script> | ||
+ | jQuery(document).ready(function ($) { | ||
+ | $('ul.cards').on('click', function () { | ||
+ | $(this).toggleClass('transition'); | ||
+ | }); | ||
+ | $('ul.card-stacks').on('click', function () { | ||
+ | $(this).toggleClass('transition'); | ||
+ | }); | ||
+ | $('ul.cards-split').on('click', function () { | ||
+ | $(this).toggleClass('transition'); | ||
+ | }); | ||
+ | $('ul.cards-split-delay').on('click', function () { | ||
+ | $(this).toggleClass('transition'); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 23:58, 18 October 2019
![parts](https://static.igem.org/mediawiki/2019/d/d0/T--DUT_China_B--HP.jpg)
-
-
Expand to grid
-
-
Card 1 Title
Stack 1
-
Card 2 Title
Stack 1
Card 3 Title
The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface.
-
-
-
Card 1 Title
Stack 2
-
Card 2 Title
The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface.
Card 3 Title
The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface.
-
-
Card 1 Title
The SketchBook® drawing engine can handle a 100 mpx canvas while maintaining the zoomed-in feeling of traditional drawing. Enjoy precision, speed, and a comfortable user interface.
-
Card 2 Title
Stack 3
-
Card 3 Title
Stack 3
-