mockup_seize.com/styles.css

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'Karla';
    src: url('polices/karla_fr.allfont.net.eot');
    src: url('polices/karla_fr.allfont.net.eot') format('embedded-opentype'),
         url('polices/karla_fr.allfont.net.woff') format('woff'),
         url('polices/karla_[fr.allfont.net].ttf') format('truetype'),
         url('polices/karla_fr.allfont.net.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Karla Bold';
    src: url('polices/karla-bold_fr.allfont.net.eot');
    src: url('polices/karla-bold_fr.allfont.net.eot') format('embedded-opentype'),
         url('polices/karla-bold_fr.allfont.net.woff') format('woff'),
         url('polices/karla-bold_[fr.allfont.net].ttf') format('truetype'),
         url('polices/karla-bold_fr.allfont.net.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Header */

.bandeau {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;

  background-color: #efdfe2ff;
  font-family: "karla", sans-serif;
  align-items: center;
  /* padding-left: 50px;
  padding-right: 50px; */
  font-size: 1rem;
}

.bandeau img {
  width: auto;
  height: 100px;
 }

 .bandeau a {
   text-decoration: none;
   color: black;
 }

 .bandeau a:hover {
   color: #d3ad30;
   transition: 0.3s ease-in-out;
 }

/* main {
  position: relative;
} */
 .logo_seize {
   width: 25%;
   height: auto;
   display: block;
   margin: auto;
   margin-top: 100px;
   margin-bottom: 200px;
   /* position: absolute;
   left: 10%; */

 }


 ul {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
   justify-content: space-around;
   font-family: "karla", sans-serif;
   font-size: 1.5rem;
   text-transform: uppercase;
   width: 60%;
   margin: auto;
   list-style: none;
   /* list-style: symbols(square); */
 }

/* li {
  padding-left: 50px;
} */

 li::after {
   content:"\25AA";
   color: #d3ad30;
   transform: rotate(45deg) translate(-50%);
   position: absolute;
   padding-left: 30px;

 }

 nav a  {
   text-decoration: none;
   color: black;
 }

nav a:hover {
  color: #d3ad30;
}



/* #facebook, #instagram, #pinterest, #mail {
  width: 3%;
  height: 3%;
} */


/* Réseaux sociaux logo doré au survol OK, mais pb taille images (images survol pas dans html) */

/* #facebook a {
  display: inline-block;
  background: url("images/logo_facebook_2.png") no-repeat;
}
#facebook a:hover img {
  visibility: hidden;
}
#instagram a {
  display: inline-block;
  background: url("images/instagram_logo_2.png") no-repeat;
}
#instagram a:hover img {
  visibility: hidden;
}
#pinterest a {
  display: inline-block;
  background: url("images/pinterest_logo_2.png") no-repeat;
}
#pinterest a:hover img {
  visibility: hidden;
}
#mail a {
  display: inline-block;
  background: url("images/mail_2.png") no-repeat;
}
#mail a:hover img {
  visibility: hidden;
} */




/*
.card {
        width: 130px;
        height: 195px;
        position: relative;
        display: inline-block;
        margin: 50px;
}

.card .img-top {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .card:hover .img-top {
        display: inline;
    }


/*#facebook:hover {
  background: url("/images/logo_facebook_2.png") no-repeat;
   }
*/