Difference between revisions of "Template:Groningen/Design"

Line 1: Line 1:
 
<html>
 
<html>
−
<head>
+
<main class="row HP">
−
<link rel="stylesheet" type="text/css"
+
−
href="https://2018.igem.org/Template:Groningen/CSS&action=raw&ctype=text/css" />
+
  
−
<link rel="stylesheet" type="text/css"
+
    <div class="col m1"></div>
−
href="https://2018.igem.org/Template:Groningen/CSS/materialize&action=raw&ctype=text/css" />
+
    <div class="col s12 m10 l10">
 +
 +
            <!-- HERE YOU CAN TYPE YOUR STUFF -->
  
−
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+
      <h1>Design</h1>
−
<script type="text/javascript" src="https://2018.igem.org/Template:Groningen/Javascript&action=raw&ctype=text/javascript"></script>
+
<p>
−
</head>
+
    Something about design
−
<body>
+
</p>
  
−
<!-- LOGO -->
+
<ul class="collapsible popout" data-collapsible="expandable">
−
<div class="igem_2018_team_content" style="background-color: white">
+
<li id="timeline-scroll" class="scrollspy">
−
<div class="igem_2018_team_column_wrapper">
+
<div class="collapsible-header">
−
<div class="clear extra_space"></div>
+
Design
−
<div class="clear extra_space"></div>
+
</div>
−
<div align="center">
+
<div class="collapsible-body">
−
<img src="https://static.igem.org/mediawiki/2018/archive/8/84/20180627155313%21T--Groningen--Logo.png" width="40%" height="auto">
+
<div class="row">
−
        </div>
+
<div class="col s12">
−
        <div class="clear extra_space"></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>
−
        <!-- BEGIN CONTENT --------------------------------------------------->
+
<div class="col m1">
−
            <div class="col l8 m8 s12">
+
</div>
−
                    <h1> Design </h1>
+
<div class="col m10 s12">
−
                    <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>
+
                                        <div id="HP-Timeline">
−
        <!-- EINDE CONTENT --------------------------------------------------->
+
                                                <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> <!-- END col m10 s12 -->
 +
</div>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
  
−
<div class="clear extra_space"></div>
 
−
</div>
 
−
</div>
 
  
  
−
</body>
+
        <div class="col m1"></div>       
 +
    </div>
 +
 
 +
    <!-- RIGHT BETWEEN THOSE TWO COMMENTS -->
 +
        </div>
 +
        <div class="col m1"></div>
 +
    </main>
 +
 
 
</html>
 
</html>

Revision as of 14:07, 15 October 2018

Design

Something about design

  • Design

    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.