manif_styles.css

/*Page manifestation*/


/*General*/
a{
    text-decoration: none;
    color: white;
}

/*Header*/

.st0
{
  background : #454545;
  position : absolute ;
  left : 42%;
  top : 54px;
  width : 332px;
  height : 63px;
  padding: auto;
  text-align: center;
  
}

.st0 h1
{
    font-family : Myriad Pro;
    font-size : 22px;
    text-transform : uppercase;
    color : #ffff;
}

/*Image*/

.img
{
    background : blue;
    position : absolute ;
    left : 27%;
    top : 198px;
    width : 1013px;
    height : 437px;
}

.galerie
{
    background : #EB2D39;
    position : absolute ;
    left : 595px;
    top : 90%;
    width : 200px;
    height : 63px;
    border-radius : 27px;
    font-family : Myriad Pro;
    font-size : 25px;
    color : #F1F1F1;
    line-height: 60px;
    text-align: center;
}
.galerie:hover{
    color: white;
    background-color: #02b8dd;
}

.like
{
    background : #EB2D39;
    position : absolute ;
    left : 833px;
    top : 90%;
    width : 200px;
    height : 63px;
    border-radius : 27px;
    font-family : Myriad Pro;
    font-size : 25px;
    color : #F1F1F1;
    line-height: 60px;
    text-align: center;
} 
.like:hover{
    color: white;
    background-color: #02b8dd;
} 

  
 /*Event*/

 .event
{
    background : #F1F1F1;
    position : absolute ;
    left : 28%;
    top : 695px;
    width : 943px;
    height : 426px;
}
.event h1
{
    font-family : JosefinSlabRoman;
    position : absolute ;
    left: 5%;
    font-weight : bold;
    font-size : 36px;
    text-transform : uppercase;
    color : #000000;
}
.event h2
{
    font-family : MontserratRoman;
    position : absolute ;
    left: 6%;
    top : 15%;
    font-size : 22px;
    color : #000000;
}
.event p
{
    font-family : Myriad Pro;
    position : absolute ;
    left: 7%;
    top : 30%;
    font-size : 22px;
    color : #000000;
}

.bck
{
    background : #454545;
    position : fixed;
    left : 95%;
    top : 40%;
    width : 120px;
    height : 200px;
}


.bk
{
    background : #EB2D39;
    font-family : Myriad Pro;
    font-size : 22px;
    text-transform : uppercase;
    color : #FFFFFF;
    text-align: center;
    position: absolute;
    left: 15%;
    top: 35%;
    width : 88px;
    height : 63px;
    border-radius : 29px;
}  
.bk:hover
{
    color: white;
    background-color: #02b8dd;
}
/*commentaire*/  
  
.com
{
    font-family : JosefinSlabRoman;
    font-weight : bold;
    font-size : 36px;
    text-transform : uppercase;
    color : #000000;
    position : absolute ;
    left: 30%;
    top : 105%;
}

.tb_com
{
  background : #FFFFFF;
  border-style : Solid;
  border-color : #000000;
  border-width : 1px;
  position : absolute ;
  left : 28%;
  top : 1271px;
  width : 934px;    
  box-sizing: content-box;
}


.lis_com
{
  background : #F1F1F1;
  position : relative ;
  left : 4.5%;
  top : 10%;
  margin-bottom: 10%;
  width : 850px;
  height : 180px;
  margin-top: 2%;
}
.lis_com h1
{
    font-family : JosefinSlabRoman;
    position : absolute ;
    left: 5%;
    font-weight : bold;
    font-size : 22px;
    color : #000000;
}
.lis_com h2
{
    font-family : MontserratRoman;
    position : absolute ;
    left: 6%;
    top : 25%;
    font-size : 12px;
    color : #FF6000;
}
.lis_com p
{
    font-family : MontserratRoman;
    position : absolute ;
    left: 7%;
    top: 40%;
    font-size : 16px;
    text-transform : uppercase;
    color : #000000;
}
.supprimer
{
    background : #EB2D39;
    position : absolute ;
    left : 87%;
    top : 83%;
    width : 100px;
    height : 30px;
    border-radius : 27px;
    -moz-border-radius : 27px;
    -webkit-border-radius : 27px;
    font-family : Myriad Pro;
    font-size : 20px;
    color : #F1F1F1;
}
.supprimer:hover
{
    color: white;
    background-color: #02b8dd;
}

/*Responsive*/

@media screen and (max-width: 1500px){
    .st0{
        left: 35%;
    }
    .img{
        left: 5%;
    }
    .galerie{
        width: 150px;
        height: 50px;
        font-size: 25px;
        line-height: 15px;
        left: 68%;
    }
    .like{
        width: 150px;
        height: 50px;
        font-size: 25px;
        line-height: 15px;
        left: 85%;
    }
    .event{
        left: 8%;
    }
    .bck{
        width: 70px;
        height: 120px;
    }
    .bk{
        font-size : 11px;;
        position: absolute;
        left: 12%;
        width: 45px;
        height: 30px;
    }
    .com{
        left: 12%;
    }
    .tb_com{
        left: 8%;
    }
}


/*page de la galerie*/


.photo
{
    background: blue;
    position : absolute ;
    left : 10%;
    top : 15%;
    width : 750px;
    height : 850px;
}
.like_p
{
    background : rgba(235, 45, 57, 0.5);
    position : absolute ;
    left : 84%;
    top : 92%;
    width : 150px;
    height : 63px;
    border-radius : 27px;
    font-family : Myriad Pro;
    font-size : 25px;
    color : #F1F1F1;
    line-height: 60px;
    text-align: center;
} 
.like_p:hover{
    color: white;
    background-color: #02b8dd;
} 

.desc_photo
{
    background : rgba(255, 255, 255, 0.5);
    position : absolute ;
    left : 1%;
    top : 73%;
    width : 280px;
    height : 224px;
}  
.desc_photo h1
{
    font-family : JosefinSlabRoman;
    font-weight : bold;
    font-size : 33px;
    text-transform : uppercase;
    color : #000000;
}
.desc_photo h2
{
    font-family : MontserratRoman;
    font-size : 22px;
    color : #000000;
}