(43 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <style> | ||
− | + | /* Wrapper for the content */ | |
− | + | .igem_2017_content_wrapper { | |
− | + | width: 90% !important; | |
+ | padding-top:0% !important; | ||
+ | padding-left:5% !important; | ||
+ | padding-bottom:16% !important; | ||
+ | padding-right:5% !important; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2017/a/a9/T--Uchile_Biotec--Fondo3s.jpg') !important; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: right top; | ||
+ | background-color: #C0DACF; | ||
+ | } | ||
+ | img { | ||
+ | max-width: 100% !important; | ||
+ | height: auto; | ||
+ | } | ||
− | + | .igem_2017_content_wrapper h1 { | |
− | + | padding:5px 15px 0px !important; | |
− | + | border-bottom: 0px; | |
− | + | color: #CC6666; | |
+ | font-size: 30px !important; | ||
− | < | + | </style> |
+ | <style> | ||
− | + | .mySlides {display:none} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | /* Slideshow container */ | |
− | + | .slideshow-container { | |
− | + | max-width: 1000px; | |
− | + | position: relative; | |
− | + | margin: auto; | |
− | + | } | |
− | + | ||
− | + | /* Next & previous buttons */ | |
− | + | .prev, .next { | |
− | + | cursor: pointer; | |
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | padding: 16px; | ||
+ | margin-top: -22px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | } | ||
− | + | /* 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); | ||
+ | } | ||
+ | /* Caption text */ | ||
+ | .text { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /* Number text (1/3 etc) */ | ||
+ | .numbertext { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 12px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
− | + | /* The dots/bullets/indicators */ | |
− | + | .dot { | |
− | + | cursor: pointer; | |
− | + | height: 15px; | |
+ | width: 15px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
− | + | .active, .dot:hover { | |
+ | background-color: #717171; | ||
+ | } | ||
+ | /* Fading animation */ | ||
+ | .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 1.5s; | ||
+ | } | ||
− | + | @-webkit-keyframes fade { | |
− | + | from {opacity: .4} | |
− | + | to {opacity: 1} | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | @keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
− | + | ||
− | + | </style> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/2/27/T--Uchile_Biotec--Home2.jpg" align="center"></img> |
− | + | ||
− | + | <center><h2>Surprises!</h2></center> | |
− | < | + | |
− | < | + | <center><p><b>Click on the arrow for surprises! (And if you want to know how we could do this and the history behind it, please don't hesitate to visit our <a href="https://2017.igem.org/Team:UChile_Biotec/Practices/Overview">Human Practice!</a>)</b></p></center> |
− | < | + | <div class="slideshow-container"> |
− | < | + | |
− | < | + | <div class="mySlides fade"> |
− | + | <div class="numbertext">1 / 3</div> | |
+ | <img src="https://static.igem.org/mediawiki/2017/b/b5/T--Uchile_Biotec--Coso3.jpg" style="width:100%"> | ||
+ | <div class="text">3D design of our device</div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="mySlides fade"> |
− | < | + | <div class="numbertext">2 / 3</div> |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/3/38/T--Uchile_Biotec--Coso2.jpg" style="width:100%"> |
− | + | <div class="text">3D design of our device</div> | |
+ | </div> | ||
− | < | + | <div class="mySlides fade"> |
− | + | <div class="numbertext">3 / 3</div> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/c/c3/T--Uchile_Biotec--Coso1.jpg" style="width:100%"> |
− | </ | + | <div class="text">3D design of our device</div> |
</div> | </div> | ||
+ | <a class="prev" onclick="plusSlides(-1)">❮</a> | ||
+ | <a class="next" onclick="plusSlides(1)">❯</a> | ||
+ | </div> | ||
+ | <br> | ||
+ | <div style="text-align:center"> | ||
+ | <span class="dot" onclick="currentSlide(1)"></span> | ||
+ | <span class="dot" onclick="currentSlide(2)"></span> | ||
+ | <span class="dot" onclick="currentSlide(3)"></span> | ||
+ | </div> | ||
+ | |||
+ | <div class="footer"> | ||
+ | <div class="column full_size"> | ||
+ | <img src="https://static.igem.org/mediawiki/2017/0/01/T--Uchile_Biotec--Ausp2000.jpg" style="height:300px;"></img> | ||
+ | </div> | ||
+ | </div> | ||
</html> | </html> |
Latest revision as of 01:11, 2 November 2017
![](https://static.igem.org/mediawiki/2017/2/27/T--Uchile_Biotec--Home2.jpg)
Surprises!
Click on the arrow for surprises! (And if you want to know how we could do this and the history behind it, please don't hesitate to visit our Human Practice!)