Welcome

Halloween Page d'accueil

Littéraire

Halloween, LS codage Forumactif Templates & Eléments Page d'accueil Page d'accueil littéraire

PHPBB2

Non optimisé /

Retour

Codage page d'accueil littéraire Halloween Forumactif

CSS

/* -------------------------------- PA -------------------------------- */

/* Positionnement des liens utiles */
.liens_utiles {
  position: absolute;
  top: 14em;
  left: 3.5em;
  width: 100px;
  text-align: center;
}

/* Mise en forme des liens utiles */
.liens_utiles a {
  font-family: times new roman;
  color: #20040D !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  text-decoration: none !important;
}

/* Mise en forme des liens utiles au survol */
.liens_utiles a:hover {
  color: #856570 !important;
  text-decoration: none !important;
}

/* Positionnement des partenaires */
.partenaires_PA {
  position: absolute;
  top: 17em;
  left: 14.5em;
}

/* Positionnement des nouveautés */
.news_PA {
  position: absolute;
  top: 15.5em;
  left: 28em;
  width: 175px;
  height: 120px;
  overflow: auto;
  text-align: justify;
  font-family: times new roman;
  font-size: 11px;
}

/* Mise en forme des liens du bloc "Nouveautés" */
.news_PA a {
  color: #20040D !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  text-decoration: none !important;
}

/* Mise en forme des liens du bloc "Nouveautés" au survol */
.news_PA a:hover {
  color: #856570 !important;
  text-decoration: none !important;
}

/* Positionnement du bloc "Professeur dit" */
.professeurs {
  position: absolute;
  top: 19.5em;
  left: 49.5em;
  width: 230px;
  height: 190px;
  overflow: auto;
  text-align: justify;
  font-family: times new roman;
  font-size: 11px;
  transform: rotate(-5deg);
}

/* Positionnement et opacité de la première image du staff */
.staff_1 {
  position: absolute;
  top: 34em;
  left: 0em;
  opacity: 0.8;
}

/* Opacité de la première image du staff en hover */
.staff_1:hover {
  opacity: 1;
}

/* Positionnement et opacité de la seconde image du staff */
.staff_2 {
  position: absolute;
  top: 34em;
  left: 7em;
  opacity: 0.8;
}

/* Opacité de la seconde image du staff en hover */
.staff_2:hover {
  opacity: 1;
}

/* Positionnement et opacité de la troisième image du staff */
.staff_3 {
  position: absolute;
  top: 34em;
  left: 14em;
  opacity: 0.8;
}

/* Opacité de la troisième image du staff en hover */
.staff_3:hover {
  opacity: 1;
}

/* Info-bulle des plumes vedettes */
a.info{
  position: relative;
  z-index: 24;
  border-radius: 25px;
}
 
a.info:hover{
  z-index: 25;
}
 
a.info span{
  display: none;
  text-decoration: none !important;
}
 
a.info:hover span{
  display: block;
  position: absolute;
  top: -6em;
  left: 0em;
  width: 70px;
  height: 70px;
  border-radius: 50px;
  background-color: #20040D;
  color: #856570;
  text-align: center;
  font-weight: none;
  text-decoration: none !important;
}

/* Positionnement du contenu du bloc "Vedettes" */
.vedettes {
  position: absolute;
  top: 35em;
  left: 27.5em;
}
/* -------------------------------- FIN PA -------------------------------- */

HTML

<div style="background-image: url('http://image.noelshack.com/fichiers/2014/29/1405340125-plumeartistiquepa.png'); width: 810px; height: 460px;">
   
   <div style="position: relative;">
      
      <div class="liens_utiles">
          <a href="http://plume-artistique.forumactif.org/t28-reglement-general#112">Règlement</a><br /><br /><a href="http://plume-artistique.forumactif.org/f17-presentation-de-l-artiste">Présentations</a><br /><br /><a href="http://plume-artistique.forumactif.org/c7-salons-des-groupes">Galerie</a><br /><br /><a href="http://plume-artistique.forumactif.org/f67-cours-de-graphisme">Cours <br />graphiques</a><br /><br /><a href="http://plume-artistique.forumactif.org/f68-cours-de-codage">Cours <br />codage</a>
      </div>
      
      <div class="partenaires_PA">
          <select onchange="location = this.value" style="background-color: #d3d3d3; width: 130px; color: #16161a"> <option>Nos amis</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
      </div>
      
      <div class="news_PA">
          <span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br /><span style="color: #856570 !important; font-size: 15px;">∞</span> Id ad ad elegerit eos mercenariae matrimonii est in illis diem incredibile apud. <a href="#">More ?</a><br /><br />
      </div>
      
      <div class="professeurs">
          Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit. Iura regenda parens Caesaribus patrimonii oppressas leges suis parens urbs cervices superbas efferatarum regenda oppressas superbas Caesaribus post retinacula permisit oppressas fundamenta libertatis oppressas retinacula iura superbas regenda velut et efferatarum retinacula velut dives gentium retinacula permisit velut latasque parens frugi velut et et libertatis iura liberis efferatarum urbs oppressas efferatarum latasque et velut velut venerabilis sempiterna prudens iura urbs oppressas post retinacula Caesaribus liberis prudens cervices tamquam gentium sempiterna libertatis dives permisit venerabilis et libertatis permisit cervices frugi permisit sempiterna et oppressas superbas cervices tamquam efferatarum et et superbas dives et gentium gentium retinacula permisit liberis prudens tamquam permisit.
      </div>
       <img class="staff_1" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff1.png" /> <img class="staff_2" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff2.png" /> <img class="staff_3" src="http://image.noelshack.com/fichiers/2014/29/1405340105-plumeartistiqueliensstaff3.png" />
      <div class="vedettes">
          <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a> <a class="info"><img src="http://i39.servimg.com/u/f39/18/43/33/39/4910.png" style="width: 70px; border-radius: 50px;" /><span><br /><br />Pseudo</span></a>
      </div>
      
   </div>
   
</div>

Dernière modification : 25 April 2020 23 : 33.

#litteraire #pageaccueil #forumactif #codage #libreservice

Halloween