|
|
| (15 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | {{Team:NCTU_Formosa/navigation}}
| |
| | | | |
| − | <html>
| |
| − | <head>
| |
| − | <link href='https://2015.igem.org/Team:NCTU_Formosa/Ubntu.css?action=raw&ctype=text/css' rel='stylesheet' type='text/css'>
| |
| − | <link rel="stylesheet" href="https://2015.igem.org/Team:NCTU_Formosa/reset.css?action=raw&ctype=text/css"> <!-- CSS reset -->
| |
| − |
| |
| − | <script src="https://2015.igem.org/Team:NCTU_Formosa/mordernizr.js?action=raw&ctype=text/javascript"></script> <!-- Modernizr -->
| |
| − |
| |
| − | <style tpe=text/css>
| |
| − |
| |
| − | body {
| |
| − | font-size: 100%;
| |
| − | font-family: "Ubuntu", sans-serif;
| |
| − | color: #f35535;
| |
| − | background-color: #2e313d;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | a {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Modules - reusable parts of our design
| |
| − |
| |
| − | -------------------------------- */
| |
| − |
| |
| − | .cd-container {
| |
| − | /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
| |
| − |
| |
| − | width: 90%;
| |
| − | max-width: 768px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − | .cd-container::after {
| |
| − | /* clearfix */
| |
| − | content: '';
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /* --------------------------------
| |
| − |
| |
| − | Main components
| |
| − |
| |
| − | -------------------------------- */
| |
| − | .cd-header {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 50px;
| |
| − | background: #f35535;
| |
| − | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
| |
| − | z-index: 3;
| |
| − | }
| |
| − | .cd-header:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − | .cd-header #cd-logo {
| |
| − | float: left;
| |
| − | margin: 13px 0 0 5%;
| |
| − | }
| |
| − | .cd-header #cd-logo img {
| |
| − | display: block;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-header {
| |
| − | height: 70px;
| |
| − | }
| |
| − | .cd-header #cd-logo {
| |
| − | margin: 23px 0 0 5%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-main-nav {
| |
| − | float: right;
| |
| − | margin-right: 5%;
| |
| − | width: 44px;
| |
| − | height: 100%;
| |
| − | background: url("../img/cd-icon-menu.svg") no-repeat center center;
| |
| − | background-size: 44px 44px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .cd-main-nav ul {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | -webkit-transform: translateY(-100%);
| |
| − | -moz-transform: translateY(-100%);
| |
| − | -ms-transform: translateY(-100%);
| |
| − | -o-transform: translateY(-100%);
| |
| − | transform: translateY(-100%);
| |
| − | }
| |
| − | .cd-main-nav ul.is-visible {
| |
| − | -webkit-transform: translateY(50px);
| |
| − | -moz-transform: translateY(50px);
| |
| − | -ms-transform: translateY(50px);
| |
| − | -o-transform: translateY(50px);
| |
| − | transform: translateY(50px);
| |
| − | }
| |
| − | .cd-main-nav a {
| |
| − | display: block;
| |
| − | height: 50px;
| |
| − | line-height: 50px;
| |
| − | padding-left: 5%;
| |
| − | background: #2e313d;
| |
| − | border-top: 1px solid #353846;
| |
| − | color: #FFF;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-main-nav {
| |
| − | width: auto;
| |
| − | height: auto;
| |
| − | background: none;
| |
| − | cursor: auto;
| |
| − | }
| |
| − | .cd-main-nav ul {
| |
| − | position: static;
| |
| − | width: auto;
| |
| − | -webkit-transform: translateY(0);
| |
| − | -moz-transform: translateY(0);
| |
| − | -ms-transform: translateY(0);
| |
| − | -o-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | line-height: 70px;
| |
| − | }
| |
| − | .cd-main-nav ul.is-visible {
| |
| − | -webkit-transform: translateY(0);
| |
| − | -moz-transform: translateY(0);
| |
| − | -ms-transform: translateY(0);
| |
| − | -o-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | .cd-main-nav li {
| |
| − | display: inline-block;
| |
| − | margin-left: 1em;
| |
| − | }
| |
| − | .cd-main-nav a {
| |
| − | display: inline-block;
| |
| − | height: auto;
| |
| − | line-height: normal;
| |
| − | background: transparent;
| |
| − | padding: .6em 1em;
| |
| − | border-top: none;
| |
| − | font-size: 13px;
| |
| − | font-size: 0.8125rem;
| |
| − | font-weight: bold;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #cd-intro {
| |
| − | position: relative;
| |
| − | height: 300px;
| |
| − | margin-top: 50px;
| |
| − | z-index: 1;
| |
| − | }
| |
| − | #cd-intro #cd-intro-background {
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background: url("https://static.igem.org/mediawiki/2015/d/dc/2015_NCTU_Formosa_%E5%A4%A7%E6%A8%993.png") no-repeat center center;
| |
| − | background-size: cover;
| |
| − | box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
| |
| − | }
| |
| − | #cd-intro #cd-intro-tagline {
| |
| − | position: absolute;
| |
| − | width: 90%;
| |
| − | max-width: 1170px;
| |
| − | left: 50%;
| |
| − | top: 50%;
| |
| − | bottom: auto;
| |
| − | right: auto;
| |
| − | -webkit-transform: translateX(-50%) translateY(-50%);
| |
| − | -moz-transform: translateX(-50%) translateY(-50%);
| |
| − | -ms-transform: translateX(-50%) translateY(-50%);
| |
| − | -o-transform: translateX(-50%) translateY(-50%);
| |
| − | transform: translateX(-50%) translateY(-50%);
| |
| − | }
| |
| − | #cd-intro h1 {
| |
| − | text-transform: uppercase;
| |
| − | font-size: 24px;
| |
| − | font-size: 1.5rem;
| |
| − | text-align: center;
| |
| − | color: #FFF;
| |
| − | text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | #cd-intro {
| |
| − | height: 400px;
| |
| − | margin-top: 70px;
| |
| − | }
| |
| − | #cd-intro h1 {
| |
| − | font-size: 30px;
| |
| − | font-size: 1.875rem;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | #cd-intro {
| |
| − | position: fixed;
| |
| − | /* do not overlap the header */
| |
| − | top: 70px;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 500px;
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | #cd-intro h1 {
| |
| − | font-size: 32px;
| |
| − | font-size: 2rem;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .cd-content {
| |
| − | position: relative;
| |
| − | padding: 2em 0;
| |
| − | line-height: 1.6;
| |
| − | color: #65676f;
| |
| − | background-color: #f0f1e7;
| |
| − | z-index: 2;
| |
| − | }
| |
| − | .cd-content::before {
| |
| − | /* subtle gradient right above the main content */
| |
| − | content: '';
| |
| − | position: absolute;
| |
| − | bottom: 100%;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 50px;
| |
| − | background: -webkit-linear-gradient( bottom , rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));
| |
| − | background: linear-gradient(to top, rgba(46, 49, 61, 0.5), rgba(46, 49, 61, 0));
| |
| − | }
| |
| − | .no-cssgradients .cd-content::before {
| |
| − | /* use Modernizr to detect whether the browser supports or not css gradients */
| |
| − | display: none;
| |
| − | }
| |
| − | .cd-content h2 {
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | .cd-content p {
| |
| − | margin: 1em 0;
| |
| − | }
| |
| − | @media only screen and (min-width: 768px) {
| |
| − | .cd-content {
| |
| − | line-height: 1.8;
| |
| − | }
| |
| − | .cd-content h2 {
| |
| − | font-size: 30px;
| |
| − | font-size: 1.875rem;
| |
| − | }
| |
| − | }
| |
| − | @media only screen and (min-width: 1170px) {
| |
| − | .cd-content {
| |
| − | padding: 4em 0;
| |
| − | margin-top: 570px;
| |
| − | }
| |
| − | .cd-content p {
| |
| − | font-size: 20px;
| |
| − | font-size: 1.25rem;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − |
| |
| − | <section id="cd-intro">
| |
| − | <div id="cd-intro-background"></div>
| |
| − | <div id="cd-intro-tagline">
| |
| − | </div> <!-- cd-intro-tagline -->
| |
| − | </section> <!-- #cd-intro -->
| |
| − |
| |
| − | <main class="cd-content">
| |
| − |
| |
| − | <img src="https://static.igem.org/mediawiki/2015/2/2f/NCTU_Formosa_team.png">
| |
| − | <div class="cd-container">
| |
| − | <p></p>
| |
| − | <ul type=disc style="text-align:justify;" >
| |
| − | <li>We created the fluorescent E.Cotectors with the single chain variable fragment (scFv) of monoclonal antibody used on targeted therapies on its outer membrane.
| |
| − | <li>We created our E.Cotectors with the gold binding peptide (GBP) on its outer membrane.
| |
| − | <li>We created the different colors of fluorescent E.Cotectors with different scFv of monoclonal antibodies.
| |
| − | <li>We proved that the scFv have binding specificity and our E.Cotectors can bind to antigens to distinguish antigens overexpressed in cells.
| |
| − | <li>We proved that our E.Cotectors can apply on different techniques of cell staining.
| |
| − | <li>We proved that the GBP can let our E.Cotectors adhere to the gold surface.
| |
| − | <li>We combined the Quartz crystal microbalance (QCM) technique with our E.Cotectors to measure the concentration of antigens.
| |
| − | </ul>
| |
| − | <br>
| |
| − | </div>
| |
| − | <img src="https://static.igem.org/mediawiki/2015/f/f2/NCTU_Formosa_Ach2.png">
| |
| − | <div class="cd-container">
| |
| − | <p></p>
| |
| − | <ul type=disc style="text-align:justify;" >
| |
| − | <li>We constructed 25 biobricks and conducted a series of experiments to verify their functions.
| |
| − | <li>We constructed the models to calculate the optimized environment for the highest binding affinity.
| |
| − | <li>We designed the mechanism to guarantee the safety on the gene level and the microorganism level.
| |
| − | <li>We promoted the communication and the cooperation among various professional fields such as synthetic biology, measurement technology, immunology, and medical science via the participation in iGEM and the accomplishment of the project.
| |
| − | </ul>
| |
| − | <br>
| |
| − | </div>
| |
| − |
| |
| − | <img src="https://static.igem.org/mediawiki/2015/6/6d/NCTU_Formosa_Ach3.png">
| |
| − | <div class="cd-container">
| |
| − | <p></p>
| |
| − | <ul type=disc style="text-align:justify;" >
| |
| − | <li>Simultaneously detected the multiple antigens.
| |
| − | <li>Enlarged the signal of targeted antigens.
| |
| − | <li>Combined the antigen measurement technique with others technique, enhanced the precision, and expanded its application.
| |
| − | <li>Enhanced the process yield in immobilization of antibodies on the medium gold surface.
| |
| − | <li>The cost of using our E.cotectors is lower than using monoclonal antibodies targeted drugs directly on measuring antigens.
| |
| − | </ul>
| |
| − | <br>
| |
| − | </div>
| |
| − | <img src="https://static.igem.org/mediawiki/2015/8/85/NCTU_Formosa_Ach4.png">
| |
| − | <div class="cd-container">
| |
| − | <p></p>
| |
| − | <ul type=disc style="text-align:justify;" >
| |
| − | <li>Offer a new way to let doctors have more selections to make diagnosis.
| |
| − | <li>Directly used the antibody fragment of monoclonal antibody used on targeted therapy to distinguish antigens overexpressed in cells. Provided prescription of combination, personalized, and effective targeted drugs.
| |
| − | <li>Prepared for the new era of medical digitalization.
| |
| − | </ul>
| |
| − | <br>
| |
| − | <br>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </main> <!-- cd-content -->
| |
| − | <script src="https://2015.igem.org/Team:NCTU_Formosa/jquery1.110.min.js?action=raw&ctype=text/javascript"></script>
| |
| − | <script src="https://2015.igem.org/Team:NCTU_Formosa/main.js?action=raw&ctype=text/javascript"></script>
| |
| − | <!-- Resource jQuery -->
| |
| − | </body>
| |
| − | </html>
| |