|
|
Line 1: |
Line 1: |
| {{DTU-Denmark}} | | {{DTU-Denmark}} |
| {{DTU-Denmark/mainCSS}} | | {{DTU-Denmark/mainCSS}} |
| + | {{DTU-Denmark/StylingInfSlider}} |
| <html> | | <html> |
| | | |
Line 66: |
Line 67: |
| <h2>Team members</h2> | | <h2>Team members</h2> |
| | | |
− | <p>The attributions of the different team members will soon be added to this page</p> | + | <div class="interlabspace"> |
| + | <div class="row"> |
| + | <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> |
| + | <div class="slider"> |
| + | <div class="arrows"> |
| + | <a class="previous"></a> |
| + | <a class="nextAT"></a> |
| + | </div> |
| + | <div class="slides"> |
| + | <div class="slide activeAT" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Marcus Medom Ryding</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/thumb/3/3e/T--DTU-Denmark--marcus.png/450px-T--DTU-Denmark--marcus.png.jpeg);"></div> |
| + | <div class="member-text"> |
| + | <p> </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Helena Utzon</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/6/61/T--DTU-Denmark--helena.png);"></div> |
| + | <div class="member-text"> |
| + | <p>Throughout this project I have mainly participated in the wet-lab through work with filamentous fungi and fermentation, though I also lend a hand whenever it was needed in the molecular part of the wet-lab.<br> |
| + | Furthermore, I worked a lot with outreach, including being head of the social media group, teaching high-school students, and working with integrated human practices. Finally, I have also helped arrange and host several team-building activities. </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Louise Almer</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/e/e7/T--DTU-Denmark--louise.png);"></div> |
| + | <div class="member-text"> |
| + | <p>In the process of this project, I have mostly worked with the fungi and fermentations but I have also stepped in other places where it has been needed.<br> |
| + | I have also partaken in the design and set-up of the wiki. Additionally, I have planned and attended many of the outreach activities, ranging from integrated human practices to non-integrated human practices and education of high school students. |
| + | </p> |
| + | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Mikkel Hansen</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/b/b0/T--DTU-Denmark--mikkel.png);"></div> |
| + | <div class="member-text"> |
| + | <p></p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Jacob Mejlsted</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/3/34/T--DTU-Denmark--jacob.png);"></div> |
| + | <div class="member-text"> |
| + | <p>During the project, I have been the main responsible for the handling of safety forms and the organization of the laboratory. Over the summer, I was also the main responsible for the cloning part of the laboratory as well as organizing and systematizing the samples, storage and notations that we have been using. </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Philip George Hau Sørensen</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/4/46/T--DTU-Denmark--PHS.png);"></div> |
| + | <div class="member-text"> |
| + | <p>I have been the main responsible for task delegation and administrative work. I have also been heavily involved in the experimental design for this project, designing both parts and cloning strategies. In addition to this, I have also assisted Jacob in the lab with cloning work during the summer. Lastly, I have been involved with the economic side of the project, contributing to fundraising efforts and budgeting for the team. </p> |
| + | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Philip Thomsen</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/f/fa/T--DTU-Denmark--philip.png);"></div> |
| + | <div class="member-text"> |
| + | <p>During the project my primary focus has been on the fungal work; preparing protoplasts, fungal transformations, etc. However as a jack of all trades, I have been working in the lab wherever the need has been the greatest, be it designing parts, molecular work, or whatever might be required. Additionally, I have helped secure funding for the project. |
| + | </p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Mathias Laursen</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/f/f9/T--DTU-Denmark--mathias.png);"></div> |
| + | <div class="member-text"> |
| + | <p><p/> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Elisavet Angeli</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/7/7d/T--DTU-Denmark--elisa.png);"></div> |
| + | <div class="member-text"> |
| + | <p></p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <div class="slide" id="a1"> |
| + | <div class="inner-slide"> |
| + | <h3>Michelle Lind Østrup</h3> |
| + | <div class="img-circular wall" style="background-image: url(https://static.igem.org/mediawiki/2019/8/80/T--DTU-Denmark--me.png);"></div> |
| + | <div class="member-text"> |
| + | <p>I was the main responsible in the development of the wiki. Almost all code and all illustrations have been created by or at least been passed by me.</p> |
| + | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | |
| + | </div> |
| + | |
| + | <div class="bullets activeAT"></div> |
| + | |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| | | |
| </div> | | </div> |
Line 337: |
Line 452: |
| | | |
| </div></div></div></section> | | </div></div></div></section> |
| + | |
| + | |
| + | |
| | | |
| | | |
Line 396: |
Line 514: |
| | | |
| </footer> | | </footer> |
| + | |
| + | <script> |
| + | |
| + | var $slider = $(".slider"), $bullets = $(".bullets"); |
| + | |
| + | function calculateHeight(){ |
| + | var height = $(".slide.activeAT").outerHeight(); |
| + | $slider.height(height); |
| + | } |
| + | |
| + | $(window).resize(function() { |
| + | calculateHeight(); |
| + | clearTimeout($.data(this, 'resizeTimer')); |
| + | }); |
| + | |
| + | function resetSlides(){ |
| + | $(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft"); |
| + | } |
| + | |
| + | function gotoSlide($activeSlide, $slide, className){ |
| + | $activeSlide.removeClass("activeAT").addClass("inactive "+className); |
| + | $slide.removeClass("inactive").addClass("activeAT"); |
| + | calculateHeight(); |
| + | resetBullets(); |
| + | setTimeout(resetSlides, 300); |
| + | } |
| + | |
| + | $(".nextAT").on("click", function(){ |
| + | var $activeSlide = $(".slide.activeAT"), |
| + | $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child"); |
| + | console.log($nextSlide); |
| + | gotoSlide($activeSlide, $nextSlide, "inactiveLeft"); |
| + | }); |
| + | $(".previous").on("click", function(){ |
| + | var $activeSlide = $(".slide.activeAT"), |
| + | $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child"); |
| + | console.log($prevSlide); |
| + | gotoSlide($activeSlide, $prevSlide, "inactiveRight"); |
| + | }); |
| + | $(".gallery-icon").on("click", function() { |
| + | var $activeSlide = $(".slide.activeAT"); |
| + | var get_div = "#a" + $(this).children().attr("class").split(" ")[0].substring(4, $(this).children().attr("class").split(" ")[0].length); |
| + | var $clickedSlide = $(get_div); |
| + | gotoSlide($activeSlide, $clickedSlide, 'nothing'); |
| + | |
| + | }) |
| + | $(document).on("click", ".bullet", function(){ |
| + | if($(this).hasClass("activeAT")){ |
| + | return; |
| + | } |
| + | var $activeSlide = $(".slide.activeAT"); |
| + | var currentIndex = $activeSlide.index(); |
| + | var targetIndex = $(this).index(); |
| + | console.log(currentIndex, targetIndex); |
| + | var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")"); |
| + | gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft"); |
| + | }) |
| + | function addBullets(){ |
| + | var total = $(".slide").length, index = $(".slide.activeAT").index(); |
| + | for (var i=0; i < total; i++){ |
| + | var $bullet = $("<div>").addClass("bullet"); |
| + | if(i==index){ |
| + | $bullet.addClass("activeAT"); |
| + | } |
| + | $bullets.append($bullet); |
| + | } |
| + | } |
| + | |
| + | function resetBullets(){ |
| + | $(".bullet.activeAT").removeClass("activeAT"); |
| + | var index = $(".slide.activeAT").index()+1; |
| + | console.log(index); |
| + | $(".bullet:nth-child("+index+")").addClass("activeAT"); |
| + | } |
| + | addBullets(); |
| + | calculateHeight(); |
| + | |
| + | </script> |
| + | |
| + | </html> |