Difference between revisions of "Team:Grenoble-Alpes/Team"
Guillaumej (Talk | contribs) |
|||
| Line 6: | Line 6: | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<style> | <style> | ||
| − | + | h1{ | |
| + | text-align: center; | ||
| + | transform: translateY(250%); | ||
| + | font-size: 600%; | ||
| + | color: #ecf0f1; | ||
| + | padding-bottom: 30px; | ||
| + | } | ||
header { | header { | ||
font-family: 'Molenga', Georgia, Times, serif; | font-family: 'Molenga', Georgia, Times, serif; | ||
| Line 19: | Line 25: | ||
background-position: center top; | background-position: center top; | ||
position:relative; | position:relative; | ||
| − | + | } | |
| − | + | footer{ | |
| + | background-position: center bottom; | ||
| + | position:fixed; | ||
| + | } | ||
| + | .image1{ | ||
width: 20%; | width: 20%; | ||
float: left; | float: left; | ||
} | } | ||
| − | + | .imgage1:hover{ | |
opacity: 0.5; | opacity: 0.5; | ||
} | } | ||
</style> | </style> | ||
| + | <style> | ||
| + | img{ | ||
| + | width: 90%; | ||
| + | } | ||
| + | /* Popup container */ | ||
| + | .popup { | ||
| + | position: relative; | ||
| + | display: contents; | ||
| + | cursor: pointer; | ||
| + | |||
| + | } | ||
| + | |||
| + | /* The actual popup (appears on top) */ | ||
| + | .popup .popuptext1 { | ||
| + | visibility: hidden; | ||
| + | width: 80%; | ||
| + | height: 3900%; | ||
| + | background-color: #555; | ||
| + | color: #fff; | ||
| + | text-align: center; | ||
| + | border-radius: 6px; | ||
| + | padding: 8px 0; | ||
| + | position: absolute; | ||
| + | transform: translateX(0%); | ||
| + | z-index: 1; | ||
| + | bottom: 125%; | ||
| + | left: 10%; | ||
| + | |||
| + | } | ||
| + | |||
| + | /* Toggle this class when clicking on the popup container (hide and show the popup) */ | ||
| + | .popup .show { | ||
| + | visibility: visible; | ||
| + | -webkit-animation: fadeIn 1s; | ||
| + | animation: fadeIn 1s | ||
| + | } | ||
| + | |||
| + | /* Add animation (fade in the popup) */ | ||
| + | @-webkit-keyframes fadeIn { | ||
| + | from {opacity: 0;} | ||
| + | to {opacity: 1;} | ||
| + | } | ||
| + | |||
| + | @keyframes fadeIn { | ||
| + | from {opacity: 0;} | ||
| + | to {opacity:1 ;} | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | |||
| + | <script> | ||
| + | // When the user clicks on <div>, open the popup | ||
| + | function myFunction() { | ||
| + | var popup = document.getElementById("myPopup"); | ||
| + | popup.classList.toggle("show"); | ||
| + | } | ||
| + | </script> | ||
</head> | </head> | ||
| Line 35: | Line 102: | ||
</header> | </header> | ||
| − | <div><img id="ancre1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | + | <div> |
| − | + | <div class="popup" onclick="myFunction()"><img id="ancre1" class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <span class="popuptext1" id="myPopup"><img src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> <br> bla bla bla bla bla </span> | |
| − | + | </div> | |
| − | + | <div class="popup" onclick="myFunction()"><img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| + | <span class="popuptext1" id="myPopup"><img src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> <br> bla bla bla bla bla </span> | ||
| + | </div> | ||
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | </div> | ||
| − | <div><img src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | + | <div> |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | </div> | ||
| − | <div><img src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | + | <div> |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | </div> | ||
| − | <div><img src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | + | <div> |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| − | + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | |
| + | <img class="image1" src='https://static.igem.org/mediawiki/2017/7/75/IGEM_Grenoble_photo_couv_grenoble.jpeg'> | ||
| + | </div> | ||
<p><a href="#ancre1"> Members </a></p> | <p><a href="#ancre1"> Members </a></p> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 08:30, 18 July 2017
TEAM
bla bla bla bla bla
bla bla bla bla bla
