Difference between revisions of "Team:ZJU-China/Demonstrate"

Line 3: Line 3:
 
   <head>
 
   <head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
−
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     <meta http-equiv="X-UA-Compatible" content3="IE=edge">
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <meta name="viewport" content3="width=device-width, initial-scale=1">
 
      
 
      
 
     <title>Demonstrate</title>
 
     <title>Demonstrate</title>
Line 12: Line 12:
 
@font-face{
 
@font-face{
 
     font-family: 'fsb';
 
     font-family: 'fsb';
−
     src:  url('https://static.igem.org/mediawiki/2016/3/3a/Fontfsb.ttf') format('turetype');
+
     src:  url('https://static.igem.org/mediawiki/2016/3/3f/Fsb.otf');
 
     }
 
     }
−
+
@font-face{
 +
    font-family: 'gga';
 +
    src:  url('https://static.igem.org/mediawiki/2016/9/94/Gga.otf') format('truetype');
 +
    }
 +
 
 
body {
 
body {
 
background-color: #fffae6;
 
background-color: #fffae6;
Line 26: Line 30:
 
   #div1 {
 
   #div1 {
 
position: relative;
 
position: relative;
−
margin-top:40px;
 
 
height:1.5px;
 
height:1.5px;
 +
margin-top:40px;
 
background-color: #990100;
 
background-color: #990100;
 
}
 
}
 
   #div2{
 
   #div2{
−
        position: relative;
+
    position: relative;
 
margin: 0 0 10.5px;
 
margin: 0 0 10.5px;
 
color: #990100;
 
color: #990100;
−
font-family= fsb;
+
font-family: fsb;
 +
letter-spacing: 8px;
 
font-size: 48px;
 
font-size: 48px;
 
text-align:center;
 
text-align:center;
Line 57: Line 62:
 
  font-size: 40px;
 
  font-size: 40px;
 
  background-color: #d2d2d2;
 
  background-color: #d2d2d2;
 +
  font-family:fsb;
 
   }
 
   }
 
   .dcpt3{
 
   .dcpt3{
Line 70: Line 76:
 
  padding-bottom:40px;
 
  padding-bottom:40px;
 
   }
 
   }
−
  }
+
   .content3{
−
   .content{
+
 
  margin:0px auto;
 
  margin:0px auto;
−
  font: Sans-serif;
+
  font-family: gga;
 +
 
 +
  font-size:30px;
 +
  line-height:150%;
 +
  margin-bottom:10px;
 
   }
 
   }
 
   .content2{
 
   .content2{
 
  margin:0px auto;
 
  margin:0px auto;
−
  font-family:Geogia;
+
  font-family:fsb;
 
  color: #990100;
 
  color: #990100;
 +
  }
 +
  .content4{
 +
  margin:0px auto;
 +
  font-family: gga;
 +
 
 +
  font-size:36px;
 +
  line-height:150%;
 +
  margin-bottom:10px;
 
   }
 
   }
 
   .strong{
 
   .strong{
−
  font: Sans-serif;
+
  font: gga;
 
  font-weight: bold;
 
  font-weight: bold;
 
   }
 
   }
−
 
+
  @media screen and (max-width: 600px) {
−
.content_box2_parent {
+
#div1{
−
    text-align: center;
+
height:0px;
−
padding: 0 7.5%;
+
}
−
}
+
.dcpt2{
−
 
+
font-size:24px;
−
.content_box2_child {                
+
}
−
    border-radius: 30px 60px;
+
.content3 {
−
    display: inline-block;
+
font-size: 16px;
−
    background-color: #FFFFFF;
+
}
−
    text-align: justify;
+
.content4 {
−
    vertical-align: middle;
+
font-size:20px;
−
    box-shadow: 1px 1px 10px #888;
+
}
−
    -webkit-box-shadow: 1px 1px 10px #888;
+
.dcpt {
−
    -moz-box-shadow: 1px 1px 10px #888;
+
margin-left:5%;
−
    padding: 4%;
+
margin-right:5%;
−
    min-height: 430px;
+
padding-left:5%;
 +
padding-right:5%;
 +
}
 +
.dcpt2{
 +
margin-left:5%;
 +
margin-right:5%;
 +
padding-left:5%;
 +
padding-right:5%;
 +
}
 +
.dcpt3{
 +
margin-left:5%;
 +
margin-right:5%;
 +
padding-left:5%;
 +
padding-right:5%;
 +
}
 
}
 
}
 
</style>
 
</style>
Line 106: Line 137:
  
 
<body>
 
<body>
−
<div class="container">
+
<div class="container" style="margin-top:100px">
 
   <div class="row">
 
   <div class="row">
 
     <div class="col-md-4">
 
     <div class="col-md-4">
−
       <div id="div1" style="margin-left: 160px" align="center">
+
       <div id="div1" style="margin-left: 70px" align="center">
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 118: Line 149:
 
       </div>
 
       </div>
 
     <div class="col-md-4">
 
     <div class="col-md-4">
−
       <div id="div1" style="margin-right: 160px">
+
       <div id="div1" style="margin-right: 70px">
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
   <div class="container">
+
 
−
<div class="dcpt" style="font-size:30px;line-height:1.5;">
+
 
 +
 
 +
   <div class="dcpt2">
 +
    <div class="content2">
 +
    Overview
 +
    </div>
 +
  </div>
 +
 
 +
  <div class="dcpt3">
 +
    <div class="content4">
 +
    <strong>Managemen</strong>
 +
    </div>
 +
    <div class="content3">
 
<div align="center"><img src="https://static.igem.org/mediawiki/2016/thumb/6/69/Whole_view.jpg/800px-Whole_view.jpg"></div>
 
<div align="center"><img src="https://static.igem.org/mediawiki/2016/thumb/6/69/Whole_view.jpg/800px-Whole_view.jpg"></div>
−
&nbsp;&nbsp;&nbsp;&nbsp;In addition to the microfluidic device as the core part, we have designed the mechanical device for the project. The whole system consists of four parts: the main body, lighting board, shading baffle and microfluidic chip. The design details for each part are described in the hardware page.
+
    In addition to the microfluidic device as the core part, we have designed the mechanical device for the project. The whole system consists of four parts: the main body, lighting board, shading baffle and microfluidic chip. The design details for each part are described in the hardware page.
 
When assembled, four LED lights into the corresponding four holes, four single-pole double-throw switch on the external circuit board can switch the light color (red or green), the power switch is on the battery box. Microfluidic chip inserted into the above slot, the shading baffle, which has the same size as the microfluidic chip, is inserted into the following slot, to avoid the stray light interference. When used, the overall device will be placed in 37 ° incubator, press the four switches to adjust the LED light into the appropriate color, waiting for flora to respond to light signals. Later, take out the baffle and observer the color of each trap, and that is the "cipher text" we get.
 
When assembled, four LED lights into the corresponding four holes, four single-pole double-throw switch on the external circuit board can switch the light color (red or green), the power switch is on the battery box. Microfluidic chip inserted into the above slot, the shading baffle, which has the same size as the microfluidic chip, is inserted into the following slot, to avoid the stray light interference. When used, the overall device will be placed in 37 ° incubator, press the four switches to adjust the LED light into the appropriate color, waiting for flora to respond to light signals. Later, take out the baffle and observer the color of each trap, and that is the "cipher text" we get.
−
</div>
 
−
</div>
 
−
 
−
 
  
 +
    </div>
 +
 
 +
 
 +
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:59, 3 October 2016

Demonstrate
DEMONSTRATE
Overview
Managemen
In addition to the microfluidic device as the core part, we have designed the mechanical device for the project. The whole system consists of four parts: the main body, lighting board, shading baffle and microfluidic chip. The design details for each part are described in the hardware page. When assembled, four LED lights into the corresponding four holes, four single-pole double-throw switch on the external circuit board can switch the light color (red or green), the power switch is on the battery box. Microfluidic chip inserted into the above slot, the shading baffle, which has the same size as the microfluidic chip, is inserted into the following slot, to avoid the stray light interference. When used, the overall device will be placed in 37 ° incubator, press the four switches to adjust the LED light into the appropriate color, waiting for flora to respond to light signals. Later, take out the baffle and observer the color of each trap, and that is the "cipher text" we get.