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

(Prototype team page)
 
Line 1: Line 1:
−
{{SJTU-Software}}
+
<!DOCTYPE html>
−
<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="#">
  
 +
    <title>SJTU-Software_Collaborations</title>
  
−
<div class="column full_size">
+
    <!-- 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;}
  
−
<h1>Silver Medal Human Practices</h1>
+
    /* ---------------------------------------------------------------------------- */
−
<p>iGEM teams are leading in the area of Human Practices because they conduct their projects within 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;}
 +
    img{max-width:100%; height: auto;width: auto\9; /* ie8 */}
  
−
<div class="clear"></div>
+
    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>Silver Medal Criterion #3</h3>
+
−
<p>Convince the judges you have thought carefully and creatively about whether your work is safe, responsible and good for the world. You could accomplish this through engaging with your local, national and/or international communities or other approaches. Please note that standard surveys will not fulfill this criteria.</p>
+
−
</div>
+
  
−
<div class="column half_size">
+
    p {margin: 0 0 20px;}
−
<h5>Some Human Practices topic areas </h5>
+
−
<ul>
+
−
<li>Philosophy</li>
+
−
<li>Public Engagement / Dialogue</li>
+
−
<li>Education</li>
+
−
<li>Product Design</li>
+
−
<li>Scale-Up and Deployment Issues</li>
+
−
<li>Environmental Impact</li>
+
−
<li>Ethics</li>
+
−
<li>Safety</li>
+
−
<li>Security</li>
+
−
<li>Public Policy</li>
+
−
<li>Law and Regulation</li>
+
−
<li>Risk Assessment</li>
+
−
</ul>
+
−
</div>
+
  
 +
    a {color: #333;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
 +
    a:hover,
 +
    a:focus {text-decoration: none;color:#EC495E;}
  
−
<div class="column half_size">
+
    button {border: none;outline: 0;}
−
<h5>What should we write about on this page?</h5>
+
    ul li{list-style: none;}
−
<p>On this page, you should write about the Human Practices topics you considered in your project, and document any special activities you did (such as visiting experts, talking to lawmakers, or doing public engagement). This should include all of the work done for the Silver Medal Criterion #3. Details for your Gold medal work and/or work for the two Human Practices special prizes should be put on those specified pages.</p>
+
    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 {
−
</div>
+
        height: 40px;
 +
        padding-left: 20px;
 +
        border: 1px solid #ccc;
 +
        border-radius: 0;
 +
        box-shadow: none;
 +
        line-height: 22px;
 +
        letter-spacing: .5px;
 +
        -webkit-transition: border-color 0.5s;
 +
        transition: border-color 0.5s;
 +
    }
 +
    .form-control:focus, .form-control:hover {
 +
        outline: none;
 +
        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;}
  
−
<div class="column half_size">
+
    /* --no-gutter-- */
−
<h5>Inspiration</h5>
+
    .no-gutter::after, .no-gutter::before {content: " ";display: table;}
−
<p>Read what other teams have done:</p>
+
    .no-gutter::after {clear: both;}
−
<ul>
+
    .no-gutter{margin: 0 !important;}
−
<li><a href="https://2014.igem.org/Team:Dundee/policypractice/experts">2014 Dundee </a></li>
+
    .no-gutter > [class*=col-] {
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Policy_Practices_Overview">2014 UC Davis </a></li>
+
      padding-right: 0;
−
<li><a href="https://2013.igem.org/Team:Manchester/HumanPractices">2013 Manchester </a></li>
+
      padding-left: 0;
−
<li><a href="https://2013.igem.org/Team:Cornell/outreach">2013 Cornell </a></li>
+
    }
−
</ul>
+
    .copyrights{
−
</div>
+
      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>Communication Conference at Nanjing University</h4>
 +
                    <p>
 +
                      Participants: Nanjing University, Tsinghua University, Shanghai Jiao Tong University,
 +
                        Fudan University, Tianjin University, Sun Yet Sun University.
 +
                    </p>
 +
                    <p>On May 20th, our members attended the iGEM communication conference,
 +
                      which was held by nanjing-china and nju-china, in School of Life Science, Nanjing University.
 +
                    </p>
 +
                    <p>We shared the experience of Giant Jamboree and discussed how to establish a team,
 +
                        bring up new ideas and assign works. We also introduced our projects, gave our suggestions and shared fresh ideas.
 +
                        Through the communication we learned from each other, which was a great help to our 2017 iGEM projects. Besides,
 +
                        realizing the fact that present alignment CCIC, which is Central China iGEM Consortium,
 +
                        could not meet the trend of Synthetic Biology’s development, we introduced our last year’s project, iMAP,
 +
                        which can be used to construct a bridge between different iGEM teams. Finally, the meeting was a complete success.
 +
                    </p>
 +
 +
                  <hr></hr>
 +
                  <h4>5th iGEM Asia Pacific Conference in National Chiao Tung University</h4>
 +
                    <p>
 +
                      The 5th iGEM Asia Pacific Conference was held in at National Chiao Tung University, Taiwan from 2017/07/30 to 2017/08/04.
 +
                    </p>
 +
                    <p>
 +
                      There were more than 20 teams from different universities in Asia and America attending this conference.
 +
                        Through the presentation and poster exhibition, we exchanged information and experience with one another,
 +
                        which benefited us a lot. Besides, communicating with professors and other software teams helped to simulate
 +
                        our creativity and bring about more ideals. After the conference, we kept in touch with USTC-Software,
 +
                        who also focused on developing software, and the communications between us helped us to deal with tough problems together.
 +
                    </p>
 +
 +
 +
                    <hr></hr>
 +
                    <p>
 +
                      Through these colorful and meaningful human practice activities, we harvested not only the
 +
                        communications and friendships among iGEM teams, but also the tight collaborations rooted in these
 +
                        friendships. We managed to understand how innovative ideas in synthetic biotechnology sprouted and
 +
                        how these ideas going to influence the subject, and even the world.
 +
                    </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:16, 27 October 2017

<!DOCTYPE html> SJTU-Software_Collaborations

SJTU Software BiobrickAssist Technology

Human Practice

Communication Conference at Nanjing University

Participants: Nanjing University, Tsinghua University, Shanghai Jiao Tong University, Fudan University, Tianjin University, Sun Yet Sun University.

On May 20th, our members attended the iGEM communication conference, which was held by nanjing-china and nju-china, in School of Life Science, Nanjing University.

We shared the experience of Giant Jamboree and discussed how to establish a team, bring up new ideas and assign works. We also introduced our projects, gave our suggestions and shared fresh ideas. Through the communication we learned from each other, which was a great help to our 2017 iGEM projects. Besides, realizing the fact that present alignment CCIC, which is Central China iGEM Consortium, could not meet the trend of Synthetic Biology’s development, we introduced our last year’s project, iMAP, which can be used to construct a bridge between different iGEM teams. Finally, the meeting was a complete success.

5th iGEM Asia Pacific Conference in National Chiao Tung University

The 5th iGEM Asia Pacific Conference was held in at National Chiao Tung University, Taiwan from 2017/07/30 to 2017/08/04.

There were more than 20 teams from different universities in Asia and America attending this conference. Through the presentation and poster exhibition, we exchanged information and experience with one another, which benefited us a lot. Besides, communicating with professors and other software teams helped to simulate our creativity and bring about more ideals. After the conference, we kept in touch with USTC-Software, who also focused on developing software, and the communications between us helped us to deal with tough problems together.

Through these colorful and meaningful human practice activities, we harvested not only the communications and friendships among iGEM teams, but also the tight collaborations rooted in these friendships. We managed to understand how innovative ideas in synthetic biotechnology sprouted and how these ideas going to influence the subject, and even the world.

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