Difference between revisions of "Team:KU Leuven"

m (heart was misspelled)
Line 3: Line 3:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
p {
+
        p {
−
text-align: justify;
+
            text-align: justify;
−
}
+
        }
−
.home .bg {
+
−
position: fixed;
+
−
display: block;
+
−
height: 100vh;
+
−
width: 100%;
+
−
background-size: cover;
+
−
background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png);
+
−
background-repeat: no-repeat;
+
−
background-position: center;
+
−
}
+
−
.home .fg {
+
−
height: 100vh;
+
−
visibility: hidden;
+
−
}
+
−
.overlay, footer {
+
−
background-color: #f2f2f2;
+
−
opacity: 1;
+
−
position: relative;
+
−
}
+
−
.igem_2017_content_wrapper {
+
−
padding-bottom: 0;
+
−
}
+
−
.animated_svg {
+
−
position: relative;
+
−
display: block;
+
−
width: 100%;
+
−
height: 1000px;
+
−
min-height: 100% !important;
+
−
}
+
−
.animated_svg > * {
+
−
position: absolute;
+
−
}
+
−
.clearfix:after {
+
−
content: "";
+
−
display: table;
+
−
clear: both;
+
−
}
+
−
</style>
+
−
<div class="home">
+
−
<div data-0="transform:translate(0px, 0px);" data-800="transform:translate(0px, -480px);" class="bg">
+
−
+
−
</div>
+
−
<div class="fg">
+
−
</div>
+
−
</div>
+
−
<div class="overlay" style="border-top: 2px solid #c33">
+
−
<div class="container">
+
−
<div class="animated_svg">
+
−
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg"  width='100%' height='100%' viewBox="0 0 1000 1000">
+
−
<style type="text/css">
+
−
.st0{fill:none;stroke:#888888;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+
−
.st1{fill:#CC3333;}
+
−
.st2{font-family:'Tahoma';}
+
−
.st3{font-size:33px; }
+
−
.st4{font-size:28px;}
+
−
.st5{font-size:24.058px;}
+
−
</style>
+
−
<polyline class="st0" points="974.4,150 974,502.9 26,497.2 25.5,829.5 "></polyline>
+
−
<text transform="matrix(1 0 0 1 84.2189 94.8191)" class="st1 st2 st3">
+
−
Inspired by the heart
+
−
</text>
+
−
<text transform="matrix(1 0 0 1 84.2189 183.344)">
+
−
<tspan x="0" y="0" class="st2 st5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</tspan>
+
−
<tspan x="0" y="28.9" class="st2 st5">
+
−
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
−
</tspan>
+
−
<tspan x="0" y="57.7" class="st2 st5">
+
−
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
−
</tspan>
+
−
<tspan x="0" y="86.6" class="st2 st5">
+
−
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+
−
</tspan>
+
−
<tspan x="0" y="115.5" class="st2 st5">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
−
</tspan>
+
−
<tspan x="0" y="144.3" class="st2 st5">
+
−
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
−
</tspan>
+
−
</text>
+
−
<text transform="matrix(1 0 0 1 84.2189 671.2648)" class="st1 st2 st3">
+
−
Creation of the Rhythm
+
−
</text>
+
−
<text transform="matrix(1 0 0 1 84.2189 759.7897)">
+
−
<tspan x="0" y="0" class="st2 st5">
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</tspan><tspan x="0" y="28.9" class="st2 st5">tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</tspan><tspan x="0" y="57.7" class="st2 st5">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</tspan><tspan x="0" y="86.6" class="st2 st5">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</tspan><tspan x="0" y="115.5" class="st2 st5">cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</tspan><tspan x="0" y="144.3" class="st2 st5">proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</tspan></text>
+
−
</svg>
+
−
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height='100%' viewBox="0 0 1000 1000">
+
−
<path
+
−
style="fill:none;stroke:#cc3333;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
data-400-top="stroke-dashoffset:4000;" data--500-top="stroke-dashoffset:0;"
+
−
d="M 974.4,150 974,502.9 26,497.2 25.5,829.5">
+
−
</path>
+
−
</svg>
+
−
</div>
+
−
<div class="animated_svg" id="sine">
+
−
<svg version="1.1"  xmlns="http://www.w3.org/2000/svg"  width='100%' height='60%' viewBox="0 200 1000 800">
+
−
<g id="Graph">
+
−
<path style="fill:none;stroke:#888888;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="M314.5,449.3c62.4-0.2,62.1,101.3,123.9,101c61.6,0,60.9-101.3,123.4-101.5c62.4-0.2,62.1,101.3,123.9,101
+
−
c61.6,0,60.9-101.3,123.4-101.5c62.4-0.2,62.1,101.2,123.6,101"></path>
+
−
</g>
+
−
<g id="Graph_1_">
+
−
<path style="fill:none;stroke:#CC3333;stroke-width:4;stroke-miterlimit:10;" d="M67.2,449.7c62.4-0.2,62.1,101.3,123.9,101c61.6,0,60.9-101.3,123.4-101.5"></path>
+
−
</g>
+
−
<polyline style="fill:none;stroke:#424242;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="66.2,295.5 66.2,656.3 952.9,656.3 "></polyline>
+
−
</svg>
+
−
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height='60%' viewBox="0 200 1000 800">
+
−
<path
+
−
style="fill:none;stroke:#cc3333;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
data-700-top="stroke-dashoffset:4000;" data--1000-top="stroke-dashoffset:0;"
+
−
d="M67.2,449.8c62.4-0.2,62.1,101.3,123.9,101c61.6,0,60.9-101.3,123.4-101.5c62.4-0.2,62.1,101.3,123.9,101
+
−
c61.6,0,60.9-101.3,123.4-101.5c62.4-0.2,62.1,101.3,123.9,101c61.6,0,60.9-101.3,123.4-101.5c62.4-0.2,62.1,101.2,123.6,101">
+
−
</path>
+
−
</svg>
+
−
</div>
+
−
<div class="animated_svg" id="trident">
+
−
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height='100%' viewBox="0 0 1000 1000">
+
−
<path
+
−
style="fill:none;stroke:#888888;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
d="M120,553.5v-57.9c131.8-38.5,263.9-50.2,380-49.1V363">
+
−
</path>
+
−
<path
+
−
style="fill:none;stroke:#888888;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
d="M 500,363 500,553.5">
+
−
</path>
+
−
<path
+
−
style="fill:none;stroke:#888888;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
d="M500,363v83.5c116.1-1.1,248.2,10.7,380,49.1v57.9">
+
−
</path>
+
−
</svg>
+
−
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100%' height='100%' viewBox="0 0 1000 1000">
+
−
<path style="fill:none;stroke:#cc3333;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;"
+
−
d="M500,363v83.5c-116.1 1.1,-248.2,10.7,-380,49.1v57.9">
+
−
</path>
+
−
<path style="fill:none;stroke:#cc3333;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;"
+
−
d="M500,363 500,553.5">
+
−
</path>
+
−
<path style="fill:none;stroke:#cc3333;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
+
−
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;"
+
−
d="M500,363v83.5c116.1-1.1,248.2,10.7,380,49.1v57.9">
+
−
</path>
+
−
</svg>
+
−
</div>
+
  
−
<div class="description">
+
        .home {
−
<h2>Description</h2>
+
            position: relative;
−
<p>HEKcite! Inspired by the human heart rhythm, we aim to create an electrophysiological oscillator from eukaryotic cells. Rhythmic contraction of heart cells is coordinated by a small group of cells called the sinus node that have an intrinsic frequency of de- and repolarization. This frequency of electrical oscillation is influenced by environmental parameters as well as certain molecular substrates. The oscillator that is proposed here consists of genetically modified excitable Human Embryonic Kidney (HEK) cells, altered to contain the intrinsic pacemaker ability found in sinus cells. As witnessed in heart cells, the rhythm would be dependent on substrate-activated ion channels in the membrane. As there is a great variety of ion channels available in nature, the oscillator could be modified to measure concentrations of many specific substrates. By integrating a certain ion channel into the oscillating system, specificity for a substrate can be chosen.Building an electrical oscillator from cells has several advantages. Extra- or intracellular changes that influence the conductance of ion channels in the membrane have an immediate impact on the frequency of oscillation. Once these cells are connected to each other (by for example gap-junctions), they generate an electrical signal that can easily be measured from a distance and non-invasively—similar to the way electrocardiography (ECG) and electroencephalography (EEG) measure electrical activity in the heart and brain respectively. A multi-purpose sensor suitable for this system could be developed for medical and biotechnological applications. One such application is the measurement of drugs that interact with ion channels, such as anti-epileptics or a certain class of immunosuppressants.
+
        }
−
</p>
+
 
−
</div>
+
        .home .bg {
−
<div class="education">
+
            position: fixed;
−
<h2>Education</h2>
+
            display: block;
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+
            height: 100vh;
−
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
            width: 100%;
−
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
            background-size: cover;
−
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+
            background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png);
−
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
            background-repeat: no-repeat;
−
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
            background-position: center;
−
</p>
+
        }
−
</div>
+
 
−
<div class="humanpractices">
+
        .home .fg {
−
<h2>Human Practices</h2>
+
            height: 100vh;
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+
            visibility: hidden;
−
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
        }
−
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
 
−
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+
        .overlay,
−
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
        footer {
−
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
            background-color: #f2f2f2;
−
</p>
+
            opacity: 1;
−
</div>
+
            position: relative;
−
<div class="game">
+
        }
−
<h2>Game</h2>
+
 
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+
        .igem_2017_content_wrapper {
−
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
            padding-bottom: 0;
−
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
        }
−
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+
 
−
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
        .animated_svg {
−
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
            position: relative;
−
</p>
+
            display: block;
−
</div>
+
            width: 100%;
−
</div>
+
            height: auto;
−
</div>
+
            text-align: center;
−
</div>
+
        }
−
<script type="text/javascript">
+
 
−
var s = skrollr.init();
+
        .animated_svg>* {
−
</script>
+
            max-width: 800px;
 +
            display: inline-block;
 +
        }
 +
 
 +
        .arrow {
 +
            position: absolute;
 +
            bottom: 80px;
 +
            left: 50%;
 +
            margin-left: -40px;
 +
            width: 80px;
 +
            height: 80px;
 +
 
 +
            border-radius: 50%;
 +
            text-align: center;
 +
        }
 +
 
 +
        .arrow:hover {
 +
            background-color: rgba(255, 255, 255, 0.175);
 +
            cursor: pointer;
 +
        }
 +
 
 +
        .arrow img {
 +
            margin: 15px;
 +
            width: 50px;
 +
            height: 50px;
 +
        }
 +
        </style>
 +
        <div class="home">
 +
            <div data-0="transform:translate(0px, 0px);" data-800="transform:translate(0px, -480px);" class="bg">
 +
            </div>
 +
            <div class="fg">
 +
            </div>
 +
            <div id="scrolldown" class="arrow">
 +
                <img src="assets/scroll_arrow.png">
 +
            </div>
 +
        </div>
 +
        <div id="overlay" class="overlay" style="border-top: 2px solid #c33">
 +
            <div class="container">
 +
                <div class="animated_svg">
 +
                    <svg height="auto" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1200 3000">
 +
                        <image height="3000px" width="1200px" xlink:href="https://static.igem.org/mediawiki/2017/7/71/KU_Leuven-homepage.svg"></image>
 +
                        <path style="fill:none;stroke:#cc3333;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:8000;stroke-dashoffset:0" data-bottom-center="stroke-dashoffset:8000;" data-top-center="stroke-dashoffset:0;" d="M1180,0v600h-90l-12.5-37.5l-12.5,75l-12.5-37.5H20v650l180,1.5c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,100.2,114.2,100h175v100l25,7.5l-50,10l25,7.5v475H600v450l200-100l-200,100l200,100l-200-100l-200,100l200-100l-200-100">
 +
                        </path>
 +
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/Model">
 +
                            <rect x="200" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="#game">
 +
                            <rect x="800" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">
 +
                            <rect x="200" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="#education">
 +
                            <rect x="800" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                    </svg>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <script type="text/javascript">
 +
    var s = skrollr.init();
 +
 
 +
 
 +
 
 +
    $('#scrolldown').click(function(event) {
 +
        event.preventDefault();
 +
        var n = $('.home .fg').height();
 +
        $('html, body').animate({ scrollTop: n - 15 }, 1000);
 +
    });
 +
    </script>
 
 
 
</html>
 
</html>
  
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Revision as of 11:41, 4 August 2017