Fiche pub Undersea

Hidden Lands :: Codage :: Fiches
Partagez
Aller en bas
Aadelrun
Aadelrun
Alpha
Féminin

Fiche pub Undersea Empty Fiche pub Undersea

Lun 5 Mar - 17:10


I. Créer une nouvelle page HTML dans PA > Modules > HTML & JAVASCRIPT > Gestion des pages HTML > Création en mode avancé (HTML)
II. Copier/coller ce code dans votre nouvelle page, sans oublier de lui donner un titre :
Code:
<!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>
III. Collez l'adresse de votre page dans cet iframe :
Code:
<center><iframe src="URL DE VOTRE PAGE" scrolling="no" style="width:560px; height:690px;" marginwidth="0" marginheight="0" frameborder="0"></iframe></center>

Si vous avez modifié la taille de la fiche, n'oubliez pas de la modifier aussi dans l'Iframe ! Pensez a ajouter 10 pixels si vous avez conservé l'ombre.

J'ai pas mis de crédit sur la fiche pour pas l'encombrer, mais si vous me créditez dans les crédits de votre forum ce serai sympa :3
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum