Difference between revisions of "Team:SKLMT-China"

(Replaced content with "{{SKLMT-China}} {{SKLMT-China/template_css}} <html> <div class="clear extra_space"></div> <div class="line_divider"></div> <div class="clear extra_spac...")
Line 4: Line 4:
 
<html>
 
<html>
  
−
      
+
     <div class="column full_size" style="text-align: center">
 +
        <h2> See our <a href = "https://2018.igem.org/Team:SKLMT-China/Description">Description</a> Page </h2>
 +
        <!-- <img src="http://placehold.it/1080x320/c4baba/e4dede"> -->
 +
 
 +
    </div>
 +
 
 +
 
 +
    <div class="column full_size" >
 +
 
 +
        <h3>Before you start</h3>
 +
        <p> Please read the following pages:</p>
 +
        <ul>
 +
            <li> <a href="https://2018.igem.org/Competition">Competition Hub</a> </li>
 +
            <li> <a href="https://2018.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
 +
            <li> <a href="https://2018.igem.org/Resources/Template_Documentation">Template documentation</a></li>
 +
        </ul>
 +
    </div>
 +
 
 +
 
 +
 
 +
    <div class="clear extra_space"></div>
 +
    <div class="line_divider"></div>
 +
    <div class="clear extra_space"></div>
 +
 
 +
 
 +
    <div class="column third_size" style="text-align: center">
 +
        <div class="highlight decoration_B_full">
 +
            <h3> Editing your wiki </h3>
 +
            <p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
 +
            <p>Use WikiTools - Edit in the black menu bar to edit this page</p>
 +
 
 +
            <div class="button_link">
 +
                <a href="https://2018.igem.org/wiki/index.php?title=Team:SKLMT-China&action=edit">
 +
                    EDIT PAGE
 +
                </a>
 +
            </div>
 +
 
 +
 
 +
        </div>
 +
    </div>
 +
 
 +
 
 +
 
 +
    <div class="column third_size" >
 +
 
 +
        <h3> Uploading pictures and files </h3>
 +
        <p> You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
 +
 
 +
 
 +
        <p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
 +
 
 +
        <div class="button_link">
 +
            <a href="https://2018.igem.org/Special:Upload">
 +
                UPLOAD FILES
 +
            </a>
 +
        </div>
 +
 
 +
    </div>
 +
 
 +
    <div class="column third_size" >
 +
        <h3> Wiki template information </h3>
 +
        <p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2018.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
 +
 
 +
    </div>
 +
 
 +
 
 +
 
  
 
     <div class="clear extra_space"></div>
 
     <div class="clear extra_space"></div>

Revision as of 12:01, 4 October 2018

HOME
TEAM
Team Members
Collaborations
PROJECT
Description
Design
Experiments
Notebook
InterLab
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts Overview
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM ⇗
/*

  • SKLMT SYTLE
  • */

/* @import url("https://fonts.googleapis.com/css?family=Lato:300,400,900"); @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,100italic,300italic"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i"); */

/* Basic Sytle */

html, body { 

   width:100%;
   font-size: 100%;
   font: inherit;
   height: auto;
   margin:0;
   padding:0;
   vertical-align: baseline;
   overflow-x: hidden;

}

body { 

   font-family: Lato, Roboto, Source Sans Pro, Helvetica, sans-serif;
   position: relative;

}

a, a:active, a:focus, a:hover{ 

   outline:none;
   text-decoration: none !important;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;

}

a:hover{ 

   text-decoration: none !important;
   color: #47D3E5;

}

h1, h2, h3, h4, h5, h6 { 

   font-weight: 300;
   line-height: 1.375;
   letter-spacing: -0.05em;
   margin: 0 0 1rem 0;

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 

   color: inherit;
   text-decoration: none;

}

h1 { 

   font-size: 3.5rem;
   line-height: 1.2;

}

h2 { 

   font-size: 2.25rem;

}

h3 { 

   font-size: 1.5rem;

}

h4 { 

   font-size: 1.1rem;

}

h5 { 

   font-size: 0.9rem;

}

h6 { 

   font-size: 0.7rem;

}

sub { 

   font-size: 0.8rem;
   position: relative;
   top: 0.5rem;

}

sup { 

   font-size: 0.8rem;
   position: relative;
   top: -0.5rem;

}

p{ 

   margin-bottom:20px;
   font-size: 1.35em;
   line-height: 1.65em;
   font-weight: 11;

}

.wrapper{ 

   min-height: 800px;

}

/* Paragraph */

.paragraph { 

   padding: 3em 3em;
   margin: 5em 0 3em 0;

}

/* breadcrumb */ .article-banner { 

   text-align: center;

}

.article-banner .container { 

   position: relative;

}

.breadcrumb { 

   padding: 0;
   position: absolute;
   width: 100%;
   top: 4.7em;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   background-color: rgba(0, 0, 0, .3) !important;

}

.breadcrumb li { 

   padding: 1em 1.3em;
   transition: all 1s ease;
   border-radius: 1em;

}

.breadcrumb li:before { 

   display: none;

}

.breadcrumb li a { 

   color: #fff;
   font-size: 1.4em;

}

.breadcrumb li:hover { 

   background-color: rgba(0, 0, 0, .33);

}

.breadcrumb li.active { 

   color: #fff;
   font-size: 1.4em;
   background-color: #00BFFF;

}

.breadcrumb li.active:hover{ 

   background-color: rgba(0, 255, 255, .8);
   border-radius: 1.5em;

}

.breadcrumb .dropdown-toggle:after { 

   font-family: 'FontAwesome';
   content: "\f0d7";
   display: inline-block;
   margin-left: 5px;

}

.breadcrumb .dropdown .dropdown-menu { 

   position: absolute;
   float: left;
   z-index: 10000;

}

.breadcrumb .dropdown .dropdown-menu li { 

   opacity: 1;

}

.breadcrumb .dropdown-menu li { 

   border-bottom: solid 2px #eee;
   border-radius: 0;

}

.breadcrumb .dropdown .dropdown-menu { 

   border-top: solid 5px #00BFFF;

}

.breadcrumb .dropdown-menu li:hover { 

   background-color: #fff;

}

.breadcrumb .dropdown-menu li:hover a{ 

   color: #00BFFF;
   background-color: #fff;

}


/* Panel */

.panel-group { 

   margin: 2em 0;

}

.panel-default > .panel-heading { 

   padding: 1.2em;

}

.panel-body { 

   font-size: 1.3em;
   line-height: 1.6em;

}

.panel-title { 

   text-align: center;
   font-size: 1.7em;

}

.panel-body .table-wrapper { 

   overflow-x: auto;

}

.panel-default>.panel-heading { 

   background-color: #fff;
   box-shadow: rgba(0,0,0,0.1) 0px 5px 20px 0px;

}


/* Loading */

  1. loading{
   background-color: #4b2edf;
   height: 100%;
   width: 100%;
   position: fixed;
   z-index: 99999;
   margin-top: 0px;
   top: 0px;

}

  1. loading-center{
   width: 100%;
   height: 100%;
   position: relative;

}

  1. loading-one {
   position: absolute;
   left: 50%;
   top: 50%;
   height: 300px;
   width: 50px;
   margin-top: -150px;
   margin-left: -25px;

}

  1. loading-two {
   position: absolute;
   left: 50%;
   top: 50%;
   height: 300px;
   width: 50px;
   margin-top: -150px;
   margin-left: 50px;

} .object-one{ 

   width: 18px;
   height: 18px;
   background-color: #FFF;
   float: left;
   margin-top: 15px;
   margin-right: 15px;
   -moz-border-radius: 50% 50% 50% 50%;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   -webkit-animation: object-one 1s infinite;
   animation: object-one 1s infinite;

} .object-two{ 

   width: 18px;
   height: 18px;
   background-color: #FFF;
   float: left;
   margin-top: 15px;
   margin-right: 15px;
   -moz-border-radius: 50% 50% 50% 50%;
   -webkit-border-radius: 50% 50% 50% 50%;
   border-radius: 50% 50% 50% 50%;
   -webkit-animation: object-two 1s infinite;
   animation: object-two 1s infinite;

}

.object-one:nth-child(9){ 

   -webkit-animation-delay: 0.9s;
   animation-delay: 0.9s;

} .object-one:nth-child(8){ 

   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;

} .object-one:nth-child(7){ 

   -webkit-animation-delay: 0.7s;
   animation-delay: 0.7s;

} .object-one:nth-child(6){ 

   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;

} .object-one:nth-child(5){ 

   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;

} .object-one:nth-child(4){ 

   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;

} .object-one:nth-child(3){ 

   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;

} .object-one:nth-child(2){ 

   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;

}

.object-two:nth-child(9){ 

   -webkit-animation-delay: 0.9s;
   animation-delay: 0.9s;

} .object-two:nth-child(8){ 

   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;

} .object-two:nth-child(7){ 

   -webkit-animation-delay: 0.7s;
   animation-delay: 0.7s;

} .object-two:nth-child(6){ 

   -webkit-animation-delay: 0.6s;
   animation-delay: 0.6s;

} .object-two:nth-child(5){ 

   -webkit-animation-delay: 0.5s;
   animation-delay: 0.5s;

} .object-two:nth-child(4){ 

   -webkit-animation-delay: 0.4s;
   animation-delay: 0.4s;

} .object-two:nth-child(3){ 

   -webkit-animation-delay: 0.3s;
   animation-delay: 0.3s;

} .object-two:nth-child(2){ 

   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;

}


@-webkit-keyframes object-one{ 

   50% {
       -ms-transform: translate(100px,0); 
       -webkit-transform: translate(100px,0);
       transform: translate(100px,0);
   }

} @keyframes object-one{ 

   50% {
       -ms-transform: translate(100px,0); 
       -webkit-transform: translate(100px,0);
       transform: translate(100px,0);
   }

} @-webkit-keyframes object-two{ 

   50% {
       -ms-transform: translate(-100px,0); 
       -webkit-transform: translate(-100px,0);
       transform: translate(-100px,0);
   }

} @keyframes object-two{ 

   50% {
       -ms-transform: translate(-100px,0); 
       -webkit-transform: translate(-100px,0);
       transform: translate(-100px,0);
   }

}

/* Footer */

  1. page-footer {
   margin-top: 3em;
   background-color: #111;
   text-align: center;
   color: white;
   border-top: 2em solid #222;
   border-bottom: 6em solid #000;

}

  1. page-footer h3 {
   font-size: 2.8m;

}

  1. page-footer h3 strong{
   font-family: Algerian;
   color: #cf5e72;

}

  1. page-footer h2 strong {
   font-family: Algerian;
   color: #cf5e72;
   font-size: 1.6em;

}

  1. page-footer .row {
   margin-bottom: 3em;

}


/* 

* Index Banner
*/

.index-banner { 

   background-attachment: fixed;
   background-color: #272833;
   background-image: url("T--SKLMT-China--banner1.jpg");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   min-height: 100vh;
   position: relative;
   text-align: center;
   z-index: 8;

}

@-moz-keyframes inner-animation { 

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@-webkit-keyframes inner-animation { 

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@-ms-keyframes inner-animation { 

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}

@keyframes inner-animation { 

   0% {
       opacity: 0;
   }

   100% {
       opacity: 1;
   }

}


.index-banner:before { 

   content: ;
   display: inline-block;
   height: 100vh;
   vertical-align: middle;
   width: 1%;

}

.index-banner:after { 

   content: ;
   display: block;
   height: 100%;
   left: 0;
   top: 0;
   position: absolute;
   width: 100%;

}

.index-banner .inner { 

   -moz-animation: inner-animation 2s 0.25s ease-in-out;
   -webkit-animation: inner-animation 2s 0.25s ease-in-out;
   -ms-animation: inner-animation 2s 0.25s ease-in-out;
   animation: inner-animation 2s 0.25s ease-in-out;
   -moz-animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards;
   -ms-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   /*background: rgba(52, 27, 43, 0.5);*/
   color: #fff;
   display: inline-block;
   opacity: 0;
   text-align: center;
   font-size: 150%;
   vertical-align: middle;
   position: relative;
   z-index: 1;

}

.index-banner .inner header { 

   width: 100%;
   display: inline-block;
   margin: 0 0 1em 0;
   padding: 3px 0 3px 0;

}

.index-banner .inner .cd-intro { 

   width: 100%;

}

.index-banner .inner header h2 { 

   font-size: 5em;
   font-weight: 900;
   margin: 0;
   padding-top: 1em;
   padding-left: 10px;
   padding-right: 10px;
   position: relative;
   /* color: transparent; */
   font-family: Broadway, Algerian;
   text-shadow: 0px -1px 4px white, 0px -2px 10px #66b2ff, 0px -10px 20px #3399ff, 0px -18px 40px #0080ff;

}

.index-banner .inner p { 

   font-size: 2em;
   font-family: Algerian;
   letter-spacing: 0.1em;
   margin: 0;
   text-transform: uppercase;

}

.index-banner .inner p a { 

   font-weight: 400;

}

.index-banner .inner footer { 

   margin: 1em 0 0 0;
   /* background: rgba(52, 27, 43, 0.5); */

}

/* Article Banner */

.article-banner { 

   position: relative;
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 1;
   height: 66vh;
   box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
   transition: all 0.5s ease;
   vertical-align: middle;

}

.article-banner:before { 

   content: ;
   display: inline-block;
   width: 0;
   height: 25vh;
   vertical-align: middle;

}

.article-banner:after { 

   content: ;
   display: inline-block;
   width: 0;
   height: 100%;
   vertical-align: middle;
   position: absolute;

}

.banner-content { 

   color: #fff;
   background: rgba(27, 27, 27, 0.75);
   background: rgba(0, 0, 0, 0.30);
   font-size: 1.35em;
   z-index: 2;
   width: 100%;
   text-align: center;

}

.banner-content h2 { padding-left: 10px; padding-right: 10px; 

   display: inline-block;
   font-family: Broadway;
   font-size: 3em;
   border-bottom: solid 2px #fff;
   padding-bottom: 5px;

}

.banner-content p { 

   font-weight: 100;
   padding-bottom: 10px;
   font-size: 1.5em !important;

}

.banner-content { 

   margin: 0 auto;

}

@keyframes scaling { 

   0%{
       transform: scale(1);
   }
   50%{
       transform: scale(1.5);
       width: 40%;
       border-radius: 5em;
   }
   100%{
       transform: scale(1);
   }

}

.article-banner .banner-content:hover { 

   -webkit-animation: scaling 2s ease;
   -moz-animation: scaling 2s ease;
   -ms-animation: scaling 2s ease;
   -o-animation: scaling 2s ease;

}

.banner-content h2.title { 

   transition: all 1s ease;

} /* .article-banner .banner-content:hover h2.title { 

   text-shadow: 0 0 5px #CCCCCC, 0 0 10px #CCCCCC, 0 0 15px #CCCCCC, 0 0 20px #00BFFF, 0 0 25px #00BFFF, 0 0 30px #00BFFF, 0 0 50px #00BFFF, 0 0 80px #00BFFF, 0 0 100px #00BFFF, 0 0 150px #00BFFF;

}*/


@media screen and (max-width: 736px) { 

   .index-banner .inner {
       background: none;
       margin-top: 5em;
   }

   .index-banner:before {
       height: unset;
   }

}

@keyframes leftAnimation { 

   0%{ transform: translateX(-2000px); opacity: 0;}
   100%{ transform: translateX(0px); opacity: 1;}

}

@-webkit-keyframes leftAnimation { 

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-o-keyframes leftAnimation { 

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-ms-keyframes leftAnimation{ 

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-moz-keyframes leftAnimation{ 

   0%{ -webkit-transform: translateX(-2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

@keyframes rightAnimation{ 

   0%{ transform: translateX(2000px); opacity: 0;} 
   100%{ transform: translateX(0px); opacity: 1;}

} @-webkit-keyframes rightAnimation{ 

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-o-keyframes rightAnimation{ 

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-ms-keyframes rightAnimation{ 

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

} @-moz-keyframes rightAnimation{ 

   0%{ -webkit-transform: translateX(2000px); opacity: 0;}
   100%{ -webkit-transform: translateX(0px); opacity: 1;}

}

.index-banner .inner p, .banner-content .title { 

   animation: leftAnimation 2s ease 1;
   -webkit-animation: leftAnimation 2s ease 1;
   -ms-animation: leftAnimation 2s ease 1;
   -o-animation: leftAnimation 2s ease 1;
   -moz-animation: leftAnimation 2s ease 1;
   
   animation-fill-mode:forwards;
   -webkit-animation-fill-mode: forwards;  
     -o-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards;   
     -moz-animation-fill-mode: forwards;

}

.index-banner .inner h2, .banner-content .content { 

   animation: rightAnimation 2s ease 1;
   -webkit-animation: rightAnimation 2s ease 1;
   -moz-animation: rightAnimation 2s ease 1;
   -ms-animation: rightAnimation 2s ease 1;
   -o-animation: rightAnimation 2s ease 1;

   animation-fill-mode:forwards;
   -webkit-animation-fill-mode: forwards;  
     -o-animation-fill-mode: forwards; 
     -ms-animation-fill-mode: forwards;   
     -moz-animation-fill-mode: forwards;

}



/* Button */

ul.buttons { 

   cursor: default;
   list-style: none;
   padding-left: 0;
   margin-top: inherit;

}

ul.buttons:last-child { 

   margin-bottom: 0;

}

ul.buttons li { 

   display: inline-block;
   padding: 0 0 0 1.5em;

}

ul.buttons li:first-child { 

   padding: 0;

}

ul.buttons.stacked li { 

   display: block;
   padding: 1.5em 0 0 0;

}

ul.buttons.stacked li:first-child { 

   padding: 0;

}

ul.buttons li { 

   display: block;
   padding: 1em 0 0 0;

} ul.buttons { 

   text-align: center;

}

input[type="button"], button, .actions { 

   -moz-appearance: none;
   -webkit-appearance: none;
   -ms-appearance: none;
   appearance: none;
   -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
   background: none;
   border: solid 1px;
   border-radius: 20px;
   color: inherit;
   cursor: pointer;
   display: inline-block;
   font-size: 0.8em;
   font-weight: 900;
   letter-spacing: 2px;
   min-width: 18em;
   padding: 0 0.75em;
   line-height: 3.75em;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;

}

input[type="button"]:hover, button:hover, .actions:hover { 

   background: rgba(188, 202, 206, 0.15);
   border-color: inherit;

}

input[type="button"].primary, button.primary, .actions.primary { 

   background: #83d3c9;
   border-color: #83d3c9;
   color: #fff !important;

}

input[type="button"].primary:hover, button.primary:hover, .actions.primary:hover { 

   background: #96dad1 !important;
   border-color: #96dad1 !important;

}

input[type="button"].fit, button.fit, .actions.fit { 

   width: 100%;

}

input[type="button"].small, button.small, .actions.small { 

   font-size: 0.7em;
   min-width: 14em;
   padding: 0.5em 0;

}

/* Banner Animation */


@-webkit-keyframes animatedBackground { 

 0% {
   background-position: 0 0;
 }
 50% {
   background-position: 100% 100%;
 }
 100% {
   background-position: 0 0;
 }

}

.index-banner { 

   background-size: cover;
   background-position: bottom;
    -webkit-animation: animatedBackground 40s linear infinite;
   animation: animatedBackground 40s linear infinite;

}

See our Description Page

Before you start

Please read the following pages:

Editing your wiki

On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world!

Use WikiTools - Edit in the black menu bar to edit this page

EDIT PAGE

Uploading pictures and files

You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name.

When you upload, set the "Destination Filename" to T--YourOfficialTeamName--NameOfFile.jpg. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)

UPLOAD FILES

Wiki template information

We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the Pages for awards link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!