Team
Members
Attributions
Sponsors
Judging
(34 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
<html> | <html> | ||
+ | <section class="index-banner" style="background-image: url(https://static.igem.org/mediawiki/2018/0/0c/T--SKLMT-China--index-banner-1.jpg)"> | ||
+ | <div class="inner"> | ||
+ | <header> | ||
+ | <h2>P.P.P</h2> | ||
+ | </header> | ||
+ | <p>Planet Protect Plan</p> | ||
+ | <footer> | ||
+ | <ul class="buttons stacked"> | ||
+ | <li><a href="#section2" class="actions scrolly">Learn More</a></li> | ||
+ | </ul> | ||
+ | </footer> | ||
+ | </div> | ||
+ | </section> | ||
− | |||
− | |||
− | |||
− | < | + | <div class="tiles" id="section2"> |
− | + | ||
− | + | <article style="background-image: url(https://static.igem.org/mediawiki/2018/6/6b/T--SKLMT-China--team-banner-1.jpg)"> | |
+ | <a href="https://2018.igem.org/Team:SKLMT-China/Team"></a> | ||
+ | <header class="major"> | ||
+ | <h2>Team</h2> | ||
+ | <p>Members</p> | ||
+ | <p>Attributions</p> | ||
+ | <p>Sponsors</p> | ||
+ | <p>Judging</p> | ||
+ | </header> | ||
+ | </article> | ||
− | < | + | <article style="background-image: url(https://static.igem.org/mediawiki/2018/a/a5/T--SKLMT-China--prj-banner-1.jpg)"> |
− | + | <a href="https://2018.igem.org/Team:SKLMT-China/Project"></a> | |
− | + | <header class="major"> | |
− | + | <h2>Project</h2> | |
− | + | <p>Overview</p> | |
− | + | <p>Design</p> | |
− | + | <p>Red/ET</p> | |
− | + | <p>Results&Demonstration</p> | |
+ | <p>Safety</p> | ||
+ | </header> | ||
+ | </article> | ||
+ | <article style="background-image: url(https://static.igem.org/mediawiki/2018/e/eb/T--SKLMT-China--art-banner4.jpg)"> | ||
+ | <a href="https://2018.igem.org/Team:SKLMT-China/InterLab"></a> | ||
+ | <header class="major"> | ||
+ | <h2>InterLab</h2> | ||
+ | |||
+ | </header> | ||
+ | </article> | ||
+ | <article style="background-image: url(https://static.igem.org/mediawiki/2018/0/00/T--SKLMT-China--parts-banner.jpg)"> | ||
+ | <a href="https://2018.igem.org/Team:SKLMT-China/Parts"></a> | ||
+ | <header class="major"> | ||
+ | <h2>Parts</h2> | ||
+ | <p>Basic parts</p> | ||
+ | <p>Composite Parts</p> | ||
+ | <p>Part Collection</p> | ||
+ | <p>Improved Part</p> | ||
− | + | </header> | |
− | + | </article> | |
− | + | ||
− | + | <article style="background-image: url(https://static.igem.org/mediawiki/2018/0/0b/T--SKLMT-China--mod-ban-1.jpg)"> | |
− | + | <a href="https://2018.igem.org/Team:SKLMT-China/Model"></a> | |
− | + | <header class="major"> | |
+ | <h2>Model</h2> | ||
+ | <p>Overview</p> | ||
+ | <p>Process</p> | ||
+ | <p>Resyults</p> | ||
+ | </header> | ||
+ | </article> | ||
+ | <article style="background-image: url(https://static.igem.org/mediawiki/2018/c/ce/T--SKLMT-China--sw-ban-2.jpg)"> | ||
+ | <a href="https://2018.igem.org/Team:SKLMT-China/Software"></a> | ||
+ | <header class="major"> | ||
+ | <h2>Software</h2> | ||
+ | <p>Introduction</p> | ||
+ | <p>Principle</p> | ||
− | + | </header> | |
− | + | </article> | |
− | + | ||
− | + | <article style="background-image: url(https://static.igem.org/mediawiki/2018/c/c7/T--SKLMT-China--hp-banner-1.jpg)"> | |
+ | <a href="https://2018.igem.org/Team:SKLMT-China/Human_Practices"></a> | ||
+ | <header class="major"> | ||
+ | <h2>Human Practices</h2> | ||
+ | <p>Overview</p> | ||
+ | <p>Integrated&Gold</p> | ||
+ | <p>Collaborations</p> | ||
+ | </header> | ||
+ | </article> | ||
− | + | <article style="background-image: url(https://static.igem.org/mediawiki/2018/3/33/T--SKLMT-China--nb-ban-1.jpg)"> | |
− | + | <a href="https://2018.igem.org/Team:SKLMT-China/Notebook"></a> | |
− | + | <header class="major"> | |
− | + | <h2>Notebook</h2> | |
− | + | <p>Overview</p> | |
+ | <p>Protocol</p> | ||
+ | <p>Material</p> | ||
− | + | </header> | |
− | + | </article> | |
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
+ | </html> | ||
+ | {{SKLMT-China/none-footer}} | ||
− | < | + | <html> |
− | + | <style> | |
− | + | nav.navbar.bootsnav.navbar-fixed { | |
− | + | background-color: rgba(0, 0, 0, 0.4); | |
− | + | } | |
+ | nav.navbar.bootsnav ul.nav > li > a { | ||
+ | color: #fff; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | + | .tiles { | |
− | + | display: flex; | |
− | + | flex-wrap: wrap; | |
− | + | border-top: 0; | |
+ | } | ||
− | + | .tiles article { | |
− | + | display: flex; | |
− | + | height: 40vh; | |
− | + | max-height: 40em; | |
− | + | min-height: 25em; | |
+ | overflow: hidden; | ||
+ | width: 40%; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: center; | ||
+ | background-size: cover; | ||
+ | transition: all 1s ease; | ||
+ | } | ||
− | + | .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) { | |
− | + | width: 60%; | |
− | + | } | |
+ | .tiles article header { | ||
+ | padding: 1em 0 1em 5em; | ||
+ | margin: auto auto; | ||
+ | width: 100%; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | position: relative; | ||
+ | z-index: 1; | ||
+ | transition: all 1s ease; | ||
+ | } | ||
+ | .tiles article a { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | z-index: 4; | ||
+ | } | ||
− | + | .tiles article header h2 { | |
− | + | color: #fff; | |
− | + | font-size: 3em; | |
− | + | transform: translateY(100px); | |
− | + | transition: all 1s ease; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .tiles article header p { | |
+ | color: #fff; | ||
+ | margin-top: 1em; | ||
+ | font-style: normal; | ||
+ | font-size: 1.4em; | ||
+ | opacity: 0; | ||
+ | transition: all 1s ease; | ||
+ | transform: translateY(100px); | ||
+ | } | ||
+ | .tiles article:hover header p { | ||
+ | transform: translateY(0); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .tiles article:hover header h2 { | ||
+ | transform: translateY(0); | ||
+ | font-size: 3.5em; | ||
+ | } | ||
− | + | .tiles article:hover { | |
− | + | transform: scale(1.1); | |
− | + | z-index:4; | |
+ | } | ||
+ | article:after { | ||
+ | position:absolute; | ||
+ | left: 0; | ||
+ | top:0; | ||
+ | display: block; | ||
+ | width:100%; | ||
+ | height: 100%; | ||
+ | background-color: rgba(0, 0, 0, 0.88); | ||
+ | content: attr(data-text); | ||
+ | transition:all 1s ease; | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | article:hover:after{ | ||
+ | transform: translateY(100%); | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |
Members
Attributions
Sponsors
Judging
Overview
Design
Red/ET
Results&Demonstration
Safety
Basic parts
Composite Parts
Part Collection
Improved Part
Overview
Process
Resyults
Introduction
Principle
Overview
Integrated&Gold
Collaborations
Overview
Protocol
Material