|
|
| (44 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| | + | {{:Team:NTHU_Taiwan/MenuBar}} |
| | <html> | | <html> |
| − | <head>
| |
| − | <title>NTHU iGEM</title>
| |
| − | <meta http-equiv="content-type" content="text/html; charset=utf-8" />
| |
| − | <meta name="description" content="" />
| |
| − | <meta name="keywords" content="" />
| |
| − | <style type="text/css">
| |
| − | @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
| |
| − | @import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
| |
| | | | |
| | + | <style> |
| | | | |
| − | /* Basic */
| + | .slider_container { |
| | + | } |
| | | | |
| − | body {
| + | .slider_container div { |
| − | background: #222222;
| + | position: absolute; |
| − | }
| + | opacity: 0; |
| | + | filter: alpha(opacity=0); |
| | + | } |
| | + | .slider_container div { |
| | + | -webkit-animation: round 5s linear infinite; |
| | + | animation: round 5s linear infinite; |
| | + | } |
| | | | |
| − | body.loading * {
| + | @-webkit-keyframes round { |
| − | -moz-transition: none !important;
| + | 20% { |
| − | -webkit-transition: none !important;
| + | opacity: 1; |
| − | -o-transition: none !important;
| + | filter: alpha(opacity=100); |
| − | -ms-transition: none !important;
| + | /* 0 - 1秒 淡入*/ |
| − | transition: none !important;
| + | } |
| − | -moz-animation: none !important;
| + | 40% { |
| − | -webkit-animation: none !important;
| + | opacity: 1; |
| − | -o-animation: none !important;
| + | filter: alpha(opacity=100); |
| − | -ms-animation: none !important;
| + | /* 1- 5秒靜止*/ |
| − | animation: none !important;
| + | } |
| − | }
| + | 80% { |
| | + | opacity: 0; |
| | + | filter: alpha(opacity=0); |
| | + | /* 5-6秒淡出*/ |
| | + | } |
| | + | } |
| | + | @keyframes round { |
| | + | 20% { |
| | + | opacity: 1; |
| | + | filter: alpha(opacity=100); |
| | + | /* 0 - 1秒 淡入*/ |
| | + | } |
| | + | 40% { |
| | + | opacity: 1; |
| | + | filter: alpha(opacity=100); |
| | + | /* 1- 5秒靜止*/ |
| | + | } |
| | + | 80% { |
| | + | opacity: 0; |
| | + | filter: alpha(opacity=0); |
| | + | /* 5-6秒淡出*/ |
| | + | } |
| | + | } |
| | + | .slider_container div:nth-child(2) { |
| | + | -webkit-animation-delay: 0s; |
| | + | animation-delay: 0s; |
| | + | } |
| | | | |
| − | body, input, select, textarea {
| + | .slider_container div:nth-child(1) { |
| − | color: #555555;
| + | -webkit-animation-delay: 3s; |
| − | font-family: 'Open Sans', sans-serif;
| + | animation-delay: 3s; |
| − | font-size: 12pt;
| + | } |
| − | font-weight: 300;
| + | |
| − | line-height: 1.65em;
| + | |
| − | }
| + | |
| | | | |
| − | a {
| + | </style> |
| − | color: #82b440;
| + | |
| − | text-decoration: underline;
| + | |
| − | }
| + | |
| | | | |
| − | strong, b {
| + | <div class="content"> |
| − | font-weight: 700;
| + | <div class="slider_container"> |
| − | }
| + | |
| − | | + | |
| − | em, i {
| + | |
| − | font-style: italic;
| + | |
| − | }
| + | |
| − | | + | |
| − | p, ul, ol, dl, table, blockquote {
| + | |
| − | margin: 0 0 2em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | p {
| + | |
| − | line-height: 1.8em;
| + | |
| − | }
| + | |
| − | | + | |
| − | p.medium {
| + | |
| − | font-size: 1.4em;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1, h2, h3, h4, h5, h6 {
| + | |
| − | color: inherit;
| + | |
| − | font-weight: 700;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
| + | |
| − | color: inherit;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2 {
| + | |
| − | font-size: 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | h3 {
| + | |
| − | font-size: 1.25em;
| + | |
| − | }
| + | |
| − | | + | |
| − | sub {
| + | |
| − | font-size: 0.8em;
| + | |
| − | position: relative;
| + | |
| − | top: 0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | sup {
| + | |
| − | font-size: 0.8em;
| + | |
| − | position: relative;
| + | |
| − | top: -0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | hr {
| + | |
| − | border-top: solid 1px #82b440;
| + | |
| − | border: 0;
| + | |
| − | margin-bottom: 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | blockquote {
| + | |
| − | border-left: solid 0.5em #82b440;
| + | |
| − | font-style: italic;
| + | |
| − | padding: 1em 0 1em 2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | section.special, article.special {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | header.major {
| + | |
| − | padding-bottom: 3em;
| + | |
| − | text-align: center;
| + | |
| − | text-transform: uppercase;
| + | |
| − | }
| + | |
| − | | + | |
| − | header.major h2 {
| + | |
| − | font-size: 2.6em;
| + | |
| − | font-weight: 700;
| + | |
| − | }
| + | |
| − | | + | |
| − | header.major .byline {
| + | |
| − | display: block;
| + | |
| − | padding-top: 1em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | font-size: 1.4em;
| + | |
| − | }
| + | |
| − | | + | |
| − | footer > :last-child {
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | footer.major {
| + | |
| − | padding-top: 3em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Form */
| + | |
| − | | + | |
| − | input[type="text"],
| + | |
| − | input[type="password"],
| + | |
| − | input[type="email"],
| + | |
| − | textarea {
| + | |
| − | -moz-appearance: none;
| + | |
| − | -webkit-appearance: none;
| + | |
| − | -o-appearance: none;
| + | |
| − | -ms-appearance: none;
| + | |
| − | appearance: none;
| + | |
| − | background: none;
| + | |
| − | border: solid 1px #82b440;
| + | |
| − | color: inherit;
| + | |
| − | display: block;
| + | |
| − | outline: 0;
| + | |
| − | padding: 0.75em;
| + | |
| − | text-decoration: none;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="text"]:focus,
| + | |
| − | input[type="password"]:focus,
| + | |
| − | input[type="email"]:focus,
| + | |
| − | textarea:focus {
| + | |
| − | border-color: #82b440;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="text"],
| + | |
| − | input[type="password"],
| + | |
| − | input[type="email"] {
| + | |
| − | line-height: 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ::-webkit-input-placeholder {
| + | |
| − | color: inherit;
| + | |
| − | opacity: 0.5;
| + | |
| − | position: relative;
| + | |
| − | top: 3px;
| + | |
| − | }
| + | |
| − | | + | |
| − | :-moz-placeholder {
| + | |
| − | color: inherit;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | ::-moz-placeholder {
| + | |
| − | color: inherit;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | :-ms-input-placeholder {
| + | |
| − | color: inherit;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .formerize-placeholder {
| + | |
| − | color: rgba(85, 85, 85, 0.5) !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Image */
| + | |
| − | | + | |
| − | .image {
| + | |
| − | border: 0;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image.fit {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image.fit img {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image.feature {
| + | |
| − | display: block;
| + | |
| − | margin: 0 0 2em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .image.feature img {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Icon */
| + | |
| − | | + | |
| − | .icon {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon:before {
| + | |
| − | content: "";
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | font-family: FontAwesome;
| + | |
| − | font-style: normal;
| + | |
| − | font-weight: normal;
| + | |
| − | text-transform: none !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .icon > .label {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Lists */
| + | |
| − | | + | |
| − | ol.default {
| + | |
| − | list-style: decimal;
| + | |
| − | padding-left: 1.25em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ol.default li {
| + | |
| − | padding-left: 0.25em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.default {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.default li {
| + | |
| − | padding: 0.40em 0em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons {
| + | |
| − | cursor: default;
| + | |
| − | padding-bottom: 2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons li {
| + | |
| − | display: inline-block;
| + | |
| − | line-height: 1em;
| + | |
| − | padding: 0.5em 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons li:first-child {
| + | |
| − | padding-left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons li span {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons li a {
| + | |
| − | text-decoration: none;
| + | |
| − | font-size: 2em;
| + | |
| − | color: inherit;
| + | |
| − | opacity: 0.2;
| + | |
| − | -moz-transition: all 0.35s ease-in-out;
| + | |
| − | -webkit-transition: all 0.35s ease-in-out;
| + | |
| − | -o-transition: all 0.35s ease-in-out;
| + | |
| − | -ms-transition: all 0.35s ease-in-out;
| + | |
| − | transition: all 0.35s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.icons li a:hover {
| + | |
| − | color: inherit;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions {
| + | |
| − | cursor: default;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions:last-child {
| + | |
| − | margin-bottom: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions li {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 0 0 0 1.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions li:first-child {
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions.vertical li {
| + | |
| − | display: block;
| + | |
| − | padding: 1.5em 0 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.actions.vertical li:first-child {
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons {
| + | |
| − | margin: 0em;
| + | |
| − | padding: 0em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons > li {
| + | |
| − | position: relative;
| + | |
| − | padding: 0.50em 0em 0.50em 0em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons > li:before {
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | top: 2em;
| + | |
| − | display: block;
| + | |
| − | background: none;
| + | |
| − | font-size: 2em;
| + | |
| − | border-radius: 5px;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons > li:first-child {
| + | |
| − | border-top: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons h3 {
| + | |
| − | margin-bottom: 0.80em;
| + | |
| − | line-height: 2em;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-weight: 700;
| + | |
| − | font-size: 1.2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons span {
| + | |
| − | line-height: 190%;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons .fa {
| + | |
| − | float: left;
| + | |
| − | display: inline-block;
| + | |
| − | padding-right: 1em;
| + | |
| − | font-size: 1.4em;
| + | |
| − | color: #82b440;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.special-icons p {
| + | |
| − | padding-left: 2.7em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Tables */
| + | |
| − | | + | |
| − | table {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | table.default {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | table.default tbody tr {
| + | |
| − | border-bottom: solid 1px #82b440;
| + | |
| − | }
| + | |
| − | | + | |
| − | table.default td {
| + | |
| − | padding: 0.5em 1em 0.5em 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | table.default th {
| + | |
| − | font-weight: 700;
| + | |
| − | padding: 0.5em 1em 0.5em 1em;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | table.default thead {
| + | |
| − | background: #555555;
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Button */
| + | |
| − | | + | |
| − | input[type="submit"],
| + | |
| − | input[type="reset"],
| + | |
| − | input[type="button"],
| + | |
| − | .button {
| + | |
| − | -moz-appearance: none;
| + | |
| − | -webkit-appearance: none;
| + | |
| − | -o-appearance: none;
| + | |
| − | -ms-appearance: none;
| + | |
| − | appearance: none;
| + | |
| − | background: none;
| + | |
| − | border-radius: none;
| + | |
| − | border: 2px solid;
| + | |
| − | border-color: #82b440;
| + | |
| − | color: #82b440;
| + | |
| − | cursor: pointer;
| + | |
| − | display: inline-block;
| + | |
| − | padding: 0.90em 1.2em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | text-align: center;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.4em;
| + | |
| − | -moz-transition: all 0.35s ease-in-out;
| + | |
| − | -webkit-transition: all 0.35s ease-in-out;
| + | |
| − | -o-transition: all 0.35s ease-in-out;
| + | |
| − | -ms-transition: all 0.35s ease-in-out;
| + | |
| − | transition: all 0.35s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="submit"]:hover,
| + | |
| − | input[type="reset"]:hover,
| + | |
| − | input[type="button"]:hover,
| + | |
| − | .button:hover {
| + | |
| − | background: #82b440;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="submit"].alt,
| + | |
| − | input[type="reset"].alt,
| + | |
| − | input[type="button"].alt,
| + | |
| − | .button.alt {
| + | |
| − | border-color: inherit;
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="submit"].alt:hover,
| + | |
| − | input[type="reset"].alt:hover,
| + | |
| − | input[type="button"].alt:hover,
| + | |
| − | .button.alt:hover {
| + | |
| − | background: white;
| + | |
| − | color: #82b440;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="submit"].fit,
| + | |
| − | input[type="reset"].fit,
| + | |
| − | input[type="button"].fit,
| + | |
| − | .button.fit {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | input[type="submit"].small,
| + | |
| − | input[type="reset"].small,
| + | |
| − | input[type="button"].small,
| + | |
| − | .button.small {
| + | |
| − | font-size: 0.8em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Wrapper */
| + | |
| − | | + | |
| − | .wrapper {
| + | |
| − | padding: 6em 0em 4em 0em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style1 {
| + | |
| − | padding: 0em;
| + | |
| − | background: #222222 url(../images/banner.jpg) no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style2 {
| + | |
| − | background: #f2f2f2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style2 .major {
| + | |
| − | text-align: left !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style2 .major h2 {
| + | |
| − | display: block;
| + | |
| − | margin-bottom: 0.70em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.4em;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.8em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style2 .major .byline {
| + | |
| − | letter-spacing: normal;
| + | |
| − | line-height: 1.6em;
| + | |
| − | text-transform: capitalize;
| + | |
| − | font-size: 1.4em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style2 h3 {
| + | |
| − | display: block;
| + | |
| − | margin-bottom: 1em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.4em;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.6em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style3 {
| + | |
| − | padding-bottom: 6em;
| + | |
| − | background: #82b440;
| + | |
| − | text-align: center;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style3 .container {
| + | |
| − | padding-left: 6em;
| + | |
| − | padding-right: 6em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style3 p {
| + | |
| − | font-size: 1.6em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style4 {
| + | |
| − | background: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style5 {
| + | |
| − | background: #82b440;
| + | |
| − | text-align: center;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style5 .image {
| + | |
| − | display: block;
| + | |
| − | width: 60%;
| + | |
| − | margin: 0em auto 2em auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .wrapper.style5 .image img {
| + | |
| − | border-radius: 50%;
| + | |
| − | border: 10px solid;
| + | |
| − | border-color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Header */
| + | |
| − | | + | |
| − | #header {
| + | |
| − | color: white;
| + | |
| − | height: 4em;
| + | |
| − | background: rgba(0, 0, 0, 0.5);
| + | |
| − | }
| + | |
| − | | + | |
| − | #header .container {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | .homepage #logo {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .homepage #nav {
| + | |
| − | position: static;
| + | |
| − | right: none;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #logo {
| + | |
| − | line-height: 2em;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 2em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | #logo h1 {
| + | |
| − | display: inline-block;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #logo a {
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul {
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul > li {
| + | |
| − | border-radius: 4px;
| + | |
| − | display: inline-block;
| + | |
| − | margin-left: 0.5em;
| + | |
| − | padding: 0 0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul > li a {
| + | |
| − | color: inherit;
| + | |
| − | line-height: 4em;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-weight: 400;
| + | |
| − | font-size: 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul > li:first-child {
| + | |
| − | margin-left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul > li.active a {
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #nav > ul > li > ul {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Dropotron */
| + | |
| − | | + | |
| − | .dropotron {
| + | |
| − | top: 2em;
| + | |
| − | background: rgba(32, 32, 32, 0.75);
| + | |
| − | border-radius: 4px;
| + | |
| − | color: inherit;
| + | |
| − | min-width: 12em;
| + | |
| − | padding: 1em 0;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropotron > li {
| + | |
| − | line-height: 2em;
| + | |
| − | padding: 0 1em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropotron > li > a {
| + | |
| − | color: inherit;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | text-decoration: none;
| + | |
| − | text-transform: uppercase;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropotron > li.active > a, .dropotron > li:hover > a {
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropotron.level-0 {
| + | |
| − | border-radius: 0 0 4px 4px;
| + | |
| − | font-size: 1em;
| + | |
| − | margin-left: -0.5em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Banner */
| + | |
| − | | + | |
| − | #banner {
| + | |
| − | padding: 6em 0em 3em 0em;
| + | |
| − | text-align: center;
| + | |
| − | text-transform: uppercase;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #banner .container {
| + | |
| − | padding: 0em 8em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #banner h2 {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 0.50em 0.30em;
| + | |
| − | background: #82b440;
| + | |
| − | font-size: 3em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | #banner span, #banner p {
| + | |
| − | display: block;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.6em;
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | | + | |
| − | #banner span {
| + | |
| − | padding: 1em 0em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Main */
| + | |
| − | | + | |
| − | #main {
| + | |
| − | padding: 4em 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #main #content .major, #main #sidebar .major {
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | #main #sidebar section {
| + | |
| − | margin-top: 4em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #main #sidebar section:first-child {
| + | |
| − | margin-top: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #main #sidebar .major {
| + | |
| − | padding-bottom: 2em;
| + | |
| − | }
| + | |
| − | | + | |
| − | #main #sidebar .major h2 {
| + | |
| − | font-size: 1.8em;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Footer */
| + | |
| − | | + | |
| − | #footer {
| + | |
| − | padding: 6em 0 2em 0;
| + | |
| − | text-align: center;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − | | + | |
| − | #footer hr {
| + | |
| − | border-bottom: 1px solid;
| + | |
| − | border-color: inherit;
| + | |
| − | opacity: .05;
| + | |
| − | }
| + | |
| − | | + | |
| − | #footer .major h2 {
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | #footer .major .byline {
| + | |
| − | color: inherit;
| + | |
| − | opacity: .4;
| + | |
| − | }
| + | |
| − | | + | |
| − | #footer .copyright {
| + | |
| − | margin-top: 3em;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Copyright */
| + | |
| − | | + | |
| − | #copyright {
| + | |
| − | position: relative;
| + | |
| − | text-transform: uppercase;
| + | |
| − | text-align: center;
| + | |
| − | padding: 3em 0em 3em 0em;
| + | |
| − | color: inherit;
| + | |
| − | opacity: .40;
| + | |
| − | }
| + | |
| − | | + | |
| − | #copyright a {
| + | |
| − | text-decoration: none;
| + | |
| − | color: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Extra */
| + | |
| − | | + | |
| − | #extra1 h2 {
| + | |
| − | display: block;
| + | |
| − | margin-bottom: 1em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.4em;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.8em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | #extra1 h3 {
| + | |
| − | display: block;
| + | |
| − | margin-bottom: 1em;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.4em;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 1.6em;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Team */
| + | |
| − | | + | |
| − | #team h3 {
| + | |
| − | margin-bottom: 0.50em;
| + | |
| − | letter-spacing: 2px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-weight: 700;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
| + | |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.dropotron/1.4.3/jquery.dropotron.min.js"></script>
| + | |
| − | <script src="https://cdn.bootcss.com/skel/2.2.1/skel.min.js"></script>
| + | |
| − | <script src="https://cdn.bootcss.com/skel-layers/2.2.1/skel-layers.min.js"></script>
| + | |
| − | <script src="https://templated.co/items/demos/solarize/js/init.js"></script>
| + | |
| | | | |
| − | </head>
| + | <div> |
| − | <body class="homepage">
| + | <img width="100%" src="https://static.igem.org/mediawiki/2017/f/f8/T--NTHU_Taiwan--HOME--t1.png" alt="pure css3 slider" /> |
| − | | + | </div> |
| − | <!-- Header Wrapper --> | + | <div> |
| − | <div class="wrapper style1"> | + | <img width="100%" src="https://static.igem.org/mediawiki/2017/2/27/T--NTHU_Taiwan--HOME--t2.png" alt="pure css3 slider" /> |
| − |
| + | </div> |
| − | <!-- Header --> | + | <img width="100%" src="https://static.igem.org/mediawiki/2017/a/ac/T--NTHU_Taiwan--HOME--t0.png"> |
| − | <div id="header">
| + | </div> |
| − | <div class="container">
| + | <img width="100%" src="https://static.igem.org/mediawiki/2017/c/cb/T--NTHU_Taiwan--HOME--t3.png"> |
| − |
| + | </div> |
| − | <!-- Nav -->
| + | |
| − | <nav id="nav">
| + | |
| − | <ul>
| + | |
| − | <li class="active"><a href="index.html">HOME</a></li>
| + | |
| − | <li>
| + | |
| − | <a href="">TEAM</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="#">Team</a></li>
| + | |
| − | <li><a href="#">Collaborations</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">PROJECT</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="#">Description</a></li>
| + | |
| − | <li><a href="#">Design</a></li>
| + | |
| − | <li><a href="#">Experiments</a></li>
| + | |
| − | <li><a href="#">Notebook</a></li>
| + | |
| − | <li><a href="#">InterLab</a></li>
| + | |
| − | <li><a href="#">Contribution</a></li>
| + | |
| − | <li><a href="#">Model</a></li>
| + | |
| − | <li><a href="#">Results</a></li>
| + | |
| − | <li><a href="#">Demonstrate</a></li>
| + | |
| − | <li><a href="#">Improve</a></li>
| + | |
| − | <li><a href="#">Attributions</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">PARTS</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="#">Parts</a></li>
| + | |
| − | <li><a href="#">BasicParts</a></li>
| + | |
| − | <li><a href="#">Composite Parts</a></li>
| + | |
| − | <li><a href="#">Part Collection</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">SAFETY</a>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">HUMAN PRACTICES</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="#">Silver HP</a></li>
| + | |
| − | <li><a href="#">Integrated and Gold</a></li>
| + | |
| − | <li><a href="#">Public Engagement</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">AWARDS</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="#">Applied Design</a></li>
| + | |
| − | <li><a href="#">Entrepreneurship</a></li>
| + | |
| − | <li><a href="#">Hardware</a></li>
| + | |
| − | <li><a href="#">Measurement</a></li>
| + | |
| − | <li><a href="#">Model</a></li>
| + | |
| − | <li><a href="#">Plant</a></li>
| + | |
| − | <li><a href="#">Software</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | <a href="">JUDGING FORM</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <!-- Banner -->
| + | |
| − | <div id="banner">
| + | |
| − | <section class="container">
| + | |
| − | <h2>HOME</h2>
| + | |
| − | <span>NTHU_Taiwan</span>
| + | |
| − | </section>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − |
| + | |
| − | <!-- Section One -->
| + | |
| − | <div class="wrapper style2">
| + | |
| − | <section class="container">
| + | |
| − | <div class="row double">
| + | |
| − | <div class="12u">
| + | |
| − | <h3>Project Introduction</h3>
| + | |
| − | <p>This year, our goal is to deal with EDCs (Endocrine Disruptor Chemicals), which can interfere with endocrine systems, causing cancerous tumors, birth defects, and other developmental disorders. These chemicals are mostly man-made and found in various materials such as pesticides, food containers and personal care products. In this project, we primarily focus on two common kinds of EDCs, BPA (Bisphenol A) and NP (Nonyl Phenol), in industrial waste water.</p>
| + | |
| − | <p>There are mainly two objectives in our project, detection of EDCs and degradation of EDCs.</p>
| + | |
| − | <p>For detection, we first modified E.coli to express EDC receptor, ER (estrogen receptor alpha), on the membrane of E.coli. Next, we modified E.coli to produce monobodies and assembled them on a gold electrode surface. Once EDCs are binded with ER, monobodies will capture bounded ER, making E.coli closer to gold electrode. This leads to impedance changes on gold electrode. Via electrochemical impedance spectroscopy (EIS), we can measure this change and further estimate the concentration of EDCs.</p>
| + | |
| − | <p>For degradation, we modified E.coli to produce target enzymes which are able to degrade BPA and NP. To make our project more applicable, we integrated target enzymes with activated carbon, membrane and bioreactor system to eliminate these contaminants in waste water. We also employed feedback control loop, together with detection of EDCs, so as to enhance the efficiency of degradation.</p>
| + | |
| − | <p>In the future, we hope to put our idea into practice in order to make our world a better place.</p>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </section>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </body>
| + | |
| | </html> | | </html> |
