Line 1: | Line 1: | ||
− | + | {{Costa_Rica/General}}{{Costa_Rica/NavBar}}{{Costa_Rica/BootStrap}} | |
− | + | <html> | |
− | + | <div class="container" style="padding-top: 50px;"> | |
− | + | <div class="row mb-2"> | |
− | + | <div class="col-md-5"> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/2/23/T--Costa_Rica--team-J9.png" class="img-fluid" | |
− | + | alt="Responsive image" style="width: 80%; margin-top:70px; margin-bottom:20px;"> | |
− | + | <br> | |
− | + | <p>Human practices are meant to explain why our project is important to the world. Here we present how we do | |
− | + | an intense work to inform the people of Costa Rica about Synthetic Biology, iGEM and the new | |
− | + | possibilities of Engineered Probiotics.</p> | |
− | + | </div> | |
− | + | <div class="col-md-7"> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/9/91/T--Costa_Rica--team-group.png" class="img-fluid" | |
− | + | alt="Responsive image" style="width: 90%; float:right;"> | |
− | |||
</div> | </div> | ||
+ | </div> | ||
− | + | <div class="row mb-2" style="margin-top:80px;margin-bottom:80px;"> | |
− | + | <div class="col-md-6"> | |
− | + | <center onclick="currentSlide(1)" class="medal">Public Engagement</center> | |
− | + | </div> | |
− | + | <div class="col-md-6"> | |
− | + | <center onclick="currentSlide(2)" class="medal">Integrated Human Practice</center> | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | font- | + | </div> |
+ | <style> | ||
+ | p { | ||
+ | font-family: Montserrat; | ||
− | + | font-size: 18px !important; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | color: #5d5d5d; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | * { | |
− | + | box-sizing: border-box | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | body { | |
− | + | font-family: Verdana, sans-serif; | |
− | + | margin: 0 | |
− | + | } | |
− | + | ||
− | + | ||
− | + | /* Slideshow container */ | |
− | + | .slideshow-container { | |
+ | position: relative; | ||
+ | background: #FFFFFF; | ||
+ | border-radius: 25px; | ||
+ | } | ||
− | + | /* Slides */ | |
+ | .mySlides { | ||
+ | display: none; | ||
+ | margin-top: 40px; | ||
+ | padding-bottom: 40px; | ||
+ | } | ||
− | + | .medal { | |
+ | opacity: 0.6; | ||
− | + | font-family: Montserrat; | |
− | + | font-size: 20px; | |
− | + | font-weight: 300; | |
− | + | font-style: normal; | |
− | + | font-stretch: normal; | |
− | + | line-height: normal; | |
− | + | letter-spacing: normal; | |
− | + | ||
− | + | padding-bottom: 10px; | |
− | + | ||
− | + | color: #000000; | |
+ | } | ||
− | + | .medal.active { | |
+ | font-family: Montserrat; | ||
− | + | font-size: 20px; | |
− | + | font-weight: 500; | |
− | + | font-style: normal; | |
− | + | font-stretch: normal; | |
− | + | line-height: normal; | |
− | + | letter-spacing: normal; | |
− | + | color: #000000; | |
− | + | ||
− | + | } | |
− | + | div.index-Menu { | |
− | + | padding: 30px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | .medal.active:after { | |
+ | content: ""; | ||
+ | /* This is necessary for the pseudo element to work. */ | ||
+ | display: block; | ||
+ | /* This will put the pseudo element on its own line. */ | ||
+ | margin: 0 auto; | ||
+ | /* This will center the border. */ | ||
+ | width: 15%; | ||
+ | /* Change this to whatever width you want. */ | ||
+ | padding-top: 10px; | ||
+ | /* This creates some space between the element and the border. */ | ||
+ | border-bottom: 3px solid #705ba0; | ||
+ | /* This creates the border. Replace black with whatever color you want. */ | ||
+ | } | ||
− | + | .medal:hover { | |
+ | font-family: Montserrat; | ||
− | + | font-size: 20px; | |
− | + | font-weight: 500; | |
− | + | font-style: normal; | |
− | + | font-stretch: normal; | |
− | + | line-height: normal; | |
− | + | ||
+ | letter-spacing: normal; | ||
+ | color: #000000; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .mySlidesB { | |
− | + | display: none; | |
− | + | margin-top: 40px; | |
− | + | padding-bottom: 40px; | |
− | + | } | |
− | + | .mySlidesC { | |
− | + | display: none; | |
− | + | margin-top: 40px; | |
− | + | padding-bottom: 40px; | |
− | + | } | |
− | + | .mySlidesD { | |
− | + | display: none; | |
− | + | margin-top: 40px; | |
− | + | padding-bottom: 40px; | |
− | + | } | |
− | + | .mySlidesE { | |
− | + | display: none; | |
− | + | margin-top: 40px; | |
− | + | padding-bottom: 40px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .mySlidesF { | |
− | + | display: none; | |
− | + | margin-top: 40px; | |
− | + | padding-bottom: 40px; | |
− | } | + | } |
− | + | /* Next & previous buttons */ | |
− | + | .prev, | |
− | + | .next { | |
− | + | cursor: pointer; | |
− | } | + | position: absolute; |
+ | top: 50%; | ||
+ | width: auto; | ||
+ | margin-top: -22px; | ||
+ | padding: 16px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | user-select: none; | ||
+ | } | ||
− | + | /* Position the "next button" to the right */ | |
− | + | .next { | |
− | + | right: 0; | |
− | + | border-radius: 3px 0 0 3px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | /* On hover, add a black background color with a little bit see-through */ | ||
+ | .prev:hover, | ||
+ | .next:hover { | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | } | ||
− | <div class="slideshow-container"> | + | .text { |
+ | color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .description-text { | ||
+ | font-size: 15px !important; | ||
+ | font-family: Montserrat !important; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <div class="slideshow-container"> | ||
− | + | <div class="mySlides"> | |
− | + | <div class="row"> | |
− | + | <div class="col-md-3" style=" | |
margin-left: 0em; | margin-left: 0em; | ||
padding-right: 0px; | padding-right: 0px; | ||
Line 236: | Line 238: | ||
− | + | <div class="tabs-container tabs--vertical page-navigator shadow" style=" | |
border-radius: 25px; | border-radius: 25px; | ||
width: 300px; | width: 300px; | ||
Line 242: | Line 244: | ||
padding-bottom: 0px;margin-top: 2.4em;" id="myHeader"> | padding-bottom: 0px;margin-top: 2.4em;" id="myHeader"> | ||
− | + | <h4 style=" | |
padding-left: 1em; | padding-left: 1em; | ||
">Index</h4> | ">Index</h4> | ||
− | + | <ul class="lateral" style="padding-left: 40px;"> | |
− | + | <li class="lateral"> | |
− | + | <div class="tab__title " style="line-height: 1.3em;"> | |
− | + | <a href="#inspiration" class="lateral inner-link" style=" | |
color: #353535; | color: #353535; | ||
opacity: 1;">Inspiration</a> | opacity: 1;">Inspiration</a> | ||
− | + | </div> | |
− | + | </li> | |
− | + | <li class="lateral"> | |
− | + | <div class="tab__title " style="line-height: 1.3em;"> | |
− | + | <a href="#description" class="lateral inner-link" style=" | |
color: #353535; | color: #353535; | ||
opacity: 1;">Description</a> | opacity: 1;">Description</a> | ||
− | + | </div> | |
− | + | </li> | |
− | + | </ul> | |
− | + | <ul class="tabs-content"> | |
− | + | </ul> | |
− | + | ||
</div> | </div> | ||
+ | </div> | ||
− | + | <div class="col-md-9" style="padding-left: 6em;padding-right: 2em; "> | |
− | + | <h3 class="title-text">Science Through Dance<h3> | |
− | + | <p>If there is something that we can be sure of is the primitive need that human being has | |
− | + | to understand and describe the world that surrounds us. Both science and art, are | |
− | + | avatars of human creativity, created to facilitate the process of understanding and | |
− | + | expressing. Nevertheless, most people use to think about them as separated fields. | |
− | + | </p> | |
− | + | <p>That’s why, using our background in science and the experience as a dance teacher of one | |
− | + | of our team members, we fusioned them in a special show, named Science Through Dance. | |
− | + | </p> | |
− | + | <p>The show Science Through Dance, gave us the opportunity to bring science and dance to the | |
− | + | table, where dancers, scientists, dance parents, university teachers and many supportive | |
+ | people experienced, enjoyed, felt and learnt from it. It’s important to say that this | ||
+ | space was also a way to demonstrate the capabilities of the country in these areas, | ||
+ | which often go unnoticed or unconnected. | ||
+ | </p> | ||
+ | <p>To achieve the goal, we contacted scientists, dancers from all ages and one of the most | ||
+ | famous theatres in Costa Rica. First, for science section, we counted with Rosalind | ||
+ | Innovations, a biotech-social entrepreneurship who spoke of the magnificence of nature | ||
+ | and the unbelievable biotech projects that emerged from it. Also, 4 chemistry students | ||
+ | from the University of Costa Rica, elaborated an incredible show, where they made and | ||
+ | explained amazing experiments. Additionally, our team presented the project we are | ||
+ | taking to the iGEM competition. As for the dance section, we counted with 90 dancers | ||
+ | from 7 to 35 years old, from beginners to nationally and internationally recognized | ||
+ | dancers. | ||
+ | </p> | ||
+ | <p>Disciplines preformed were from Ballet to Jazz, Tap, Hip Hop, Contemporary, Lyric, Latin | ||
+ | Dance, Antigravity, Break Dance and African Dance. All of them appreciated by 285 | ||
+ | spectators. The show was covered by Novum Comunicaciones S.A., a company who took all | ||
+ | astonishing photos you can see in the next slideshow. | ||
+ | </p> | ||
− | + | <!-- Slideshow container --> | |
− | + | <div class="slideshow-container"> | |
− | + | <!-- Full-width images with number and caption text --> | |
− | + | <div class="mySlidesB"> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Costa_Rica--team-N4.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/6e/T--Costa_Rica--team-N5.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--Costa_Rica--team-N6.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/e0/T--Costa_Rica--team-N7.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/ab/T--Costa_Rica--team-N8.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/64/T--Costa_Rica--team-N9.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/7a/T--Costa_Rica--team-N10.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/2/20/T--Costa_Rica--team-N11.png/800px-T--Costa_Rica--team-N11.png.jpeg" | |
− | + | class="img-fluid" style="height:500px;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/f/fb/T--Costa_Rica--team-N12.png/800px-T--Costa_Rica--team-N12.png.jpeg" | |
− | + | class="img-fluid" style="height:500px; filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesB "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/b/b4/T--Costa_Rica--team-N13.png/800px-T--Costa_Rica--team-N13.png.jpeg" | |
− | + | class="img-fluid" style="height:500px ;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <!-- Next and previous buttons --> | ||
+ | <a class="prev" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesB(1)">❮</a> | ||
+ | <a class="next" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesB(-1)">❯</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
Line 380: | Line 404: | ||
+ | <div class="slideshow-container"> | ||
− | + | <!-- Full-width images with number and caption text --> | |
− | + | <div class="mySlidesC"> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Costa_Rica--team-N4.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/6e/T--Costa_Rica--team-N5.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--Costa_Rica--team-N6.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/e0/T--Costa_Rica--team-N7.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/ab/T--Costa_Rica--team-N8.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/64/T--Costa_Rica--team-N9.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/7a/T--Costa_Rica--team-N10.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/2/20/T--Costa_Rica--team-N11.png/800px-T--Costa_Rica--team-N11.png.jpeg" | |
− | + | class="img-fluid" style="height:500px;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/f/fb/T--Costa_Rica--team-N12.png/800px-T--Costa_Rica--team-N12.png.jpeg" | |
− | + | class="img-fluid" style="height:500px; filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesC "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/b/b4/T--Costa_Rica--team-N13.png/800px-T--Costa_Rica--team-N13.png.jpeg" | |
− | + | class="img-fluid" style="height:500px ;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <!-- Next and previous buttons --> | ||
+ | <a class="prev" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesC(1)">❮</a> | ||
+ | <a class="next" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesC(-1)">❯</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
Line 479: | Line 505: | ||
+ | <div class="slideshow-container"> | ||
− | + | <!-- Full-width images with number and caption text --> | |
− | + | <div class="mySlidesD"> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Costa_Rica--team-N4.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/6e/T--Costa_Rica--team-N5.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--Costa_Rica--team-N6.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/e0/T--Costa_Rica--team-N7.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/ab/T--Costa_Rica--team-N8.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/64/T--Costa_Rica--team-N9.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/7a/T--Costa_Rica--team-N10.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/2/20/T--Costa_Rica--team-N11.png/800px-T--Costa_Rica--team-N11.png.jpeg" | |
− | + | class="img-fluid" style="height:500px;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/f/fb/T--Costa_Rica--team-N12.png/800px-T--Costa_Rica--team-N12.png.jpeg" | |
− | + | class="img-fluid" style="height:500px; filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesD "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/b/b4/T--Costa_Rica--team-N13.png/800px-T--Costa_Rica--team-N13.png.jpeg" | |
− | + | class="img-fluid" style="height:500px ;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <!-- Next and previous buttons --> | ||
+ | <a class="prev" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesD(1)">❮</a> | ||
+ | <a class="next" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesD(-1)">❯</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
Line 572: | Line 600: | ||
+ | <div class="slideshow-container"> | ||
− | + | <!-- Full-width images with number and caption text --> | |
− | + | <div class="mySlidesE"> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Costa_Rica--team-N4.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/6e/T--Costa_Rica--team-N5.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--Costa_Rica--team-N6.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/e0/T--Costa_Rica--team-N7.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/ab/T--Costa_Rica--team-N8.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/64/T--Costa_Rica--team-N9.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/7a/T--Costa_Rica--team-N10.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/2/20/T--Costa_Rica--team-N11.png/800px-T--Costa_Rica--team-N11.png.jpeg" | |
− | + | class="img-fluid" style="height:500px;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/f/fb/T--Costa_Rica--team-N12.png/800px-T--Costa_Rica--team-N12.png.jpeg" | |
− | + | class="img-fluid" style="height:500px; filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesE "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/b/b4/T--Costa_Rica--team-N13.png/800px-T--Costa_Rica--team-N13.png.jpeg" | |
− | + | class="img-fluid" style="height:500px ;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
+ | |||
+ | <!-- Next and previous buttons --> | ||
+ | <a class="prev" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesE(1)">❮</a> | ||
+ | <a class="next" style="color:blueviolet;" | ||
+ | onclick="currentSlidePicturesE(-1)">❯</a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
+ | <div class="slideshow-container"> | ||
− | + | <!-- Full-width images with number and caption text --> | |
− | + | <div class="mySlidesF"> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/5/5b/T--Costa_Rica--team-N4.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
− | + | </div> | |
− | + | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/6e/T--Costa_Rica--team-N5.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/70/T--Costa_Rica--team-N6.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/e/e0/T--Costa_Rica--team-N7.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/a/ab/T--Costa_Rica--team-N8.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/6/64/T--Costa_Rica--team-N9.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/7/7a/T--Costa_Rica--team-N10.png" | |
− | + | class="img-fluid" style="height:500px;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/2/20/T--Costa_Rica--team-N11.png/800px-T--Costa_Rica--team-N11.png.jpeg" | |
− | + | class="img-fluid" style="height:500px;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/f/fb/T--Costa_Rica--team-N12.png/800px-T--Costa_Rica--team-N12.png.jpeg" | |
− | + | class="img-fluid" style="height:500px; filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <div class="mySlidesF "> | |
− | + | <div class="text-center"> | |
− | + | <div class="numbertext description-text">1 / 3</div> | |
− | + | <img src="https://static.igem.org/mediawiki/2019/thumb/b/b4/T--Costa_Rica--team-N13.png/800px-T--Costa_Rica--team-N13.png.jpeg" | |
− | + | class="img-fluid" style="height:500px ;filter:Flip;"> | |
+ | </div> | ||
</div> | </div> | ||
− | |||
− | + | <!-- Next and previous buttons --> | |
− | + | <a class="prev" style="color:blueviolet;" | |
− | + | onclick="currentSlidePicturesF(1)">❮</a> | |
− | + | <a class="next" style="color:blueviolet;" | |
− | + | onclick="currentSlidePicturesF(-1)">❯</a> | |
− | + | </div> | |
</div> | </div> | ||
+ | |||
</div> | </div> | ||
+ | </div> | ||
− | + | <div class="mySlides"> | |
− | + | <h2>Antibiotic resistance: A global problem</h2> | |
− | + | <p>Since we were brainstorming about possible problems to be addressed, we quickly (not so much) | |
− | + | stumbled upon the issue of antibiotic resistance. This phenomenon is expected to provoke up to 10 | |
− | + | million annual deaths by 2050 (O'Neill, 2014), possibly the first death cause worldwide. This has | |
− | + | lead the United Nations to declare antibiotic resistance as one of the greatest threats to global | |
− | + | public health. </p> | |
− | + | <h2>Resistant bacterial infections: Choosing our project aim</h2> | |
− | + | <p>Antibiotic resistance is an exponential growing problem around the world and it has a very serious | |
− | + | social impact. Looking for a solution to this problem we focused on a gastrointestinal pathogen, | |
− | + | Clostridioides difficile. This bacteria infected patients in 21 of the 29 hospitals of Costa Rica | |
− | + | from 2011-2014. Even one of our team members have suffered from this illness.</p> | |
− | + | <h2>Problems: </h2> | |
− | + | <h3>Awareness for antibiotic resistance is lacking</h3> | |
− | + | <p>There is a worldwide ignorance on the subject of microbial resistance to antibiotics and Costa Rica | |
− | + | is not the exception. Globally, the main cause of this problem is the misuse of antibiotics, leading | |
− | + | to the survival of some resistant bacteria, able to spread again. Also, the bad waste management of | |
− | + | these drugs contributes to increase resistant bacteria. This bacteria can later transfer their | |
− | + | resistance to human microbiota (van Rijn et al., 2019). </p> | |
− | + | <p>Research is being conducted to discover new antibiotics. However, only two new antibiotic classes | |
− | + | (lipopeptides and oxazolidinones) have been developed and approved by international drug agencies | |
− | + | (US Food and Drug Administration and European Medicines Agency) in the last three decades | |
− | + | (Tacconelli et al., 2018). The field of antibiotics is not lucrative enough for pharmaceutical | |
− | + | companies and newly discovered compounds remain similar in function to current antibiotics. As a | |
− | + | result, only a few large companies such as GlaxoSmithKline, Novartis, Merck and Roche are still | |
− | + | actively engaged in antibiotic research and development (Jackson, Czaplewski & Piddock, 2018).</p> | |
− | + | <p>During our problems exploration we realized antibiotic resistance consists of the two problems | |
− | + | mentioned above. Therefore, we decided to go out the lab to help create awareness on antibiotic | |
− | + | resistance in our country and prove the prevalence of antibiotic resistance bacteria using the agar | |
− | + | antibiotic resistance test.</p> | |
− | + | <h3>Larger agar antibiotic resistance test</h3> | |
− | + | <p>We went to the streets to have a closer encounter with people. In total we sampled 10 different | |
− | + | places of Costa Rica: La Agonía Park in Alajuela, Central Park in Heredia, Central Park in Cartago | |
− | + | and seven different places in San Jose (Central Park, El Mercado Central, La Sabana Metropolitan | |
− | + | Park, France Park and the buses stations from Limón, Puntarenas and Liberia). We talked to 100 Costa | |
− | + | Ricans, explained them a little bit of our problem and sampled their mouth with sterile swabs and | |
− | + | following the National Health Ministry regulations. Samples were grown in petri dishes supplemented | |
− | + | with amoxicillin (antibiotic most commonly used in Costa Rica) for 24h at 37 °C. </p> | |
− | + | </html> | |
− | + | {{Costa_Rica/Interactive-Map}} | |
− | + | <html> | |
− | + | <h2>References</h2> | |
− | + | <p class="ref"> | |
− | + | Jackson, N., Czaplewski, L., & Piddock, L. J. (2018). Discovery and development of new antibacterial drugs: learning | |
− | + | from experience?. Journal of Antimicrobial Chemotherapy, 73(6), 1452-1459. </p> | |
− | + | <p class="ref"> O’Neill, J. (2014). Antimicrobial resistance. Tackling a Crisis for the Health and Wealth of | |
− | + | Nations. </p> | |
− | + | <p class="ref"> Tacconelli, E., Carrara, E., Savoldi, A., Harbarth, S., Mendelson, M., Monnet, D. L., ... & | |
− | + | Ouellette, M. (2018). Discovery, research, and development of new antibiotics: the WHO priority list of | |
− | + | antibiotic-resistant bacteria and tuberculosis. The Lancet Infectious Diseases, 18(3), 318-327. </p> | |
− | + | <p class="ref"> van Rijn, M., Haverkate, M., Achterberg, P., & Timen, A. (2019). The public uptake of | |
− | + | information about antibiotic resistance in the Netherlands. Public Understanding of Science, 28(4), | |
− | + | 486-503. | |
− | + | </p> | |
− | + | </div> | |
− | + | </div> | |
− | + | <script> | |
− | + | var slideIndex = 1; | |
− | + | showSlides(slideIndex); | |
− | + | function currentSlide(n) { | |
− | + | showSlides(slideIndex = n); | |
− | + | } | |
− | + | function showSlides(n) { | |
− | + | var i; | |
− | + | var slides = document.getElementsByClassName("mySlides"); | |
− | + | var dots = document.getElementsByClassName("medal"); | |
− | + | if (n > slides.length) { slideIndex = 1 } | |
− | + | if (n < 1) { slideIndex = slides.length } | |
− | + | for (i = 0; i < slides.length; i++) { | |
− | + | slides[i].style.display = "none"; | |
− | + | } | |
− | + | for (i = 0; i < dots.length; i++) { | |
− | + | dots[i].className = dots[i].className.replace(" active", ""); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | slides[slideIndex - 1].style.display = "block"; | ||
+ | dots[slideIndex - 1].className += " active"; | ||
+ | } | ||
− | |||
− | |||
+ | var slideIndexPictures = 1; | ||
+ | showSlidesPicturesB(slideIndexPictures); | ||
− | |||
− | |||
− | |||
− | + | function currentSlidePicturesB(n) { | |
− | + | showSlidesPicturesB(slideIndexPictures = slideIndexPictures - n); | |
− | + | } | |
+ | function showSlidesPicturesB(n) { | ||
+ | var i; | ||
+ | var slides = document.getElementsByClassName("mySlidesB"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | if (n > slides.length) { slideIndexPictures = 1 } | |
+ | if (n < 1) { slideIndexPictures = slides.length } | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
} | } | ||
− | + | slides[slideIndexPictures - 1].style.display = "block"; | |
− | + | } | |
+ | var slideIndexPicturesC = 1; | ||
+ | showSlidesPicturesC(slideIndexPicturesC); | ||
− | |||
− | |||
− | |||
− | + | function currentSlidePicturesC(n) { | |
− | + | showSlidesPicturesC(slideIndexPicturesC = slideIndexPicturesC - n); | |
− | + | } | |
+ | function showSlidesPicturesC(n) { | ||
+ | var i; | ||
+ | var slides = document.getElementsByClassName("mySlidesC"); | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | if (n > slides.length) { slideIndexPicturesC = 1 } | ||
+ | if (n < 1) { slideIndexPicturesC = slides.length } | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
} | } | ||
− | + | slides[slideIndexPicturesC - 1].style.display = "block"; | |
− | + | ||
+ | } | ||
− | + | var slideIndexPicturesD = 1; | |
− | + | showSlidesPicturesD(slideIndexPicturesD); | |
− | + | ||
− | |||
− | |||
− | |||
+ | function currentSlidePicturesD(n) { | ||
+ | showSlidesPicturesD(slideIndexPicturesD = slideIndexPicturesD - n); | ||
+ | } | ||
− | + | function showSlidesPicturesD(n) { | |
− | + | var i; | |
− | + | var slides = document.getElementsByClassName("mySlidesD"); | |
− | + | ||
− | + | ||
− | |||
+ | if (n > slides.length) { slideIndexPicturesD = 1 } | ||
+ | if (n < 1) { slideIndexPicturesD = slides.length } | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
} | } | ||
− | |||
− | |||
+ | slides[slideIndexPicturesD - 1].style.display = "block"; | ||
− | + | } | |
− | + | var slideIndexPicturesE = 1; | |
− | + | showSlidesPicturesE(slideIndexPicturesE); | |
− | |||
− | |||
− | |||
+ | function currentSlidePicturesE(n) { | ||
+ | showSlidesPicturesE(slideIndexPicturesE = slideIndexPicturesE - n); | ||
+ | } | ||
− | + | function showSlidesPicturesE(n) { | |
− | + | var i; | |
− | + | var slides = document.getElementsByClassName("mySlidesE"); | |
− | + | ||
− | + | ||
− | |||
+ | if (n > slides.length) { slideIndexPicturesE = 1 } | ||
+ | if (n < 1) { slideIndexPicturesE = slides.length } | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
} | } | ||
− | |||
− | |||
+ | slides[slideIndexPicturesE - 1].style.display = "block"; | ||
− | + | } | |
− | + | var slideIndexPicturesF = 1; | |
− | + | showSlidesPicturesF(slideIndexPicturesF); | |
− | |||
− | |||
− | |||
+ | function currentSlidePicturesF(n) { | ||
+ | showSlidesPicturesF(slideIndexPicturesF = slideIndexPicturesF - n); | ||
+ | } | ||
− | + | function showSlidesPicturesF(n) { | |
− | + | var i; | |
− | + | var slides = document.getElementsByClassName("mySlidesF"); | |
− | + | ||
− | + | ||
− | |||
+ | if (n > slides.length) { slideIndexPicturesF = 1 } | ||
+ | if (n < 1) { slideIndexPicturesF = slides.length } | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
} | } | ||
+ | slides[slideIndexPicturesF - 1].style.display = "block"; | ||
+ | } | ||
− | |||
− | + | </script> | |
+ | |||
+ | |||
+ | <style> | ||
.sticky { | .sticky { | ||
− | + | position: fixed; | |
− | + | top: 100px; | |
} | } | ||
+ | </style> | ||
− | + | <script> | |
− | + | ||
− | + | ||
− | + | ||
// When the user scrolls the page, execute myFunction | // When the user scrolls the page, execute myFunction | ||
− | window.onscroll = function() {myFunction()}; | + | window.onscroll = function () { myFunction() }; |
// Get the navbar | // Get the navbar | ||
Line 1,002: | Line 1,031: | ||
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position | // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position | ||
function myFunction() { | function myFunction() { | ||
− | + | if (window.pageYOffset + 130 >= sticky) { | |
− | + | navbar.classList.add("sticky") | |
− | + | } else { | |
− | + | navbar.classList.remove("sticky"); | |
− | + | } | |
} | } | ||
− | + | </script> | |
− | + | </div> | |
− | + | </html> | |
− | + | {{Costa_Rica/Footbar}} |
Revision as of 22:37, 20 October 2019
Human practices are meant to explain why our project is important to the world. Here we present how we do an intense work to inform the people of Costa Rica about Synthetic Biology, iGEM and the new possibilities of Engineered Probiotics.