Difference between revisions of "Template:Groningen/Design"

Line 1: Line 1:
 
<html>
 
<html>
−
<main class="row HP">
+
<head>
 +
<link rel="stylesheet" type="text/css"
 +
href="https://2018.igem.org/Template:Groningen/CSS&action=raw&ctype=text/css" />
  
−
    <div class="col m1"></div>
+
<link rel="stylesheet" type="text/css"
−
    <div class="col s12 m10 l10">
+
href="https://2018.igem.org/Template:Groningen/CSS/materialize&action=raw&ctype=text/css" />
−
+
−
            <!-- HERE YOU CAN TYPE YOUR STUFF -->
+
  
−
      <h1>Design</h1>
+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
−
<p>
+
<script type="text/javascript" src="https://2018.igem.org/Template:Groningen/Javascript&action=raw&ctype=text/javascript"></script>
−
    Something about design
+
</head>
−
</p>
+
<body>
  
−
<ul class="collapsible popout" data-collapsible="expandable">
+
<!-- LOGO -->
−
<li id="timeline-scroll" class="scrollspy">
+
<div class="igem_2018_team_content" style="background-color: white">
−
<div class="collapsible-header">
+
<div class="igem_2018_team_column_wrapper">
−
Design
+
<div class="clear extra_space"></div>
−
</div>
+
<div class="clear extra_space"></div>
−
<div class="collapsible-body">
+
<div align="center">
−
<div class="row">
+
<img src="https://static.igem.org/mediawiki/2018/archive/8/84/20180627155313%21T--Groningen--Logo.png" width="40%" height="auto">
−
<div class="col s12">
+
        </div>
−
<p> Click on the icons in the timeline, and find out about all the insights we gained from our stakeholders and how the dialogues shaped our project. </p>
+
        <div class="clear extra_space"></div>
−
<div class="col m1">
+
        <!-- BEGIN CONTENT --------------------------------------------------->
−
</div>
+
            <div class="col l8 m8 s12">
−
<div class="col m10 s12">
+
                    <h1> Design </h1>
 +
                    <div id="HP-Timeline">
 +
                        <img src="https://static.igem.org/mediawiki/2018/2/27/T--Groningen--2018_designpage_setup.png" alt="" class="responsive-img">
 +
                        <a style="top: 14.15%; left: 7.1%;" class="modal-trigger design_block" href="#cellulose_input"></a>
 +
                        <a style="top: 30.9%; left: 3.1%;" class="modal-trigger design_block" href="#towards_glucose"></a>
 +
                        <a style="top: 47.2%; left: 7.1%;" class="modal-trigger design_block" href="#towards_stygreen"></a>
 +
                        <a style="top: 64%; left: 3.1%;" class="modal-trigger design_block" href="#host_strain"></a>
 +
                        <a style="top: 80.6%; left: 7.1%;" class="modal-trigger design_block" href="#further_improving_towards_glucose"></a>
 +
                        <a style="top: 14.15%; left: 71.1%;" class="modal-trigger design_block" href="#further_improving_towards_stygreen"></a>
 +
                        <a style="top: 30.3%; left: 75.1%;" class="modal-trigger design_block" href="#strain_optimization"></a>
 +
                        <a style="top: 47.1%; left: 71.1%;" class="modal-trigger design_block" href="#experimental_plan"></a>
 +
                        <a style="top: 63.7%; left: 75.1%;" class="modal-trigger design_block" href="#upscaling"></a>
 +
                    </div>
 +
                    <!-- HIER ALLE (POP-UP) MODALS-->
 +
                    <div id="cellulose_input" class="modal" style="z-index: 1003;">
 +
                        <div class="modal-content">
 +
                            <h4>Cellulose input</h4>
 +
                            <p>
 +
                              Text
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                    <div id="towards_glucose" class="modal" style="z-index: 1003;">
 +
                            <div class="modal-content">
 +
                                <h4>Cellulose towards glucose</h4>
 +
                                <p>
 +
                                  Text
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                    <div id="towards_stygreen" class="modal" style="z-index: 1003;">
 +
                            <div class="modal-content">
 +
                                <h4>Glucose towards StyGreen</h4>
 +
                                <p>
 +
                                    Text
 +
                                </p>
 +
                            </div>
 +
                    </div>
 +
                    <div id="host_strain" class="modal" style="z-index: 1003;">
 +
                            <div class="modal-content">
 +
                              <h4>Host strain</h4>
 +
                                <p>
 +
                                  Text
 +
                                </p>
 +
                            </div>
 +
                  </div>
 +
                  <div id="further_improving_towards_glucose" class="modal" style="z-index: 1003;">
 +
                        <div class="modal-content">
 +
                          <h4>Further improving the process towards glucose</h4>
 +
                            <p>
 +
                              Text
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                    <div id="further_improving_towards_stygreen" class="modal" style="z-index: 1003;">
 +
                    <div class="modal-content">
 +
                      <h4>Further improving the process towards StyGreen</h4>
 +
                        <p>
 +
                          Text
 +
                        </p>
 +
                    </div>
 +
                    </div>
 +
                      <div id="strain_optimization" class="modal" style="z-index: 1003;">
 +
                        <div class="modal-content">
 +
                          <h4>Final strain optimization</h4>
 +
                            <p>
 +
                              Text
 +
                            </p>
 +
                        </div>
 +
                    </div>
 +
                    <div id="experimental_plan" class="modal" style="z-index: 1003;">
 +
                            <div class="modal-content">
 +
                              <h4>Experimental plan to test designs</h4>
 +
                                <p>
 +
                                  Text
 +
                                </p>
 +
                            </div>
 +
                        </div>
 +
                        <div id="upscaling" class="modal" style="z-index: 1003;">
 +
                                <div class="modal-content">
 +
                                  <h4>Upscaling towards a bioreactor and styrene harvesting</h4>
 +
                                    <p>
 +
                                      Text
 +
                                    </p>
 +
                                </div>
 +
                            </div>
  
−
<div id="HP-Timeline">
+
        </div>
−
<img src="https://static.igem.org/mediawiki/2018/2/27/T--Groningen--2018_designpage_setup.png" alt="" class="responsive-img">
+
        <!-- EINDE CONTENT --------------------------------------------------->
−
<a style="top: 14.15%; left: 7.1%;" class="modal-trigger design_block" href="#footprint"></a>
+
−
</div>
+
−
<!-- HIER ALLE (POP-UP) MODALS-->
+
−
<div id="footprint" class="modal">
+
−
<div class="modal-content">
+
−
<h4>Carbon footprint analysis</h4>
+
−
<p>
+
−
To find whether our technology actually was a a benefit for the world, and see how much better it would become, we did a  Carbon Footprint Analysis. In collaboration with Tjerk Douma, we calculated in all the energy it would cost to create StyGreen compared to syrene. See <a target="_blank" href="Human_Practices#carbonfootprint">here</a> how we did that.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
+
−
+
−
</div> <!-- END col m10 s12 -->
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</li>
+
−
</ul>
+
  
 +
<div class="clear extra_space"></div>
 +
</div>
 +
</div>
  
  
−
        <div class="col m1"></div>       
+
</body>
−
    </div>
+
−
 
+
−
    <!-- RIGHT BETWEEN THOSE TWO COMMENTS -->
+
−
        </div>
+
−
        <div class="col m1"></div>
+
−
    </main>
+
−
 
+
 
</html>
 
</html>

Revision as of 13:59, 15 October 2018

Design