Difference between revisions of "Team:ShanghaitechChina"

Line 1: Line 1:
 
{{ShanghaitechChina}}
 
{{ShanghaitechChina}}
 
<html>
 
<html>
−
    <style>
+
<style>
−
#content{
+
html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
−
background-color:rgba(255,255,255,1);
+
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
  
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
 +
html, body {
 +
line-height: 1;
 +
min-height:100%; font-size:18px;
 +
font-family: 'Droid Sans', sans-serif;
  
 
}
 
}
−
#landingContent {
+
 
−
    background-color: white;
+
body {
−
    background-image: url("https://static.igem.org/mediawiki/2015/f/f9/Heidelberg_landingpage_longrobe.svg");
+
background: #eeeeee;
−
    background-position: 413px -340px;
+
background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
−
    background-repeat: no-repeat;
+
background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
−
    border-radius: 10px;
+
background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
−
    font-size: 26px;
+
background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
−
    line-height: normal;
+
background: linear-gradient(top, #eeeeee, #cccccc 100%);
−
    margin-left: auto;
+
background-attachment:fixed;
−
    margin-right: auto;
+
−
    min-height: 2200px;
+
−
    overflow: hidden;
+
−
    text-align: justify;
+
−
    width: 1000px;
+
 
}
 
}
−
#landingContent div::first-letter {
+
 
−
    color: #ff5533;
+
h1 {
−
    font-size: 28px;
+
font-size:24px;
−
    font-weight: bold;
+
margin:0;
−
    margin-top: 0;
+
 
}
 
}
−
#landingContent p::first-letter {
+
 
−
    color: #ff5533;
+
h1 > small {
−
    font-size: 28px;
+
text-align:right;
−
    font-weight: bold;
+
display:inline-block;
−
    margin-top: 0;
+
font-size:.71em;
 +
text-indent:15em;
 +
color:#444;
 
}
 
}
−
.question, .image, .statement {
+
 
−
    float: left;
+
h2 {
−
    height: 300px;
+
color:inherit;
−
    margin: 40px;
+
font-size:18px;
−
    padding: 10px;
+
margin:2em 0 1em 0;
−
    width: 420px;
+
 
}
 
}
−
#tools {
+
 
−
    background-color: #77bb22;
+
h2:first-child {margin-top:0;}
−
    border-style: dashed;
+
 
−
    border-width: 1px;
+
h3 {
−
    float: left;
+
color:#333;
−
    font-size: 32px;
+
font-size:1.41em;
−
    font-weight: bold;
+
margin:1em 0;
−
    left: 10%;
+
−
    margin: 50px auto;
+
−
    padding: 15px;
+
−
    position: relative;
+
−
    text-align: center;
+
−
    width: 80%;
+
 
}
 
}
−
.question {
+
 
−
    height: 250px;
+
h4 {
−
    padding-top: 70px;
+
color:#444;
 +
font-size:1.11em;
 +
margin:1em 0;
 
}
 
}
−
.image {
+
 
−
    height: 250px;
+
 
−
}
+
 
−
/* Have padding top so banner image doesn't overlap top nav */
+
html, body {
−
.intro-banner {
+
width:100%;
−
    background-image: url("https://static.igem.org/mediawiki/2016/d/d0/Mask.png") , url("https://static.igem.org/mediawiki/2016/1/16/Landscape1.jpeg");
+
height:100%;
−
    background-size:cover;
+
padding:0;
−
    color: #f2f2f2;
+
margin:0;
−
    padding-bottom: 50px;
+
overflow-x:hidden;
−
    padding-top: 50px;
+
−
    text-align: center;
+
−
    width: 102%;
+
−
    background-size:cover;
+
−
    margin-left: -1%;
+
 
}
 
}
−
.intro-banner:hover{
 
−
    background: url("https://static.igem.org/mediawiki/2016/1/16/Landscape1.jpeg") no-repeat scroll center center;
 
−
    background-size:cover;
 
  
 +
.skrollable {
 +
/*
 +
* First-level skrollables are positioned relative to window
 +
*/
 +
position:fixed;
  
 +
/*
 +
* Skrollables by default have a z-index of 100 in order to make it easy to position elements in front/back without changing each skrollable
 +
*/
 +
z-index:100;
 
}
 
}
−
.intro-inner {
+
 
−
    position: relative;
+
.skrollr-mobile .skrollable {
−
    padding-bottom: 10%;
+
/*
 +
May cause issues on Android default browser (see #331 on GitHub).
 +
*/
 +
position:absolute;
 
}
 
}
  
−
.intro-inner h1 {
+
.skrollable .skrollable {
−
    margin: 0;
+
/*
−
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+
* Second-level skrollables are positioned relative their parent skrollable
−
    font-size: 5em;
+
*/
 +
position:absolute;
 
}
 
}
  
−
.intro-divider {
+
.skrollable .skrollable .skrollable {
−
    width: 50%;
+
/*
−
    border-top: 1px solid #f2f2f2;
+
* Third-level (and below) skrollables are positioned static
−
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+
*/
−
    margin-left:25%;
+
position:static;
 
}
 
}
  
−
.intro-inner h3 {
+
 
−
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+
#progress {
 +
height:4px;
 +
background:#444;
 +
bottom:0;
 +
z-index:200;
 
}
 
}
  
−
/* Special paragraphs that stand out */
+
#bg1, #bg2, #bg3 {
−
.lead {
+
z-index:50;
−
    font-size: 20px;
+
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
background:url("https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png") repeat 0 0;
 
}
 
}
  
−
/* For smaller devices */
+
#bg2 {
−
@media (max-width: 767px) {
+
z-index:49;
−
    .intro-inner {
+
background-image:url("https://static.igem.org/mediawiki/2016/f/fd/Bubbles2.png");
−
        padding-bottom: 15%;
+
}
−
    }
+
  
−
    .intro-inner > h1 {
+
#bg3 {
−
        font-size: 3em;
+
z-index:48;
−
    }
+
background-image:url("https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png");
 +
}
  
−
    ul.intro-social-buttons > li {
+
#intro {
−
        display: block;
+
width:80%;
−
        margin-bottom: 20px;
+
left:50%;
−
        padding: 0;
+
top:1em;
−
    }
+
margin-left:-40%;
 +
padding:2em;
 +
background:#fff;
 +
text-align:center;
 +
border-radius:1em;
  
−
    ul.intro-social-buttons > li:last-child {
+
-webkit-transform-origin:0 0;
−
        margin-bottom: 0;
+
-moz-transform-origin:0 0;
−
    }
+
-ms-transform-origin:0 0;
 +
-o-transform-origin:0 0;
 +
transform-origin:0 0;
  
−
    .intro-divider {
+
-webkit-box-sizing: border-box;
−
        width: 100%;
+
-moz-box-sizing: border-box;
−
    }
+
box-sizing: border-box;
 
}
 
}
  
−
.button-title {
+
#intro .arrows {
−
    font-family: 'Architects Daughter', cursive;
+
font-size:2em;
−
    font-size: 18px;
+
color:#09f;
 
}
 
}
  
−
</style>
+
#transform {
−
   
+
width:70%;
−
<body>
+
left:50%;
−
<a href="#landingContent">
+
top:20%;
−
<div class="intro-banner">
+
margin-left:-35%;
−
        <div class="container">
+
text-align:center;
−
            <div class="row">
+
font-size:150%;
  
−
                <div class="col-lg-12">
+
.transform-origin(50%, 50%);
−
                    <div class="intro-inner">
+
}
−
                        <h1>Solar Hunter</h1>
+
−
                        <h3>meixianghaoxieshenme</h3>
+
−
                        <hr class="intro-divider">
+
−
                        <ul class="list-inline intro-social-buttons">
+
  
−
                        </ul>
+
#properties {
−
                    </div>
+
width:100%;
−
                </div>
+
height:100%;
 +
padding-top:10%;
 +
text-align:center;
  
−
            </div>
+
-webkit-box-sizing: border-box;
−
        </div>
+
-moz-box-sizing: border-box;
−
    </div>
+
box-sizing: border-box;
−
</a>
+
}
−
<div id="landingContent">
+
−
                <div id="tools">
+
−
                    Our Work and Contribution...
+
−
                </div>
+
−
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#mall">
+
−
                <div class="question" id="question1">
+
−
                    What impact would it have to <em>cure cystic fibrosis</em> by correcting the causing dysfunctional mRNA but without genetically modifying the patient?
+
−
                </div>
+
−
                <img src="https://static.igem.org/mediawiki/2015/2/2c/Heidelberg_landingpage_lunge.svg" id="lungImage" class="image">
+
−
                </a>
+
  
−
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#keastelic">
 
−
                <img src="https://static.igem.org/mediawiki/2015/4/47/Heidelberg_landingpage_laterne.svg" id="laternImage" class="image">
 
  
−
                <div class="question" id="question2">
 
−
                    How much safer could our cities be if <em>rape would be prevented</em> by an easy and discrete method to detect drugs ulteriorly poured  in drinks?
 
−
                </div>
 
−
                </a>
 
−
               
 
−
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#wink">
 
−
                <div class="question" id="question3">
 
−
                    What could be discovered if every research lab had the possibility to <em>perform cheap and fast western blotting</em> for every protein?
 
−
                </div>
 
  
−
                <img src="https://static.igem.org/mediawiki/2015/e/ec/Heidelberg_landingpage_ab.svg" id="abImage" class="image">
+
#end {
−
                </a>
+
width:60%;
−
                <a href="https://2015.igem.org/Team:Heidelberg/hp/experts#keastelic">
+
left:20%;
−
                <img src="https://static.igem.org/mediawiki/2015/4/47/Heidelberg_landingpage_laterne.svg" id="laternImage" class="image">
+
height:80%;
 +
padding:3em;
 +
border:0 solid #666;
 +
text-align:center;
  
−
                <div class="question" id="question2">
+
-webkit-box-sizing: border-box;
−
                    How much safer could our cities be if <em>rape would be prevented</em> by an easy and discrete method to detect drugs ulteriorly poured  in drinks?
+
-moz-box-sizing: border-box;
−
                </div>
+
box-sizing: border-box;
−
                </a>
+
}
−
               
+
.content {
 +
    background-color: white;
 +
    border: 1px solid #cccccc;
 +
    border-radius: 10px;
 +
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
 +
    color: #3d3d3d;
 +
    font-family: Tahoma;
 +
    font-size: 14px;
 +
    margin-left: 5%;
 +
    margin-top: 50px;
 +
    padding: 15px 60px;
 +
    width: 80%;
 +
}
 +
#easing {
 +
top:10%;
 +
width:50%;
 +
z-index:101;
 +
}
  
−
            </div>
+
.drop {
−
</body>
+
background:#09f;
 +
font-weight:bold;
 +
padding:1em;
 +
}
 +
#easing_wrapper {
 +
width:100%;
 +
height:100%;
 +
}
 +
</style>
  
  
  
 
</html>
 
</html>

Revision as of 02:44, 1 October 2016

igem2016:ShanghaiTech