Difference between revisions of "Team:SKLMT-China"

 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
     <style>
+
     <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>
  
−
#top_menu_under,#home_logo, #sideMenu,#top,.logo_2018,#firstHeading ,#top_title, .patrollink { display:none; }
 
−
.mediawiki,#globalWrapper,#content,#HQ_page,#bodyContent,#mw-content-text { width:100%; padding: 0;  margin: 0; }
 
−
#HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page h4, #HQ_page h5, #HQ_page h6 { margin-top: 20px; margin-bottom: 10px;}
 
  
−
#mw-content-text > p{margin:0; padding: 0;}
+
    <div class="tiles" id="section2">
−
li { list-style: none; }
+
−
#menu a { text-decoration: none; }
+
−
#menu a:link, a:visited, a:active { color: white; }
+
−
#menu a:hover { color: #c1d9ff; }
+
−
img { margin: 10px auto; }
+
−
table { margin: 0 auto; }
+
−
td { text-align: center }
+
  
−
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, #sideMenu, #menubar, .logo_2018, .printfooter, .firstHeading,.visualClear {display: none;} /*-- hides default wiki settings --*/
+
        <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>
  
−
#top-section {
+
        <article style="background-image: url(https://static.igem.org/mediawiki/2018/a/a5/T--SKLMT-China--prj-banner-1.jpg)">
−
    border: 0 none;
+
            <a href="https://2018.igem.org/Team:SKLMT-China/Project"></a>
−
    height: 14px;
+
            <header class="major">
−
    z-index: 100;
+
                <h2>Project</h2>
−
    top: 0;
+
                <p>Overview</p>
−
    position: fixed;
+
<p>Design</p>
−
    width: 975px;
+
<p>Red/ET</p>
−
    left: 50%;
+
<p>Results&Demonstration</p>
−
    margin-left: -487px;
+
<p>Safety</p>
−
}
+
            </header>
 +
        </article>
  
−
    #globalWrapper, #content {
+
         <article style="background-image: url(https://static.igem.org/mediawiki/2018/e/eb/T--SKLMT-China--art-banner4.jpg)">
−
         width: 100%;
+
            <a href="https://2018.igem.org/Team:SKLMT-China/InterLab"></a>
−
        height: 100%;
+
            <header class="major">
−
        border: 0px;
+
                <h2>InterLab</h2>
−
        background-color: transparent;
+
               
−
        margin: 0px;
+
            </header>
−
        padding: 0px;
+
         </article>
−
         font-size: 100%;
+
−
    }
+
  
−
    html, body, .wrapper {
+
         <article style="background-image: url(https://static.igem.org/mediawiki/2018/0/00/T--SKLMT-China--parts-banner.jpg)">
−
        width: 100%;
+
            <a href="https://2018.igem.org/Team:SKLMT-China/Parts"></a>
−
        height: 100%;
+
            <header class="major">
−
         background-color: transparent;
+
                <h2>Parts</h2>
−
        font-family: Lato, Roboto, Source Sans Pro, Helvetica, sans-serif;
+
                <p>Basic parts</p>
−
    }
+
                <p>Composite Parts</p>
 +
<p>Part Collection</p>
 +
<p>Improved Part</p>
  
−
    #HQ_page p {
+
            </header>
−
         font-family: Lato, Roboto, Source Sans Pro, Helvetica, sans-serif;
+
         </article>
−
        text-align: unset;
+
−
    }
+
  
−
    .inner p {
+
         <article style="background-image: url(https://static.igem.org/mediawiki/2018/0/0b/T--SKLMT-China--mod-ban-1.jpg)">
−
         font-size: 2em !important;
+
            <a href="https://2018.igem.org/Team:SKLMT-China/Model"></a>
−
        font-family: Algerian !important;
+
            <header class="major">
−
    }
+
                <h2>Model</h2>
 +
                <p>Overview</p>
 +
<p>Process</p>
 +
<p>Resyults</p>
  
−
    .container .paragraph h2 {
+
            </header>
−
         font-size: 3em !important;
+
         </article>
−
        margin: 1em 0 1em 0;
+
−
        font-family: Algerian;
+
−
    }
+
  
−
    .container .paragraph h2.title {
+
        <article style="background-image: url(https://static.igem.org/mediawiki/2018/c/ce/T--SKLMT-China--sw-ban-2.jpg)">
−
        border-left: solid #000099 5px;
+
            <a href="https://2018.igem.org/Team:SKLMT-China/Software"></a>
−
        padding-left: 10px;
+
            <header class="major">
−
    }
+
                <h2>Software</h2>
 +
                <p>Introduction</p>
 +
<p>Principle</p>
  
−
    .container p {
+
            </header>
−
         font-size: 1.35em !important;
+
         </article>
−
    }
+
  
−
    .container .paragraph p {
+
        <article style="background-image: url(https://static.igem.org/mediawiki/2018/c/c7/T--SKLMT-China--hp-banner-1.jpg)">
−
        margin: 2em 0 1em 0;
+
            <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>
  
−
    .container .paragraph.shadow {
+
        <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>
  
−
    .container .paragraph.shadow {
+
            </header>
−
         box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
+
         </article>
−
    }
+
  
−
     </style>
+
     </div>
 +
</html>
  
−
    <link rel="stylesheet" type="text/css"  href="https://2018.igem.org/wiki/index.php?title=Template:SKLMT-China/normalize_css&amp;action=raw&amp;ctype=text/css">
+
{{SKLMT-China/none-footer}}
  
−
    <link rel="stylesheet" type="text/css"  href="https://2018.igem.org/wiki/index.php?title=Template:SKLMT-China/template_css&amp;action=raw&amp;ctype=text/css">
+
<html>
 +
<style>
 +
nav.navbar.bootsnav.navbar-fixed {
 +
    background-color: rgba(0, 0, 0, 0.4);
 +
}
 +
nav.navbar.bootsnav ul.nav > li > a {
 +
    color: #fff;
 +
}
  
−
    <link rel="stylesheet" type="text/css"  href="https://2018.igem.org/wiki/index.php?title=Template:SKLMT-China/text_css&amp;action=raw&amp;ctype=text/css">
 
  
−
     <link rel="stylesheet" type="text/css"  href="https://2018.igem.org/wiki/index.php?title=Template:SKLMT-China/bootstrap_css&amp;action=raw&amp;ctype=text/css">
+
.tiles {
 +
     display: flex;
 +
    flex-wrap: wrap;
 +
    border-top: 0;
 +
}
  
−
     <link rel="stylesheet" type="text/css"  href="https://2018.igem.org/wiki/index.php?title=Template:SKLMT-China/navbar_css&amp;action=raw&amp;ctype=text/css">
+
.tiles article {
 +
     display: flex;
 +
    height: 40vh;
 +
    max-height: 40em;
 +
    min-height: 25em;
 +
    overflow: hidden;
 +
    width: 40%;
  
−
     <!-- Start Navbar -->
+
     background-repeat: no-repeat;
−
     <nav class="navbar navbar-default navbar-transparent navbar-fixed dark bootsnav" style="top: 11px">
+
    background-position: center;
 +
     background-size: cover;
 +
    transition: all 1s ease;
 +
}
  
−
        <div class="container">
+
.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
 +
    width: 60%;
 +
}
  
−
            <div class="navbar-header">
+
.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;
  
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
+
}
−
                    <i class="fa fa-bars"></i>
+
−
                </button>
+
  
−
                <!-- LOGO
+
.tiles article a {
−
                    <a class="navbar-brand" href="#brand"><img src="images/nav-logo.jpg" class="logo" alt=""></a>
+
    position: absolute;
−
                -->
+
    width: 100%;
−
                <div class="navbar-brand" href="index"><a>SKLMT</a></div>
+
    height: 100%;
 +
    z-index: 4;
 +
}
  
−
            </div>
+
.tiles article header h2 {
 +
    color: #fff;
 +
    font-size: 3em;
 +
    transform: translateY(100px);
 +
    transition: all 1s ease;
 +
}
  
−
            <div class="collapse navbar-collapse" id="navbar-menu">
+
.tiles article header p {
−
                <ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeInUp">
+
    color: #fff;
−
                    <li class="dropdown">
+
     margin-top: 1em;
−
                        <a href="Team" class="dropdown-toggle" data-toggle="dropdown">Team</a>
+
    font-style: normal;
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
     font-size: 1.4em;
−
                            <li>
+
     opacity: 0;
−
                                <a href="Members">Members</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Attributions">Attributions</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Sponsor">Sponsors</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="project" class="dropdown-toggle" data-toggle="dropdown">Project</a>
+
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
−
                            <li>
+
−
                                <a href="Project_Overview">Overview</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Design">Design</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Protocol">Protocol</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Results">Results</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Safety">Safety</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="InterLab">InterLab</a>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="Parts" class="dropdown-toggle" data-toggle="dropdown">Parts</a>
+
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
−
                            <li>
+
−
                                <a href="Basic_Part">Basic Part</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Composite_Part">Composite Part</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Best_Part">Best Part</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Improved_Part">Improved Part</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Part_Collection">Part Collection</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li>
+
−
                        <a href="#">Software</a>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="Model" class="dropdown-toggle" data-toggle="dropdown">Model</a>
+
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
−
                            <li>
+
−
                                <a href="Model_Overview">Overview</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Promoter_Strength">Promoter Strength</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="Human_Practices" class="dropdown-toggle" data-toggle="dropdown">Human Practices</a>
+
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
−
                            <li>
+
−
                                <a href="HP_Overview">Overview</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="HP_Silver">HP Silver</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Integrated_Gold">Integrated & Gold</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Collaborations">Collaborations</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown">
+
−
                        <a href="Notebook" class="dropdown-toggle" data-toggle="dropdown">Notebook</a>
+
−
                        <ul class="dropdown-menu animated fadeInUp" style="display: none; opacity: 1;">
+
−
                            <li>
+
−
                                <a href="Notebook_Overview">Overview</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Notebook_Protocol">Protocol</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Material">Material</a>
+
−
                            </li>
+
−
                            <li>
+
−
                                <a href="Data_Base">Data Base</a>
+
−
                            </li>
+
−
                        </ul>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
        </div>
+
−
    </nav>
+
−
    <!-- End Navbar -->
+
−
 
+
−
    <section class="index-banner" style="background-image: url(https://static.igem.org/mediawiki/2018/b/b7/T--SKLMT-China--banner1.jpg)">
+
−
        <div class="inner">
+
−
            <header>
+
−
                <h2>SKLMT</h2>
+
−
            </header>
+
−
            <p>This is <strong>SKLMT-China</strong> SPEKING
+
−
            <footer>
+
−
                <ul class="buttons stacked">
+
−
                    <li><a href="#section-2" class="actions scrolly-middle">Learn More</a></li>
+
−
                </ul>
+
−
            </footer>
+
−
        </div>
+
−
     </section>
+
−
 
+
−
 
+
−
    <div class="container" id="section-2">
+
−
 
+
−
        <div class="paragraph shadow">
+
−
            <h2 class="title">main page</h2>
+
−
         
+
−
 
+
−
         
+
−
 
+
−
        </div>
+
−
    </div>
+
−
 
+
−
    <section id="page-footer">
+
−
        <div class="container">
+
−
            <div class="row">
+
−
                <div class="col-md-12" style="padding-top: 2.5em;">
+
−
                    <h2><strong>SKLMT</strong></h2>
+
−
                </div>
+
−
            </div>
+
−
            <div class="row">
+
−
                <div class="col-md-4">
+
−
                    <h3>Useful <strong>&thinsp;Links</strong></h3>
+
−
                    <p>
+
−
                    <a href="https://igem.org/Main_Page">Main Page</a>
+
−
                    </p>
+
−
                    <p>
+
−
                    <a href="https://igem.org/Special:SpecialPages">Special pages</a>
+
−
                    </p>
+
−
                </div>
+
−
                <div class="col-md-4">
+
−
                    <h3><strong>Contact&thinsp;</strong> us</h3>
+
−
                    <br>
+
−
                    <i class = "fa fa-envelope-o fa-lg">&thinsp;&thinsp;SKLMT.iGEM.China@gmail.com</i>
+
−
                </div>
+
−
                <div class="col-md-4">
+
−
                    <h3><strong>Address</strong></h3>
+
−
                    <br>
+
−
                    <i class="fa fa-map-marker fa-lg">&thinsp;&thinsp;Qingdao, Shandong<br><br><br>266200 Shandong University</i>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
     </section>
+
−
 
+
−
    <script type="text/javascript" src="https://2018.igem.org/Template:SKLMT-China/html5shiv_js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript" src="https://2018.igem.org/Template:SKLMT-China/respond_js?action=raw&ctype=text/javascript"></script>
+
−
     <script type="text/javascript" src="https://2018.igem.org/Template:SKLMT-China/jquery_js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript" src="https://2018.igem.org/Template:SKLMT-China/bootstrap_js?action=raw&ctype=text/javascript"></script>
+
−
    <script type="text/javascript" src="https://2018.igem.org/Template:SKLMT-China/navbar_js?action=raw&ctype=text/javascript"></script>
+
−
 
+
−
</html>
+
  
 +
    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>

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