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 72: Line 71:
 
                 positon:fixed;  
 
                 positon:fixed;  
 
                 top:20px;
 
                 top:20px;
−
      }
+
}
−
        *, *:before, *:after {
+
−
   box-sizing: border-box;
+
.blue-bg {
 +
   background-color: #fff;
 +
  color: #ED8D8D;
 +
  height: 100%;
 
}
 
}
−
header.hero {
+
 
−
   background: rgba(255, 255, 255, 0.6);
+
.circle {
−
  text-align: center;
+
   font-weight: bold;
−
   padding: 20px 0;
+
   padding: 15px 20px;
−
   border-bottom: 4px solid rgba(255, 255, 255, 0.6);
+
   border-radius: 50%;
−
   margin: 0 0 20px;
+
   background-color: #ED8D8D;
−
}
+
   color: #fff;
−
header.hero h1 {
+
   max-height: 50px;
−
   font-size: 3em;
+
   z-index: 2;
−
   color: #555;
+
−
   margin: 0 0 5px;
+
 
}
 
}
  
−
ul.cards {
+
.how-it-works.row {
−
  width: 800px;
+
   display: flex;
−
  margin: 0 auto 20px;
+
−
  height: 300px;
+
−
  list-style-type: none;
+
−
  position: relative;
+
−
  padding: 20px 0;
+
−
   cursor: pointer;
+
 
}
 
}
−
ul.cards li.title {
+
.how-it-works.row .col-2 {
−
   margin: 0 0 120px 100px;
+
   display: inline-flex;
−
   font-family:"Times New Roman" !imporant;
+
  align-self: stretch;
 +
  align-items: center;
 +
   justify-content: center;
 
}
 
}
−
ul.cards li.title h2 {
+
.how-it-works.row .col-2::after {
−
  font-weight: 700;
+
   content: "";
−
}
+
−
ul.cards li.card {
+
−
  background: #FFF;
+
−
  overflow: hidden;
+
−
   height: 300px;
+
−
  width: 300px;
+
−
  border-radius: 10px;
+
 
   position: absolute;
 
   position: absolute;
−
   left: 0px;
+
   border-left: 3px solid #ED8D8D;
−
  box-shadow: 1px 2px 2px 0 #aaa;
+
   z-index: 1;
−
   -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 {
+
.how-it-works.row .col-2.bottom::after {
−
   max-width: 100%;
+
   height: 50%;
−
   padding: 5px;
+
   left: 50%;
−
   height: auto;
+
   top: 50%;
 
}
 
}
−
ul.cards li.card div.content {
+
.how-it-works.row .col-2.full::after {
−
   padding: 5px 10px;
+
   height: 100%;
 +
  left: calc(50% - 3px);
 
}
 
}
−
ul.cards li.card.card-1 {
+
.how-it-works.row .col-2.top::after {
−
  z-index: 10;
+
   height: 50%;
−
  -webkit-transform: rotateZ(-2deg);
+
   left: 50%;
−
          transform: rotateZ(-2deg);
+
   top: 0;
−
}
+
−
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 {
+
.timeline div {
−
  width: 660px;
+
−
  list-style-type: none;
+
−
  margin: 0 auto 20px;
+
 
   padding: 0;
 
   padding: 0;
−
  position: relative;
+
   height: 40px;
−
  cursor: pointer;
+
−
   height: 700px;
+
 
}
 
}
−
ul.card-stacks li.title {
+
.timeline hr {
−
   margin: 0 0 20px;
+
   border-top: 3px solid #ED8D8D;
−
}
+
−
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;
 
   margin: 0;
−
  padding: 0;
+
   top: 17px;
−
}
+
−
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;
 
   position: relative;
−
  margin: 0 auto 20px;
 
−
  padding: 20px;
 
−
  cursor: pointer;
 
 
}
 
}
−
ul.cards-split li.title {
+
.timeline .col-2 {
−
  margin: 0 0 20px 100px;
+
   display: flex;
−
}
+
−
ul.cards-split li.title h2 {
+
−
  font-weight: 700;
+
−
}
+
−
ul.cards-split li.card {
+
−
   background: #FFF;
+
 
   overflow: hidden;
 
   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 {
+
.timeline .corner {
−
   max-width: 100%;
+
   border: 3px solid #ED8D8D;
−
  padding: 5px;
+
   width: 100%;
−
  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;
 
   position: relative;
−
   margin: 0 auto 20px;
+
   border-radius: 15px;
−
  padding: 20px;
+
−
  cursor: pointer;
+
 
}
 
}
−
ul.cards-split-delay li.title {
+
.timeline .top-right {
−
   margin: 0 0 20px;
+
   left: 50%;
 +
  top: -50%;
 
}
 
}
−
ul.cards-split-delay li.title h2 {
+
.timeline .left-bottom {
−
   font-weight: 700;
+
   left: -50%;
 +
  top: calc(50% - 3px);
 
}
 
}
−
ul.cards-split-delay li.card {
+
.timeline .top-left {
−
  background: #FFF;
+
   left: -50%;
−
  overflow: hidden;
+
   top: -50%;
−
  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 {
+
.timeline .right-bottom {
−
   max-width: 100%;
+
   left: 50%;
−
   padding: 5px;
+
   top: calc(50% - 3px);
−
  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 408: Line 182:
 
     </ul>
 
     </ul>
 
</div>
 
</div>
−
<div style= "position:relative;left:10%;" >
+
<div id="maintest">
−
                <div class="htmleaf-container">
+
     
−
<div class="htmleaf-content">
+
      <div class="cart">
−
                 
+
             
−
<ul class="cards">
+
            <div class="container-fluid blue-bg">
−
  <li class="title">  
+
  <div class="container">
−
<ul class="card-stacks">
+
    <h2 class="pb-3 pt-2" style="color:#C27099;"><img style="width:50%;" src="https://static.igem.org/mediawiki/2019/c/cf/T--DUT_China_B--HPbanner1.svg">Contact  lab with society</h2>
−
  <li class="title">
+
    <!--first section-->
−
                            <img src="https://static.igem.org/mediawiki/2019/7/76/T--DUT_China_B--attributions.png" style="width:70%;height:70%;">
+
    <div class="row align-items-center how-it-works">
−
                            <h3 style="font-family="Times New Roman" !imporant;">Expand to grid</h3>    
+
      <div class="col-2 text-center bottom">
−
  </li>
+
        <div class="circle">1</div>
−
                     
+
      </div>
−
  <li class="stack stack-1">
+
      <div class="col-6">
−
    <ul class="cards-down">
+
        <h5 style="color:#ED8D8D;">Fully Responsive</h5>
−
      <li class="card card-1">
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
−
        <div class="content">
+
      </div>
−
          <h1>Card 1 Title</h1>
+
    </div>
−
          <p>Stack 1</p>
+
    <!--path between 1-2-->
−
        </div>
+
    <div class="row timeline">
−
      </li>
+
      <div class="col-2">
−
      <li class="card card-2">
+
        <div class="corner top-right"></div>
−
        <div class="content">
+
      </div>
−
          <h1>Card 2 Title</h1>
+
      <div class="col-8">
−
          <p>Stack 1</p>
+
        <hr/>
−
        </div>
+
      </div>
−
      </li>
+
      <div class="col-2">
−
      <li class="card card-3"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--DUT_China_B--fire.gif"/>
+
        <div class="corner left-bottom"></div>
−
        <div class="content">
+
      </div>
−
          <h1>Card 3 Title</h1>
+
    </div>
−
          <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>
+
    <!--second section-->
−
        </div>
+
    <div class="row align-items-center justify-content-end how-it-works">
−
      </li>
+
      <div class="col-6 text-right">
−
    </ul>
+
        <h5 style="color:#ED8D8D;">Using Bootstrap</h5>
−
  </li>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
−
                       
+
      </div>
−
  <li class="stack stack-2">
+
      <div class="col-2 text-center full">
−
    <ul class="cards-down">
+
        <div class="circle">2</div>
−
      <li class="card card-1">
+
      </div>
−
        <div class="content">
+
    </div>
−
          <h1>Card 1 Title</h1>
+
    <!--path between 2-3-->
−
          <p>Stack 2</p>
+
    <div class="row timeline">
−
        </div>
+
      <div class="col-2">
−
      </li>
+
        <div class="corner right-bottom"></div>
−
      <li class="card card-2">
+
      </div>
−
        <div class="content">
+
      <div class="col-8">
−
          <h1>Card 2 Title</h1>
+
        <hr/>
−
          <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>
−
        </div>
+
      <div class="col-2">
−
      </li>
+
        <div class="corner top-left"></div>
−
      <li class="card card-3"><img src=""/>
+
      </div>
−
        <div class="content">
+
    </div>
−
          <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>
+
<!--second section-->
−
        </div>
+
  <div class="row align-items-center how-it-works">
−
      </li>
+
      <div class="col-2 text-center full">
−
    </ul>
+
        <div class="circle">3</div>
−
  </li>
+
      </div>
−
  <li class="stack stack-3">
+
      <div class="col-6">
−
    <ul class="cards-down">
+
        <h5 style="color:#ED8D8D;">Fully Responsive</h5>
−
      <li class="card card-1"><img src="https://static.igem.org/mediawiki/2019/d/d3/T--DUT_China_B--fire.gif"/>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
−
        <div class="content">
+
      </div>
−
          <h1>Card 1 Title</h1>
+
    </div>
−
          <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>
+
<!--path between 2-3-->
−
        </div>
+
    <div class="row timeline">
−
      </li>
+
   
−
      <li class="card card-2">
+
        <div class="col-2">
−
        <div class="content">
+
        <div class="corner top-right"></div>
−
          <h1>Card 2 Title</h1>
+
      </div>
−
          <p>Stack 3</p>
+
      <div class="col-8">
−
        </div>
+
        <hr/>
−
      </li>
+
      </div>
−
      <li class="card card-3">
+
      <div class="col-2">
−
        <div class="content">
+
        <div class="corner left-bottom"></div>
−
          <h1>Card 3 Title</h1>
+
      </div>
−
          <p>Stack 3</p>
+
    </div>
−
        </div>
+
<div class="row align-items-center justify-content-end how-it-works">
−
      </li>
+
      <div class="col-6 text-right">
−
    </ul>
+
        <h5 style="color:#ED8D8D;">Using Bootstrap</h5>
−
  </li>
+
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
−
</ul>
+
      </div>
−
<hr/>
+
      <div class="col-2 text-center top">
−
</div>
+
        <div class="circle">4</div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
      </div>
 +
  <hr>
 
</div>
 
</div>
−
</div>
 
 
<script type="text/javascript">
 
<script type="text/javascript">
  
Line 519: Line 298:
 
}
 
}
 
</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 00:54, 19 October 2019

Document
parts

Contact lab with society

1
Fully Responsive

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.

Using Bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.

2
3
Fully Responsive

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.

Using Bootstrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.

4