Difference between revisions of "Team:KU Leuven/HP/HP Main"

 
(42 intermediate revisions by 3 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
*{
+
    .svg{
  margin: 0;
+
        padding: 0px 0px 10px 0px;
  padding: 0;
+
    }
  -webkit-box-sizing: border-box;
+
          box-sizing: border-box;
+
}
+
  
h1{
+
    #grad {
  font-size: 2.5rem;
+
    background: -webkit-linear-gradient(#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2); /* Safari 5.1-6.0 */
  font-family: 'Montserrat';
+
    background: -o-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Opera 11.1-12.0 */
  font-weight: normal;
+
    background: -moz-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Firefox 3.6-15 */
  color: #444;
+
    background: linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Standard syntax */
  text-align: center;
+
    }
  margin: 2rem 0;
+
}
+
  
.wrapper{
+
    .background1{
  width: 90%;
+
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
  margin: 0 auto;
+
            position: initial;
  max-width: 80rem;
+
            background-size: 100%;
}
+
            padding: 0 10px 0 10px;
 +
    }
 +
    p .head::first-letter {
 +
            color: #cc3333;
 +
            font-size: 40px;
 +
    }
 +
   
  
.cols{
+
   
  display: -webkit-box;
+
  display: -ms-flexbox;
+
  display: flex;
+
  -ms-flex-wrap: wrap;
+
      flex-wrap: wrap;
+
  -webkit-box-pack: center;
+
      -ms-flex-pack: center;
+
          justify-content: center;
+
}
+
  
.col{
+
    </style>
  width: calc(25% - 2rem);
+
<div id="grad">
  margin: 1rem;
+
<br>
  cursor: pointer;
+
<br>
}
+
                        <div class="background1">
 +
                            <div class="overlay">
  
.container{
+
                                                    <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Human Practices Overview</h1>
  -webkit-transform-style: preserve-3d;
+
                                                        <p class="head" style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">Participating in iGEM was an amazing experience, but we did not only join igem just for fun: We also wanted to make sure that our project had societal relevance. Therefore, we discussed our project with people that would actually come into contact with our product: Doctors and patients dealing with various diseases.  <br>
          transform-style: preserve-3d;
+
Furthermore, we paid a lot of attention on sharing our enthusiasm for science with the world, and spreading information about synthetic biology.<b>
-webkit-perspective: 1000px;
+
Interested in what else we did? Then continue reading!</b>
        perspective: 1000px;
+
                            </div>
}
+
                                               
 +
                        </div>
 +
                        <div class="container">
 +
                           
 +
                           
 +
                            <svg version="1.0" id="Overzicht" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 +
                                viewBox="0 0 1419.5 992.7" enable-background="new 0 0 1419.5 992.7" xml:space="preserve">
 +
                                    <g id="Logo_x5F_HEKcite.psd_1_">
 +
                                        <g>
 +
                                            <defs>
 +
                                                <rect id="SVGID_1_" x="583.5" y="368.2" width="227" height="235.2"/>
 +
                                            </defs>
 +
                                            <clipPath id="SVGID_2_">
 +
                                                <use xlink:href="#SVGID_1_"  overflow="visible"/>
 +
                                            </clipPath>
 +
                                            <g id="Shape_7_copy" clip-path="url(#SVGID_2_)">
 +
                                                <g>
 +
                                                    <path fill="#010202" d="M693.4,574.8c-16.1,0-30.7-18.2-34.4-25.7c7.8,9.5,20,23.4,34.2,23.4c14.8,0,20.1-10.7,21.7-15.3
 +
                                                        c0.3-1,0.8-1.6,1.3-1.6c0.2,0,0.5,0.2,0.7,0.4c0.2,0.4,0.4,1,0.1,1.7l-0.2,0.4C712,571.9,701.4,574.8,693.4,574.8z M743.4,482.9
 +
                                                        c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.3-0.2-0.8,0.1-1.5c1.3-3,1.3-12.3-0.3-14.7c-0.6-1-0.8-1.8-0.7-2.1c0.2,0.1,0.7,0.4,1.6,1.6
 +
                                                        c2.5,3.3,1.9,14.1,1.3,16.1C744.4,482.6,743.9,482.9,743.4,482.9L743.4,482.9z M713.6,477.4c-0.5,0-0.7-0.4-0.9-0.6
 +
                                                        c-0.3-0.6-0.3-1.5,0.3-2.4c1.9-2.7,20.4-20.6,45.7-20.6c0.3,0,0.6,0,0.8,0c-30.7,3.7-43.7,21.7-43.9,21.9
 +
                                                        C715.1,476.8,714.3,477.4,713.6,477.4L713.6,477.4z M633,475.9c-0.4-14.4,4.8-31.7,13.2-42.8c0.4-0.5,0.8-0.6,1.1-0.6
 +
                                                        c0.1,0,0.1,0,0.1,0.1c0.1,0.2,0,0.9-0.8,1.8c-9.8,14.8-11.8,28.4-13.5,40.5C633.1,475.2,633.1,475.5,633,475.9z M691.6,473
 +
                                                        c-0.2,0-0.5-0.1-0.7-0.3c-0.3-0.3-0.4-0.8-0.4-1.4c0.4-9.6-6.9-20.1-10.8-23.3c-0.6-0.5-0.6-1.1-0.4-1.6c0.1-0.4,0.5-0.8,1-0.8
 +
                                                        c0.3,0,0.7,0.2,1.1,0.5c7.8,7,11.1,17.9,11.4,25.2c0,0.7-0.2,1.1-0.4,1.4C692.2,472.9,691.9,473,691.6,473z M720.3,452.7
 +
                                                        c-0.9,0-1.6-0.5-2.5-1.4c-6.6-6.8-14.6-13-22.5-17.4c-0.5-0.3-0.8-0.7-0.7-1.1c0.1-0.3,0.5-0.6,1-0.6c0.3,0,0.7,0.1,1,0.2
 +
                                                        c3.7,1.6,10.8,5.9,23.7,17.5l0.3,0.2l0.3-0.2c3.9-2.3,23.9-10,39.3-10c0.1,0,0.3,0,0.4,0c-24.1,4.4-31.5,8.4-36,10.9
 +
                                                        c-1,0.6-1.9,1-2.7,1.4C721.3,452.6,720.7,452.7,720.3,452.7z M657.4,428.7c-0.4,0-0.8-0.1-1.2-0.4c-2.4-1.6-11.3-6.7-26.3-6.9
 +
                                                        c1.7-0.3,3.4-0.4,5.3-0.4c10.4,0,20.3,4,22,5.3c0.9,0.7,1.1,1.4,1,1.8C658.2,428.5,657.8,428.7,657.4,428.7L657.4,428.7z
 +
                                                        M666.4,415.4c-0.4,0-0.8-0.1-1.2-0.4c-3.9-2.6-14.2-8.5-28.1-8.9c1.1-0.1,2.2-0.2,3.3-0.2c11.7,0,24.2,5.9,25.8,7.1
 +
                                                        c0.9,0.7,1.1,1.4,1,1.8C667.1,415.2,666.8,415.4,666.4,415.4z"/>
 +
                                                </g>
 +
                                                <g>
 +
                                                    <path fill="#010202" d="M648.7,407.3c8.6,1.7,16,5.3,17.2,6.2c0.7,0.5,0.9,1,0.8,1.3c-0.1,0.2-0.3,0.2-0.4,0.2
 +
                                                        c-0.3,0-0.6-0.1-0.9-0.3C662.7,412.8,656.8,409.3,648.7,407.3 M639.8,421.8c8.4,0.9,15.8,3.9,17.2,4.9c0.7,0.5,0.9,1,0.8,1.3
 +
                                                        c-0.1,0.2-0.3,0.2-0.4,0.2c-0.3,0-0.6-0.1-0.9-0.3C654.7,426.7,649,423.4,639.8,421.8 M695.6,432.8c0.2,0,0.5,0.1,0.8,0.2
 +
                                                        c3.7,1.5,10.7,5.8,23.5,17.4l0.5,0.5l0.6-0.4c3.3-2,18.1-7.8,31.8-9.5c-18.2,3.8-24.6,7.3-28.6,9.5c-1,0.6-1.9,1-2.7,1.4
 +
                                                        c-0.5,0.2-1,0.3-1.4,0.3c-0.8,0-1.3-0.4-2.2-1.3c-6.6-6.9-14.7-13.1-22.6-17.5c-0.4-0.2-0.5-0.4-0.5-0.5
 +
                                                        C695.1,432.9,695.2,432.8,695.6,432.8 M646.8,433.3c-0.1,0.2-0.3,0.4-0.5,0.7l0,0v0.1c-7.3,11-10.3,21.4-12,31
 +
                                                        c1.6-11.4,6.1-23.3,12.4-31.7C646.7,433.4,646.7,433.3,646.8,433.3 M680.3,446.1c0.2,0,0.5,0.1,0.7,0.4
 +
                                                        c7.7,6.9,10.9,17.7,11.2,24.8c0,0.4-0.1,0.8-0.3,1c-0.1,0.1-0.3,0.2-0.4,0.2c-0.1,0-0.2,0-0.3-0.1c-0.2-0.2-0.3-0.6-0.3-1
 +
                                                        c0.4-9.8-7.1-20.4-11-23.7c-0.5-0.4-0.3-0.9-0.3-1C679.8,446.4,680,446.1,680.3,446.1 M750.3,454.9c-7.3,1.7-14.1,4.4-20.3,8.1
 +
                                                        c-8.2,4.8-13.1,10-14.6,12.4c-0.7,1.1-1.4,1.5-1.7,1.5c-0.2,0-0.3-0.1-0.4-0.3c-0.2-0.4-0.2-1.2,0.3-1.9
 +
                                                        C715.2,472.3,729.6,458.2,750.3,454.9 M743.2,466.5c2.1,3.5,1.6,13.5,1,15.3c-0.2,0.5-0.5,0.6-0.7,0.6c0,0-0.2,0-0.2-0.1
 +
                                                        c-0.1-0.1-0.1-0.4,0.1-1C744.6,478.3,744.7,469.6,743.2,466.5 M663.3,554.9c7.7,8.7,18.1,18.1,29.9,18.1
 +
                                                        c15.2,0,20.6-10.9,22.2-15.6c0.3-0.9,0.7-1.2,0.8-1.2s0.2,0.1,0.3,0.2c0.2,0.3,0.3,0.7,0.1,1.2c0,0.1-0.1,0.3-0.2,0.4
 +
                                                        c-4.9,13.5-15.3,16.3-23.1,16.3c-5.4,0-13.9-2.1-24-12.4C667,559.5,665,557.1,663.3,554.9 M640.5,405.4c-2.9,0-5.7,0.4-8.2,1.2
 +
                                                        c1.1-0.1,2.1-0.1,3.1-0.1c16,0,27.4,7.4,29.6,8.9c0.5,0.3,1,0.5,1.4,0.5c1.5,0,2.2-1.8,0.2-3.3
 +
                                                        C664.5,411.1,651.9,405.4,640.5,405.4L640.5,405.4z M635.2,420.6c-3.4,0-6.8,0.4-9.9,1.5c1.4-0.1,2.7-0.1,4-0.1
 +
                                                        c15.3,0,24.4,5.4,26.6,6.8c0.5,0.3,1,0.5,1.4,0.5c1.5,0,2.2-1.8,0.2-3.3C655.7,424.5,645.5,420.6,635.2,420.6L635.2,420.6z
 +
                                                        M695.6,431.8c-1.6,0-2.2,1.6-0.6,2.6c12.2,6.7,20.6,15.4,22.4,17.3c0.9,0.9,1.7,1.6,2.9,1.6c0.5,0,1.1-0.1,1.8-0.4
 +
                                                        c4.8-2,9.5-7.4,42.8-13c-1.5-0.2-3.1-0.3-4.7-0.3c-15.8,0-35.7,7.8-39.6,10.1c-3.9-3.5-15.9-14.3-23.8-17.6
 +
                                                        C696.3,431.8,695.9,431.8,695.6,431.8L695.6,431.8z M647.3,432c-0.4,0-0.9,0.3-1.5,0.8c-9.6,12.7-14.8,32.7-13,47.6
 +
                                                        c2.2-13.8,2.9-28.9,14.2-45.8C648.3,433.1,648.1,432,647.3,432L647.3,432z M680.3,445.1c-1.5,0-2.3,2.1-0.9,3.3
 +
                                                        c3.7,3.1,11,13.3,10.6,22.9c-0.1,1.5,0.8,2.2,1.6,2.2c0.9,0,1.8-0.8,1.7-2.2c-0.4-8.3-4.2-19-11.6-25.5
 +
                                                        C681.2,445.3,680.7,445.1,680.3,445.1L680.3,445.1z M758.8,453.3c-25.9,0-44.4,18.5-46.1,20.8c-1.2,1.7-0.5,3.8,0.9,3.8
 +
                                                        c0.7,0,1.6-0.5,2.6-1.9c2.8-4.1,18.8-20.6,49.7-22.2C763.5,453.4,761.1,453.3,758.8,453.3L758.8,453.3z M741.7,463.8
 +
                                                        c-0.7,0-0.5,1.4,0.4,2.9c1.5,2.3,1.5,11.4,0.3,14.3c-0.7,1.7,0.1,2.5,1,2.5c0.7,0,1.4-0.4,1.7-1.3c0.7-2.1,1.2-13-1.4-16.5
 +
                                                        C742.8,464.3,742.1,463.8,741.7,463.8L741.7,463.8z M657.7,546.6c0.4,4.5,17,28.7,35.7,28.7s23.3-15,24.2-17.3
 +
                                                        c0.5-1.4-0.3-2.8-1.3-2.8c-0.6,0-1.3,0.5-1.8,1.9c-1.2,3.6-6.2,14.9-21.3,14.9C678.2,572,665.5,556.2,657.7,546.6L657.7,546.6z"
 +
                                                        />
 +
                                                </g>
 +
                                            </g>
 +
                                        </g>
 +
                                        <g>
 +
                                            <defs>
 +
                                                <rect id="SVGID_3_" x="583.5" y="368.2" width="227" height="235.2"/>
 +
                                            </defs>
 +
                                            <clipPath id="SVGID_4_">
 +
                                                <use xlink:href="#SVGID_3_"  overflow="visible"/>
 +
                                            </clipPath>
 +
                                            <g id="Shape_6" clip-path="url(#SVGID_4_)">
 +
                                                <g>
 +
                                                    <path fill="#CD3736" d="M725.9,425c-2.8-4.2-8.7-10.3-16.7-14c0.8-8.5,7.1-14.6,9.3-15.9c2.2-1.4-1.5-5.4-5.3-3.5
 +
                                                        c-3.7,1.8-7.3,9-10.2,17.2c-1.7-0.4-3.5-0.8-5.3-0.9c0.2-6.5,1.8-13,7.1-18.5c1.9-2-3.1-4.4-5.4-1.7c-2.5,2.7-8.2,13-8.7,20.3
 +
                                                        h-0.1c-0.9,0.1-1.7,0.3-2.6,0.4c-1.2-8.7-3.7-19-8.8-22.4c-3.3-2.2-7.8,3.3-6.3,5.5c3.2,4.6,6.6,12.8,7.7,19.7
 +
                                                        c-19.3,10.4-22.9,40.9-22.6,46.1c0.4,6.1,12.9,4.4,13.1-0.3c0.3-8.8,5.4-23.5,16.7-28.9c12-5.7,30.5,4.6,32.8,6.5
 +
                                                        C722.8,436.4,729.7,430.3,725.9,425z"/>
 +
                                                </g>
 +
                                            </g>
 +
                                        </g>
 +
                                        <g>
 +
                                            <defs>
 +
                                                <rect id="SVGID_5_" x="583.5" y="368.2" width="227" height="235.2"/>
 +
                                            </defs>
 +
                                            <clipPath id="SVGID_6_">
 +
                                                <use xlink:href="#SVGID_5_"  overflow="visible"/>
 +
                                            </clipPath>
 +
                                            <g id="Shape_7" clip-path="url(#SVGID_6_)">
 +
                                                <g>
 +
                                                    <path fill="#CD3736" d="M658.3,508.3c-0.9,0-1.7,0-2.6,0c-1.7,0-2.6,0-2.8,2.3c-0.3,4.2-1,17.8-1,17.8s-0.8-10.5-0.7-18.6
 +
                                                        c0.1-5.8-0.7-17.1-1.6-24c-0.3-2.2-4.1-2.2-4.5-0.3c-0.6,3.3-1.3,14.3-2.5,21.9c-1,0.2-5,0-8.1,0.1c-0.6,0-2.1-0.1-2.2,2.1
 +
                                                        c-0.3,4.2-1.3,18.7-1.3,18.7s-0.8-10.5-0.7-18.6c0.1-5.8-0.7-17.1-1.6-24c-0.3-2.2-4.3-2.3-4.5-0.3c-0.6,5.7-2.7,21.6-2.9,23.1
 +
                                                        c-0.9,0-19.6,0.1-24.2,0.4c-20.1,1.6-6.1,3.4,0.9,3.6c1.1,0,24.1-1.1,25-1.1c2.3-0.1,3.5-19.3,3.5-19.3s0,6.6,0,17.8
 +
                                                        c-0.1,10.9,1.8,20.2,2.5,26.6c0.3,2.9,3.1,1.6,3.7-0.1c1-2.6,2.4-22.9,2.6-24.8c0.6,0,6.6,0.2,7.9,0.2c1.9,0,1.8-0.9,2.1-1.8
 +
                                                        c0.3-1,2.1-17.9,2.1-17.9s0,6.6,0,17.8c-0.1,10.9,1.8,20.2,2.5,26.6c0.3,2.9,3.1,1.6,3.7-0.1c1-2.6,2.2-23.3,2.4-25.3
 +
                                                        c0.7-0.1,1.1,0.1,2.2,0.1C661.5,511.2,662.2,508.3,658.3,508.3z M796.4,507.7c-8.4-0.3-38.6,0.9-83.8,1c-4.2,0-4,2.8,0.2,2.7
 +
                                                        c48.3-0.2,81.7-0.4,84.8-0.6C804.1,510.2,814.1,508.3,796.4,507.7z"/>
 +
                                                </g>
 +
                                            </g>
 +
                                        </g>
 +
                                        <g>
 +
                                            <defs>
 +
                                                <rect id="SVGID_7_" x="583.5" y="368.2" width="227" height="235.2"/>
 +
                                            </defs>
 +
                                            <clipPath id="SVGID_8_">
 +
                                                <use xlink:href="#SVGID_7_"  overflow="visible"/>
 +
                                            </clipPath>
 +
                                            <g id="Shape_9" clip-path="url(#SVGID_8_)">
 +
                                                <g>
 +
                                                    <path fill="#CD3736" d="M663.7,537.8H692v-5h-23.4v-20.2H692v-5.1h-23.4v-15.8H692v-5.1h-28.3V537.8z M704.8,509.5l23.5-22.9
 +
                                                        h-6.6l-19.4,19.1v-19.1h-5.1v51.2h5.1v-23.7l21.7,23.7h6.3L704.8,509.5z"/>
 +
                                                </g>
 +
                                            </g>
 +
                                        </g>
 +
                                        <g>
 +
                                            <defs>
 +
                                                <rect id="SVGID_9_" x="583.5" y="368.2" width="227" height="235.2"/>
 +
                                            </defs>
 +
                                            <clipPath id="SVGID_10_">
 +
                                                <use xlink:href="#SVGID_9_"  overflow="visible"/>
 +
                                            </clipPath>
 +
                                            <g id="Ellipse_1" clip-path="url(#SVGID_10_)">
 +
                                                <g>
 +
                                                    <path fill="#010202" d="M749.4,537.8h2.3v-18.5h-2.3V537.8z M779.5,528.5L779.5,528.5c0-5.1-3.9-9.3-8.6-9.3s-8.6,4.1-8.6,9.3
 +
                                                        c0,5.1,3.9,9.3,8.6,9.3c3.5,0,6.4-2.2,7.8-5.3l-1.8-1c-1.1,2.5-3.4,4.2-6,4.2c-3.7,0-6.6-3.2-6.7-7.1h13.3L779.5,528.5z
 +
                                                        M764.4,526.6c0.8-3,3.4-5.3,6.4-5.3c3.1,0,5.6,2.2,6.4,5.3H764.4z M739.6,521.4c0.3,0,0.6,0,0.9,0.1c0.1,0,0.2,0,0.2,0
 +
                                                        c0.2,0,0.4,0.1,0.6,0.1c0.1,0,0.2,0,0.2,0.1c0.2,0.1,0.5,0.1,0.7,0.2h0.1c0.3,0.1,0.5,0.2,0.8,0.4l0,0c0.2,0.1,0.5,0.3,0.7,0.4
 +
                                                        c0,0,0.1,0,0.1,0.1c0.2,0.2,0.4,0.3,0.6,0.5l0,0c0.4,0.4,0.8,0.9,1.1,1.4l1.8-1.2c-1.7-2.5-4.6-4.2-7.9-4.2
 +
                                                        c-5.2,0-9.4,4.1-9.4,9.3c0,5.1,4.2,9.3,9.4,9.3c3.3,0,6.2-1.7,7.9-4.2l-1.8-1.2c-1.3,2-3.5,3.3-6.1,3.3c-4,0-7.3-3.2-7.3-7.2
 +
                                                        S735.6,521.4,739.6,521.4z M759,513h-2.3v6.3h-3.1v2h3.1v16.5h2.3v-16.5h3.1v-2H759V513z M750.6,514.2c-0.9,0-1.6,0.7-1.6,1.6
 +
                                                        c0,0.9,0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6C752.2,515,751.4,514.2,750.6,514.2z"/>
 +
                                                </g>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="151.3" y="315.9" fill="#BE1622" width="322.7" height="72.6"/>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="502.1" y1="404.1" x2="592.8" y2="457.6"/>
 +
                                            <polygon fill="#BE1622" points="502.9,402.8 592.8,457.6 501.4,405.4        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path fill="#BE1622" d="M499.5,405.8c1,3.9,2,7.7,2.9,11.6c0.5,1.9,3.3,1.1,2.9-0.8c-1.1-4.7-2.3-9.3-3.4-14
 +
                                                    c-0.3,0.6-0.7,1.2-1,1.8c4-1.1,8-2.2,12-3.2c1.9-0.5,1.1-3.4-0.8-2.9c-4,1.1-8,2.2-12,3.2c-0.8,0.2-1.2,1.1-1,1.8
 +
                                                    c1.1,4.7,2.3,9.3,3.4,14c1-0.3,1.9-0.5,2.9-0.8c-1-3.9-2-7.7-2.9-11.6C502,403.1,499.1,403.9,499.5,405.8L499.5,405.8z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="79.4" y="225.5" fill="none" width="237.5" height="46"/>
 +
                                    <text transform="matrix(1 0 0 1 74.4121 243.2913)" font-family="'ArialMT'" font-size="26px">Patient interviews</text>
 +
                                    <rect x="208.4" y="170.3" fill="none" width="275" height="37.4"/>
 +
                                    <text transform="matrix(1 0 0 1 198.1497 170.1899)" font-family="'ArialMT'" font-size="26px">Talks with specialists</text>
 +
                                    <rect x="416.6" y="219" fill="none" width="91.9" height="35.7"/>
 +
                                    <text transform="matrix(1 0 0 1 416.603 237.4903)" font-family="'ArialMT'" font-size="26px">Ethics</text>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="892" y1="414" x2="791.5" y2="461"/>
 +
                                            <polygon fill="#BE1622" points="892.7,415.3 791.5,461 891.4,412.6      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path fill="#BE1622" d="M891.6,415.1c-1.6,4-3.2,8.1-4.8,12.1c1,0.3,1.9,0.5,2.9,0.8c1.9-4.9,3.7-9.7,5.6-14.6
 +
                                                    c0.3-0.8-0.4-1.6-1-1.8c-3.9-1.6-7.8-3.2-11.8-4.8c-1.8-0.7-2.6,2.2-0.8,2.9c3.9,1.6,7.8,3.2,11.8,4.8c-0.3-0.6-0.7-1.2-1-1.8
 +
                                                    c-1.9,4.9-3.7,9.7-5.6,14.6c-0.7,1.8,2.2,2.6,2.9,0.8c1.6-4,3.2-8.1,4.8-12.1C895.2,414.1,892.3,413.3,891.6,415.1L891.6,415.1z"
 +
                                                    />
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="1056.8" y="201.7" fill="none" width="132.4" height="46"/>
 +
                                    <text transform="matrix(1 0 0 1 869.4003 236.8499)" font-family="'ArialMT'" font-size="26px">EOS blogs</text>
 +
                                    <text transform="matrix(1 0 0 1 968.4608 138.99)" font-family="'ArialMT'" font-size="26px">European Practice </text>
 +
                                    <text transform="matrix(1 0 0 1 1012.7608 170.19)" font-family="'ArialMT'" font-size="26px">Jamboree</text>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="698.7" y1="656.7" x2="700" y2="593.9"/>
 +
                                            <polygon fill="#BE1622" points="697.2,656.7 700,593.9 700.2,656.8      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path fill="#BE1622" d="M700.8,658c1.7-1.6,3.4-3.3,5.2-4.9c1.4-1.3-0.7-3.4-2.1-2.1c-2.1,2-4.2,3.9-6.3,5.9c0.7,0,1.4,0,2.1,0
 +
                                                    c-1.7-1.8-3.5-3.5-5.2-5.3c-1.4-1.4-3.5,0.7-2.1,2.1c1.7,1.8,3.5,3.5,5.2,5.3c0.6,0.6,1.5,0.6,2.1,0c2.1-2,4.2-3.9,6.3-5.9
 +
                                                    c-0.7-0.7-1.4-1.4-2.1-2.1c-1.7,1.6-3.4,3.3-5.2,4.9C697.3,657.2,699.4,659.3,700.8,658L700.8,658z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="257.4" y="802.5" fill="none" width="304" height="137"/>
 +
                                    <text transform="matrix(1 0 0 1 274.4426 820.2026)" font-family="'ArialMT'" font-size="26px">Teaching children from </text>
 +
                                    <text transform="matrix(1 0 0 1 243.4426 850.2026)" font-family="'ArialMT'" font-size="26px">elementary</text>
 +
                                    <text transform="matrix(1 0 0 1 361.8426 850.2026)" font-family="'ArialMT'" font-size="25px" letter-spacing="1"> </text>
 +
                                    <text transform="matrix(1 0 0 1 368.4426 850.2026)" font-family="'ArialMT'" font-size="26px"> and</text>
 +
                                    <text transform="matrix(1 0 0 1 408.4426 850.2026)" font-family="'ArialMT'" font-size="25px" letter-spacing="1"> </text>
 +
                                    <text transform="matrix(1 0 0 1 415.0426 850.2026)" font-family="'ArialMT'" font-size="26px"> high</text>
 +
                                    <text transform="matrix(1 0 0 1 462.6426 850.2026)" font-family="'ArialMT'" font-size="25px" letter-spacing="1"> </text>
 +
                                    <text transform="matrix(1 0 0 1 469.1426 850.2026)" font-family="'ArialMT'" font-size="26px"> schools </text>
 +
                                    <text transform="matrix(1 0 0 1 323.1426 880.2026)" font-family="'ArialMT'" font-size="26px">about science</text>
 +
                                    <rect x="561.3" y="811.7" fill="none" width="267.2" height="64.7"/>
 +
                                    <text transform="matrix(1 0 0 1 615.4379 832.9651)" font-family="'ArialMT'" font-size="26px">I</text>
 +
                                    <text transform="matrix(1 0 0 1 622.6379 832.9651)" font-family="'ArialMT'" font-size="26px">mmunity Wars </text>
 +
                                    <text transform="matrix(1 0 0 1 638.1379 862.9651)" font-family="'ArialMT'" font-size="26px">Card game</text>
 +
                                    <rect x="892.8" y="811.7" fill="none" width="223" height="74.4"/>
 +
                                    <text transform="matrix(1 0 0 1 914.2685 829.4153)" font-family="'ArialMT'" font-size="26px">Workshops with </text>
 +
                                    <text transform="matrix(1 0 0 1 905.8685 859.4153)" font-family="'ArialMT'" font-size="26px">Kinderuniversiteit</text>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="167" y1="262.5" x2="180.3" y2="313.6"/>
 +
                                            <polygon points="168.4,262.2 180.3,313.6 165.5,262.9        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M166.8,263.4c1.5,0.9,3,1.9,4.5,2.8c0.5-0.9,1-1.7,1.5-2.6c-1.8-1.1-3.6-2.2-5.4-3.3c-0.6-0.4-1.7-0.2-2.1,0.5
 +
                                                    c-0.8,1.9-1.6,3.7-2.4,5.6c-0.8,1.8,1.8,3.3,2.6,1.5c0.8-1.9,1.6-3.7,2.4-5.6c-0.7,0.2-1.4,0.4-2.1,0.5c1.8,1.1,3.6,2.2,5.4,3.3
 +
                                                    c1.7,1,3.1-1.6,1.5-2.6c-1.5-0.9-3-1.9-4.5-2.8S165.2,262.4,166.8,263.4L166.8,263.4z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="421.7" y1="257.9" x2="400.8" y2="307.2"/>
 +
                                            <polygon points="423.1,258.5 400.8,307.2 420.3,257.3        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M421,258.3c0.6,1.7,1.2,3.3,1.9,5c1-0.3,1.9-0.5,2.9-0.8c-0.8-2-1.5-4-2.3-6c-0.3-0.9-1.3-1.4-2.2-0.9
 +
                                                    c-1.8,1-3.6,2-5.4,3c-1.7,0.9-0.2,3.5,1.5,2.6c1.8-1,3.6-2,5.4-3c-0.7-0.3-1.5-0.6-2.2-0.9c0.8,2,1.5,4,2.3,6
 +
                                                    c0.7,1.8,3.6,1,2.9-0.8c-0.6-1.7-1.2-3.3-1.9-5C423.2,255.8,420.3,256.5,421,258.3L421,258.3z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="1077.1" y1="204.1" x2="1087.1" y2="308.5"/>
 +
                                            <polygon points="1078.6,203.9 1087.1,308.5 1075.6,204.2        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M1076.9,204.3c1.9,2.1,4,4.1,5.9,6.1c0.8-0.6,1.5-1.3,2.3-1.9c-2.4-2.4-4.7-4.8-7.1-7.2c-0.8-0.8-2.1-0.7-2.6,0.5
 +
                                                    c-1.5,3.7-2.9,7.3-4.5,11c-0.8,1.7,2.1,2.8,2.8,1.1c1.5-3.7,2.9-7.3,4.5-11c-0.8,0.1-1.7,0.2-2.6,0.5c2.4,2.4,4.7,4.8,7.1,7.2
 +
                                                    c1.4,1.3,3.7-0.5,2.3-1.9c-1.9-2.1-4-4.1-5.9-6.1C1077.9,201,1075.5,202.9,1076.9,204.3L1076.9,204.3z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="1197.1" y1="264.3" x2="1178.8" y2="306.4"/>
 +
                                            <polygon points="1198.5,264.9 1178.8,306.4 1195.8,263.7        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M1196.4,264.7c0.5,1.4,1.1,2.8,1.6,4.3c1-0.3,1.9-0.5,2.9-0.8c-0.7-1.7-1.3-3.4-2-5.1c-0.4-0.9-1.3-1.4-2.2-0.9
 +
                                                    c-1.6,0.9-3.2,1.7-4.8,2.6c-1.7,0.9-0.2,3.5,1.5,2.6c1.6-0.9,3.2-1.7,4.8-2.6c-0.7-0.3-1.5-0.6-2.2-0.9c0.7,1.7,1.3,3.4,2,5.1
 +
                                                    c0.7,1.8,3.6,1,2.9-0.8c-0.5-1.4-1.1-2.8-1.6-4.3C1198.6,262.2,1195.7,262.9,1196.4,264.7L1196.4,264.7z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="946.5" y1="254.2" x2="964.1" y2="313"/>
 +
                                            <polygon points="948,253.8 964.1,313 945,254.6      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M945.9,255c1.4,1.4,2.8,2.9,4.3,4.3c0.8-0.7,1.5-1.3,2.2-2c-1.7-1.7-3.4-3.4-5.1-5.1c-0.7-0.8-2.2-0.6-2.5,0.5
 +
                                                    c-0.5,1.7-1,3.5-1.5,5.2c-0.5,1.8,2.3,2.8,2.8,0.9c0.5-1.7,1-3.5,1.5-5.2c-0.8,0.2-1.7,0.4-2.5,0.5c1.7,1.7,3.4,3.4,5.1,5.1
 +
                                                    c1.3,1.3,3.6-0.7,2.2-2c-1.4-1.4-2.8-2.9-4.3-4.3C946.8,251.6,944.5,253.7,945.9,255L945.9,255z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="1202.6" y="231.4" fill="none" width="178.4" height="46"/>
 +
                                    <text transform="matrix(1 0 0 1 1168.2944 243.2911)" font-family="'ArialMT'" font-size="26px">Social Media</text>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="885.4" y1="801.1" x2="832" y2="760.9"/>
 +
                                            <polygon points="884.5,802.3 832,760.9 886.3,799.9      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M885.1,800.5c-2.2,0.2-4.3,0.3-6.5,0.5c0,1,0,2,0,3c2.6-0.2,5.2-0.5,7.8-0.7c0.9-0.1,1.7-0.9,1.4-1.9
 +
                                                    c-0.7-2.4-1.4-4.8-2.1-7.2c-0.5-1.9-3.4-1.1-2.9,0.8c0.7,2.4,1.4,4.8,2.1,7.2c0.5-0.6,1-1.3,1.4-1.9c-2.6,0.2-5.2,0.5-7.8,0.7
 +
                                                    c-1.9,0.2-1.9,3.1,0,3c2.2-0.2,4.3-0.3,6.5-0.5C887,803.3,887,800.3,885.1,800.5L885.1,800.5z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="698.2" y1="801.7" x2="704.6" y2="762.6"/>
 +
                                            <polygon points="696.8,801.5 704.6,762.6 699.7,802      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M698.4,800.8c-1.2-1.1-2.4-2.2-3.7-3.3c-0.7,0.7-1.4,1.4-2.1,2.1c1.5,1.3,3,2.6,4.4,3.9c0.5,0.4,1.2,0.6,1.8,0.2
 +
                                                    c1.6-1,3.3-2.1,4.9-3.1c1.6-1,0.1-3.6-1.5-2.6s-3.3,2.1-4.9,3.1c0.6,0.1,1.2,0.2,1.8,0.2c-1.5-1.3-3-2.6-4.4-3.9
 +
                                                    c-1.4-1.3-3.6,0.8-2.1,2.1c1.2,1.1,2.4,2.2,3.7,3.3C697.8,804.2,699.9,802.1,698.4,800.8L698.4,800.8z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="529.8" y1="788.5" x2="590" y2="757.2"/>
 +
                                            <polygon points="529.1,787.2 590,757.2 530.5,789.8      "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M530.2,788.6c0.3-1.5,0.5-2.9,0.8-4.4c-1-0.3-1.9-0.5-2.9-0.8c-0.3,1.8-0.6,3.5-0.9,5.3c-0.1,0.9,0.4,2,1.4,1.9
 +
                                                    c3.1-0.2,6.1-0.4,9.2-0.6c1.9-0.1,1.9-3.1,0-3c-3.1,0.2-6.1,0.4-9.2,0.6c0.5,0.6,1,1.3,1.4,1.9c0.3-1.8,0.6-3.5,0.9-5.3
 +
                                                    c0.3-1.9-2.5-2.7-2.9-0.8c-0.3,1.5-0.5,2.9-0.8,4.4C527,789.7,529.9,790.5,530.2,788.6L530.2,788.6z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                                    <rect x="909.2" y="316.6" fill="#BE1622" width="322.7" height="72.6"/>
 +
                                    <rect x="956.5" y="338.5" fill="none" width="246.1" height="47.7"/>
 +
                                    <text transform="matrix(1 0 0 1 956.5164 359.8476)" fill="#FFFFFF" font-family="'ArialMT'" font-size="30px">Public engagment</text>
 +
                                    <rect x="546.7" y="671.2" fill="#BE1622" width="322.7" height="72.6"/>
 +
                                    <rect x="638.6" y="693.4" fill="none" width="173.7" height="32.2"/>
 +
                                    <text transform="matrix(1 0 0 1 638.6358 714.7332)" fill="#FFFFFF" font-family="'ArialMT'" font-size="30px">Education</text>
 +
                                    <rect x="202.3" y="340.1" fill="none" width="221.7" height="23.3"/>
 +
                                    <text transform="matrix(1 0 0 1 202.3293 361.43)" fill="#FFFFFF" font-family="'ArialMT'" font-size="30px">Human Practices</text>
 +
                                    <g>
 +
                                        <g>
 +
                                            <line fill="none" x1="315" y1="198" x2="325.1" y2="302.4"/>
 +
                                            <polygon points="316.5,197.8 325.1,302.4 313.5,198.1        "/>
 +
                                        </g>
 +
                                        <g>
 +
                                            <g>
 +
                                                <path d="M314.8,198.2c1.9,2.1,4,4.1,5.9,6.1c0.8-0.6,1.5-1.3,2.3-1.9c-2.4-2.4-4.7-4.8-7.1-7.2c-0.8-0.8-2.1-0.7-2.6,0.5
 +
                                                    c-1.5,3.7-2.9,7.3-4.5,11c-0.8,1.7,2.1,2.8,2.8,1.1c1.5-3.7,2.9-7.3,4.5-11c-0.8,0.1-1.7,0.2-2.6,0.5c2.4,2.4,4.7,4.8,7.1,7.2
 +
                                                    c1.4,1.3,3.7-0.5,2.3-1.9c-1.9-2.1-4-4.1-5.9-6.1C315.8,194.8,313.5,196.7,314.8,198.2L314.8,198.2z"/>
 +
                                            </g>
 +
                                        </g>
 +
                                    </g>
 +
                            </svg>
  
.front,
+
                        </div>
.back{
+
                        <div class="container">
  background-size: cover;
+
background-position: center;
+
-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
-webkit-backface-visibility: hidden;
+
        backface-visibility: hidden;
+
text-align: center;
+
min-height: 280px;
+
height: auto;
+
border-radius: 10px;
+
color: #fff;
+
font-size: 1.5rem;
+
}
+
  
.back{
+
                            <a href="https://2017.igem.org/Team:KU_Leuven/HP/Silver">Silver:</a>
  background: #cedce7;
+
                            <br><p style="font-size: 20px; font-family: tahoma; text-align:justify">
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
+
                            Learn more about how our team sought to put ourselves into the lives of the patients we are trying to help. You will learn about the stories of organ transplant patients as well as epilepsy patients and how their stories gave us conformation that our project is indeed valuable. The ethical aspect of our project is described here as well. </p>
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
+
                            <br><br>
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
+
                            <a href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">Gold:</a>
}
+
                            <br>
 +
                            <p style="text-align:justify;font-size: 20px;">Learn more about how our team improved the project by talking to specialists. Their years of experience and opinions pushed us to adapt our project to match these critical insights. You will learn more about these specialists and their background.<br><br></p>
 +
                            <a href="https://2017.igem.org/Team:KU_Leuven/HP/Education">Education:<br></a>
 +
                            <p style="text-align:justify;font-size: 20px;">Learn more about how our team devoted substantial effort in teaching students from elementary schools and high schools about biology. With adapted programs for both groups, we tried to enrich the scientific knowledge of these young students while showing them the beauty of synthetic biology. You will also get to know about our cardgame.<br><br></p>
 +
                            <a href="https://2017.igem.org/Team:KU_Leuven/Engagement">Public engagement:<br></a>
 +
                            <p style="text-align:justify;font-size: 20px;">Learn more about how our team reached out to the general public as well as other iGEM teams. You will learn about our blog in the scientific magazine EOS, the European practice jamboree and much more.</p>
 +
                        </div>
 +
                        <br>
 +
                        <br>
  
.front:after{
+
</html>
position: absolute;
+
    top: 0;
+
    left: 0;
+
    z-index: 1;
+
    width: 100%;
+
    height: 100%;
+
    content: '';
+
    display: block;
+
    opacity: .6;
+
    background-color: #000;
+
    -webkit-backface-visibility: hidden;
+
            backface-visibility: hidden;
+
    border-radius: 10px;
+
}
+
.container:hover .front,
+
.container:hover .back{
+
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
+
}
+
 
+
.back{
+
    position: absolute;
+
    top: 0;
+
    left: 0;
+
    width: 100%;
+
}
+
 
+
.inner{
+
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
+
            transform: translateY(-50%) translateZ(60px) scale(0.94);
+
    top: 50%;
+
    position: absolute;
+
    left: 0;
+
    width: 100%;
+
    padding: 2rem;
+
    -webkit-box-sizing: border-box;
+
            box-sizing: border-box;
+
    outline: 1px solid transparent;
+
    -webkit-perspective: inherit;
+
            perspective: inherit;
+
    z-index: 2;
+
}
+
 
+
.container .back{
+
    -webkit-transform: rotateY(180deg);
+
            transform: rotateY(180deg);
+
    -webkit-transform-style: preserve-3d;
+
            transform-style: preserve-3d;
+
}
+
 
+
.container .front{
+
    -webkit-transform: rotateY(0deg);
+
            transform: rotateY(0deg);
+
    -webkit-transform-style: preserve-3d;
+
            transform-style: preserve-3d;
+
}
+
 
+
.container:hover .back{
+
  -webkit-transform: rotateY(0deg);
+
          transform: rotateY(0deg);
+
  -webkit-transform-style: preserve-3d;
+
          transform-style: preserve-3d;
+
}
+
 
+
.container:hover .front{
+
  -webkit-transform: rotateY(-180deg);
+
          transform: rotateY(-180deg);
+
  -webkit-transform-style: preserve-3d;
+
          transform-style: preserve-3d;
+
}
+
 
+
.front .inner p{
+
  font-size: 2rem;
+
  margin-bottom: 2rem;
+
  position: relative;
+
}
+
 
+
.front .inner p:after{
+
  content: '';
+
  width: 4rem;
+
  height: 2px;
+
  position: absolute;
+
  background: #C6D4DF;
+
  display: block;
+
  left: 0;
+
  right: 0;
+
  margin: 0 auto;
+
  bottom: -.75rem;
+
}
+
 
+
.front .inner span{
+
  color: rgba(255,255,255,0.7);
+
  font-family: 'Montserrat';
+
  font-weight: 300;
+
}
+
 
+
@media screen and (max-width: 64rem){
+
  .col{
+
    width: calc(33.333333% - 2rem);
+
  }
+
}
+
 
+
@media screen and (max-width: 48rem){
+
  .col{
+
    width: calc(50% - 2rem);
+
  }
+
}
+
 
+
@media screen and (max-width: 32rem){
+
  .col{
+
    width: 100%;
+
    margin: 0 0 2rem 0;
+
  }
+
}
+
</style>
+
<div class="igem_2017_content_wrapper">
+
<div class="wrapper">
+
  <h1>Human Practices</h1>
+
  <div class="cols">
+
<div class="col" ontouchstart="this.classList.toggle('hover');">
+
<div class="container">
+
<div class="front" style="background-image: url(https://unsplash.it/500/500/)">
+
<div class="inner">
+
<p>Human Practices Gold</p>
+
              <span>Lorem ipsum</span>
+
</div>
+
</div>
+
<div class="back">
+
<div class="inner">
+
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="col" ontouchstart="this.classList.toggle('hover');">
+
<div class="container">
+
<div class="front" style="url(https://unsplash.it/511/511/)">
+
<div class="inner">
+
<p>Silver</p>
+
              <span>Lorem ipsum</span>
+
</div>
+
</div>
+
<div class="back">
+
<div class="inner">
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="col" ontouchstart="this.classList.toggle('hover');">
+
<div class="container">
+
<div class="front" style="background-image: url(https://unsplash.it/502/502/)">
+
<div class="inner">
+
<p>Education</p>
+
              <span>Lorem ipsum</span>
+
</div>
+
</div>
+
<div class="back">
+
<div class="inner">
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="col" ontouchstart="this.classList.toggle('hover');">
+
<div class="container">
+
<div class="front" style="background-image: url(https://unsplash.it/503/503/)">
+
<div class="inner">
+
<p>Public Engagement</p>
+
              <span>Lorem ipsum</span>
+
</div>
+
</div>
+
<div class="back">
+
<div class="inner">
+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit c.</p>
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
</html>
+
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Latest revision as of 22:12, 1 November 2017



Human Practices Overview

Participating in iGEM was an amazing experience, but we did not only join igem just for fun: We also wanted to make sure that our project had societal relevance. Therefore, we discussed our project with people that would actually come into contact with our product: Doctors and patients dealing with various diseases.
Furthermore, we paid a lot of attention on sharing our enthusiasm for science with the world, and spreading information about synthetic biology. Interested in what else we did? Then continue reading!

Patient interviews Talks with specialists Ethics EOS blogs European Practice Jamboree Teaching children from elementary and high schools about science I mmunity Wars Card game Workshops with Kinderuniversiteit Social Media Public engagment Education Human Practices
Silver:

Learn more about how our team sought to put ourselves into the lives of the patients we are trying to help. You will learn about the stories of organ transplant patients as well as epilepsy patients and how their stories gave us conformation that our project is indeed valuable. The ethical aspect of our project is described here as well.



Gold:

Learn more about how our team improved the project by talking to specialists. Their years of experience and opinions pushed us to adapt our project to match these critical insights. You will learn more about these specialists and their background.

Education:

Learn more about how our team devoted substantial effort in teaching students from elementary schools and high schools about biology. With adapted programs for both groups, we tried to enrich the scientific knowledge of these young students while showing them the beauty of synthetic biology. You will also get to know about our cardgame.

Public engagement:

Learn more about how our team reached out to the general public as well as other iGEM teams. You will learn about our blog in the scientific magazine EOS, the European practice jamboree and much more.