Team:Northwestern

From 2014.igem.org

(Difference between revisions)
Line 36: Line 36:
}
}
-
html, body {
 
-
line-height: 1;
 
-
min-height:100%;
 
-
font-family:Artial, Verdana, sans-serif;
 
-
}
 
body {
body {
Line 52: Line 47:
}
}
-
ol, ul {
 
-
list-style: none;
 
-
}
 
-
 
-
p {
 
-
margin:1em 0;
 
-
line-height:1.1em;
 
-
}
 
-
 
-
q {
 
-
font-style:italic;
 
-
color:#333;
 
-
}
 
-
 
-
h1 {
 
-
font-size:2.91em;
 
-
margin:0;
 
-
}
 
-
 
-
h1 > small {
 
-
text-align:right;
 
-
display:inline-block;
 
-
font-size:.71em;
 
-
text-indent:15em;
 
-
color:#444;
 
-
}
 
-
 
-
h2 {
 
-
color:inherit;
 
-
font-size:1.91em;
 
-
margin:2em 0 1em 0;
 
-
}
 
-
 
-
h2:first-child {margin-top:0;}
 
-
 
-
h3 {
 
-
color:#333;
 
-
font-size:1.41em;
 
-
margin:1em 0;
 
-
}
 
-
 
-
h4 {
 
-
color:#444;
 
-
font-size:1.11em;
 
-
margin:1em 0;
 
-
}
 
-
 
-
#progress {
 
-
height:2%;
 
-
background:#444;
 
-
bottom:0;
 
-
z-index:200;
 
-
}
 
-
 
-
#scrollbar {
 
-
position:fixed;
 
-
right:2px;
 
-
height:50px;
 
-
width:6px;
 
-
background:#444;
 
-
background:rgba(0,0,0,0.6);
 
-
border:1px solid rgba(255,255,255,0.6);
 
-
z-index:300;
 
-
border-radius:3px;
 
-
}
 
-
 
-
.skrollr-desktop #scrollbar {display:none;}
 
-
 
-
#bg1, #bg2, #bg3 {
 
-
z-index:50;
 
-
top:0;
 
-
left:0;
 
-
width:100%;
 
-
height:100%;
 
-
background:url(images/bubbles.png) repeat 0 0;
 
-
}
 
-
 
-
#bg2 {
 
-
z-index:49;
 
-
background-image:url(images/bubbles2.png);
 
-
}
 
-
 
-
#bg3 {
 
-
z-index:48;
 
-
background-image:url(images/bubbles3.png);
 
-
}
 
-
 
-
#intro {
 
-
width:80%;
 
-
left:50%;
 
-
top:1em;
 
-
margin-left:-40%;
 
-
padding:2em;
 
-
background:#fff;
 
-
text-align:center;
 
-
border-radius:1em;
 
-
 
-
-webkit-transform-origin:0 0;
 
-
-moz-transform-origin:0 0;
 
-
-ms-transform-origin:0 0;
 
-
-o-transform-origin:0 0;
 
-
transform-origin:0 0;
 
-
 
-
-webkit-box-sizing: border-box;
 
-
-moz-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
 
-
#intro .arrows {
 
-
font-size:2em;
 
-
color:#09f;
 
-
}
 
-
 
-
#transform {
 
-
width:70%;
 
-
left:50%;
 
-
top:20%;
 
-
margin-left:-35%;
 
-
text-align:center;
 
-
font-size:150%;
 
-
 
-
.transform-origin(50%, 50%);
 
-
}
 
-
 
-
#properties {
 
-
width:100%;
 
-
height:100%;
 
-
padding-top:10%;
 
-
text-align:center;
 
-
 
-
-webkit-box-sizing: border-box;
 
-
-moz-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
 
-
#easing_wrapper {
 
-
width:100%;
 
-
height:100%;
 
-
}
 
-
 
-
#easing {
 
-
top:10%;
 
-
width:50%;
 
-
z-index:101;
 
-
}
 
-
 
-
.drop {
 
-
background:#09f;
 
-
font-weight:bold;
 
-
padding:1em;
 
-
}
 
-
 
-
#download {
 
-
width:80%;
 
-
left:10%;
 
-
height:80%;
 
-
padding:3em;
 
-
border:0 solid #222;
 
-
 
-
-webkit-box-sizing: border-box;
 
-
-moz-box-sizing: border-box;
 
-
box-sizing: border-box;
 
-
}
 
-
 
-
.twitter-share-button, .twitter-follow-button {
 
-
vertical-align:middle;
 
-
}
 
h1, h2, h3, h4 {
h1, h2, h3, h4 {
Line 392: Line 220:
     </div><!-- /.container -->
     </div><!-- /.container -->
-
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
 
-
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
 
-
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
 
-
<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
 
-
 
-
<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
 
-
<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
 
-
<h2>parallax scrolling for the masses</h2>
 
-
<p>let's get scrollin' ;-)</p>
 
-
<p class="arrows">▼&nbsp;▼&nbsp;▼</p>
 
-
</div>
 
-
 
-
<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
 
-
<h2>transform</h2>
 
-
<p>scale, skew and rotate the sh** out of any element</p>
 
-
</div>
 
-
 
-
<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
 
-
<h2>all numeric properties</h2>
 
-
<p>width, height, padding, font-size, z-index, blah blah blah</p>
 
-
</div>
 
-
 
-
<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
 
-
<div id="easing" data-3900="left:100%" data-4600="left:25%;">
 
-
<h2>easing?</h2>
 
-
<p>sure.</p>
 
-
<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
 
-
<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
 
-
</div>
 
-
 
-
<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
 
-
<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
 
-
<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
 
-
<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
 
-
<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
 
-
<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
 
-
<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
 
-
</div>
 
-
 
-
<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
 
-
<h2>the end</h2>
 
-
<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
 
-
<p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
 
-
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
 
-
<p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
 
-
<p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
 
-
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
 
-
</div>
 
-
 
-
<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
 
-
 
-
 
-
<script type="text/javascript">
 
-
var s = skrollr.init({
 
-
edgeStrategy: 'set',
 
-
easing: {
 
-
WTF: Math.random,
 
-
inverted: function(p) {
 
-
return 1-p;
 
-
}
 
-
}
 
-
});
 
-
</script>
 
Line 472: Line 237:
});
});
</script>
</script>
-
    <script src="http:2014.igem.org/Team:Northwestern/bootstrap.js"></script>
 
-
    <script src="http://www.bootstrap/javascript/assets/js/docs.min.js"></script>
 
-
 
      
      
 +
  <script src="http://www.bootstrap/javascript/assets/js/docs.min.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.26/skrollr.min.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.26/skrollr.min.js"></script>

Revision as of 20:07, 17 September 2014

Dropdown menu from bootstrap


Home

NU Models: Breaking Down Walls!

NU Models seeks to expand ribosome binding site characterization of E. Coli to other non-model organisms chosen for their promise in other fields of research. All processes take place in a cell-free system to provide a consistent characterization platform. This information is useful in synthetic biology applications for healthcare, the environment, and industry as it provides a basis for DNA design in organisms other than E. coli that are more optimized for the needs of a given application.

Learn More

Accomplishments

parts submitted, and etc

View details

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.

View details »

Retrieved from "http://2014.igem.org/Team:Northwestern"