Difference between revisions of "Team:DUT China B/Attributions"

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

Document
parts

    • 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