Difference between revisions of "Team:SJTU-Software/HP/Gold Integrated"

(Prototype team page)
 
Line 1: Line 1:
 
{{SJTU-Software}}
 
{{SJTU-Software}}
−
<html>
+
<html lang="en">
−
<div class="column full_size judges-will-not-evaluate">
+
<head>
−
<h3>★  ALERT! </h3>
+
    <meta charset="utf-8" />
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2017.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2017.igem.org/Judging/Awards"> award listed above</a>. </p>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2017.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    <meta name="viewport" content="width=device-width, initial-scale=1" />
−
</div>
+
    <meta name="description" content="Free Bootstrap Themes by Html5xCss3 dot com - Free Responsive Html5 Templates">
−
<div class="clear"></div>
+
    <meta name="author" content="#">
  
−
<div class="column full_size">
+
    <title>SJTU-Software_Collaborations</title>
  
−
<h1>Gold Medal and Integrated Human Practices</h1>
+
    <!-- Bootstrap Core CSS -->
 +
    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
 +
<!-- Custom CSS -->
 +
  <style type="text/css">
 +
    /* ==== Google font ==== */
 +
    @charset "UTF-8";
 +
    @import url(http://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One);
 +
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900');
 +
    @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
 +
    @import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900');
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------------Html-Body------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    body {font-family: 'Source Sans Pro', sans-serif;font-weight: 400;color: #666;background-color: #fff;font-size: 15px;line-height: 24px;hyphens: auto;overflow-wrap: break-word;}
 +
    html, body {width:100%; padding:0; margin:0;}
  
−
<p>This page will contain information for your Gold medal Human Practices work, which you can also use to nominate your team for the Best Integrated Human Practices page. To make things easier, we have combined the Gold medal page with the Best Integrated Human Practices page since we expect the work to overlap considerably. </p>
+
    /* ---------------------------------------------------------------------------- */
−
<p>iGEM teams are unique and leading the field because they "go beyond the lab" to imagine their projects in a social/environmental context, to better understand issues that might influence the design and use of their technologies.</p>
+
    /* ---------------------------------------------------------------------------- */
−
<p>Teams work with students and advisors from the humanities and social sciences to explore topics concerning ethical, legal, social, economic, safety or security issues related to their work. Consideration of these Human Practices is crucial for building safe and sustainable projects that serve the public interest. </p>
+
    /* ---------------------------------------------------------------------------- */
−
<p>For more information, please see the <a href="https://2017.igem.org/Competition/Human_Practices">Human Practices page</a>.</p>
+
    html { -webkit-text-size-adjust: none;}
−
</div>
+
    .video embed,.video object,.video iframe { width: 100%;  height: auto;}
−
<div class="clear"></div>
+
    img{max-width:100%; height: auto;width: auto\9; /* ie8 */}
  
 +
    h1 {font-size: 38px;}
 +
    h2 {font-size: 36px;}
 +
    h3 {font-size: 32px;}
 +
    h4 {font-size: 28px;}
 +
    h5 {font-size: 24px;}
 +
    h6 {font-size: 20px;}
  
−
<div class="column half_size">
+
    h1,h2,h3,h4,h5,h6 {font-weight: 700;color: #111;line-height: 1.1;font-family: 'Montserrat', sans-serif;}
−
<h3>Gold Medal Criterion #1</h3>
+
−
<p>Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the design and/or execution of your project.</p>
+
  
−
</div>
+
    p {margin: 0 0 20px;}
  
−
<div class="column half_size">
+
    a {color: #333;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
−
<h3>Best Integrated Human Practices Special Prize</h3>
+
    a:hover,
 +
    a:focus {text-decoration: none;color:#EC495E;}
  
−
<p>
+
    button {border: none;outline: 0;}
−
To compete for the <a href="https://2017.igem.org/Judging/Awards">Best Integrated Human Practices prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2017.igem.org/Judging/Judging_Form">judging form</a>.
+
    ul li{list-style: none;}
−
<br><br>
+
    input:not([type]), input[type="color"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="search"], textarea, .form-control, select {
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
        height: 40px;
−
</p>
+
        padding-left: 20px;
−
</div>
+
        border: 1px solid #ccc;
−
<div class="clear"></div>
+
        border-radius: 0;
−
<div class="column full_size">
+
        box-shadow: none;
−
<h5>Inspiration</h5>
+
        line-height: 22px;
−
<p>Here are a few examples of excellent Integrated Human Practices work:</p>
+
        letter-spacing: .5px;
−
<ul>
+
        -webkit-transition: border-color 0.5s;
−
<li><a href="https://2016.igem.org/Team:INSA-Lyon/Integrated_Practices">2016 INSA Lyon</a></li>
+
        transition: border-color 0.5s;
−
<li><a href="https://2016.igem.org/Team:UofC_Calgary/Integrated_Practices">2016 UofC Calgary</a></li>
+
    }
−
<li><a href="https://2015.igem.org/Team:Bielefeld-CeBiTec/Practices">2015 Bielefeld</a></li>
+
    .form-control:focus, .form-control:hover {
−
<li><a href="https://2015.igem.org/Team:Edinburgh/Practices">2015 Edinburgh</a></li>
+
        outline: none;
−
</ul>
+
        box-shadow: none;
 +
        border-color: #666;
 +
    }
 +
    /* --Line-- */
 +
    hr.line { margin: 15px auto; padding: 0; max-width: 90px;border: 0; border-top: solid 5px #ddd;text-align: center;}
 +
 
 +
    /* --Progress-- */
 +
    .progress{background-color: rgba(0, 0, 0, .3); height: 15px;box-shadow: none;}
 +
    .progress-bar{box-shadow: none;line-height: 15px;}
 +
    .progress-bar-light{background-color: #f2f2f2; color: #262626;}
 +
    .progress-bar-yellow {background-color: #333856;}
 +
    .progress-bar-dark {background-color: #262626;}
 +
 
 +
    /* --no-gutter-- */
 +
    .no-gutter::after, .no-gutter::before {content: " ";display: table;}
 +
    .no-gutter::after {clear: both;}
 +
    .no-gutter{margin: 0 !important;}
 +
    .no-gutter > [class*=col-] {
 +
      padding-right: 0;
 +
      padding-left: 0;
 +
    }
 +
    .copyrights{
 +
      text-indent:-9999px;
 +
      height:0;
 +
      line-height:0;
 +
      font-size:0;
 +
      overflow:hidden;
 +
    }
 +
    /* --Socials-nav-- */
 +
    .social-link{text-align: center;}
 +
    .social-link li{}
 +
    .social-link li a{height: 37px; width: 37px;border-radius: 50%;display:block;color: #333;font-size: 19px;padding-top: 6px;border: 1px solid #333;background: #fff;}
 +
    .social-link li a:hover{background: transparent;color: #fff;border: 1px solid #fff;}
 +
 
 +
    /* --Page-- */
 +
    body.index-page {}
 +
    body.single-page {}
 +
    body.single-page .portfolio-box {max-width: 100%;margin: 20px 0;}
 +
 
 +
    body .wrap-body {
 +
      background-image: url(https://static.igem.org/mediawiki/2017/e/ea/SJTU-Software_background_darker.jpeg);
 +
      background-position: center center;
 +
      background-repeat: no-repeat;
 +
        background-attachment: fixed;
 +
        background-size: cover;
 +
      overflow: hidden;
 +
        position: relative;
 +
      height: 100%;
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------------Header---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    #intro {font-family: "Changa One", cursive;font-weight: 400;position: relative;margin: 80px auto;width: 600px;font-size: 60px;text-align: center;color: rgba(255,255,255,0.7);}
 +
    #intro span {display: block;line-height: 1.3}
 +
 
 +
    .line-1 {position: relative;}
 +
    .line-1:before, .line-1:after {content: "";font-family: FontAwesome;position: relative;font-style: normal;font-weight: normal;text-decoration: inherit;font-size: 16px;margin: 0 30px;top: -5px;}
 +
    .line-2 {font-family: "Changa One", sans-serif;font-weight: 400;text-transform: uppercase;font-size: 90px;letter-spacing: 15px;margin: 0 0;}
 +
    .line-3 {font-family: "PT Sans", sans-serif;font-weight: 700;font-size: 16px;text-transform: uppercase;margin: 70px 0 0;position: relative;letter-spacing: 6px;}
 +
    .line-3:before, .line-3:after {content: " ";position: absolute;width: 50px;height: 5px;border-top: 1px solid #fff;border-bottom: 1px solid #fff;}
 +
    .line-3:before {margin: 7px 0 0 -60px;}
 +
    .line-3:after {margin: 7px 0 0 10px;}
 +
    .line-4 {position: relative;text-align: center;margin: 50px auto;display: block;font-size: 20px;}
 +
    .line-4 a {text-decoration: none;display: inline-block;text-align: left;color: #fff;}
 +
    .line-4 a:nth-child(1) {text-align: right;}
 +
    .line-4 a:nth-child(1):after {content: "";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: inherit;position: relative;font-size: 30px;text-align: center;width: 90%;top: 4px;margin: 0;padding: 0 20px;}
 +
 
 +
    @media(max-width:992px){
 +
      #intro{width: 500px;}
 +
      .line-1{font-size: 25px;}
 +
      .line-2{font-size: 80px;letter-spacing: 12px;}
 +
      .line-3{font-size: 14px;margin: 60px 0 0;letter-spacing: 4px;}
 +
      .line-3:before, .line-3:after {width: 40px;}
 +
      .line-3:before {margin: 5px 0 0 -50px;}
 +
      .line-3:after {margin: 5px 0 0 10px;}
 +
      .line-4{font-size: 18px;margin: 40px auto;}
 +
    }
 +
 
 +
    @media(max-width:767px){
 +
      #intro{width: 350px;}
 +
      .line-1{font-size: 20px;}
 +
      .line-2{font-size: 70px;letter-spacing: 10px;}
 +
      .line-3{font-size: 13px;margin: 50px 0 0;letter-spacing: 3px;}
 +
      .line-3:before, .line-3:after {width: 30px;}
 +
      .line-3:before {margin: 4px 0 0 -40px;}
 +
      .line-3:after {margin: 4px 0 0 10px;}
 +
      .line-4{font-size: 16px;margin: 30px auto;}
 +
    }
 +
 
 +
    @media(max-width:500px){
 +
      #intro{width: 250px;}
 +
      .line-1{font-size: 17px;}
 +
      .line-2{font-size: 50px;letter-spacing: 8px;}
 +
      .line-3{font-size: 12px;margin: 40px 0 0;letter-spacing: 3px;}
 +
      .line-3:before, .line-3:after {width: 20px;}
 +
      .line-3:before {margin: 4px 0 0 -30px;}
 +
      .line-3:after {margin: 4px 0 0 10px;}
 +
      .line-4{font-size: 15px;margin: 20px auto;}
 +
      .line-4 a:nth-child(1):after {font-size: 25px;}
 +
    }
 +
 
 +
    header.page-header{}
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* -------------------------------------Content-------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    #page-content{background: #fff;}
 +
 
 +
    /* ---HomePage--- */
 +
    .box-content {}
 +
 
 +
    .box-content.box-style-0{background-image: url(../images/patftern-white2.png); background-color: #fff;}
 +
    .box-content.box-style-1{background: url(../images/pattern-white.png) center center;background-size: cover; background-color: #fff;}
 +
    .box-content.box-style-2{background-image: url(../images/home-6.png);background-position: 80% top;background-repeat: no-repeat;background-color: #F8F9F1;}
 +
    .box-content.box-style-3{background: url(../images/ep_naturalblack.png) fixed center center;color:#fff;}
 +
 
 +
    /* ---Heading--- */
 +
    .heading{margin-bottom: 60px;position:relative;display:block; width: 100%;}
 +
    .heading h2{font-weight: 400;font-size: 55px;letter-spacing: 0px;line-height: 50px;text-transform: uppercase;}
 +
    .heading:after{position: absolute; content: "";width: 40px;height: 4px;background: #333856;left: 0;right: auto;bottom: -30px;}
 +
    .box-text.dark-style .heading:after{background: #fff;}
 +
    .box-text .t-right .heading:after{right: 0; left: auto;}
 +
    @media(max-width:767px){
 +
      .heading{margin-bottom: 40px;}
 +
      .heading h2{font-size: 48px;line-height: 45px;margin-top: 0;}
 +
      .heading:after{left: calc(50% - 20px);bottom: -20px;}
 +
      .box-text .t-right .heading:after{right: calc(50% - 20px); bottom: -20px;}
 +
    }
 +
 
 +
    @media(max-width:500px){
 +
      .heading h2{font-size: 43px;line-height: 40px;margin-top: 0;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------------Menu------------------------------------ */
 +
    /* ---------------------------------------------------------------------------- */
 +
    #menu {border-radius: 0;text-transform: uppercase;border: none;}
 +
 
 +
    #menu a.navbar-brand:hover{color: #fff;}
 +
    #menu .navbar-brand{margin: 0;height: auto;text-transform: uppercase;padding: 0px 18px;}
 +
    #menu .logo {}
 +
    #menu .dropdown-menu {background-color: #2B2D3F;border:none;border-radius: 0;}
 +
 
 +
    #menu .navbar-collapse{padding: 0;background: rgba(255, 255, 255, 0.2)}
 +
    #menu ul.nav .dropdown-menu li a{color: #fff;}
 +
    #menu ul.nav .dropdown-menu li a:hover{color: #ec495e;}
 +
    #menu .dropdown-inner {display: table;}
 +
    #menu .dropdown-inner ul {display: table-cell;}
 +
    #menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #000;margin: 0 5px;}
 +
    #menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{color: #ec495e;background: none;}
 +
    .navbar{margin: 0;}
 +
    #menu ul.nav li{}
 +
    #menu ul.nav li a{padding: 18px 45px;color: #fff;letter-spacing: 2px;font-size: 14px;background-color: transparent;font-weight: 700;}
 +
    #menu ul.nav li.active a{background: #fff;color: #1e252d;}
 +
    #menu ul.nav li.dropdown a{}
 +
    #menu .nav > li > a:hover, #menu .nav > li > a:focus{color:#fff;background-color: rgba(255, 255, 255, 0.2);}
 +
 
 +
    #menu .btn-navbar {font-size: 20px;color: #FFF;padding: 4px 12px;float: right;border: 2px solid #fff;}
 +
 
 +
 
 +
    @media(max-width:767px) {
 +
      #menu{background: #1D2027;padding: 10px 0;}
 +
      #menu .navbar-brand {display: block;color: #fff;margin-top: 10px;}
 +
      #menu div.dropdown-inner > ul.list-unstyled {display: block;}
 +
      #menu .dropdown-inner a {width: 100%;color: #fff;}
 +
      #menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
 +
 
 +
      #heading{display: inline-block !important;color: #fff;font-weight: bold;font-size: 22px;margin: 10px 0 8px 15px;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* -------------------------------------Box 1---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .box-content.box-1 {}
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* -------------------------------------Box 2---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .box-content.box-2 {}
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* -------------------------------------Box 3---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .box-content.box-3 {}
 +
 
 +
 
 +
 
 +
 
 +
    /* ---Article--- */
 +
    article.single-post{padding-bottom: 0;}
 +
 
 +
    article{background: #ffffff; color: #3F3F3F; margin: 50px 0;border-bottom: 1px solid #e1e1e1;padding-bottom: 50px;}
 +
    article:last-child{border-bottom: none;}
 +
    article:after, article:before{clear: both; content: '\0020'; display: block; visibility: hidden; width: 0; height: 0;}
 +
    article .post-thumbnail-wrap {text-align: center;width: 100%;margin-bottom: 10px;}
 +
    article .post-thumbnail-wrap img {}
 +
    article h2.entry-title{font-size: 35px;margin: 20px 0 10px;font-weight: 300;}
 +
    article h2.entry-title a{color: #131313;}
 +
    article h2.entry-title a:hover{color: #555}
 +
 
 +
    article .entry-header{margin-bottom: 30px;}
 +
    article.single-post .entry-header{margin-bottom: 60px;}
 +
    article.single-post .entry-header h1.entry-title{font-size: 40px;line-height: 30px;letter-spacing: 2px;font-weight: 600;margin: 0;text-transform: uppercase;margin-bottom: 40px;line-height: 1.1}
 +
    article.single-post .entry-header h1.entry-title a {color: #575756;margin: 0;}
 +
    article .entry-title-blog a:hover {color: #628d7c;}
 +
 
 +
    article .entry-header .entry-meta{color: #777;font-size: 13px;}
 +
    article .entry-header .entry-meta a {color: #777;}
 +
    article .entry-header .entry-meta a:hover {color: #EC495E;}
 +
 
 +
    article .entry-content{margin-top: 30px;}
 +
    article.single-post .entry-content{ padding: 20px 100px;}
 +
 
 +
    article .entry-content p{color: #686868;}
 +
    article .entry-content blockquote {border-left: 3px solid #1c7791;margin: 0 50px;font-style: italic;color: #666;padding-left: 20px;}
 +
    article .entry-content ol {text-align: justify;margin: 10px 50px;list-style-type: circle;}
 +
 
 +
    .comments-are {padding:30px 20px; position: relative;}
 +
    .comments-are{border-top: 1px solid #e1e1e1;margin: 50px 0 ;}
 +
    .comments-are textarea {height:170px;}
 +
 
 +
    @media(max-width:767px){
 +
      article.single-post .entry-content{ padding: 20px 80px;}
 +
    }
 +
 
 +
    @media(max-width:500px){
 +
      article.single-post .entry-content{ padding: 10px 30px;font-size: 14px;}
 +
      article .entry-content p{}
 +
      article .entry-content blockquote {margin: 0;padding-left: 10px;}
 +
      article .entry-content ol {margin: 10px 0;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------------Footer---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    footer{color: #fff;}
 +
    footer ul {padding: 0;margin-top: 10px;}
 +
    footer a {color: #fff;}
 +
    footer a:hover {color: #ddd;}
 +
 
 +
    footer .wrap-footer{background: #fff;}
 +
    footer .wrap-footer p{color: #fff !important; font-size: 16px !important;}
 +
 
 +
    footer .bottom-footer{padding: 40px 0 60px;font-weight: bold;}
 +
    footer .quicklinks{}
 +
    footer .quicklinks li{position: relative;padding-right: 20px;margin-right: 7px;}
 +
    footer .quicklinks li:last-child{padding-right: 0;margin-right: 0;}
 +
    footer .quicklinks li:last-child:after{display: none;}
 +
    footer .quicklinks li:after{position: absolute;bottom: 10px;right: 0;content: ""; height: 5px; width: 5px; background-color: #333856;}
 +
 
 +
    footer .contact-info{position:relative}
 +
 
 +
    footer .contact-info .show-info-link{display:inline-block;position:absolute;top:-50px;left:0;right:0;margin:0 auto;padding-left:25px;padding-right:25px;width:200px;height:50px;text-align:center;color:#111;background:#fff;opacity:0;visibility:hidden;-webkit-transition:opacity 0.5s, visibility 0.6s, top 0.5s;transition:opacity 0.5s, visibility 0.6s, top 0.5s;z-index:999}
 +
    footer .contact-info .show-info-link:hover{background:#ececec}
 +
    footer .contact-info .show-info-link:focus{text-decoration:none !important;border-bottom:none}
 +
 
 +
    footer .contact-info .show-info-link i{display:inline-block;padding-top:18px;padding-right:15px;}
 +
 
 +
    footer .contact-info .info-open{top:0;opacity:1;visibility:visible}
 +
    footer .contact-info .contact-info-wrapper{position:absolute;margin-bottom:0;padding:100px 60px 0 90px;top:0;left:0;width:100%;height:100%;background:rgba(15, 15, 15, 0.90);-webkit-transition:opacity 0.5s, visibility 0.6s;transition:opacity 0.5s, visibility 0.6s}
 +
    footer .contact-info .contact-info-wrapper ul{list-style:none;padding:0;margin:0;width:50%;float:left}
 +
    footer .contact-info .contact-info-wrapper ul li{display:block;margin-bottom:30px;padding:7px 0 7px 20px;border-left:1px solid #666}
 +
    footer .contact-info .contact-info-wrapper ul li .adr-heading{display:block;color:#ececec;font-size: 16px;}
 +
    footer .contact-info .contact-info-wrapper ul li .adr-info{font-size: 15px;letter-spacing:1.5px;text-transform:uppercase;color:#888}
 +
    footer .contact-info .contact-info-wrapper .show-map{display:block;position:absolute;bottom:100px;color:#ececec}
 +
    footer .contact-info .contact-info-wrapper .show-map i{display:inline-block;padding-top:18px;padding-right:15px; font-size: 22px;}
 +
    footer .contact-info .contact-info-wrapper .show-map:hover{color:#999}
 +
    footer .contact-info .contact-info-wrapper .show-map:focus{text-decoration:none}
 +
    footer .map-open{opacity:0;visibility:hidden}
 +
    /* .footer-contact .contact-form{padding:70px;} */
 +
    footer .contact-form .heading{}
 +
    footer .contact-form .form-group label {font-size: 13px;text-transform: uppercase;font-weight: 700;letter-spacing: 2px;color: #111;}
 +
 
 +
    @media(max-width:767px){
 +
      footer .contact-info .contact-info-wrapper ul {display: block;width: 100%;}
 +
    }
 +
 
 +
    @media(max-width:500px){
 +
      footer .contact-info .contact-info-wrapper {padding: 70px 30px 0 60px;}
 +
      footer .contact-info .contact-info-wrapper .show-map{bottom: 70px;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------Contact Form---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    #contactForm{margin-top: 100px}
 +
    #contactForm textarea{height: 150px;}
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------Portfolio Box--------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .portfolio-box {display: block;position: relative;margin: auto;overflow: hidden;max-width: 500px}
 +
 
 +
    /****** Zoom Effect ******/
 +
    .portfolio-box.zoom-effect .portfolio-box-caption{background: rgba(0, 0, 0,.45);}
 +
    .portfolio-box.zoom-effect img{-webkit-transition: 0.5s ease;transition: 0.5s ease;}
 +
    .portfolio-box:hover.zoom-effect img{-webkit-transform:scale(1.1); /* Safari and Chrome */-moz-transform:scale(1.1); /* Firefox */-ms-transform:scale(1.1); /* IE 9 */-o-transform:scale(1.1); /* Opera */transform:scale(1.1);}
 +
 
 +
    .portfolio-box .portfolio-box-caption {display: block;position: absolute;bottom: 0;width: 100%;height: 100%;text-align: center;color: #fff;-webkit-transition: all .35s;-moz-transition: all .35s;transition: all .35s;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content {position: absolute;top: 50%;width: 100%;text-align: center;transform: translateY(-50%);}
 +
 
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social,
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {padding: 0 15px;text-transform: uppercase;font-weight: 600;letter-spacing: 2px;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {font-size: 13px;color: #333856;margin-bottom: 10px;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {font-size: 16px;margin-bottom: 3px;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social{transition: all 1s ease;opacity: 0; height: 0;overflow: hidden;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social i.fa{font-size: 25px;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social ul li{margin: 20px 5px 0;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social ul li a{display: block;width: 48px;height: 48px;color: #333856;background: #fff;transition-duration: 0.3s;padding-top: 12px;border-radius: 50%;text-shadow: none;}
 +
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-social ul li a:hover{color: #fff;background-color: #333856;}
 +
 
 +
    .portfolio-box:hover .portfolio-box-caption {opacity: 1;background: none;}
 +
    .portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-social{opacity: 1;height: auto;}
 +
    .portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-category,
 +
    .portfolio-box:hover .portfolio-box-caption .portfolio-box-caption-content .project-name{display: none;}
 +
 
 +
    @media(min-width:768px) {
 +
        .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {font-size: 15px;}
 +
        .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {font-size: 19px;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ------------------------------------Button---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .btn {border-radius: 0;outline: none;text-decoration: none;text-transform: uppercase;font-weight: bold;box-shadow: none;border: none;}
 +
    .btn:focus,
 +
    .btn.active,
 +
    .btn:active {background-image: none;box-shadow: none;outline: 0 none;}
 +
 
 +
    .btn-skin {padding: 11px 22px;color: #1a1c1e;border: 2px solid #1a1c1e;font-size: 15px; letter-spacing: 2.3px;font-weight: 700;background: #fff;margin: 10px 0;}
 +
    .btn-skin i.fa{padding-left: 5px;}
 +
    .btn-skin:hover, .btn-skin:focus {color: #fff;background-color: #1a1c1e;}
 +
 
 +
    @media (max-width: 500px){
 +
      .btn-skin {padding: 8px 20px;font-size: 14px; letter-spacing: 1.8px;font-weight: 600}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* -----------------------------------Success---------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .success{height: 500px;width: 100%;text-transform: uppercase;}
 +
    .success-insite {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);}
 +
    .success span.fail{font-size: 50px; color: red;display: block;line-height: 55px;}
 +
    .success span.success{font-size: 50px; color: blue;display: block;line-height: 55px;}
 +
    .success .btn-skin{margin-top: 50px}
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ----------------------------------Margin------------------------------------ */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .m-top10 { margin-top: 10px;}
 +
    .m-top15 { margin-top: 15px;}
 +
    .m-top20 { margin-top: 20px;}
 +
    .m-top30 { margin-top: 30px;}
 +
    .m-top50 { margin-top: 50px;}
 +
    .m-top80 { margin-top: 100px;}
 +
    .m-top100 { margin-top: 80px;}
 +
    .m-top120 { margin-top: 120px;}
 +
 
 +
    .m-bot10 { margin-bottom: 10px;}
 +
    .m-bot15 { margin-bottom: 15px;}
 +
    .m-bot20 { margin-bottom: 20px;}
 +
    .m-bot30 { margin-bottom: 30px;}
 +
    .m-bot50 { margin-bottom: 50px;}
 +
    .m-bot80 { margin-bottom: 80px;}
 +
    .m-bot120 { margin-bottom: 120px;}
 +
 
 +
    .pd-exlarge-xs{padding: 100px 90px;}
 +
    .pd-large-xs{padding: 80px 70px;}
 +
    .pd-medium-xs{padding: 60px 50px;}
 +
    .pd-small-xs{padding: 40px 30px;}
 +
 
 +
    @media only screen and (min-width: 768px) {
 +
        .pd-exlarge-sm{padding: 100px 90px;}
 +
      .pd-large-sm{padding: 80px 70px;}
 +
      .pd-medium-sm{padding: 60px 50px;}
 +
      .pd-small-sm{padding: 40px 30px;}
 +
    }
 +
    @media only screen and (min-width: 992px) {
 +
        .pd-exlarge-md{padding: 100px 90px;}
 +
      .pd-large-md{padding: 80px 70px;}
 +
      .pd-medium-md{padding: 60px 50px;}
 +
      .pd-small-md{padding: 40px 30px;}
 +
    }
 +
    @media only screen and (min-width: 1200px) {
 +
        .pd-exlarge-lg{padding: 100px 90px;}
 +
      .pd-large-lg{padding: 80px 70px;}
 +
      .pd-medium-lg{padding: 60px 50px;}
 +
      .pd-small-lg{padding: 40px 30px;}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* --------------------------------Triangle------------------------------------ */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .triangle-left,
 +
    .triangle-right{position: relative;}
 +
 
 +
    .triangle-left::before {border-bottom: 30px solid transparent;border-right: 30px solid #fff;border-top: 30px solid transparent;content: " ";height: 0;width: 0;left: -30px;position: absolute;top: calc(50% - 30px);}
 +
    .triangle-right::before {border-bottom: 30px solid transparent;border-left: 30px solid #fff;border-top: 30px solid transparent;content: " ";height: 0;width: 0;position: absolute;right: -30px;top: calc(50% - 30px);}
 +
    @media (max-width: 767px){
 +
      .triangle-left::before {left: calc(50% - 30px);top: -45px;transform: rotate(90deg);}
 +
      .triangle-right::before {right: calc(50% - 30px);position: absolute;top: -45px;transform: rotate(-90deg);}
 +
    }
 +
 
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* --------------------------------Flex-Box------------------------------------ */
 +
    /* ---------------------------------------------------------------------------- */
 +
    .flex-box .box-text,
 +
    .flex-box .box-image {background-repeat: no-repeat;background-position: center center;background-size: cover;display: block;width: 100%;height: 100%;}
 +
 
 +
    /* Box Text */
 +
    .flex-box .box-text {-moz-justify-content: center;-webkit-justify-content: center;-ms-justify-content: center;justify-content: center;-moz-align-items: center;-webkit-align-items: center;-ms-align-items: center;align-items: center;/* display: flex; */}
 +
    .flex-box .box-text .box-text-inner{margin: 0 auto;max-width: 100%;}
 +
    .flex-box .box-text .box-text-inner p{font-size: 18px;font-weight: 300;color: #000;}
 +
    .flex-box .box-text .title {}
 +
    .flex-box .box-text .title h3{font-weight: 700;color: #000;text-transform: uppercase;font-family: 'Playfair Display', serif;letter-spacing: 3px;}
 +
    .flex-box .box-text .title span{font-size: 24px; font-weight:800;color: #000;text-transform: uppercase;margin: 40px 0 20px;display: block;}
 +
 
 +
    .flex-box .box-text.light-style{background: #fff;}
 +
    .flex-box .box-text.light-style .title h3{}
 +
    .flex-box .box-text.dark-style{background: #262626; color: #bbb;}
 +
    .flex-box .box-text.dark-style p{color: #ddd;}
 +
    .flex-box .box-text.dark-style .title h3{color: #333856;}
 +
    .flex-box .box-text.dark-style .heading h2{color: #fff;}
 +
    .flex-box .box-text.dark-style .social-link li a{color: #f2f2f2;border: 1px solid #f2f2f2;}
 +
    .flex-box .box-text.dark-style .social-link li a:hover{color: #000;border: 1px solid #333856;}
 +
 
 +
    /* Box Image */
 +
    .flex-box .box-image {width: 100%;height: 100%;display: inline-block;position: relative;}
 +
    .flex-box .box-image img {position: absolute;display: block;border-radius: 0;}
 +
    /* For browsers that support 'object-fit' */
 +
    @supports ( object-fit: cover ) {
 +
      .flex-box .box-image img {
 +
        -moz-object-fit: cover;
 +
        -webkit-object-fit: cover;
 +
        -ms-object-fit: cover;
 +
        -o-object-fit: cover;
 +
        object-fit: cover;
 +
        -moz-object-position: center;
 +
        -webkit-object-position: center;
 +
        -ms-object-position: center;
 +
        object-position: center;
 +
        -ms-transform: none;
 +
        -moz-transform: none;
 +
        -webkit-transform: none;
 +
        transform: none;
 +
        top: 0;
 +
        left: 0;
 +
        width: 100%;
 +
        height: 100%;
 +
      }
 +
    }
 +
    @media(min-width:768px){
 +
      .flex-box {-moz-align-items: stretch;-webkit-align-items: stretch;-ms-align-items: stretch;align-items: stretch;display: -moz-flex;display: -webkit-flex;display: -ms-flex;display: flex;-moz-flex-direction: row;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;position: relative;overflow: hidden;}
 +
      .flex-box .f-right{order: 2;}
 +
      .box-text .t-right{text-align: right;}
 +
    }
 +
    @media(max-width:767px){
 +
      .flex-box .box-text{text-align: center;}
 +
      .flex-box .box-image {height: 400px;width: 100%;}
 +
    }
 +
    @media(max-width:500px){
 +
      .flex-box .box-text .box-text-inner p{font-size: 15px;}
 +
    }
 +
  </style>
 +
 
 +
 
 +
  <style type="text/css">
 +
    /* Preload images */
 +
    body:after {
 +
      content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
 +
      display: none;
 +
    }
 +
 
 +
    .lightboxOverlay {
 +
      position: absolute;
 +
      top: 0;
 +
      left: 0;
 +
      z-index: 9999;
 +
      background-color: black;
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
 +
      opacity: 0.8;
 +
      display: none;
 +
    }
 +
 
 +
    .lightbox {
 +
      position: absolute;
 +
      left: 0;
 +
      width: 100%;
 +
      z-index: 10000;
 +
      text-align: center;
 +
      line-height: 0;
 +
      font-weight: normal;
 +
    }
 +
 
 +
    .lightbox .lb-image {
 +
      display: block;
 +
      height: auto;
 +
      max-width: inherit;
 +
      -webkit-border-radius: 3px;
 +
      -moz-border-radius: 3px;
 +
      -ms-border-radius: 3px;
 +
      -o-border-radius: 3px;
 +
      border-radius: 3px;
 +
    }
 +
 
 +
    .lightbox a img {
 +
      border: none;
 +
    }
 +
 
 +
    .lb-outerContainer {
 +
      position: relative;
 +
      background-color: white;
 +
      *zoom: 1;
 +
      width: 250px;
 +
      height: 250px;
 +
      margin: 0 auto;
 +
      -webkit-border-radius: 4px;
 +
      -moz-border-radius: 4px;
 +
      -ms-border-radius: 4px;
 +
      -o-border-radius: 4px;
 +
      border-radius: 4px;
 +
    }
 +
 
 +
    .lb-outerContainer:after {
 +
      content: "";
 +
      display: table;
 +
      clear: both;
 +
    }
 +
 
 +
    .lb-container {
 +
      padding: 4px;
 +
    }
 +
 
 +
    .lb-loader {
 +
      position: absolute;
 +
      top: 43%;
 +
      left: 0;
 +
      height: 25%;
 +
      width: 100%;
 +
      text-align: center;
 +
      line-height: 0;
 +
    }
 +
 
 +
    .lb-cancel {
 +
      display: block;
 +
      width: 32px;
 +
      height: 32px;
 +
      margin: 0 auto;
 +
      background: url(../images/loading.gif) no-repeat;
 +
    }
 +
 
 +
    .lb-nav {
 +
      position: absolute;
 +
      top: 0;
 +
      left: 0;
 +
      height: 100%;
 +
      width: 100%;
 +
      z-index: 10;
 +
    }
 +
 
 +
    .lb-container > .nav {
 +
      left: 0;
 +
    }
 +
 
 +
    .lb-nav a {
 +
      outline: none;
 +
      background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
 +
    }
 +
 
 +
    .lb-prev, .lb-next {
 +
      height: 100%;
 +
      cursor: pointer;
 +
      display: block;
 +
    }
 +
 
 +
    .lb-nav a.lb-prev {
 +
      width: 34%;
 +
      left: 0;
 +
      float: left;
 +
      background: url(../images/prev.png) left 48% no-repeat;
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 +
      opacity: 0;
 +
      -webkit-transition: opacity 0.6s;
 +
      -moz-transition: opacity 0.6s;
 +
      -o-transition: opacity 0.6s;
 +
      transition: opacity 0.6s;
 +
    }
 +
 
 +
    .lb-nav a.lb-prev:hover {
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
      opacity: 1;
 +
    }
 +
 
 +
    .lb-nav a.lb-next {
 +
      width: 64%;
 +
      right: 0;
 +
      float: right;
 +
      background: url(../images/next.png) right 48% no-repeat;
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 +
      opacity: 0;
 +
      -webkit-transition: opacity 0.6s;
 +
      -moz-transition: opacity 0.6s;
 +
      -o-transition: opacity 0.6s;
 +
      transition: opacity 0.6s;
 +
    }
 +
 
 +
    .lb-nav a.lb-next:hover {
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
      opacity: 1;
 +
    }
 +
 
 +
    .lb-dataContainer {
 +
      margin: 0 auto;
 +
      padding-top: 5px;
 +
      *zoom: 1;
 +
      width: 100%;
 +
      -moz-border-radius-bottomleft: 4px;
 +
      -webkit-border-bottom-left-radius: 4px;
 +
      border-bottom-left-radius: 4px;
 +
      -moz-border-radius-bottomright: 4px;
 +
      -webkit-border-bottom-right-radius: 4px;
 +
      border-bottom-right-radius: 4px;
 +
    }
 +
 
 +
    .lb-dataContainer:after {
 +
      content: "";
 +
      display: table;
 +
      clear: both;
 +
    }
 +
 
 +
    .lb-data {
 +
      padding: 0 4px;
 +
      color: #ccc;
 +
    }
 +
 
 +
    .lb-data .lb-details {
 +
      width: 85%;
 +
      float: left;
 +
      text-align: left;
 +
      line-height: 1.1em;
 +
    }
 +
 
 +
    .lb-data .lb-caption {
 +
      font-size: 13px;
 +
      font-weight: bold;
 +
      line-height: 1em;
 +
    }
 +
 
 +
    .lb-data .lb-number {
 +
      display: block;
 +
      clear: left;
 +
      padding-bottom: 1em;
 +
      font-size: 12px;
 +
      color: #999999;
 +
    }
 +
 
 +
    .lb-data .lb-close {
 +
      display: block;
 +
      float: right;
 +
      width: 30px;
 +
      height: 30px;
 +
      background: url(../images/close.png) top right no-repeat;
 +
      text-align: right;
 +
      outline: none;
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 +
      opacity: 0.7;
 +
      -webkit-transition: opacity 0.2s;
 +
      -moz-transition: opacity 0.2s;
 +
      -o-transition: opacity 0.2s;
 +
      transition: opacity 0.2s;
 +
    }
 +
 
 +
    .lb-data .lb-close:hover {
 +
      cursor: pointer;
 +
      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
      opacity: 1;
 +
    }
 +
  </style>
 +
 
 +
<!-- Custom Fonts -->
 +
  <link href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
 +
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 +
 
 +
 
 +
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 +
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 +
    <!--[if lt IE 9]>
 +
        <script src="js/html5shiv.js"></script>
 +
        <script src="js/respond.min.js"></script>
 +
    <![endif]-->
 +
</head>
 +
<body class="single-page">
 +
<div class="wrap-body">
 +
<!-- Intro -->
 +
<div id="intro">
 +
<span class="line-1">SJTU</span>
 +
<span class="line-2">Software</span>
 +
<span class="line-3">BiobrickAssist Technology</span>
 +
 
 +
</div>
 +
 
 +
<header id="page-header">
 +
<!--Navigation-->
 +
<nav id="menu" class="navbar">
 +
<div class="container">
 +
<div class="row">
 +
<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
 +
  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
 +
</div>
 +
<div class="collapse navbar-collapse navbar-ex1-collapse">
 +
<ul class="nav navbar-nav">
 +
<li><a href="https://2017.igem.org/Team:SJTU-Software">Home</a></li>
 +
 
 +
              <li class="dropdown">
 +
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                    Team <b class="caret"></b>
 +
                </a>
 +
                <ul class="dropdown-menu">
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Team">Team</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Collaborations">Collaborations</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
            <li class="dropdown">
 +
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                    Project <b class="caret"></b>
 +
                </a>
 +
                <ul class="dropdown-menu">
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Description">Description</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Design">Design</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Notebook">Notebook</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Contribution">Contribution</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Demonstrate">Demonstrate</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Improve">Improve</a></li>
 +
                    <li><a href="https://2017.igem.org/Team:SJTU-Software/Attributions">Attributions</a></li>
 +
                </ul>
 +
            </li>
 +
 
 +
            <li class="dropdown">
 +
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
 +
                  Human Practice <b class="caret"></b>
 +
              </a>
 +
              <ul class="dropdown-menu">
 +
                  <li><a href="https://2017.igem.org/Team:SJTU-Software/HP/Silver">Silver HP</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:SJTU-Software/HP/Gold_Integrated">Integrated and Gold</a></li>
 +
                  <li><a href="https://2017.igem.org/Team:SJTU-Software/Engagement">Public Engagement</a></li>
 +
              </ul>
 +
          </li>
 +
 
 +
<li><a href="single.html">Awards</a></li>
 +
 
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
</nav>
 +
</header>
 +
 
 +
<!-- /////////////////////////////////////////Content -->
 +
<div id="page-content" class="container">
 +
<div class="row">
 +
<!-----------------Content-------------------->
 +
<section class="box-content box-2 box-style-0">
 +
<div class="flex-box no-gutter">
 +
<div class="col-sm-12">
 +
<div class="box-text">
 +
<div class="box-text-inner pd-exlarge-lg pd-small-xs">
 +
<div class="heading">
 +
<h2>Human Practice</h2>
 +
</div>
 +
 
 +
                  <h4>Visit and Investigate BioTech Companies</h4>
 +
                    <p>
 +
                      As part of the iGEMers, our team not only focuses on the competition itself,
 +
                        but also pays attention to the application of this subject in real life.
 +
                        In order to obtain more information about the current market on synthetic biology industry,
 +
                        our team visited and investigated several BioTech companies this summer.
 +
                        We chose one Start-up company on synthetic biology and two other companies involved in different fields of biology.
 +
                    </p>
 +
 
 +
                  <h5>Bluepha</h5>
 +
                    <p>Though established 3 years ago, Bluepha could be counted as one of the pioneers in synthetic biology field in China.
 +
                        It is currently focusing on low-cost manufacture of PHA degradable high-polymer materials,
 +
                        which turns to be very promising in the market. The CTO of the company, Haoqian Zhang,
 +
                        believed that the essence of synthetic biology’s application today is the promotion of production efficiency.
 +
                        However, now he is concerned that since the industrialization of synthetic biology is still in the preliminary stage,
 +
                        some companies are not willing to make the trial at all.
 +
                        The root of the problem lies on the relatively small population of people doing or even knowing synthetic biology in China.
 +
                        Yet he also pointed out that this dilemma is exactly the opportunity of an emerging industry.
 +
                        His words really inspired us with some deep thinking. Later,
 +
                        we did many researches both off and online about the status quo and prospect of synthetic biology industry.
 +
                        Then we summarized the information and prepared a presentation to introduce synthetic biology to students
 +
                        and faculties in the university. We hope to get more people familiar with this subject, and hopefully in the future,
 +
                        to engage in the promotion of the industry.
 +
                    </p>
 +
                    <p>And one more thing to be mention here is that all the founders of Bluepha are previous iGEMers in universities.
 +
                        During our talk, Haoqian Zhang recalled that it was IGEM that made him find his unique direction in the life.
 +
                    </p>
 +
 
 +
                  <h5>NovelbioTechnology Company</h5>
 +
                    <p>Novelbio technology company is a company mainly focused on biological cloud computing.
 +
                        The founder of NovelbioTechnology Company, Jie Zong, analyzed the potential of biology software for us.
 +
                        He thought highly of Next Generation Sequencing, CRISPR and AI image recognition in the biological industry.
 +
                        And Yaoyanshe APP is the first platform of pharmaceutical research and development industry and value sharing and trading.
 +
                    </p>
 +
                    <p>Though three companies have their own emphasis respectively, from three of them,
 +
                        we got a clearer picture on the future of biology industry.
 +
                    </p>
 +
 
 +
                  <h5>YaoYanShe</h5>
 +
                    <p>Another HP activity is to visit and learn from Yaoyanshe,
 +
                        a mobile application developed by Shanghai Mudi Biological Technology Co. Ltd.
 +
                        Synthetic biology is developing rapidly and in the key stage of industrialization.
 +
                        It can be predicted that we 'll face great challenges.
 +
                        It is generally agreed that learning from current successful industries may provide valuable experience.
 +
                        Through the mentioned conference, we realized that our project,
 +
                        Biobrick Assist Technology(BAT) had a chance to be brought to the market.  Based on these thoughts,
 +
                        we got in touch with Yaoyanshe.
 +
                    </p>
 +
                    <p>Yaoyanshe App focus on Pharmaceutical research and developing industry.
 +
                        It is an exclusive internet platform that combines information of drug research and development,
 +
                        clinical database, development tools and industry communication.
 +
                        It helps industry share resources to save time and improve efficiency for the researchers.
 +
                        More than 90 percent drug researchers use Yaoyanshe and benefit from it.
 +
                    </p>
 +
                    <p>We are dedicated to designing and developing useful programs for Synthetic Biology and iGEM community.
 +
                        Our software, Biobrick Assist Technology(BAT),
 +
                        is a suite of synthetic biology aided tools and mainly functions as a search and evaluation engine for biobricks.
 +
                        We hope it can help researchers study biobricks more conveniently and efficiently.
 +
                        As its function is similar with Yanyanshe APP, we got in touch with Yanyanshe’s co-founder, Mr.Xie.
 +
                    </p>
 +
                    <p>Through interviews Mr.Xie taught us a lot.
 +
                        He shared his experience of creating Yanyanshe and gave many effective suggestions on our software.
 +
                        For example, he suggested that we should focus on smaller scale in the beginning, and then expand user scale gradually.
 +
                        He also mentioned that we can concentrate on some core functions, with them becoming mature,
 +
                        we can develop more add-ons. We followed his advice and decided to focus more on the search and evaluation function.
 +
                        Then we optimized the scoring algorithm to make it work more efficiently.
 +
                        Besides, inspired by Yanyanshe, we realized that we should build a platform for users to communicate,
 +
                        thus we added a small but useful community like Q/A for users, which enabled researchers to communicate and learn from each other.
 +
                    </p>
 +
                    <p>We learned a lot from the successful enterprise. We will keep in touch, and we will keep learning. </p>
 +
 
 +
                  <hr></hr>
 +
                  <h4>Interview with Scholars in NCTU</h4>
 +
                    <p>
 +
                      During our stay in Taiwan, our team interviewed some scholars in NCTU about synthetic biology,
 +
                        through which we got to understand the current situation and discrepancies on the development of synthetic biology between Taiwan and mainland.
 +
                        The communications with them promoted our deeper thinking on synthetic biology,
 +
                        and deepened the friendship between two Chiao Tong university on both sides of the strait.
 +
                    </p>
 +
                    <h5>With Wenliang Chen</h5>
 +
                    <p>
 +
                      Wenliang Chen has been NCTU IGEM instructor for many years,
 +
                        and based on his rich experiences in instructing students，he shared many valuable opinions on the IGEM competition with us.
 +
                        During our talk with Instructor Chen, the idea he brought up frequently was that teachers should cultivate students'
 +
                        interests rather than to infuse utilitarian thoughts when educating students to pursue scholarship.
 +
                        An interest is the greatest motivation for students to learn well.
 +
                        His advice on enjoying the exploration of the mysterious world of science greatly inspired us. On the other hand,
 +
                        he also underlined the significance and benefits of cooperation between research teams,
 +
                        which is a core principle of IGEM competition.
 +
                    </p>
 +
                    <h5>With Yizheng Lan</h5>
 +
                    <p>
 +
                    Doctor Yizheng Lan has been doing interdisciplinary researches and he is now working on metabolism.
 +
                        In our talk, he mainly focused on applications of synthetic biology.
 +
                        He mentioned many areas where synthetic biology is in need, such as food industry,
 +
                        chemical engineering and environment. As a result, his words inspired us to investigate some biology industries in China nowadays.
 +
                        We want to see how are theories exerted in practice.
 +
                        He pointed out that only in the process of creating and solving problems may a discipline keep its vitality.
 +
                        Besides the application aspect, doctor Lan shared his view on interdisciplinary study.
 +
                        He believed that no matter how many fields we are involved with,
 +
                        only one field requires intensive learning while the others just need a cursory understanding,
 +
                        which helps communications among subjects. Since our team belongs to software track,
 +
                        an exact interdisciplinary project between biology and computer science,
 +
                        Lan’s words depicted a clearer picture for us to design our project.
 +
                    </p>
 +
 
 +
                    <hr></hr>
 +
                    <p>
 +
                      Our team has integrated this year’s HP into the whole process of our project.
 +
                        It has been continuously evolved through communications with others.
 +
                        Taking advice and learning from others constantly help us refine our project.
 +
                        Since the beginning of our project, we have interviewed many people and enterprises,
 +
                        from which we received a lot of assistance and inspirations.<br>On our trip to Taiwan,
 +
                        we are honored to converse with two teachers of NCTU in synthetic biology field.
 +
                        Instructor Wenliang Chen and Doctor Yizheng Lan shared many valuable and interesting thoughts with us.
 +
                        After hearing Dr. Lan’s viewpoints on the application of biology,
 +
                        we decided to visit some biology companies in China to investigate the current situation and prospect of biology industry.
 +
                        Synthetic biology is now a rising disciplinary, while is not thoroughly widespread among public,
 +
                        therefore, to start a company is highly challenging.
 +
                    </p>
 +
                    <p>
 +
                        Overall, we tried our best to combine what we have learnt from the expertise during the human practices and what we have achieved in our project to make it better and to have the potential to face the market and put in application.
 +
                    </p>
 +
 
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</section>
 +
</div>
 +
</div>
 +
<footer id="page-footer" class="footer-contact">
 +
<div class="wrap-footer container">
 +
<div class="row">
 +
<div class="flex-box no-gutter">
 +
<!-- Map and address -->
 +
<div class="col-lg-12">
 +
<div class="contact-info">
 +
<!-- Show Info Button -->
 +
<a href="#" class="show-info-link"><i class="fa fa-info"></i> Show info</a>
 +
<div id="map" style="height: 550px;"></div>
 +
<address class="contact-info-wrapper">
 +
<ul class="list-unstyled">
 +
<!-- Address -->
 +
<li class="contact-group">
 +
  <span class="adr-heading">Address</span>
 +
  <span class="adr-info">No. 800 Dongchuan Road, Minhang District, Shanghai, China</span>
 +
</li>
 +
<!-- Email -->
 +
<li class="contact-group">
 +
  <span class="adr-heading">Contact Us</span>
 +
  <span class="adr-info">dcclogin@126.com</span>
 +
</li>
 +
</ul>
 +
</address>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class="bottom-footer">
 +
<div class="container">
 +
<div class="row">
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
</footer><!-- Footer -->
 +
 
 +
 
 +
</div><!-- .wrap-body -->
 +
 
 +
 
 +
<!-- jQuery and Plugin-->
 +
<script src="js/lightbox-plus-jquery.min.js"></script>
 +
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 +
<!--<script src="js/jquery-3.2.1.min.js"></script>-->
 +
<script src="js/main.js"></script>
 +
<!-- Bootstrap JS -->
 +
  <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 +
<!--<script src="js/bootstrap.min.js"></script>-->
 +
<!-- Google Map -->
 +
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7V-mAjEzzmP6PCQda8To0ZW_o3UOCVCE&callback=initMap" async defer></script>
 +
<!-- Logo -->
 +
<!--<script src="js/arctext.min.js"></script>-->
 +
<script>
 +
$(document).ready(function() {
 +
  $(".line-2").arctext({radius: 400});
 +
});
 +
</script>
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 13:47, 27 October 2017

SJTU-Software_Collaborations
SJTU Software BiobrickAssist Technology

Human Practice

Visit and Investigate BioTech Companies

As part of the iGEMers, our team not only focuses on the competition itself, but also pays attention to the application of this subject in real life. In order to obtain more information about the current market on synthetic biology industry, our team visited and investigated several BioTech companies this summer. We chose one Start-up company on synthetic biology and two other companies involved in different fields of biology.

Bluepha

Though established 3 years ago, Bluepha could be counted as one of the pioneers in synthetic biology field in China. It is currently focusing on low-cost manufacture of PHA degradable high-polymer materials, which turns to be very promising in the market. The CTO of the company, Haoqian Zhang, believed that the essence of synthetic biology’s application today is the promotion of production efficiency. However, now he is concerned that since the industrialization of synthetic biology is still in the preliminary stage, some companies are not willing to make the trial at all. The root of the problem lies on the relatively small population of people doing or even knowing synthetic biology in China. Yet he also pointed out that this dilemma is exactly the opportunity of an emerging industry. His words really inspired us with some deep thinking. Later, we did many researches both off and online about the status quo and prospect of synthetic biology industry. Then we summarized the information and prepared a presentation to introduce synthetic biology to students and faculties in the university. We hope to get more people familiar with this subject, and hopefully in the future, to engage in the promotion of the industry.

And one more thing to be mention here is that all the founders of Bluepha are previous iGEMers in universities. During our talk, Haoqian Zhang recalled that it was IGEM that made him find his unique direction in the life.

NovelbioTechnology Company

Novelbio technology company is a company mainly focused on biological cloud computing. The founder of NovelbioTechnology Company, Jie Zong, analyzed the potential of biology software for us. He thought highly of Next Generation Sequencing, CRISPR and AI image recognition in the biological industry. And Yaoyanshe APP is the first platform of pharmaceutical research and development industry and value sharing and trading.

Though three companies have their own emphasis respectively, from three of them, we got a clearer picture on the future of biology industry.

YaoYanShe

Another HP activity is to visit and learn from Yaoyanshe, a mobile application developed by Shanghai Mudi Biological Technology Co. Ltd. Synthetic biology is developing rapidly and in the key stage of industrialization. It can be predicted that we 'll face great challenges. It is generally agreed that learning from current successful industries may provide valuable experience. Through the mentioned conference, we realized that our project, Biobrick Assist Technology(BAT) had a chance to be brought to the market. Based on these thoughts, we got in touch with Yaoyanshe.

Yaoyanshe App focus on Pharmaceutical research and developing industry. It is an exclusive internet platform that combines information of drug research and development, clinical database, development tools and industry communication. It helps industry share resources to save time and improve efficiency for the researchers. More than 90 percent drug researchers use Yaoyanshe and benefit from it.

We are dedicated to designing and developing useful programs for Synthetic Biology and iGEM community. Our software, Biobrick Assist Technology(BAT), is a suite of synthetic biology aided tools and mainly functions as a search and evaluation engine for biobricks. We hope it can help researchers study biobricks more conveniently and efficiently. As its function is similar with Yanyanshe APP, we got in touch with Yanyanshe’s co-founder, Mr.Xie.

Through interviews Mr.Xie taught us a lot. He shared his experience of creating Yanyanshe and gave many effective suggestions on our software. For example, he suggested that we should focus on smaller scale in the beginning, and then expand user scale gradually. He also mentioned that we can concentrate on some core functions, with them becoming mature, we can develop more add-ons. We followed his advice and decided to focus more on the search and evaluation function. Then we optimized the scoring algorithm to make it work more efficiently. Besides, inspired by Yanyanshe, we realized that we should build a platform for users to communicate, thus we added a small but useful community like Q/A for users, which enabled researchers to communicate and learn from each other.

We learned a lot from the successful enterprise. We will keep in touch, and we will keep learning.

Interview with Scholars in NCTU

During our stay in Taiwan, our team interviewed some scholars in NCTU about synthetic biology, through which we got to understand the current situation and discrepancies on the development of synthetic biology between Taiwan and mainland. The communications with them promoted our deeper thinking on synthetic biology, and deepened the friendship between two Chiao Tong university on both sides of the strait.

With Wenliang Chen

Wenliang Chen has been NCTU IGEM instructor for many years, and based on his rich experiences in instructing students，he shared many valuable opinions on the IGEM competition with us. During our talk with Instructor Chen, the idea he brought up frequently was that teachers should cultivate students' interests rather than to infuse utilitarian thoughts when educating students to pursue scholarship. An interest is the greatest motivation for students to learn well. His advice on enjoying the exploration of the mysterious world of science greatly inspired us. On the other hand, he also underlined the significance and benefits of cooperation between research teams, which is a core principle of IGEM competition.

With Yizheng Lan

Doctor Yizheng Lan has been doing interdisciplinary researches and he is now working on metabolism. In our talk, he mainly focused on applications of synthetic biology. He mentioned many areas where synthetic biology is in need, such as food industry, chemical engineering and environment. As a result, his words inspired us to investigate some biology industries in China nowadays. We want to see how are theories exerted in practice. He pointed out that only in the process of creating and solving problems may a discipline keep its vitality. Besides the application aspect, doctor Lan shared his view on interdisciplinary study. He believed that no matter how many fields we are involved with, only one field requires intensive learning while the others just need a cursory understanding, which helps communications among subjects. Since our team belongs to software track, an exact interdisciplinary project between biology and computer science, Lan’s words depicted a clearer picture for us to design our project.

Our team has integrated this year’s HP into the whole process of our project. It has been continuously evolved through communications with others. Taking advice and learning from others constantly help us refine our project. Since the beginning of our project, we have interviewed many people and enterprises, from which we received a lot of assistance and inspirations.
On our trip to Taiwan, we are honored to converse with two teachers of NCTU in synthetic biology field. Instructor Wenliang Chen and Doctor Yizheng Lan shared many valuable and interesting thoughts with us. After hearing Dr. Lan’s viewpoints on the application of biology, we decided to visit some biology companies in China to investigate the current situation and prospect of biology industry. Synthetic biology is now a rising disciplinary, while is not thoroughly widespread among public, therefore, to start a company is highly challenging.

Overall, we tried our best to combine what we have learnt from the expertise during the human practices and what we have achieved in our project to make it better and to have the potential to face the market and put in application.

Show info
  • Address No. 800 Dongchuan Road, Minhang District, Shanghai, China
  • Contact Us dcclogin@126.com