Difference between revisions of "Team:SKLMT-China"

 
(55 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{:Team:SKLMT/CSS}}
+
<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>
 +
</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>

Latest revision as of 22:10, 1 November 2018

P.P.P

Planet Protect Plan

Team

Members

Attributions

Sponsors

Judging

Project

Overview

Design

Red/ET

Results&Demonstration

Safety

InterLab

Parts

Basic parts

Composite Parts

Part Collection

Improved Part

Model

Overview

Process

Resyults

Software

Introduction

Principle

Human Practices

Overview

Integrated&Gold

Collaborations

Notebook

Overview

Protocol

Material