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="#footprint"></a>
+
−
+
−
                    </div>
+
−
                    <!-- HIER ALLE (POP-UP) MODALS-->
+
−
                    <div id="footprint" class="modal" style="z-index: 1003;">
+
−
                        <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>
+
−
        <!-- EINDE CONTENT --------------------------------------------------->
+
  
−
<div class="clear extra_space"></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">
−
</div>
+
<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>
  
  
−
</body>
+
 
 +
        <div class="col m1"></div>       
 +
    </div>
 +
 
 +
    <!-- RIGHT BETWEEN THOSE TWO COMMENTS -->
 +
        </div>
 +
        <div class="col m1"></div>
 +
    </main>
 +
 
 
</html>
 
</html>

Revision as of 11:46, 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.