NoreenLouis (Talk | contribs) |
NoreenLouis (Talk | contribs) |
||
Line 69: | Line 69: | ||
filter: grayscale(0%); | filter: grayscale(0%); | ||
} | } | ||
+ | /******************** POP UP GEOLOCALISATION ******************/ | ||
+ | |||
+ | .popup | ||
+ | { | ||
+ | position: relative; | ||
+ | display: float; | ||
+ | cursor: pointer; | ||
+ | -webkit-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | z-index:2; | ||
+ | width:5%; | ||
+ | } | ||
+ | #Popup_geo | ||
+ | { | ||
+ | position:absolute; | ||
+ | padding: 1% 1% 1% 1%; | ||
+ | top: -200%; | ||
+ | left: 1600%; | ||
+ | width: 300%; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | |||
+ | .popup .popuptext | ||
+ | { | ||
+ | visibility: hidden; | ||
+ | width: 10%; | ||
+ | background-color: #364A5E; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | border-radius: 5%; | ||
+ | padding: 10% 10% 10% 10%; | ||
+ | position: relative; | ||
+ | z-index:1; | ||
+ | |||
+ | } | ||
+ | |||
+ | .popup .popuptext::after | ||
+ | { | ||
+ | content: ""; | ||
+ | top: 100%; | ||
+ | left: 50%; | ||
+ | margin-left: -5px; | ||
+ | border-width: 5px; | ||
+ | border-style: solid; | ||
+ | border-color: #555 transparent transparent transparent; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | .popup .show { | ||
+ | visibility: visible; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | } | ||
+ | .popup .hide { | ||
+ | visibility: hidden; | ||
+ | -webkit-animation: fadeIn 1s; | ||
+ | animation: fadeIn 1s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity: 1;} | ||
+ | } | ||
+ | @keyframes fadeIn { | ||
+ | from {opacity: 0;} | ||
+ | to {opacity:1 ;} | ||
+ | } | ||
</style> | </style> | ||
Line 79: | Line 149: | ||
<img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> | <img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> | ||
</header> | </header> | ||
+ | |||
+ | <!-- ********************** LOGO GEO *************************--> | ||
+ | |||
+ | <div class="popup" onclick="Function_geo()"><img id="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> | ||
+ | <span class="popuptext" id="Popup_geo"> | ||
+ | C'est où la photo ? | ||
+ | </span> | ||
+ | </div> | ||
<h2 style="padding-top:2%; padding-bottom:2%; color:#FF1493;"> Attributions </h2> | <h2 style="padding-top:2%; padding-bottom:2%; color:#FF1493;"> Attributions </h2> | ||
Line 159: | Line 237: | ||
</div> | </div> | ||
</body> | </body> | ||
+ | |||
+ | <!-- *********** JAVA POUR LES POPUPS ************--> | ||
+ | |||
+ | <script> | ||
+ | |||
+ | function Function_geo() | ||
+ | { | ||
+ | var popup = document.getElementById("Popup_geo"); | ||
+ | popup.classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | </script> | ||
</html> | </html> | ||
{{Grenoble-Alpes/footer}} | {{Grenoble-Alpes/footer}} |
Revision as of 15:35, 31 August 2017
ATTRIBUTIONS
C'est où la photo ?
Attributions
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Sponsors