|
|
| (2 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| | {{CSS/Main}} | | {{CSS/Main}} |
| | {{:Team:Northwestern/Templates/Reset}} | | {{:Team:Northwestern/Templates/Reset}} |
| - | {{Team:Northwestern/Template/nav_only}} | + | {{Team:Northwestern/Template/nav}} |
| | {{Team:Northwestern/Template/bootstrap/orange}} | | {{Team:Northwestern/Template/bootstrap/orange}} |
| - |
| |
| | | | |
| | <html> | | <html> |
| Line 18: |
Line 17: |
| | | | |
| | <title>Home</title> | | <title>Home</title> |
| - | | + | |
| - |
| + | |
| | <style> | | <style> |
| - |
| |
| - | html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
| |
| - | 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-family:Artial, Verdana, sans-serif;
| |
| - | }
| |
| - |
| |
| - | body {
| |
| - | background: #eeeeee;
| |
| - | background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| - | background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| - | background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| - | background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| - | background: linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| - | background-attachment:fixed;
| |
| - | }
| |
| - |
| |
| - | 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 { |
| | border: none; | | border: none; |
| | text-decoration: none; | | text-decoration: none; |
| | + | } |
| | + | |
| | + | #footer h2 { |
| | + | font-family: 'Lobster', cursive; |
| | + | color: rgba(123, 36, 216, 0.7); |
| | } | | } |
| | | | |
| | .jumbotron { | | .jumbotron { |
| | text-align: center; | | text-align: center; |
| - | background-color: transparent; | + | background-color: rgba(88, 167, 166, 0.52); |
| | + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(88,167,166,1)), color-stop(100%,rgba(250,250,250,1))); /* Chrome,Safari4+ */ |
| | + | margin-top: -100px; |
| | } | | } |
| | .jumbotron .btn { | | .jumbotron .btn { |
| Line 233: |
Line 40: |
| | font-size: 21px; | | font-size: 21px; |
| | } | | } |
| - |
| |
| - |
| |
| - | /* GLOBAL STYLES
| |
| - | -------------------------------------------------- */
| |
| - | /* Padding below the footer and lighter body text */
| |
| - |
| |
| - | body {
| |
| - | padding-bottom: 40px;
| |
| - | color: #5a5a5a;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* CUSTOMIZE THE CAROUSEL
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | /* Carousel base class */
| |
| - | .carousel {
| |
| - | height: 500px;
| |
| - | margin-bottom: 60px;
| |
| - | }
| |
| - | /* Since positioning the image, we need to help out the caption */
| |
| - | .carousel-caption {
| |
| - | z-index: 10;
| |
| - | }
| |
| - |
| |
| - | /* Declare heights because of positioning of img element */
| |
| - | .carousel .item {
| |
| - | height: 500px;
| |
| - | background-color: #777;
| |
| - | }
| |
| - | .carousel-inner > .item > img {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | min-width: 100%;
| |
| - | height: 500px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | /* MARKETING CONTENT
| |
| - | -------------------------------------------------- */
| |
| - |
| |
| - | /* Center align the text within the three columns below the carousel */
| |
| - | .marketing .col-lg-4 {
| |
| - | margin-bottom: 20px;
| |
| - | text-align: center;
| |
| - | }
| |
| - | .marketing h2 {
| |
| - | font-weight: normal;
| |
| - | }
| |
| - | .marketing .col-lg-4 p {
| |
| - | margin-right: 10px;
| |
| - | margin-left: 10px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* Featurettes
| |
| - | ------------------------- */
| |
| - |
| |
| - | .featurette-divider {
| |
| - | margin: 80px 0; /* Space out the Bootstrap <hr> more */
| |
| - | }
| |
| - |
| |
| - | /* Thin out the marketing headings */
| |
| - | .featurette-heading {
| |
| - | font-weight: 300;
| |
| - | line-height: 1;
| |
| - | letter-spacing: -1px;
| |
| - | }
| |
| - |
| |
| | | | |
| | | | |
| Line 323: |
Line 59: |
| | padding-left: 0; | | padding-left: 0; |
| | } | | } |
| - |
| |
| - | /* The navbar becomes detached from the top, so we round the corners */
| |
| - | .navbar-wrapper .navbar {
| |
| - | border-radius: 4px;
| |
| - | }
| |
| - |
| |
| - | /* Bump up size of carousel content */
| |
| - | .carousel-caption p {
| |
| - | margin-bottom: 20px;
| |
| - | font-size: 21px;
| |
| - | line-height: 1.4;
| |
| - | }
| |
| - |
| |
| - | .featurette-heading {
| |
| - | font-size: 50px;
| |
| - | }
| |
| - | }
| |
| | | | |
| | @media (min-width: 992px) { | | @media (min-width: 992px) { |
| Line 350: |
Line 69: |
| | | | |
| | <body> | | <body> |
| | + | <div class="jumbotron"> |
| | | | |
| - | | + | <div class="animated shake"> |
| - | | + | |
| - | <div class="container"> | + | |
| - | <div class="jumbotron">
| + | |
| | <h1>NU Models: Breaking Down Walls!</h1> | | <h1>NU Models: Breaking Down Walls!</h1> |
| - | <p class="lead">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.</p> | + | </div> |
| | + | <p class="lead">NU Models seeks to expand promoter and 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.</p> |
| | <p><a class="btn btn-lg btn-success" href="https://2014.igem.org/Team:Northwestern/Project" role="button">Learn More</a></p> | | <p><a class="btn btn-lg btn-success" href="https://2014.igem.org/Team:Northwestern/Project" role="button">Learn More</a></p> |
| | </div> | | </div> |
| - | </div>
| |
| - |
| |
| | | | |
| | | | |
| Line 366: |
Line 82: |
| | <div class="row"> | | <div class="row"> |
| | <div class="col-lg-4"> | | <div class="col-lg-4"> |
| - | <h2>Accomplishments</h2> | + | <h2>Updates</h2> |
| - | <p>parts submitted, and etc | + | <p><strong>October 9th</strong>: Sent in our construct--the spinach-aptmer to iGEM HQ! This RFP-spinach aptamer deviates from currently submitted parts because it monitors and measures both mRNA concentration and protein concentration simultaneously via fluorescence.</p> |
| - | </p> | + | <p><strong>October 17th</strong>: Characterized our part</p> |
| - | <p><a class="btn btn-primary" href="#" role="button">View details</a></p> | + | |
| | </div> | | </div> |
| | <div class="col-lg-4"> | | <div class="col-lg-4"> |
| - | <h2>Heading</h2> | + | <h2>Collaboration</h2> |
| - | <p>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. </p> | + | <p>Sent our water sample to the Cornell Team!</p> |
| - | <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> | + | <p>In contact with the UChicago Team about exchanging constructs</p> |
| | </div> | | </div> |
| | <div class="col-lg-4"> | | <div class="col-lg-4"> |
| - | <h2>Heading</h2> | + | <h2>Getting Ready</h2> |
| - | <p>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.</p> | + | <p>For the Jamboree!</p> |
| - | <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> | + | <p>See you there!</p> |
| | </div> | | </div> |
| | </div> | | </div> |
| | </div> | | </div> |
| - |
| |
| - | <!-- FOOTER -->
| |
| - | <footer>
| |
| - | <div class="container">
| |
| - | <p class="pull-right"><a href="#">Back to top</a></p>
| |
| - | <p>© 2014 Company, Inc. · <a href="#">Hm</a> · <a href="www.bootstrap.com">Bootstrap</a></p>
| |
| - | </footer>
| |
| - |
| |
| - | </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">▼ ▼ ▼</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 461: |
Line 103: |
| | ================================================== --> | | ================================================== --> |
| | <!-- Placed at the end of the document so the pages load faster --> | | <!-- Placed at the end of the document so the pages load faster --> |
| - | | + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| - | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
| + | |
| | <script type="text/javascript> | | <script type="text/javascript> |
| | $(document).ready(function(){ | | $(document).ready(function(){ |
| Line 473: |
Line 114: |
| | </script> | | </script> |
| | <script src="http:2014.igem.org/Team:Northwestern/bootstrap.js"></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="../../assets/js/docs.min.js"></script> |
| | + | <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> |
| | + | <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> |
| | + | |
| | + | </div><!--container--> |
| | + | </body> |
| | + | <div id="footer"> |
| | + | <h2>Thank you sponsors!</h2> |
| | + | <div class="row"> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://isbab2013.org/wp-content/uploads/2013/02/VWR-logo.png"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://www.cmidd.northwestern.edu/sites/all/files/images/A-Promega%20Logo_blue.png"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://www.idtdna.com/pages/images/gblocks/neb_logo.png?sfvrsn=12"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://www.brandtinstruments.net/images/thermo_logo.png"/> |
| | + | </div> |
| | | | |
| - |
| + | </div><!--row--> |
| | | | |
| - | <script src="http://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.26/skrollr.min.js"></script>
| + | <div class="row"> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="https://static.igem.org/mediawiki/2012/0/0a/IDT_logo_trans.png"/> |
| | + | <img style="width: 200px;" src="https://static.igem.org/mediawiki/2014/9/96/USAScientific.gif"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://www.northwestern.edu/african-studies/images/northwestern-university-seal-logo.png"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="http://www.mccormick.northwestern.edu/marketing/images/logos-and-branding/logos-for-download/transparency/mccormick-purple-transparency.png"/> |
| | + | </div> |
| | + | <div class="col-md-3"> |
| | + | <img style="width: 200px;" src="https://static.igem.org/mediawiki/2014/f/fd/Genomics_logo_1.gif"/> |
| | + | </div> |
| | | | |
| - | </body>
| + | |
| | + | </div> |
| | + | </div> |
| | | | |
| | </html> | | </html> |
"
