|
|
Line 1: |
Line 1: |
| {{:Team:SDU-Denmark/core/header| }} | | {{:Team:SDU-Denmark/core/header| }} |
- | <!doctype html> | + | <html> |
- | <html class="no-js" lang="en"> | + | <script type="text/javascript"> |
- | <head>
| + | $(document).ready(function() { |
- | <meta charset="utf-8" /> | + | $('#box1').hover(function(){ |
- | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
| + | var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px"; |
- | <title>Foundation | Welcome</title>
| + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); |
- | <link rel="stylesheet" href="css/foundation.css" />
| + | }, function() { |
- | <script src="js/vendor/modernizr.js"></script>
| + | $(".cover", this).stop().animate({top:'405px'},{queue:false,duration:160}); |
- | </head>
| + | }); |
- | <body>
| + | $('#box2').hover(function(){ |
- |
| + | var smallTop = $('#box2').height() - $(".cover", this).height() -10 +"px"; |
- | <div class="row">
| + | $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160}); |
- | <div class="large-12 columns">
| + | }, function() { |
- | <h1>Welcome to Foundation</h1>
| + | $(".cover", this).stop().animate({top:'405px'},{queue:false,duration:160}); |
- | </div>
| + | }); |
- | </div>
| + | }); |
- |
| + | </script> |
- | <div class="row">
| + | |
- | <div class="large-12 columns">
| + | |
- | <div class="panel">
| + | |
- | <h3>We’re stoked you want to try Foundation! </h3>
| + | |
- | <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
| + | |
- | <p>Once you've exhausted the fun in this document, you should check out:</p>
| + | |
- | <div class="row">
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <p><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
| | | |
- | <div class="row">
| + | <div class="expandedContent"> |
- | <div class="large-8 medium-8 columns">
| + | <div class="boxgrid contentBorder boxgridBig" id="box1"> |
- | <h5>Here’s your basic grid:</h5>
| + | <img src="https://static.igem.org/mediawiki/2013/4/47/SDU2013_SpotTrees.jpg"> |
- | <!-- Grid Example -->
| + | <div class="cover boxcaption" style="top: 405px"> |
| + | <h2 class="onBlack">Doesn't rubber come from trees?</h2> |
| + | <p class="onBlackIntro"> |
| + | Let your eyes (and mouse) wander to these trees to discover our ideas on how to help the environment and change the future of rubber production. Take a look at our short <strong>project description</strong> below. |
| + | </p> |
| + | <p class="onBlack"> |
| + | The growing demand for natural rubber causes deforestation of the rainforest and occupation of arable lands, due to the establishment of new plantations. If producing rubber by bacteria succeeds, production of natural rubber will not be limited to the regions where the rubber tree can grow. Rather, rubber can be produced even in barren lands. |
| + | </p><p class="onBlack"> |
| + | Our project aims to enable a common bacteria to produce natural rubber while grown under controlled conditions. |
| + | Natural rubber is composed of molecules consisting of the substance IPP linked together like a chain. The common bacteria that we use (E. coli) already possesses the ability to produce the IPP, but it lacks the enzyme to connect the IPP links together into a chain. |
| + | We introduced the enzyme that the rubber tree has for connecting the links into the bacteria. Furthermore, we introduced genes that allow the bacteria further production of the IPP links. |
| + | </p> |
| + | </div> |
| + | </div> |
| | | |
- | <div class="row">
| + | <div class="boxgrid contentBorder boxgridMedium" id="box2" style="margin-left:8px"> |
- | <div class="large-12 columns">
| + | <img src="https://static.igem.org/mediawiki/2013/0/06/SDU2013_LabHigh.jpg"> |
- | <div class="callout panel">
| + | <a class="cover boxcaption" style="top: 405px" href="https://2013.igem.org/Team:SDU-Denmark/Tour10"> |
- | <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
| + | <h2 class="onBlack">No, rubber is made in the lab.</h2> |
- | </div>
| + | <p class="onBlackIntro"> |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-6 medium-6 columns">
| + | |
- | <div class="callout panel">
| + | |
- | <p>Six columns</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="large-6 medium-6 columns">
| + | |
- | <div class="callout panel">
| + | |
- | <p>Six columns</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-4 medium-4 small-4 columns">
| + | |
- | <div class="callout panel">
| + | |
- | <p>Four columns</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 small-4 columns">
| + | |
- | <div class="callout panel">
| + | |
- | <p>Four columns</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 small-4 columns">
| + | |
- | <div class="callout panel">
| + | |
- | <p>Four columns</p>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- |
| + | |
- | <hr />
| + | |
- |
| + | |
- | <h5>We bet you’ll need a form somewhere:</h5>
| + | |
- | <form>
| + | |
- | <div class="row">
| + | |
- | <div class="large-12 columns">
| + | |
- | <label>Input Label</label>
| + | |
- | <input type="text" placeholder="large-12.columns" />
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <label>Input Label</label>
| + | |
- | <input type="text" placeholder="large-4.columns" />
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <label>Input Label</label>
| + | |
- | <input type="text" placeholder="large-4.columns" />
| + | |
- | </div>
| + | |
- | <div class="large-4 medium-4 columns">
| + | |
- | <div class="row collapse">
| + | |
- | <label>Input Label</label>
| + | |
- | <div class="small-9 columns">
| + | |
- | <input type="text" placeholder="small-9.columns" />
| + | |
- | </div>
| + | |
- | <div class="small-3 columns">
| + | |
- | <span class="postfix">.com</span>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-12 columns">
| + | |
- | <label>Select Box</label>
| + | |
- | <select>
| + | |
- | <option value="husker">Husker</option>
| + | |
- | <option value="starbuck">Starbuck</option>
| + | |
- | <option value="hotdog">Hot Dog</option>
| + | |
- | <option value="apollo">Apollo</option>
| + | |
- | </select>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-6 medium-6 columns">
| + | |
- | <label>Choose Your Favorite</label>
| + | |
- | <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
| + | |
- | <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
| + | |
- | </div>
| + | |
- | <div class="large-6 medium-6 columns">
| + | |
- | <label>Check these out</label>
| + | |
- | <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
| + | |
- | <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | <div class="row">
| + | |
- | <div class="large-12 columns">
| + | |
- | <label>Textarea Label</label>
| + | |
- | <textarea placeholder="small-12.columns"></textarea>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </form>
| + | |
- | </div>
| + | |
| | | |
- | <div class="large-4 medium-4 columns">
| + | If you wish to see how, click here to start the interactive tour. |
- | <h5>Try one of these buttons:</h5>
| + | </p> |
- | <p><a href="#" class="small button">Simple Button</a><br/>
| + | <p class="onBlack"> |
- | <a href="#" class="small radius button">Radius Button</a><br/>
| + | Just days before the deadline of iGEM 2013, we got the peaks that our entire summer built towards: Two small bumps on the NMR indicating the presence of bacterially produced rubber in our strain of E. coli. With a mad scramble to the finish line, our initial indication was reinforced. Click anywhere along this text to start the interactive tour, which will guide you along the path to rubber. |
- | <a href="#" class="small round button">Round Button</a><br/>
| + | </p> |
- | <a href="#" class="medium success button">Success Btn</a><br/>
| + | </a> |
- | <a href="#" class="medium alert button">Alert Btn</a><br/>
| + | </div> |
- | <a href="#" class="medium secondary button">Secondary Btn</a></p>
| + | <div class="EndFloatBlock"></div> |
- | <div class="panel">
| + | </div> |
- | <h5>So many components, girl!</h5>
| + | |
- | <p>A whole kitchen sink of goodies comes with Foundation. Checkout the docs to see them all, along with details on making them your own.</p>
| + | |
- | <a href="http://foundation.zurb.com/docs/" class="small button">Go to Foundation Docs</a>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- |
| + | |
- | <script src="js/vendor/jquery.js"></script>
| + | |
- | <script src="js/foundation.min.js"></script>
| + | |
- | <script>
| + | |
- | $(document).foundation();
| + | |
- | </script>
| + | |
- | </body>
| + | |
| </html> | | </html> |
| + | {{:Team:SDU-Denmark/core/footer}} |