Difference between revisions of "Template:Grenoble-Alpes/CSS"

 
(129 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<style>
 
<style>
  
−
h1{      /* titre pour haut de page */
+
/* ************************************** ECRITURE ***************************************** */         
−
                 font-family: 'Molenga', Georgia, Times, serif;
+
 
 +
/* ******************** Lato (Menu+Titre) **************************** */
 +
 
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Lato';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ********************** Poiret One (gros titre) ************************** */
 +
 
 +
/* cyrillic */
 +
@font-face {
 +
  font-family: 'Poiret One';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/cKr_e199f0xMkxMkRbEJXyEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 +
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 +
}
 +
 
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Poiret One';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/3Annd_XP-99FcGbOpm6fVCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
 
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Poiret One';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Poiret One'), local('PoiretOne-Regular'), url(https://fonts.gstatic.com/s/poiretone/v4/HrI4ZJpJ3Fh0wa5ofYMK8fk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ********************** Fredericka the Great (Notebook) ************************** */
 +
 
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Fredericka the Great';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Fredericka the Great'), local('FrederickatheGreat'), url(https://fonts.gstatic.com/s/frederickathegreat/v5/7Es8Lxoku-e5eOZWpxw18hsRj2C0BvLNQqKHRdEu66Y.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Amatic (Notebook) **************************** */
 +
 
 +
/* hebrew */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/OpbFR1Tmt2r4Z48lwWGNORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
 +
}
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/6oAC5EqjVnFivtPX-TgvlRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/6UByihrsVPWtZ99tNMIgMBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Amatic SC';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v9/DPPfSFKxRTXvae2bKDzp5FtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Dancing Script (citation+Notebook) **************************** */
 +
 
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2fRMc6C39aem-aUPzsV2c2w.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2e87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Dancing Script';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Dancing Script Regular'), local('DancingScript-Regular'), url(https://fonts.gstatic.com/s/dancingscript/v8/DK0eTGXiZjN6yA8zAEyM2Ud0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************** Open Sans (paragraphe) **************************** */
 +
 
 +
/* cyrillic-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
 +
}
 +
/* cyrillic */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 +
}
 +
/* greek-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+1F00-1FFF;
 +
}
 +
/* greek */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0370-03FF;
 +
}
 +
/* vietnamese */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 +
}
 +
/* latin-ext */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
 +
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 +
}
 +
/* latin */
 +
@font-face {
 +
  font-family: 'Open Sans';
 +
  font-style: normal;
 +
  font-weight: 400;
 +
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
 +
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 +
}
 +
 
 +
/* ******************************************** TYPOGRAPHIE ************************************************* */
 +
 
 +
        h3 {      /* titre pour haut de page */
 +
                 font-family: 'Poiret One' , cursive;
 
                 text-align: center;
 
                 text-align: center;
 +
                font-weight: 100;
 
                 font-size: 10vw;
 
                 font-size: 10vw;
 
                 color: #ecf0f1;
 
                 color: #ecf0f1;
−
                 padding-top:25%;
+
                 padding-top:23%;
−
                 padding-bottom:25%;
+
                 padding-bottom:23%;
−
                 position:relative;
+
                 -webkit-animation: begin 4s linear;
 +
                -moz-animation: begin 4s linear;
 +
                animation: begin 4s linear;
 +
                text-transform: uppercase;
 
             }
 
             }
−
        body {
 
−
            background-color:#364A5E;
 
−
           
 
−
        }
 
  
−
            h2{
+
@-webkit-keyframes begin {
−
                 text-align: center;
+
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 
 +
@-moz-keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 
 +
@keyframes begin {
 +
    0% {opacity:0;}
 +
    100% {opacity:1;}
 +
}
 +
 
 +
        h2 {
 +
                 font-family:  'Lato',cursive;
 +
                font-weight: 100;
 
                 transform: translateY(5%);
 
                 transform: translateY(5%);
−
                 font-size: 300%;
+
                 font-size: 3vw;
 
                 color: #000;
 
                 color: #000;
−
                 padding-bottom: 30px;
+
                 padding-bottom: 1.25%;
 +
                margin-left: 2%;
 
             }
 
             }
−
            .h-space{
+
 
 +
 
 +
        .h-space {
 
                 color:#ECF0F1;
 
                 color:#ECF0F1;
 
             }
 
             }
−
            h6{
+
 
 +
 
 +
        h6{
 
                 text-align: center;
 
                 text-align: center;
 
                 transform: translateY(100%);
 
                 transform: translateY(100%);
Line 32: Line 237:
 
                 color: #000;
 
                 color: #000;
 
                 padding-bottom: 30px;
 
                 padding-bottom: 30px;
 +
                font-family:  'Lato';
 +
                font-weight: 100;
 
             }
 
             }
−
             header {
+
 
 +
        h5 {
 +
              margin-right:5%;
 +
              margin-left: 5%;
 +
              padding-right: 1%;
 +
              padding-left: 1%;
 +
              text-align: justify;
 +
              font-family:  'Open Sans', sans-serif;
 +
              font-size: 15px;
 +
              font-weight: lighter;
 +
             
 +
             }
 +
.couvlogogeo {
 +
            width:50%;
 +
            opacity:0.5;
 +
            transform:translate(3850%,-150%);
 +
            z-index:5;
 +
          }
 +
 
 +
/**************** TABLE *****************/
 +
 
 +
table
 +
{
 +
    border-collapse: collapse;
 +
}
 +
td, th
 +
{
 +
    border: 1px solid black;
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    text-align: center;
 +
}
 +
 
 +
caption
 +
{
 +
    font-family:  'Open Sans', sans-serif;
 +
    font-size: 15px;
 +
    font-weight: lighter;
 +
    margin-bottom: 2%;
 +
}
 +
 
 +
 
 +
 
 +
/* ****************************** CROIX POUR FERMER UNE POP UP ************************** */
 +
 
 +
.close {
 +
    margin: 2%;
 +
    float: top;
 +
    font-size: 250%;
 +
    font-weight: 100;
 +
}
 +
 
 +
.close:hover {
 +
    font-size: 300%;
 +
    font-weight: 100;
 +
}
 +
 
 +
.close a{
 +
    text-decoration: none;
 +
    color: #ecf0f1;
 +
}
 +
 
 +
/* ********************************************** PAGE *************************************************** */
 +
 
 +
      body {
 +
                background-color:#364A5E;
 +
                overflow-x: hidden;
 +
            }
 +
 
 +
      header {
 
                 font-family:  'Molenga', Georgia, Times, serif;
 
                 font-family:  'Molenga', Georgia, Times, serif;
 
                 margin: 0px;
 
                 margin: 0px;
Line 45: Line 322:
 
             }
 
             }
  
−
            footer{
 
−
                position:;   
 
−
            }
 
−
           
 
−
            p {
 
−
            margin-right:2%
 
−
            margin-left: 2%;
 
−
            }
 
−
         
 
  
−
/* latin-ext */
+
/* ********************************************** Geolocalisation *************************************************** */
−
@font-face {
+
 
−
  font-family: 'Molengo';
+
/******************** POP UP GEOLOCALISATION ******************/
−
  font-style: normal;
+
.popup_geoloc
−
  font-weight: 400;
+
        {
−
  src: local('Molengo'), local('Molengo-Regular'), url(http://fonts.gstatic.com/s/molengo/v7/LLqzi2QjRP17rseSSfDGKvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
+
            position: relative;
−
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+
            display: float;
−
}
+
            cursor: pointer;
−
/* latin */
+
            -webkit-user-select: none;
−
@font-face {
+
            -moz-user-select: none;
−
  font-family: 'Molengo';
+
            -ms-user-select: none;
−
  font-style: normal;
+
            user-select: none;
−
  font-weight: 400;
+
            z-index:2;
−
  src: local('Molengo'), local('Molengo-Regular'), url(http://fonts.gstatic.com/s/molengo/v7/pqkjY4KeO1LHeSjFqV3Zsg.woff2) format('woff2');
+
            width:5%;
−
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+
        }
−
}
+
 
 +
#Popup_geo
 +
        {
 +
        position:absolute;
 +
        padding: 10% 10% 10% 10%;
 +
        top: -200%;
 +
        left: 1520%;
 +
        width: 380%;
 +
        z-index: 2;
 +
        }
 +
 
 +
 
 +
.popup_geoloc .popuptext
 +
        {
 +
            visibility: hidden;
 +
            width: 20%;
 +
            background-color: #364A5E;
 +
            color: #fff;
 +
            text-align: justify;
 +
            border-radius: 2.5%;
 +
            padding: 10% 10% 10% 10%;
 +
            position: relative;
 +
            z-index:1;
 +
            font-family: 'Open Sans', sans-serif;
 +
            font-size: 0.95vw;
 +
            font-weight: lighter;
 +
 
 +
        }
 +
 
 +
.popup_geoloc .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_geoloc .show {
 +
            visibility: visible;
 +
            -webkit-animation: fadeIn 1s;
 +
            animation: fadeIn 1s;
 +
        }
 +
.popup_geoloc .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>
 +
 +
<script>
 +
            function Function_geo()
 +
            {
 +
            var popup = document.getElementById("Popup_geo");
 +
            popup.classList.toggle("show");
 +
            }
 +
 +
        </script>
 
</html>
 
</html>

Latest revision as of 08:42, 20 October 2017