Difference between revisions of "Team:Shanghaitech/ScientificInsights"

Line 1: Line 1:
{{Shanghaitech/custom}}
 
{{Shanghaitech/css}}
 
{{Shanghaitech/js}}
 
<html>
 
 
<div id='main-content-wrapper'>
 
<div class="column half_size" id="content-block">
 
<h1>Scientific Insights</h1>
 
<div class="column half_size">
 
 
<style type="text/css">
 
<style type="text/css">
 
*,
 
*,
Line 15: Line 6:
 
}
 
}
  
h1 {
+
 
    font: normal 1.8em/1.3 Capita, Georgia, serif;
+
    margin: 0 0 1.2em;
+
    color: #8ab300;
+
}
+
  
 
.photo-stack-grid {
 
.photo-stack-grid {
Line 58: Line 45:
 
}
 
}
  
span {
+
.sspan {
 
     text-overflow: ellipsis;
 
     text-overflow: ellipsis;
 
     white-space: nowrap;
 
     white-space: nowrap;
Line 143: Line 130:
 
                 <img src="https://static.igem.org/mediawiki/2017/7/71/T--Shanghaitech--workssdcsdcsdcsdhop1.jpg" alt="Chen Luonan" />
 
                 <img src="https://static.igem.org/mediawiki/2017/7/71/T--Shanghaitech--workssdcsdcsdcsdhop1.jpg" alt="Chen Luonan" />
 
             </figure>
 
             </figure>
             <span>Chen Luonan</span>
+
             <span class="sspan">Chen Luonan</span>
 
             <p>Computational and System Biology</p>
 
             <p>Computational and System Biology</p>
 
         </a>
 
         </a>
Line 152: Line 139:
 
                 <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/5/5e/T--Shanghaitech--wasdfcsdcsdcwdorkshop1.jpg" alt="Wang Yong" />
 
             </figure>
 
             </figure>
             <span>Wang Yong, Synthetic Biology</span>
+
             <span class="sspan">Wang Yong, Synthetic Biology</span>
 
         </a>
 
         </a>
 
     </li>
 
     </li>
Line 160: Line 147:
 
                 <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>Yuan Bo, Electronic Engineering</span>
+
             <span class="sspan">Yuan Bo, Electronic Engineering</span>
 
         </a>
 
         </a>
 
     </li>
 
     </li>
 
   
 
   
 
</ul>
 
</ul>
 
 
 
 
<p>
 
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>
 
 
 
 
</div></div></div>
 
</html>
 

Revision as of 04:59, 1 November 2017

<style type="text/css">

  • ,
    before,
    after {
   box-sizing: border-box;

}


.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>

Click pictures to see details