Charte
Graphique

Couleurs utilisées

Couleur 1


Cette couleur et la couleur 2 rappellent celle des cerises ou de leur jus.
RVB: 85, 60, 78

Couleur 2


RVB: 153, 0, 102

Couleur 3


Cette couleur est utilisée en arrière plan sur chaque page du site.
Elle apporte une luminosité moins vive pour un meilleur confort visuel.
RVB: 223, 226, 236

Polices utilisées

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.
Amaranth, pour le texte courant, aligné à gauche pour éviter les lézardes. Cette police est utilisée via le site google fonts.

Code a placer dans la balise head :
<link href='https://fonts.googleapis.com/css?family=Amaranth:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
Titre de page
AmericanTypewriterStd, en h1 pour les titres de pages

  Code css titre de page

h1{
  flex:2;
  font-size: 2.5em;
  font-family: "AmericanTypewriterStd-Cond", sans-serif;
  margin-top: 0.5em;
  color: rgb(153, 0, 102);
  background-color: rgb(223, 226, 236);
  text-align: center;
  font-weight:normal;
}
Titre d'article
AmericanTypewriterStd, en h2 pour les titres d'articles
Police AmericanTypewriterStd
Lancer le téléchargement

Logo, version sur fond coloré

Menu et autres boutons

MENU 
Code html bouton menu

  <a href="#" class="bouton">Menu</a> 
  
  
  Code css bouton menu

  a.bouton{
    float:left;
    font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    color: rgb(85, 60, 78);
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 0.6em;
    z-index:5;
  }

  a.bouton:hover{
    color: rgb(153, 0, 102);
    float:left;
    font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton2.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 0.6em;
    z-index:5;
  }
Lire la suite...
Code html bouton Lire la suite...

  <a href="#" class="bouton2">Lire la suite...</a> 
  
    
  Code css bouton lire la suite...

  a.bouton2{
   background-color: rgb(153, 0, 102);
   border-radius: 0.6em;
   font-family: 'Amaranth', sans-serif;
   font-size: 0.7em;
   color: rgb(223, 226, 236);
   text-decoration: none;
   padding-left: 0.7em;
   padding-right: 0.7em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
  }


  a.bouton2:hover{
   background-color: rgb(153, 0, 102);
   border-radius: 0.6em;
   font-family: 'Amaranth', sans-serif;
   font-size: 0.7em;
   color: rgba(223, 226, 236, 0.5);
   text-decoration: none;
   padding-left: 0.7em;
   padding-right: 0.7em;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
  }

Barre de recherche

Code html barre de recherche

  <form id="recherche" method="post">
  <input name="saisie" type="text" placeholder="Recherche..." required />
  <input class="loupe" type="submit" value="" />
  </form>
  
    
  Code css barre de recherche

  #recherche {
   display: flex;
   flex-direction:row;
   align-items:center;
   margin-top:0.3em;
   margin-left: 1.8em;
   margin-bottom:0.1em;
   width:8em;
   height:1em;
   background: rgb(223, 226, 236);
   border-radius:2em;
   border-color: rgb(153, 02, 102);
   border-width: 0.15em;
   border-style:solid;
   }
  
  #recherche .loupe {
   display: flex;
   flex:1;
   background: url("../images/loupe2.png");
   background-repeat:no-repeat;
   background-position: 2.6rem 0.7rem;
   background-size: 24% auto;
   margin: 0rem;
   }

  @media screen and (max-width: 650px) {
   #recherche .loupe {
   background-position: 2rem 0.9rem;
   }
   }
  
  #recherche input {
   display: flex;
   flex:1;
   outline:0;
   border:0;
   margin:0;
   height:3em;
   }

  #recherche input[type=text] {
   display: flex;
   flex:1.5;
   font-family: 'Amaranth', sans-serif;
   font-size: 0.8em;
   background:none;
   padding-left: 0.7em;
   color: rgba(153, 02, 102, 0.5);
   }

Écomusée du pays de la cerise
206 Le Petit Fahys 70220 Fougerolles

  Code html Footer

    <section class="foot">
    <div class="logof">
    <div class="faceb"><a class="faceb" target="_blank" href="https://www.facebook.com/ecomuseedupaysdelacerisesedefougerolles?fref=ts"><span id="lienfaceb">
    </span></a></div>
    <div class="logofoot"><img src="images/logo2.png"></div>
    <div class="logom"><img src="images/logomfrance.png"></div>
    </div>
    <div class="adresse">
    <div class="adresse1">
    <p>Écomusée du pays de la cerise<br>
    206 Le Petit Fahys 70220 Fougerolles</p>
    </div>
    <ul class="adresse2">
    <li><a href="#">Découvrir l'Écomusée</a></li>
    <li><a href="#">Expositions</a></li>
    <li><a href="#">Espace pédagogique</a></li>
    <li><a href="#">Animations</a></li>
    <li><a href="#">Infos pratiques</a></li>
    </ul>
    </div>
    </section>
    
  
    Code css footer

    .foot{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    background-color: rgb(85, 60, 78);
    height:4em;
    align-content: center;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    }

    .logof{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:2;
    flex-direction: row;
    align-items: center;
    margin-left:4.5em;
    height:4em;
    }

    .adresse{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:10;
    flex-direction: row;
    align-items: center;
    color: rgb(223, 226, 236);
    margin-right:2rem;
    }

    .adresse1{
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    margin-right:7rem;
    margin-left: 2rem;
    font-size: 0.7em;
    }

    .adresse2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    font-size: 0.6em;
    list-style: none;
    }


    .adresse2 li a{
    padding: 0.4em;
    list-style: none;
    text-decoration:none;
    color: rgb(223, 226, 236);
    }

    .adresse2 li:last-child a{
    padding: 0em;
    }

    .adresse2 li a:hover{
    color: rgba(223, 226, 236, 0.5);
    }

    .faceb a{
    background: url("../images/faceb.png");
    background-repeat:no-repeat;
    background-size: 44% auto;
    background-position: 0em;
    height:20px;
    z-index:10;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    }

    .faceb a:hover{
    background: url("../images/faceb2.png");
    background-repeat:no-repeat;
    background-size: 44% auto;
    background-position: 0em;
    height:20px;
    z-index:10;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    }

    #lienfaceb{
    height:20px;
    width: auto;
    margin-right:3.5em;
    background-color: rgb(85, 60, 78);
    }

    .logofoot img {
    width: 37%;
    height: auto;
    margin-right:3em;
    }
    .logom img {
    width: 49%;
    height: auto;
    margin-right:2em;
    }

    @media screen and (max-width: 1200px) {
    .adresse{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:9;
    flex-direction: row;
    align-items: center;
    color: rgb(223, 226, 236);
    }
    .adresse1{
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    margin-right:0rem;
    margin-left: 0.5rem;
    font-size: 0.7em;
    }
    }

    @media screen and (max-width: 1000px) {
    .logof{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:2;
    flex-direction: row;
    align-items: center;
    margin-left:2.5em;
    }
    .foot{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    background-color: rgb(85, 60, 78);
    height:5em;
    align-content: center;
    align-items: center;
    }
    .adresse1{
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    margin-right:1.5em;
    margin-left: 1.5em;
    }
    .adresse2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    font-size: 0.5em;
    list-style: none;
    }
    .adresse{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:8;
    flex-direction: row;
    align-items: center;
    color: rgb(223, 226, 236);
    margin-right:0.5em;
    }
    }


    @media screen and (max-width: 700px) {
    .logof{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:2;
    flex-direction: row;
    align-items: center;
    margin-left:2.5em;
    }
    .foot{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    background-color: rgb(85, 60, 78);
    height:5em;
    align-content: center;
    align-items: center;
    }
    .adresse1{
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    margin-right:4em;
    margin-left: 2em;
    }
    .adresse2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    font-size: 0.5em;
    list-style: none;
    }
    .adresse2 li a{
    padding: 0em;
    list-style: none;
    text-decoration:none;
    color: rgb(223, 226, 236);
    }
    .adresse{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:5;
    flex-direction: row;
    align-items: center;
    color: rgb(223, 226, 236);
    margin-right:1em; 
    }
    }

    @media screen and (max-width: 480px) {
    .logof{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:2;
    flex-direction: row;
    align-items: center;
    margin-left:1em;
    }
    .foot{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    background-color: rgb(85, 60, 78);
    height:5em;
    align-content: center;
    align-items: center;
 
    }
    .adresse2{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    font-family: 'Amaranth', sans-serif;
    color: rgb(223, 226, 236);
    font-size: 0.5em;
    list-style: none;
    }
    .adresse2 li a{
    padding: 0em;
    list-style: none;
    text-decoration:none;
    color: rgb(223, 226, 236);
    }
    .adresse{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:5;
    flex-direction: row;
    align-items: center;
    color: rgb(223, 226, 236);
    }
    }

Vous êtes ici : Accueil / Découvrir l’écomusée

Code html Header partie 1

    <section class="petitheader">
    <p class="petitheader">
    Vous êtes ici : Accueil / Découvrir l’écomusée</p>
    </section>

  
  Code css Header partie 1

  section.petitheader{
    background-color: rgba(85, 60, 78, 0.7);
    height:1.8em;
    margin:0;
    padding:0;
    align-content:center;
    align-items:center;
  }

  p.petitheader{
    text-align:left;
    line-height:2.5;
    margin-left: 5em;
    font-size: 0.7em;
    font-family: 'Amaranth', sans-serif;
    font-weight: 400;
    color: rgb(223, 226, 236);
    margin-top:0;
  }

Header version 1

Vous êtes ici : Accueil / Découvrir l’écomusée

MENU 
 Code html Header version 1

    <section class="pheader">
    <section class="petitheader">
    <p class="petitheader">Vous êtes ici : Accueil / Découvrir l’écomusée</p>
    <img class="logopheader" src="images/logo1.png">
    <a href="" class="bouton">MENU</a>
    </section>
    </section>


   Code css Header version 1

  section.pheader{
    height: 10em;	
    background: url("../images/banniere2.jpg");
    background-repeat:no-repeat;
    background-size: cover;
  }

  img.logopheader{
    float:right;
    margin-right:3em;
    width: 8%;
    height: auto;
  }

  @media screen and (max-width: 720px) {
    img.logopheader{
    float:right;
    margin-right:3em;
    width: 8%;
    height: auto;
  }
    section.pheader{
    height: 8.5em;
  }
  }

  @media screen and (max-width: 480px) {
    img.logopheader{
    float:right;
    margin-right:3em;
    width: 11%;
    height: auto;
  }
    section.pheader{
    height: 7.5em;
  }
  }

  a.bouton{
	float:left;
	font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    color: rgb(85, 60, 78);
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 1em;
  }

  a.bouton:hover{
    color: rgb(153, 0, 102);
    float:left;
	font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton2.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 1em;
  }

Header page d'accueil

Vous êtes ici : Accueil / Découvrir l’écomusée

MENU 
  Code html Header page d'accueil

    <section class="header">
    <section class="petitheader">
    <p class="petitheader">
    Vous êtes ici : Accueil / Découvrir l’écomusée</p>
    <a href="" class="bouton">MENU</a>
    </section>
    <img class="logoheader" src="images/logo1.png">
    </section>



    Code css Header page d'accueil

  section.header{
    height: 20.5em;	
    background: url("../images/banniere1.jpg");
    background-repeat:no-repeat;
    background-size: cover;
  }

  img.logoheader{
    width: 18%;
    height: auto;
    display: block;
    margin-left: 25em;
    margin-top: 1.5em;
  }
  a.bouton{
	float:left;
	font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    color: rgb(85, 60, 78);
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 0.6em;
  }

  a.bouton:hover{
    color: rgb(153, 0, 102);
    float:left;
	font-family: 'Amaranth', sans-serif;
    font-size: 1.1em;
    width: 6em;
    height: 2em;
    padding-top: 15px;
    padding-bottom: 0px;
    text-align: right;
    padding-right: 0.5em;
    border-radius: 8px;
    text-decoration: none;
    background: url("../images/bouton2.png");
    background-repeat:no-repeat;
    background-position: 20px 15px;
    background-size: 30% auto;
    background-color: rgb(223, 226, 236);
    margin-left: 2em;
    margin-top: 0.6em;
  }

Article 1

Fer à marquer

Artisanat-industrie :
Fer à marquer
En savoir plus

Article, La résolution conseillée pour les images est de 300px x 300px.
Code html Articles 1

    <section class="article1">
    <img class="article1" src="images/carre1.jpg" alt=""/>
    <p class="article1">Artisanat-industrie :<br>Fer à marquer<br>
    <a href="#" class="article1">En savoir plus</a>
    </p>
    </section>


  Code css Article 1

  section.article1{
    display:flex;
    width: 12em;
    height: 12em;
    margin-left: 4em;
    margin-bottom: 2em;
    background: url("../images/carre1.jpg");
    background-size: cover;
  }
  p.article1{
    display:flex;
    flex:0.5;
    flex-direction:column;
    font-family: 'Amaranth', sans-serif; 
    text-align: center; 
    background-color: rgba(85, 60, 78, 0.8);
    color:rgb(223, 226, 236);
    margin-bottom: 0em;
    align-self:flex-end;
    font-size: 0.8em;
    padding: 0.5em;

  }

  a.article1{
    display:flex;
    font-family: 'Amaranth', sans-serif; 
    text-align: center; 
    color:rgb(223, 226, 236);
    text-decoration: none;
    justify-content:center;
    background: url("../images/next.png");
    background-repeat:no-repeat;
    background-position: 10em;
    background-size: 10% auto;
  }

  a.article1:hover{
    color:rgb(153, 0, 102);
    background: url("../images/next2.png");
    background-repeat:no-repeat;
    background-position: 10em;
    background-size: 10% auto;
  }

Article 2

Historique

Historique

De la fleur à l'alambic
Tout de cuivre vêtus,
les alambics...

Article2, La résolution conseillée pour les images est de 300px x 400px.
Code html Articles 2

    <section class="article2">
    <p class="hautarticle2">Historique</p>
    <img class="article2" src="images/carre2.jpg" alt=""/>
    <p class="article2">De la fleur à l'alambic<br>Tout de cuivre vêtus,<br>Les alambics...<br></p>
    <a href="#" class="article2"><span id="article2">
    </span></a>
    </section>


  Code css Article 2

  section.article2{
    display:flex;
    margin-left: 4em;
    flex-direction:column;
    height: 12em;
  }

  img.article2{
    display: flex;
    z-index:-1;
    width: auto;
    height: 12em;
  }

  h2.hautarticle2{
    display: inline-block;
    position: relative;
    bottom: -1.3em;
    text-align:left;
    padding: 0.05em;
    padding-left: 0.5em;
    font-size: 1.2em;
    font-family: "AmericanTypewriterStd-Cond", sans-serif;
    color: rgb(223, 226, 236);
    background-color: rgb(85, 60, 78);
    font-weight:normal;
  }

  p.article2{
    display: inline-block;
    position: relative;
    bottom: 6.6em;
    font-family: 'Amaranth', sans-serif; 
    text-align: left; 
    background-color: rgba(85, 60, 78, 0.8);
    color:rgb(223, 226, 236);
    font-size: 0.7em;
    padding: 1em;
    align-self:flex-end;
    padding-right: 4em;
  }

  #article2{
    width: 2em;
    height: auto;
    margin:0.1em;
  }

  .article2 a{
    display: block;
    position: relative;
    bottom: 7.5em;
    left:14em;
    width: 1.5em;
    background: url("../images/next.png");
    background-repeat:no-repeat;
    background-size: 90% auto;
    background-position: 0.5em;
    z-index:10;
  }

  .article2 a:hover{
    display: block;
    position: relative;
    bottom: 7.5em;
    left:14em;
    width: 1.5em;
    background: url("../images/next2.png");
    background-repeat:no-repeat;
    background-size: 90% auto;
    background-position: 0.5em;
    z-index:10;
  }

Article 3 map

Plan

Code html Article 3 map

    <section class="map">
    <h2 class="hautarticlemap">Plan</h2>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10698.033302290667!2d6.401168!3d47.907201!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6cf83852dd8f764d!2sEcomus%C3%A9e+du+Pays+de+la+Cerise!5e0!3m2!1sfr!2sfr!4v1451491494320" 
    width="400" height="300" frameborder="0" 
    style="border:0" allowfullscreen>
    </iframe>
    </section>


  Code css Article 3 map

  section.map{
    display:inline-block;
    margin-left: 4em;
    flex-direction:column;
    height: 12em;
    width: 16em;
  }

  iframe{
    display: block;
    height: 12em;
    width: 16em;
  }

  h2.hautarticlemap{
    display: block;
    position: relative;
    bottom: -1.3em;
    text-align:left;
    padding: 0.05em;
    padding-left: 0.5em;
    font-size: 1.2em;
    font-family: "AmericanTypewriterStd-Cond", sans-serif;
    color: rgb(223, 226, 236);
    background-color: rgb(85, 60, 78);
    font-weight:normal;
    z-index:2;
  }