Difference between revisions of "Team:SJTU-Software/Attributions"

(Prototype team page)
 
Line 1: Line 1:
 
{{SJTU-Software}}
 
{{SJTU-Software}}
−
<html>
+
<html lang="en">
 +
<head>
 +
    <meta charset="utf-8" />
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 +
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 +
    <meta name="description" content="Free Bootstrap Themes by Html5xCss3 dot com - Free Responsive Html5 Templates">
 +
    <meta name="author" content="#">
  
 +
    <title>SJTU-Software_Attributions</title>
  
 +
    <!-- 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;}
  
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    html { -webkit-text-size-adjust: none;}
 +
    .video embed,.video object,.video iframe { width: 100%;  height: auto;}
 +
    img{max-width:100%; height: auto;width: auto\9; /* ie8 */}
  
−
<div class="column full_size judges-will-not-evaluate">
+
    h1 {font-size: 38px;}
−
<h3>★  ALERT! </h3>
+
    h2 {font-size: 36px;}
−
<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>
+
    h3 {font-size: 32px;}
−
<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>
+
    h4 {font-size: 28px;}
−
</div>
+
    h5 {font-size: 24px;}
−
<div class="clear"></div>
+
    h6 {font-size: 20px;}
  
 +
    h1,h2,h3,h4,h5,h6 {font-weight: 700;color: #111;line-height: 1.1;font-family: 'Montserrat', sans-serif;}
  
 +
    p {margin: 0 0 20px;}
  
 +
    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 full_size">
+
    button {border: none;outline: 0;}
−
<h1>Attributions</h1>
+
    ul li{list-style: none;}
 +
    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 {
 +
        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;}
  
−
<p> Each team must clearly attribute work done by the student team members on this page. The team must distinguish work done by the students from work done by others, including the host labs, advisors, instructors, and individuals not on the team roster.  
+
    /* --Progress-- */
−
<br><br>
+
    .progress{background-color: rgba(0, 0, 0, .3); height: 15px;box-shadow: none;}
−
This is a bronze medal requirement. Please see the <a href="https://2017.igem.org/Judging/Medals">Medals requirements page</a> for more details.</p>
+
    .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>
+
    /* --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;}
  
−
<div class="clear"></div>
+
    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}
  
−
<div class="column half_size">
+
    .line-1 {position: relative;}
−
<h5> Why is this page needed? </h5>
+
    .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;}
−
<p>The Attribution requirement helps the judges know what you did yourselves and what you had help with. We don't mind if you get help with difficult or complex techniques, but you must report what work your team did and what work was done by others.</p>
+
    .line-2 {font-family: "Changa One", sans-serif;font-weight: 400;text-transform: uppercase;font-size: 90px;letter-spacing: 15px;margin: 0 0;}
−
<p>
+
    .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;}
−
For example, you might choose to work with an animal model during your project. Working with animals requires getting a license and applying far in advance to conduct certain experiments in many countries. This is difficult to achieve during the course of a summer, but much easier if you can work with a postdoc or PI who has the right licenses.</p>
+
    .line-3:before, .line-3:after {content: " ";position: absolute;width: 50px;height: 5px;border-top: 1px solid #fff;border-bottom: 1px solid #fff;}
−
</div>
+
    .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;}
 +
    }
  
−
<div class="column half_size">
+
    @media(max-width:767px){
−
<h5> What should this page have?</h5>
+
      #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;}
 +
    }
  
−
<ul>
+
    @media(max-width:500px){
−
<li>General Support</li>
+
      #intro{width: 250px;}
−
<li>Project support and advice</li>
+
      .line-1{font-size: 17px;}
−
<li>Fundraising help and advice</li>
+
      .line-2{font-size: 50px;letter-spacing: 8px;}
−
<li>Lab support</li>
+
      .line-3{font-size: 12px;margin: 40px 0 0;letter-spacing: 3px;}
−
<li>Difficult technique support</li>
+
      .line-3:before, .line-3:after {width: 20px;}
−
<li>Project advisor support</li>
+
      .line-3:before {margin: 4px 0 0 -30px;}
−
<li>Wiki support</li>
+
      .line-3:after {margin: 4px 0 0 10px;}
−
<li>Presentation coaching</li>
+
      .line-4{font-size: 15px;margin: 20px auto;}
−
<li>Human Practices support</li>
+
      .line-4 a:nth-child(1):after {font-size: 25px;}
−
<li> Thanks and acknowledgements for all other people involved in helping make a successful iGEM team</li>
+
    }
−
</ul>
+
−
</div>
+
  
 +
    header.page-header{}
  
−
<div class="clear"></div>
+
    /* ---------------------------------------------------------------------------- */
 +
    /* -------------------------------------Content-------------------------------- */
 +
    /* ---------------------------------------------------------------------------- */
 +
    #page-content{background: #fff;}
  
−
<div class="column half_size">
+
    /* ---HomePage--- */
 +
    .box-content {}
  
−
<div class="highlight">
+
    .box-content.box-style-0{background-image: url(../images/patftern-white2.png); background-color: #fff;}
−
<h5> Can we base our project on a previous one? </h5>
+
    .box-content.box-style-1{background: url(../images/pattern-white.png) center center;background-size: cover; background-color: #fff;}
−
<p>Yes! You can have a project based on a previous team, or based on someone else's idea, <b>as long as you state this fact very clearly and give credit for the original project.</b> </p>
+
    .box-content.box-style-2{background-image: url(../images/home-6.png);background-position: 80% top;background-repeat: no-repeat;background-color: #F8F9F1;}
−
</div>
+
    .box-content.box-style-3{background: url(../images/ep_naturalblack.png) fixed center center;color:#fff;}
−
</div>
+
  
 +
    /* ---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;}
 +
    }
  
−
<div class="column half_size">
+
    @media(max-width:500px){
 +
      .heading h2{font-size: 43px;line-height: 40px;margin-top: 0;}
 +
    }
  
−
<h5>Inspiration</h5>
+
    /* ---------------------------------------------------------------------------- */
−
<p>Take a look at what other teams have done:</p>
+
    /* ------------------------------------Menu------------------------------------ */
−
<ul>
+
    /* ---------------------------------------------------------------------------- */
−
<li><a href="https://2011.igem.org/Team:Imperial_College_London/Team">2011 Imperial College London</a> (scroll to the bottom)</li>
+
    #menu {border-radius: 0;text-transform: uppercase;border: none;}
−
<li><a href="https://2014.igem.org/Team:Exeter/Attributions">2014 Exeter </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Melbourne/Attributions">2014 Melbourne </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Valencia_Biocampus/Attributions">2014 Valencia Biocampus</a></li>
+
−
</ul>
+
  
−
</div>
+
    #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;}
  
−
<div class="clear"></div>
+
    #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);}
  
−
<div class="column half_size">
+
    #menu .btn-navbar {font-size: 20px;color: #FFF;padding: 4px 12px;float: right;border: 2px solid #fff;}
  
−
<h5>Team training and Project start</h5>
 
−
<p>Tell us if your institution teaches an iGEM or synthetic biology class and when you started your project:</p>
 
−
<ul>
 
−
<li>Does your institution teach an iGEM or synthetic biology course?</li>
 
−
<li>When did you start this course?</li>
 
−
<li>Are the syllabus and course materials freely available online?</li>
 
−
<li>When did you start your brainstorming?</li>
 
−
<li>When did you start in the lab?</li>
 
−
<li>When did you start working on  your project?</li>
 
  
−
</ul>
+
    @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);}
  
−
</div>
+
      #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 {}
  
−
</div>
+
 
 +
 
 +
 
 +
    /* ---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>Attributions</h2>
 +
</div>
 +
 
 +
                  <p>
 +
                    First of all, we want to acknowledge all team members’ effort during the one-year preparation.
 +
                    Four groups work hard and tightly so that we can achieve a satisfying outcome.
 +
                    Here present the team group functions, their members’ work division and their achievements.
 +
                  </p>
 +
 
 +
                  <h4>Program Group</h4>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>Human Practice Group</h4>
 +
                    <p>
 +
                      Keep positively contact with other iGEM teams, reach collaborations with different organizations, like other universities, and biology companies.
 +
                      <li> <b>Runzi Tan</b>, organize HP activities, arrange and report </li>
 +
                      <li> <b>Kexin Xie</b>, collaboration and communication </li>
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>Copy Writer Practice Group</h4>
 +
                    <p>
 +
                      In charge of the documents writing of the wiki pages, posters, and the Giant Jamboree presentation, and also keep records of the team group meetings and progress.
 +
                      <li> <b>Naiqiao Hou</b>, poster and presentation copywriting </li>
 +
                      <li> <b>Chenyi Xie</b>, team records and wiki pages </li>
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>Design Group</h4>
 +
                    <p>
 +
                      Design the team logo and symbol, and beautify the wiki pages, the poster and the presentation PowerPoint to make them more clear and unstandable.
 +
                      <li> <b>Xiaohan Chi</b></li>
 +
                      <li> <b>Yiming Chen</b></li>
 +
                      <li> <b>Zeshi Zhu</b></li>
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <p>
 +
                    Next, we received generous support and help within our school in order to ensure the project to go on wheels.
 +
                  </p>
 +
                  <h4>Instructors</h4>
 +
                    <li><b>Dr. Chaochun Wei</b>, our Primary PI, offered us advice on our project and suggestions on our Human Practice</li>
 +
                    <li><b>Dr. Feng Chen</b>, our Secondary PI, helped us with fundraising and offered us many suggestions on programming</li>
 +
                    <li><b>Hongyu Ou</b>, our instructor, helped us find a good server and offered some technical support to our program</li>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>College Support</h4>
 +
                    <li>School of Life Science and Biotechnology</li>
 +
                    <li>School of Chemistry</li>
 +
                    <li>School of Electronic Information and Electrical Engineering</li>
 +
                    <li>School of Media & Design</li>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>2016 SJTU-Software Team</h4>
 +
                    <p>
 +
                      The last year’s team shared their experience with us, and offered preparation suggestions based on the difficulties they encountered.
 +
                      Especially the former team leader, Shiyu Fan, did much effort in selecting this year’s team member.
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <h4>2015 SJTU-Software Team</h4>
 +
                    <p>
 +
 
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <p>
 +
                    Besides, we also want to show our gratitude towards other universities’ iGEM teams and biology companies, which are involved in our HP activities and collaborations.
 +
                  </p>
 +
 
 +
                  <h4>Fujian Agriculture and Forestry University (FAFU)</h4>
 +
                    <p>
 +
                      Organizer of the Conference of China iGEMer Community, inviting us as participants.
 +
                    </p>
 +
 
 +
                  <h4>National Chiao Tung University (NCTU)</h4>
 +
                    <p>
 +
                      Organizer of the 5th iGEM Asia Conference, inviting us as participants.
 +
                    </p>
 +
 
 +
                  <h4>University of Science and Technology of China (USTC)</h4>
 +
                    <p>
 +
                      Invited us to test their application and seed some feedbacks to them. They gave us suggestions on filtering biobricks.
 +
                    </p>
 +
 
 +
                  <h4>Bluepha</h4>
 +
                    <p>
 +
                      Bluepha is a company that devoted to applying synthetic biology technology to industrial biological manufacturing.
 +
                      One of their co-founders, Doc. Haoqian Zhang accepted our interview and discussed the present situation of synthetic biology industry in China based on our iGEM topic.
 +
                    </p>
 +
 
 +
                  <h4>Yaoyanshe</h4>
 +
                    <p>
 +
                      Yaoyanshe APP is the first platform of pharmaceutical research and development industry and value sharing and trading.
 +
                      The founder of Yaoyanshe gave advice on the future industry development in Biology and helped us to polish the idea of our project.
 +
                    </p>
 +
 
 +
                  <h4>Novelbio Technology Company</h4>
 +
                    <p>
 +
                      Novelbio technology company is a company mainly focused on biological cloud computing.
 +
                      The founder of Novelbio Technology Company, Jie Zong, analyzed the potential of biology software for us.
 +
                    </p>
 +
 
 +
                  <hr></hr>
 +
 
 +
                  <b>It is because of your sincere devote and support that we achieved this all.Thanks again for your efforts!</b>
 +
 
 +
                </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 11:23, 26 October 2017

SJTU-Software_Attributions
SJTU Software BiobrickAssist Technology

Attributions

First of all, we want to acknowledge all team members’ effort during the one-year preparation. Four groups work hard and tightly so that we can achieve a satisfying outcome. Here present the team group functions, their members’ work division and their achievements.

Program Group

Human Practice Group

Keep positively contact with other iGEM teams, reach collaborations with different organizations, like other universities, and biology companies.

  • Runzi Tan, organize HP activities, arrange and report
  • Kexin Xie, collaboration and communication

    • Copy Writer Practice Group

    In charge of the documents writing of the wiki pages, posters, and the Giant Jamboree presentation, and also keep records of the team group meetings and progress.

  • Naiqiao Hou, poster and presentation copywriting
  • Chenyi Xie, team records and wiki pages

    • Design Group

    Design the team logo and symbol, and beautify the wiki pages, the poster and the presentation PowerPoint to make them more clear and unstandable.

  • Xiaohan Chi
  • Yiming Chen
  • Zeshi Zhu

    • Next, we received generous support and help within our school in order to ensure the project to go on wheels.

    Instructors

  • Dr. Chaochun Wei, our Primary PI, offered us advice on our project and suggestions on our Human Practice
  • Dr. Feng Chen, our Secondary PI, helped us with fundraising and offered us many suggestions on programming
  • Hongyu Ou, our instructor, helped us find a good server and offered some technical support to our program

    • College Support

  • School of Life Science and Biotechnology
  • School of Chemistry
  • School of Electronic Information and Electrical Engineering
  • School of Media & Design

    • 2016 SJTU-Software Team

    The last year’s team shared their experience with us, and offered preparation suggestions based on the difficulties they encountered. Especially the former team leader, Shiyu Fan, did much effort in selecting this year’s team member.

    2015 SJTU-Software Team

    Besides, we also want to show our gratitude towards other universities’ iGEM teams and biology companies, which are involved in our HP activities and collaborations.

    Fujian Agriculture and Forestry University (FAFU)

    Organizer of the Conference of China iGEMer Community, inviting us as participants.

    National Chiao Tung University (NCTU)

    Organizer of the 5th iGEM Asia Conference, inviting us as participants.

    University of Science and Technology of China (USTC)

    Invited us to test their application and seed some feedbacks to them. They gave us suggestions on filtering biobricks.

    Bluepha

    Bluepha is a company that devoted to applying synthetic biology technology to industrial biological manufacturing. One of their co-founders, Doc. Haoqian Zhang accepted our interview and discussed the present situation of synthetic biology industry in China based on our iGEM topic.

    Yaoyanshe

    Yaoyanshe APP is the first platform of pharmaceutical research and development industry and value sharing and trading. The founder of Yaoyanshe gave advice on the future industry development in Biology and helped us to polish the idea of our project.

    Novelbio Technology Company

    Novelbio technology company is a company mainly focused on biological cloud computing. The founder of Novelbio Technology Company, Jie Zong, analyzed the potential of biology software for us.

    It is because of your sincere devote and support that we achieved this all.Thanks again for your efforts!
    Show info
    • Address No. 800 Dongchuan Road, Minhang District, Shanghai, China
    • Contact Us dcclogin@126.com