Fiche multi-fonction

Messages : 1483 Date d'inscription : 17/08/2016 Age : 22

Bonjour !

Je vous propose une fiche qui peut avoir la fonction que vous souhaitez (fiche pour un film, un texte..).

APERCU : www

Quelques règles et informations :

1 • Cette fiche est à utiliser uniquement sur Ocean Home.
2 • N'enlevez pas le Copyright.
3 • Vous pouvez bien évidemment modifier le gif, les couleurs, le texte mais évitez de toucher à la taille des div, qui sont faites pour ne pas avoir de décalage.
4 • Ici c'est la version avec hover ce qui exige un forum pour l'utiliser (mon tuto ici ; néanmoins, si vous souhaitez une version sans hover, je pourrai la faire.

Voici donc le code :

CSS

Code:: <style type="text/css">
  .fond{
  width: 450px;
  height: 790px;
  background-color: #DBB3E3;
  border-left: 10px solid #5B4447;
  border-right: 10px solid #5B4447;
  border-bottom: 30px solid #5B4447;
}

.image{
   width: 470px;
   margin-left: -10px;
   transition: 1.5s;
   margin-top: -85px;
   border-radius: 0px 0px 105px 105px;
}

.image:hover{
   margin-top: 20px;
   border-radius: 0px 0px 0px 0px;
   border-top: 2px solid #5B4447;
   border-bottom: 2px solid #5B4447;
   transition: 1.5s;
}

.titre{
  font-family: Pacifico, cursive;
  font-size: 21px;
  margin-top: 5px;
  color: #6A4C75;
}

.titre2{
   font-family: Pacifico, cursive;
   font-size: 28px;
   margin-top: 5px;
   color: #6A4C75
   }

   .credits{
   font-family: Georgia;
   font-size: 14px;
   color: #6A4C75;
   }

.citation{
  font-family: Times New Roman;
  font-size: 10px;
  color: #6A4C75;
  letter-spacing: 6px;
  margin-top: -15px;
  padding: 10px;
}

.bloctexte{
  width: 300px;
  height: 390px;
  overflow: auto;
  }


.texte{
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #5B4447;
  padding: 10px;
  }

</style>

HTML

Code:: <!doctype html>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  <center><div class="fond"><div class="titre2">Titre ici</div><div class="credits">© codage par Neyka</div><img src="https://media.giphy.com/media/dI3D3BWfDub0Q/giphy.gif" class="image"></img><div class="titre">
Titre ici
  </div><div class="citation">
« petite citation selon votre envie »
</div><div class="bloctexte"><div class="texte">

write here.
</div>
</div>
  </div>
</center>

Puis, pour la placer sur OH :

Code:: <center><iframe src="LIEN DE LA PAGE QUI CONCERNE LE CODAGE" style=" width: 500px; height: 850px; border: 0;"></iframe></center>

RENDU :

Messages : 4012 Date d'inscription : 14/07/2015 Age : 28

Merci beaucoup @Neyka j'adore le glissement qui est fait sur le titre Fiche multi-fonction 4159918501

Messages : 1483 Date d'inscription : 17/08/2016 Age : 22

Je l'ai faite il y a pas mal de temps, je me rappelle que j'étais satisfaite de ça aussi :dino2:

Messages : 2356 Date d'inscription : 02/01/2017 Age : 21

J'aime beaucoup! Le hover est génial :onilove:

Messages : 1483 Date d'inscription : 17/08/2016 Age : 22

Merci beaucoup @Nyx Fiche multi-fonction 4159918501

» Fiche #1 — LS
» Fiche de présentation #2
» Fiche Forget-me-not
» Fiche de RP téléphone
» [Fiche] GANGSTA.

Rechercher

Résultats par : Messages Sujets
Tags
Recherche avancée