<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Roboto" rel="stylesheet">
<style>.fichepub_undersea {
width:550px; height:680px;
box-shadow:0px 0px 6px black;
font-family:Roboto;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
-webkit-transition:all 400ms;
transition:all 400ms;
}
.infopub_undersea {
padding-left:66px; padding-right:66px;
position: relative;
transition: 0.5s linear;
opacity: 0;
margin-top: -680px;
}
.titrepub_undersea {
text-align:center;
font-family: 'Comfortaa', cursive;
color:white;
font-size:35px;
text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.39);
-moz-text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.39);
-webkit-text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.39);
padding-top:50px;
padding-bottom:50px;
letter-spacing:5px;
}
.conceptpub_undersea {
background: rgba(0, 0, 0, 0.9);
padding:15px;
text-align:justify;
color:#F0F0F0;
font-size:13px;
line-height: 16px;
overflow:auto;
height:350px;
}
.bloclien_undersea {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top:5px;
}
.lienpub_undersea {
width:126px; height:23px;
background: rgba(0, 0, 0, 0.9);
text-align:center;
padding-top:4px;
margin-top:5px;
}
.fichepub_undersea a {
color:#F0F0F0!important;
font-size:11px!important;
text-decoration:none!important;
text-transform:uppercase;
}
.blocstaff_undersea {
display:flex;
justify-content:space-between;
margin-top:10px;
}
.vavapub_undersea {
width:125px; height:60px;
}
.staffpub_undersea {
width:125px: height:22px;
background: #fff;
transition: 0.5s linear;
opacity: 0;
padding:6px;
text-align:center;
font-size:15px;
color:#121117;
margin-top:-58px;
}
.fichepub_undersea:hover .infopub_undersea {
opacity: 0.9; transition:0.5s linear;
}
.vavapub_undersea:hover .staffpub_undersea {
opacity: 0.9; transition:0.5s linear;
}
.fichepub_undersea:hover .fond {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
-webkit-transition:all 400ms;
transition:all 400ms;
}
/*La scrollbar elle-même #1*/
::-webkit-scrollbar {
width:7px;
height:7px;
}
/*L'espace sur lequel la barre de la scrollbarre défile #3*/
::-webkit-scrollbar-track {
width:7px;
height:7px;
background:black;
}
/*La barre de la scrollbar #5*/
::-webkit-scrollbar-thumb {
width:7px;
height:7px;
background:#1DA6CD;
}
</style>
</head>
<body><link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
<div class="fichepub_undersea"><img class="fond" src="https://zupimages.net/up/18/10/xfgz.png"/><div class="infopub_undersea">
<div class="titrepub_undersea">Nom du forum</div><div class="conceptpub_undersea">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque, magna sit amet semper suscipit, elit est bibendum nisl, sit amet pellentesque orci purus at enim. Ut non odio sagittis augue sodales pulvinar. In cursus elit vitae nulla hendrerit, a consequat metus pulvinar. Donec suscipit metus ut mauris auctor, ut cursus ante aliquet. Duis posuere erat et mauris gravida, sed ornare tortor rhoncus. Integer dapibus justo mauris, vel scelerisque felis ultricies eu. Ut eget ligula sit amet odio ultricies cursus.<br/><br/>
Morbi at tristique tortor, eget fringilla sapien. Mauris ultricies ligula turpis, vitae eleifend ligula molestie id. Pellentesque maximus pulvinar purus semper imperdiet. Duis viverra commodo enim sit amet dignissim. In ultricies convallis nunc, fringilla maximus odio auctor eu. Praesent quis tincidunt elit, quis congue nunc. Nam dolor dui, mattis quis tortor non, finibus viverra est. Morbi quis pulvinar mauris. Maecenas efficitur lacus diam, eget luctus turpis venenatis non. Phasellus ac metus mattis, malesuada orci auctor, tincidunt lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam fermentum euismod ex, ut efficitur nulla euismod quis.</div>
<div class="bloclien_undersea"><div class="lienpub_undersea"><a href="..." target="blank">Lien</a></div><div class="lienpub_undersea"><a href="..." target="blank">Lien</a></div><div class="lienpub_undersea"><a href="..." target="blank">Lien</a></div><div class="lienpub_undersea"><a href="..." target="blank">Lien</a></div><div class="lienpub_undersea"><a href="..." target="target">Lien</a></div><div class="lienpub_undersea"><a href="..." target="blank">Lien</a></div></div>
<div class="blocstaff_undersea"><div class="vavapub_undersea"><img src="https://zupimages.net/up/18/10/no9k.png"/><div class="staffpub_undersea">Pseudo<br>Rang</div></div><div class="vavapub_undersea"><img src="https://zupimages.net/up/18/10/no9k.png"/><div class="staffpub_undersea">Pseudo<br>Rang</div></div><div class="vavapub_undersea"><img src="https://zupimages.net/up/18/10/no9k.png"/><div class="staffpub_undersea">Pseudo<br>Rang</div></div></div></div></div>
</body>
</html>
