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}}
−
<html>
+
{{Template:DUT_China_B/nav}}
 +
<html lang="en">
 +
<head>
 +
<meta charset="UTF-8">
 +
<title>Document</title>
  
 +
<style>
 +
 +
*{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
body{
 +
background-color: #fff;
 +
}
 +
.firstimg{
 +
width: 100%;
 +
}
 +
.firstimg img{
 +
width: 100%;
 +
                height:100%;
 +
}
 +
#maintest{
 +
position: relative;
 +
float: right;
 +
margin: 0px;
 +
width: 76%;
 +
padding: 3%;
 +
                font-family: 'Times New Roman' !important;
 +
                border: solid #D3D3D3 1px;
 +
/*border-left: 2px solid #ccc;*/
 +
/*clear: both;*/
 +
}
 +
      #maintest p{
 +
      font-size: 18px;
 +
      line-height:25.6px;
 +
        font-family: 'Times New Roman' !important;
 +
      }
 +
      .cart{
 +
    border: solid #D3D3D3 1px;
 +
    padding:5% 5% 5% 5%;
 +
    margin:5% 5% 5% 5%;
 +
      }
 +
      .icon
 +
      {
 +
      width:40px;
 +
      height:40px;
 +
      top:-5px;
 +
      }
 +
      .illustrations
 +
      {
 +
      width:100%;
 +
      height:100%;
 +
      }
 +
/*侧边栏样式*/
 +
#sides{
 +
width: 22%;
 +
padding: 20% 0 10%;
 +
 +
                background-color:#1C2B42;
 +
float: left;
 +
           
 +
 +
               
 +
}
 +
#sides a{
 +
text-decoration: none;
 +
        color:#FFFFFF !important;
 +
font-size: 60px !important；
 +
                positon:fixed;
 +
                top:20px;
 +
}
 +
 +
.blue-bg {
 +
  background-color: #fff;
 +
  color: #ED8D8D;
 +
  height: 100%;
 +
}
 +
 +
.circle {
 +
  font-weight: bold;
 +
  padding: 15px 20px;
 +
  border-radius: 50%;
 +
  background-color: #ED8D8D;
 +
  color: #fff;
 +
  max-height: 50px;
 +
  z-index: 2;
 +
}
 +
 +
.how-it-works.row {
 +
  display: flex;
 +
}
 +
.how-it-works.row .col-2 {
 +
  display: inline-flex;
 +
  align-self: stretch;
 +
  align-items: center;
 +
  justify-content: center;
 +
}
 +
.how-it-works.row .col-2::after {
 +
  content: "";
 +
  position: absolute;
 +
  border-left: 3px solid #ED8D8D;
 +
  z-index: 1;
 +
}
 +
.how-it-works.row .col-2.bottom::after {
 +
  height: 50%;
 +
  left: 50%;
 +
  top: 50%;
 +
}
 +
.how-it-works.row .col-2.full::after {
 +
  height: 100%;
 +
  left: calc(50% - 3px);
 +
}
 +
.how-it-works.row .col-2.top::after {
 +
  height: 50%;
 +
  left: 50%;
 +
  top: 0;
 +
}
 +
 +
.timeline div {
 +
  padding: 0;
 +
  height: 40px;
 +
}
 +
.timeline hr {
 +
  border-top: 3px solid #ED8D8D;
 +
  margin: 0;
 +
  top: 17px;
 +
  position: relative;
 +
}
 +
.timeline .col-2 {
 +
  display: flex;
 +
  overflow: hidden;
 +
}
 +
.timeline .corner {
 +
  border: 3px solid #ED8D8D;
 +
  width: 100%;
 +
  position: relative;
 +
  border-radius: 15px;
 +
}
 +
.timeline .top-right {
 +
  left: 50%;
 +
  top: -50%;
 +
}
 +
.timeline .left-bottom {
 +
  left: -50%;
 +
  top: calc(50% - 3px);
 +
}
 +
.timeline .top-left {
 +
  left: -50%;
 +
  top: -50%;
 +
}
 +
.timeline .right-bottom {
 +
  left: 50%;
 +
  top: calc(50% - 3px);
 +
}
 +
 +
</style>
 +
</head>
 +
<body>
 +
<div class="firstimg">
 +
<img src="https://static.igem.org/mediawiki/2019/d/d0/T--DUT_China_B--HP.jpg" alt="parts">
 +
</div>
 +
<div id="sides">
 +
<ul id="menu">
 +
        <li>
 +
            <a ><font size="4" href="#Inspiration" >Inspiration</font></a>
 +
        <div style="text-align: center; width: 100%; height:40px"></div>
 +
        </li>
 +
      <br>
 +
        <li>
 +
            <a><font size="4" >Background</font></a>
 +
      <div style="text-align: center; width: 100%; height:40px"></div>
 +
      </li>
 +
      <br>
 +
        <li>
 +
            <a><font size="4">Chlamydomonas reinhardtii</font></a>
 +
           
 +
        </li>
 +
      <br>
 +
     
 +
    </ul>
 +
</div>
 +
<div id="maintest">
 +
     
 +
      <div  class="cart">
 +
             
 +
            <div class="container-fluid blue-bg">
 +
  <div class="container">
 +
    <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>
 +
    <!--first section-->
 +
    <div class="row align-items-center how-it-works">
 +
      <div class="col-2 text-center bottom">
 +
        <div class="circle">1</div>
 +
      </div>
 +
      <div class="col-6">
 +
        <h5 style="color:#ED8D8D;">Fully Responsive</h5>
 +
        <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>
 +
    </div>
 +
    <!--path between 1-2-->
 +
    <div class="row timeline">
 +
      <div class="col-2">
 +
        <div class="corner top-right"></div>
 +
      </div>
 +
      <div class="col-8">
 +
        <hr/>
 +
      </div>
 +
      <div class="col-2">
 +
        <div class="corner left-bottom"></div>
 +
      </div>
 +
    </div>
 +
    <!--second section-->
 +
    <div class="row align-items-center justify-content-end how-it-works">
 +
      <div class="col-6 text-right">
 +
        <h5 style="color:#ED8D8D;">Using Bootstrap</h5>
 +
        <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>
 +
      <div class="col-2 text-center full">
 +
        <div class="circle">2</div>
 +
      </div>
 +
    </div>
 +
    <!--path between 2-3-->
 +
    <div class="row timeline">
 +
      <div class="col-2">
 +
        <div class="corner right-bottom"></div>
 +
      </div>
 +
      <div class="col-8">
 +
        <hr/>
 +
      </div>
 +
      <div class="col-2">
 +
        <div class="corner top-left"></div>
 +
      </div>
 +
    </div>
 +
 +
<!--second section-->
 +
  <div class="row align-items-center how-it-works">
 +
      <div class="col-2 text-center full">
 +
        <div class="circle">3</div>
 +
      </div>
 +
      <div class="col-6">
 +
        <h5 style="color:#ED8D8D;">Fully Responsive</h5>
 +
        <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>
 +
    </div>
 +
<!--path between 2-3-->
 +
    <div class="row timeline">
 +
   
 +
        <div class="col-2">
 +
        <div class="corner top-right"></div>
 +
      </div>
 +
      <div class="col-8">
 +
        <hr/>
 +
      </div>
 +
      <div class="col-2">
 +
        <div class="corner left-bottom"></div>
 +
      </div>
 +
    </div>
 +
<div class="row align-items-center justify-content-end how-it-works">
 +
      <div class="col-6 text-right">
 +
        <h5 style="color:#ED8D8D;">Using Bootstrap</h5>
 +
        <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>
 +
      <div class="col-2 text-center top">
 +
        <div class="circle">4</div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
</div>
 +
      </div>
 +
  <hr>
 +
</div>
 +
<script type="text/javascript">
 +
 +
window.onload=function(){
 +
  map_height=document.documentElement.clientHeight;//获取页面可见高度
 +
 
 +
  document.getElementById("sides").style.height=map_height+"px";
 +
  }
 +
  function getScrollTop(){
 +
var scrollTop=0;
 +
if(document.documentElement.scrollTop){
 +
scrollTop=document.documentElement.scrollTop;
 +
}else if(document.body){
 +
scrollTop=document.body.scrollTop;
 +
}
 +
return scrollTop;
 +
}
 +
document.onscroll = function(){
 +
console.log(getScrollTop())
 +
if(getScrollTop()>(map_height+170)) {
 +
document.getElementById("sides").style.position="fixed";
 +
document.getElementById("sides").style.top="0";
 +
document.getElementById("sides").style.left="0";
 +
}else{
 +
document.getElementById("sides").style.position = 'static';
 +
} 
 +
}
 +
</script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 11:30, 18 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