Difference between revisions of "Team:Shanghaitech/ScientificInsights"

 
(31 intermediate revisions by 5 users not shown)
Line 4: Line 4:
 
<html>
 
<html>
  
 +
<style type="text/css">
 +
.photo-stack-grid{list-style:none;margin:0;padding:0;text-align:center}.photo-stack-grid *,.photo-stack-grid *:before,.photo-stack-grid *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.photo-stack-grid:after{content:" ";display:table;clear:both}.photo-stack-grid li{width:46%;float:left;margin:0 8% 2.8em 0}.photo-stack-grid li:nth-child(2n){margin-right:0}.photo-stack-grid li:nth-child(2n+1){clear:left}.photo-stack-grid a{display:block;color:#333;text-decoration:none;font:600 0.8em/1.3 "Open Sans", sans-serif}.photo-stack-grid .sspan{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.photo-stack-grid .photo-stack{position:relative;margin:0 4% 2em;display:block}.photo-stack-grid .photo-stack:before,.photo-stack-grid .photo-stack:after,.photo-stack-grid .photo-stack img{display:block;background:#ccc;border:5px solid #fff;border-radius:3px;padding:1px}.photo-stack-grid .photo-stack:before,.photo-stack-grid .photo-stack:after{content:'';position:absolute;left:0px;top:0px;width:100%;height:100%;background:#969289;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,0.3);box-shadow:0 1px 3px 1px rgba(0,0,0,0.3);-webkit-transform:rotate(6deg);transform:rotate(6deg)}.photo-stack-grid .photo-stack:after{-webkit-transform:rotate(10deg);transform:rotate(10deg);z-index:-1}.photo-stack-grid .photo-stack img{-webkit-transform:rotate(0deg);transform:rotate(0deg);width:100%;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2),0 14px 18px -12px rgba(0,0,0,0.9);box-shadow:0 0 1px 1px rgba(0,0,0,0.2),0 14px 18px -12px rgba(0,0,0,0.9)}.photo-stack-grid .ie8 .photo-stack:before,.photo-stack-grid .ie8 .photo-stack:after{display:none}@media (min-width: 620px){.photo-stack-grid li{width:19%}.photo-stack-grid li:nth-child(2n){margin-right:8%}.photo-stack-grid li:nth-child(2n+1){clear:none}.photo-stack-grid li:nth-child(4n){margin-right:0}.photo-stack-grid li:nth-child(4n+1){clear:left}}
 +
</style>
 
<div id='main-content-wrapper'>
 
<div id='main-content-wrapper'>
−
<div class="column half_size" id="content-block">
+
<div class="column half_size no-indent" id="content-block">
−
<h2>Scientific Insights</h2>
+
<center>
 +
<h1>Professional Insights</h1>
 +
</center>
 
<div class="column half_size">
 
<div class="column half_size">
−
<style type="text/css">
 
−
*,
 
−
*:before,
 
−
*:after {
 
−
    box-sizing: border-box;
 
−
}
 
  
−
 
+
<p  style="font-size:15px;text-align:center"><strong>Click pictures to see details</strong></p>
−
 
+
−
.photo-stack-grid {
+
−
    list-style: none;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
.photo-stack-grid:after {
+
−
    content: " ";
+
−
    display: table;
+
−
    clear: both;
+
−
}
+
−
 
+
−
.photo-stack-grid li {
+
−
    width: 46%;
+
−
    float: left;
+
−
    margin: 0 8% 2.8em 0;
+
−
}
+
−
 
+
−
.photo-stack-grid li:nth-child(2n) {
+
−
    margin-right: 0;
+
−
}
+
−
 
+
−
 
+
−
/* remember to clear first item in each row */
+
−
 
+
−
.photo-stack-grid li:nth-child(2n + 1) {
+
−
    clear: left;
+
−
}
+
−
 
+
−
.photo-stack-grid a {
+
−
    display: block;
+
−
    color: #333;
+
−
    text-decoration: none;
+
−
    font: 600 0.8em/1.3 "Open Sans", sans-serif;
+
−
}
+
−
 
+
−
.sspan {
+
−
    text-overflow: ellipsis;
+
−
    white-space: nowrap;
+
−
    overflow: hidden;
+
−
    display: block;
+
−
}
+
−
 
+
−
.photo-stack {
+
−
    position: relative;
+
−
    margin: 0 4% 2em;
+
−
    display: block;
+
−
}
+
−
 
+
−
.photo-stack:before,
+
−
.photo-stack:after,
+
−
.photo-stack img {
+
−
    display: block;
+
−
    background: #ccc;
+
−
    border: 5px solid #fff;
+
−
    border-radius: 3px;
+
−
    padding: 1px;
+
−
}
+
−
 
+
−
.photo-stack:before,
+
−
.photo-stack:after {
+
−
    content: '';
+
−
    position: absolute;
+
−
    left: 0px;
+
−
    top: 0px;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    background: #969289;
+
−
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
+
−
    transform: rotate(6deg);
+
−
}
+
−
 
+
−
.photo-stack:after {
+
−
    transform: rotate(10deg);
+
−
    z-index: -1;
+
−
}
+
−
 
+
−
.photo-stack img {
+
−
    transform: rotate(0deg);
+
−
    width: 100%;
+
−
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2),
+
−
    0 14px 18px -12px rgba(0, 0, 0, 0.9);
+
−
}
+
−
 
+
−
.ie8 .photo-stack:before,
+
−
.ie8 .photo-stack:after {
+
−
    display: none;
+
−
}
+
−
 
+
−
@media (min-width: 620px) {
+
−
    body {
+
−
        font-size: 120%;
+
−
    }
+
−
    .photo-stack-grid li {
+
−
        width: 19%;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(2n) {
+
−
        margin-right: 8%;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(2n + 1) {
+
−
        clear: none;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(4n) {
+
−
        margin-right: 0;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(4n + 1) {
+
−
        clear: left;
+
−
    }
+
−
}
+
−
</style>
+
−
<h3>Click pictures to see details</h3>
+
 
<br>
 
<br>
 +
<center>
 
<ul class="photo-stack-grid">
 
<ul class="photo-stack-grid">
 
     <li>
 
     <li>
Line 140: Line 27:
 
             </figure>
 
             </figure>
 
             <span class="sspan">Chen Luonan</span>
 
             <span class="sspan">Chen Luonan</span>
−
            <p>Computational</p>
+
     
−
            <p>and System Biology</p>
+
 
         </a>
 
         </a>
 
     </li>
 
     </li>
Line 147: Line 33:
 
         <a href="https://2017.igem.org/Team:Shanghaitech/WangYong">
 
         <a href="https://2017.igem.org/Team:Shanghaitech/WangYong">
 
             <figure class="photo-stack">
 
             <figure class="photo-stack">
−
                 <img src="https://static.igem.org/mediawiki/2017/5/5e/T--Shanghaitech--wasdfcsdcsdcwdorkshop1.jpg" alt="Wang Yong" />
+
                 <img src="https://static.igem.org/mediawiki/2017/1/12/T--Shanghaitech--interlab585882.jpg" style="width=80%" alt="Wang Yong" />
 
             </figure>
 
             </figure>
−
             <span class="sspan">Wang Yong, Synthetic Biology</span>
+
             <span class="sspan">Wang Yong</span>
 
         </a>
 
         </a>
 
     </li>
 
     </li>
 
     <li>
 
     <li>
−
         <a href="#d">
+
         <a href="https://2017.igem.org/Team:Shanghaitech/YuanBo">
 
             <figure class="photo-stack">
 
             <figure class="photo-stack">
 
                 <img src="https://static.igem.org/mediawiki/2017/2/25/T--Shanghaitech--wasdfcsdcsdcwdoxcaddcrkshop1.jpg" alt="Yuan Bo" />
 
                 <img src="https://static.igem.org/mediawiki/2017/2/25/T--Shanghaitech--wasdfcsdcsdcwdoxcaddcrkshop1.jpg" alt="Yuan Bo" />
 
             </figure>
 
             </figure>
−
             <span class="sspan">Yuan Bo, Electronic Engineering</span>
+
             <span class="sspan">Yuan Bo</span>
 
         </a>
 
         </a>
 
     </li>
 
     </li>
 
   
 
   
 
</ul>
 
</ul>
 +
</center>
 +
<p style="font-size: 16px;">In addition to the public and community’s feedback, we also obtained professional insights and suggestion to improve our project. We visited and interviewed scholars from different backgrounds including computational biology, synthetic biology, and electronic engineering. Interchanging of thoughts between our team and those experts inspired and encouraged us to further perfecting our project’s design and practicing. These insights provide guidelines for our follow-up works including human practice, hardware and software design, and modeling.
 +
</p>
 +
<br>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/5/5c/T--Shanghaitech--interwedwedewdlab2.jpg">
 +
</center>
 
</div></div></div>
 
</div></div></div>
 
</html>
 
</html>

Latest revision as of 03:43, 2 November 2017

Professional Insights

Click pictures to see details


In addition to the public and community’s feedback, we also obtained professional insights and suggestion to improve our project. We visited and interviewed scholars from different backgrounds including computational biology, synthetic biology, and electronic engineering. Interchanging of thoughts between our team and those experts inspired and encouraged us to further perfecting our project’s design and practicing. These insights provide guidelines for our follow-up works including human practice, hardware and software design, and modeling.