Lukas Adam (Talk | contribs) |
Lukas Adam (Talk | contribs) |
||
Line 5: | Line 5: | ||
<style> | <style> | ||
.img-circular{ | .img-circular{ | ||
− | width: | + | width: 300px; |
− | height: | + | height: 300px; |
margin: 0px 2em 2em 0px; | margin: 0px 2em 2em 0px; | ||
display: block; | display: block; | ||
Line 14: | Line 14: | ||
} | } | ||
− | #wall1 { | + | .img-circular-small { |
+ | width: 100%; | ||
+ | height: 150px; | ||
+ | |||
+ | display: block; | ||
+ | border-radius: 50%; | ||
+ | border: 5px solid #ddd; | ||
+ | } | ||
+ | .wall1 { | ||
background-image: url(https://static.igem.org/mediawiki/2017/1/18/T--Heidelberg--2017_Moritz.jpg); | background-image: url(https://static.igem.org/mediawiki/2017/1/18/T--Heidelberg--2017_Moritz.jpg); | ||
background-size: cover; | background-size: cover; | ||
Line 20: | Line 28: | ||
} | } | ||
− | + | .wall2 { | |
background-image: url(https://static.igem.org/mediawiki/2017/7/71/T--Heidelberg--2017_Cathy.jpg); | background-image: url(https://static.igem.org/mediawiki/2017/7/71/T--Heidelberg--2017_Cathy.jpg); | ||
background-size: cover; | background-size: cover; | ||
Line 26: | Line 34: | ||
} | } | ||
− | + | .wall3 { | |
background-image: url(https://static.igem.org/mediawiki/2017/d/d1/T--Heidelberg--2017_Jan.jpg); | background-image: url(https://static.igem.org/mediawiki/2017/d/d1/T--Heidelberg--2017_Jan.jpg); | ||
background-size: cover; | background-size: cover; | ||
Line 32: | Line 40: | ||
} | } | ||
− | + | .wall4 { | |
background-image: url(); | background-image: url(); | ||
background-size: cover; | background-size: cover; | ||
Line 38: | Line 46: | ||
} | } | ||
− | + | .wall5 { | |
background-image: url(https://static.igem.org/mediawiki/2017/7/71/T--Heidelberg--2017_Cathy.jpg); | background-image: url(https://static.igem.org/mediawiki/2017/7/71/T--Heidelberg--2017_Cathy.jpg); | ||
background-size: cover; | background-size: cover; | ||
Line 44: | Line 52: | ||
} | } | ||
− | + | .wall6 { | |
background-image: url(); | background-image: url(); | ||
background-size: cover; | background-size: cover; | ||
Line 55: | Line 63: | ||
#a1 h1 { | #a1 h1 { | ||
− | + | font-family: 'Open Sans' !important; | |
− | color: | + | color: #9d1c20 !important; |
− | + | } | |
− | } | + | |
#a2 h1 { | #a2 h1 { | ||
− | + | font-family: 'Open Sans' !important; | |
− | + | color: #F8991D !important; | |
− | + | ||
} | } | ||
− | #a3 | + | #a3 h1{ |
− | + | font-family: 'Open Sans' !important; | |
− | + | color: #009193 !important; | |
− | + | line-height: 70px !important; | |
} | } | ||
− | # | + | #a4 h1 { |
− | + | font-family: 'Open Sans' !important; | |
− | + | color: #009E73 !important; | |
− | + | ||
} | } | ||
− | # | + | #a5 h1 { |
− | + | font-family: 'Open Sans' !important; | |
− | color: | + | color: #ffd700 !important; |
− | + | ||
} | } | ||
− | # | + | #a6 h1{ |
− | color: | + | font-family: 'Open Sans' !important; |
− | + | color: #005493 !important; | |
− | + | line-height: 70px !important; | |
+ | } | ||
+ | #a7 h1{ | ||
+ | font-family: 'Open Sans' !important; | ||
+ | color: #009E73 !important; | ||
+ | } | ||
+ | #a8 h1{ | ||
+ | font-family: 'Open Sans' !important; | ||
+ | color: #9d1c20 !important; | ||
+ | } | ||
+ | #a9 h1{ | ||
+ | font-family: 'Open Sans' !important; | ||
+ | color: #ffd700!important; | ||
+ | } | ||
+ | #a10 h1{ | ||
+ | font-family: 'Open Sans' !important; | ||
+ | color: #393939 !important; | ||
} | } | ||
− | |||
− | |||
Line 96: | Line 114: | ||
position: relative; | position: relative; | ||
width: 100%; | width: 100%; | ||
+ | padding-bottom: 50px; | ||
overflow: hidden; | overflow: hidden; | ||
transition: all .3s; | transition: all .3s; | ||
Line 145: | Line 164: | ||
transition: all .3s; | transition: all .3s; | ||
padding: 50px; | padding: 50px; | ||
+ | max-height: 600px; | ||
+ | overflow: hidden; | ||
} | } | ||
Line 205: | Line 226: | ||
.member-text { | .member-text { | ||
font-family: 'Open Sans' !important; | font-family: 'Open Sans' !important; | ||
+ | text-align: justify !important; | ||
} | } | ||
</style> | </style> | ||
Line 228: | Line 250: | ||
<div class="container" style="background-color: white !important"> | <div class="container" style="background-color: white !important"> | ||
<div class="col-lg-12 col-md-12 col-xs-12"> | <div class="col-lg-12 col-md-12 col-xs-12"> | ||
+ | |||
+ | <div class="gallery" style="padding-top: 100px"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-xs-offset-1 col-xs-2 gallery-icon"><div class="wall1 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall2 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall3 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall4 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall5 img-circular-small"></div></div> | ||
+ | </div> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-xs-offset-1 col-xs-2 gallery-icon"><div class="wall6 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall7 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall8 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall9 img-circular-small"></div></div> | ||
+ | <div class="col-lg-2 col-md-2 col-xs-2 gallery-icon"><div class="wall10 img-circular-small"></div></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
<div class="slider"> | <div class="slider"> | ||
<div class="arrows"> | <div class="arrows"> | ||
Line 237: | Line 280: | ||
<div class="inner-slide"> | <div class="inner-slide"> | ||
<h1>Moritz</h1> | <h1>Moritz</h1> | ||
− | <div class="img-circular | + | <div class="img-circular wall1"></div> |
− | <div class="member-text"> | + | <div class="member-text">Driven by his passion for science and medicine Moritz started studying Molecular Biotechnology in Heidelberg with the intention to make his own contribution to the development of a HIV/AIDS cure. He is a very optimistic person with great dreams, who knows exactly what he wants. |
+ | |||
+ | Besides his excellent lab work skills, which he acquired during his bachelor thesis about epitope prediction in colorectal cancer and various internships, he is the one who managed the sponsoring almost by his own. With his irresistible charisma and charm and his ability to produce many convincing texts in a short time he saved us the financial support of companies and foundations. | ||
+ | |||
+ | As a valuable member of the wet lab team he took care of the numerous toolbox parts, handled the mutagenesis experiments and a lot more. He is not deterred from taking responsibility for tasks he is not familiar with as he possesses a high degree of self-initiative and can adjust quickly to his new projects. Moritz has a talent for organization and communication. He loves heated discussions and is not afraid to passionately fight for his opinion even if he is outnumbered. | ||
+ | |||
+ | Working with him as lab buddy was always a lot of fun, he uses the funniest phrases I have ever heard (I swear half of them don’t really exist) and when you hear schmaltzy love songs you know our romanticist Moritz is already in the lab. But watch out when Moritz performs transformations and has an ice bucket. It might happen that he surprises you with a hand full of ice in your neck. | ||
+ | |||
+ | By participating in iGEM he wants to “put the cherry on the icing of his bachelor degree” and I couldn’t imagine Team Heidelberg without him.</div> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 244: | Line 295: | ||
<div class="inner-slide"> | <div class="inner-slide"> | ||
<h1>Cathy</h1> | <h1>Cathy</h1> | ||
− | <div class="img-circular | + | <div class="img-circular wall2"></div> |
<div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a3"> |
+ | <div class="inner-slide"> | ||
<h1>Jan</h1> | <h1>Jan</h1> | ||
− | <div class="img-circular | + | <div class="img-circular wall3"></div> |
<div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a4"> |
+ | <div class="inner-slide"> | ||
<h1>Lukas</h1> | <h1>Lukas</h1> | ||
− | <div class="img-circular | + | <div class="img-circular wall4"></div> |
<div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a5"> |
+ | <div class="inner-slide"> | ||
<h1>Marita</h1> | <h1>Marita</h1> | ||
− | <div class="img-circular" | + | <div class="img-circular wall5"></div> |
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a6"> |
+ | <div class="inner-slide"> | ||
<h1>Julius</h1> | <h1>Julius</h1> | ||
− | <div class="img-circular" | + | <div class="img-circular wall6"></div> |
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a7"> |
+ | <div class="inner-slide"> | ||
<h1>Max</h1> | <h1>Max</h1> | ||
− | <div class="img-circular" | + | <div class="img-circular wall7"></div> |
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a8"> |
+ | <div class="inner-slide"> | ||
+ | <h1>Thore</h1> | ||
+ | <div class="img-circular wall9"></div> | ||
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="slide" id="a9"> | ||
+ | <div class="inner-slide"> | ||
<h1>Paulone</h1> | <h1>Paulone</h1> | ||
− | <div class="img-circular" | + | <div class="img-circular wall8"></div> |
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div class="slide" id=" | + | <div class="slide" id="a10"> |
− | <h1> | + | <div class="inner-slide"> |
− | <div class="img-circular" | + | <h1>Lukas</h1> |
+ | <div class="img-circular wall9"></div> | ||
+ | <div class="member-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div> | ||
+ | </div> | ||
</div> | </div> | ||
− | |||
</div> | </div> | ||
Line 326: | Line 402: | ||
var $activeSlide = $(".slide.active"), | var $activeSlide = $(".slide.active"), | ||
$prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child"); | $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child"); | ||
− | + | console.log($prevSlide); | |
gotoSlide($activeSlide, $prevSlide, "inactiveRight"); | gotoSlide($activeSlide, $prevSlide, "inactiveRight"); | ||
}); | }); | ||
+ | $(".gallery-icon").on("click", function() { | ||
+ | var $activeSlide = $(".slide.active"); | ||
+ | var get_div = "#a" + $(this).children().attr("class").split(" ")[0].charAt($(this).children().attr("class").split(" ")[0].length-1); | ||
+ | var $clickedSlide = $(get_div); | ||
+ | gotoSlide($activeSlide, $clickedSlide, 'nothing'); | ||
+ | |||
+ | }) | ||
$(document).on("click", ".bullet", function(){ | $(document).on("click", ".bullet", function(){ | ||
if($(this).hasClass("active")){ | if($(this).hasClass("active")){ | ||
Line 360: | Line 443: | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | </div> | ||
</html> | </html> | ||
{{Heidelberg/footer}} | {{Heidelberg/footer}} |
Revision as of 12:15, 29 October 2017
Meet the
Team