|
|
| Line 5: |
Line 5: |
| | <title> Human Practice </title> | | <title> Human Practice </title> |
| | <meta charset="utf-8"> | | <meta charset="utf-8"> |
| | + | </head> |
| | <style> | | <style> |
| | | | |
| Line 30: |
Line 31: |
| | } | | } |
| | | | |
| | + | /************************ TITLE **********************/ |
| | + | |
| | + | #couvlogogeo { |
| | + | width:50%; |
| | + | opacity:0.5; |
| | + | transform:translate(3850%,-150%); |
| | + | z-index:5; |
| | + | } |
| | | | |
| | + | </style> |
| | | | |
| − | /************************ ECRITURE **********************/
| |
| | | | |
| − | .date {
| + | <body> |
| − | color: #34495e;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | font-family: 'Dancing Script', cursive;
| + | |
| − | text-align: center;
| + | |
| − | padding-bottom: 2%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .titre{
| + | |
| − | color: #34495e;
| + | |
| − | font-family: 'Dancing Script', cursive;
| + | |
| − | font-size: 2vw;
| + | |
| − | text-align: center;
| + | |
| − | padding-bottom: 2%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .titre:hover {
| + | |
| − | color: black;
| + | |
| − | }
| + | |
| − | | + | |
| − | /************************ CADRE **********************/
| + | |
| − | | + | |
| − | .cadre1 {
| + | |
| − | overflow:auto;
| + | |
| − | background-color: #ecf0f1;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cadre2g {
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cadre2d {
| + | |
| − | position: relative;
| + | |
| − | float: right;
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .img_1{
| + | |
| − | width: 70%;
| + | |
| − | padding: 0%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* ************************ POP UP ******************** */
| + | |
| − | | + | |
| − | .popup-content {
| + | |
| − | padding-top: 1%;
| + | |
| − | padding-bottom: 1%;
| + | |
| − | margin-bottom: 0%;
| + | |
| − | margin-top: 0%;
| + | |
| − | background-color:black;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .popup {
| + | |
| − | display:none;
| + | |
| − | height:100%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .popup:target {
| + | |
| − | display: block;
| + | |
| − | position:fixed;
| + | |
| − | width: 100%;
| + | |
| − | overflow-y: scroll;
| + | |
| − | overflow-x:hidden;
| + | |
| − | z-index: 999;
| + | |
| − | -webkit-animation: fadeIn 1s;
| + | |
| − | animation: fadeIn 1s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .popup-photo {
| + | |
| − | width: 50%;
| + | |
| − | padding: 0%;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .popup-cadre {
| + | |
| − | border: 1px solid #bdc3c7;
| + | |
| − | margin: 2% 20% 2% 20%;
| + | |
| − | padding: 3% 3% 3% 3%;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .popup-cadre p{
| + | |
| − | color: #ecf0f1;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Animation du PopUp*/
| + | |
| − | | + | |
| − | @-webkit-keyframes fadeIn {
| + | |
| − | from {opacity: 0;}
| + | |
| − | to {opacity: 1;}
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes fadeIn {
| + | |
| − | from {opacity: 0;}
| + | |
| − | to {opacity:1 ;}
| + | |
| − | }
| + | |
| − |
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − |
| + | |
| − | <body>
| + | |
| | <header> | | <header> |
| − | <h3> Human Practices </h3> | + | <h3> Integrated HP </h3> |
| | </header> | | </header> |
| | | | |
| − | <div class="popup_geoloc" onclick="Function_geo()"><img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> | + | <div class="popup_geoloc" onclick="Function_geo()"><img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png"> |
| | <span class="popuptext" id="Popup_geo"> When the fall comes, the landscapes that groove the road to the Galibier completely change colors. <br> Credits: Estelle Vincent | | <span class="popuptext" id="Popup_geo"> When the fall comes, the landscapes that groove the road to the Galibier completely change colors. <br> Credits: Estelle Vincent |
| | </span> | | </span> |
| | </div> | | </div> |
| | | | |
| − | <div class="cadre1" id="event1"> | + | <!-- ************************** CAPTURE FLUO BANNER************************** --> |
| − | <div id="cadre2g" style=" border-bottom: 1px solid #34495e;">< center> | + | <div style=" background:#D35400; margin:0%; padding-bottom: 1%;">< h3 style="text- align: center; color: white; font-size:2. 5vw; padding-top:2%; padding-bottom:1. 75%;"> Why using a smartphone as a detection device ? </ h3> |
| − | <a href="#cafescience" style="text-decoration: none;"><h5 class="titre" style="">Café Sciences</h5></a>
| + | </div> |
| − | <a href="#cafescience"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">le 27 avril</h5>
| + | |
| − | </center></div>
| + | |
| − | </div> | + | |
| | | | |
| − | <div class="cadre1" id="event2">
| + | |
| − | <div id = "cadre2d" style="border-left: 1px solid #34495e; border-bottom: 1px solid #34495e; "><center>
| + | |
| − | <a href="#pitch" style="text-decoration: none;"><h5 class="titre">Pitch FabLab</h5></a>
| + | |
| − | <a href="#pitch"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">le 28 juin</h5>
| + | |
| − | </center></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="cadre1" id="event3">
| + | |
| − | <center>
| + | |
| − | <a href="#conference" style="text-decoration: none;"><h5 class="titre">Conférence M. Menissier</h5></a>
| + | |
| − | <a href="#conference"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">?</h5>
| + | |
| − | </center>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="cadre1" id="event4">
| + | |
| − | <div id = "cadre2g"><center>
| + | |
| − | </center></div>
| + | |
| − | <div id = "cadre2d" style="border-top: 1px solid #34495e; border-left: 1px solid #34495e;"><center>
| + | |
| − | <a href="#ecole" style="text-decoration: none;"><h5 class="titre">Présentation dans une école</h5></a>
| + | |
| − | <a href="#ecole"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">?</h5>
| + | |
| − | </center></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="cadre1" id="event5">
| + | |
| − | <div id="cadre2g" style="border-bottom: 1px solid #34495e; border-top: 1px solid #34495e;"><center>
| + | |
| − | <a href="#party" style="text-decoration: none;"><h5 class="titre" style="">UGA c'est party</h5></a>
| + | |
| − | <a href="#party"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">le 14 septembre</h5>
| + | |
| − | </center></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="cadre1" id="event6">
| + | |
| − | <div id = "cadre2d" style="border-left: 1px solid #34495e;"><center>
| + | |
| − | <a href="#fetedelascience" style="text-decoration: none;"><h5 class="titre">Fêtes de la science</h5></a>
| + | |
| − | <a href="#fetedelascience"><img class="img_1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>
| + | |
| − | <h5 class="date">?</h5>
| + | |
| − | </center></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="popup" id="cafescience">
| + | |
| − | <div class="popup-content"> | + | |
| − | <div class="close">
| + | |
| − | <a href="#event1">×</a>
| + | |
| − | </div>
| + | |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| + | |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| + | |
| − | </p></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="popup" id="pitch">
| + | |
| − | <div class="popup-content">
| + | |
| − | <div class="close">
| + | |
| − | <a href="#event2">×</a>
| + | |
| − | </div>
| + | |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| + | |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| + | |
| − | </p></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="popup" id="conference">
| + | |
| − | <div class="popup-content">
| + | |
| − | <div class="close">
| + | |
| − | <a href="#event3">×</a>
| + | |
| − | </div>
| + | |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| + | |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| + | |
| − | </p></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="popup" id="ecole">
| + | |
| − | <div class="popup-content">
| + | |
| − | <div class="close">
| + | |
| − | <a href="#event4">×</a>
| + | |
| − | </div>
| + | |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| + | |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| + | |
| − | </p></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="popup" id="party">
| + | |
| − | <div class="popup-content">
| + | |
| − | <div class="close">
| + | |
| − | <a href="#event5">×</a>
| + | |
| − | </div>
| + | |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| + | |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| + | |
| − | </p></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| | | | |
| − | <div class="popup" id="fetedelascience">
| |
| − | <div class="popup-content">
| |
| − | <div class="close">
| |
| − | <a href="#event6">×</a>
| |
| − | </div>
| |
| − | <center><img class="popup-photo" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></center>
| |
| − | <div class="popup-cadre"><p> Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.
| |
| − | </p></div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| | | | |
When the fall comes, the landscapes that groove the road to the Galibier completely change colors. 