<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
#contenu{
width: 500px;
height: 232px;
background-color: #b8477b;
. /* Changer le motif de fond. Pour avoir une couleur unie, effacer le style background-image et écrire "background-color: #xxx;" à la place avec la couleur désirée */
border-radius: 20px;
box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
-webkit-box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
background-size: cover;
background-attachment: scroll;
overflow-y: hidden;
overflow-x: hidden;
color:rgb(150,131,236); /* Changer la couleur du texte */
}
#contenu:hover{
overflow-y:auto; }
#nav{
border-radius: 20px 20px 0px 0px;
}
#nav, .paragraphe, #para-moi, .oneline{
background-color: rgba(250, 240, 230, 0.8 ); /* Changer la couleur du fond de la barre de navigation et des blocs de texte + définir son opacité allant de 0 (0%) à 1 (100%) */
}
#contenu, .paragraphe, #para-moi, .oneline{
border: 1px solid rgb(237,237,237); /* Changer la couleur de la bordure de la signature et des blocs de texte */
}
li{
display: inline-block;
margin-left:55px;
font-family: 'Pacifico', cursive;
padding-top:0px;
padding-bottom:5px;
color:rgb(224,205,169); /* Changer la couleur du texte des onglets inactifs */
}
ul{
margin:0px;}
.onglet{
display:inline-block;
webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;}
.onglet_0{
webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;}
.onglet_1{
webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transform:scale(1.3,1.3);
-moz-transform:scale(1.3,1.3);
-o-transform:scale(1.3,1.3);
-ms-transform:scale(1.3,1.3);
color: #aaadbc; /* Changer la couleur du texte de l'onglet actif */ }
.contenu_onglet{
display: none;}
#contenu_onglet_1er{
text-align:center;}
#photo{
width: 120px;
height: 150px;
border-radius: 20px;
border: 1px solid rgb(150,150,100);
box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
-webkit-box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
float:left;
margin:10px 0px 0px 10px;
background:url("https://2img.net/r/hpimg15/pics/853751signature7.jpg") no-repeat; /* Changer l'image dans l'onglet "moi" (120x150px) */
}
#para-moi{
width: 300px;
min-height: 130px;
height: auto;
border-radius: 20px;
float:right;
padding: 10px;
margin:10px 10px 0px 0px;
text-align:justify; /* Changer "justify" par "left" si vous voulez plutôt que le texte soit aligné à gauche ("right" pour droite et "center" pour centré) */
font-size:10pt;
font-family: 'PT Sans Narrow', sans-serif;
}
.autosize-gift{
max-width:480px;
height:auto;
border-radius: 20px;
margin:10px 10px 00px 10px;}
.oneline{
width: 460px;
border-radius: 10px;
padding: 0 10px 0 10px;
margin:0px 10px 10px 10px;
text-align: center;
font-size:10pt;
font-family: 'PT Sans Narrow', sans-serif; }
.paragraphe{
width: 460px;
height: auto;
border-radius: 20px;
padding: 10px;
margin:10px;
text-align:justify; /* Changer "justify" par "left" si vous voulez plutôt que le texte soit aligné à gauche ("right" pour droite et "center" pour centré) */
font-size:10pt;
font-family: 'PT Sans Narrow', sans-serif; }
#gelso{
width: 500px;
text-align: center;
font-size: 7pt;
font-family: 'PT Sans Narrow', sans-serif;
color: rgba(100,80,50,0.5);
text-shadow: 3px 3px 3px 0px rgb(55,55,55,);
}
</style>
<script type="text/javascript">
//<!--
function change_onglet(name){
document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_'+name).style.display = 'block';
anc_onglet = name;
}
//-->
</script>
</head>
<body>
<div id="contenu">
<div id="nav">
<ul><li><span id="onglet_1er" class="onglet_1 onglet" onmouseover="javascript:change_onglet('1er');">Signature</span></li>
<li><span id="onglet_2eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('2eme');">Moi</span></li>
<li><span id="onglet_3eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('3eme');">Cadeaux</span></li>
<li><span id="onglet_4eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('4eme');">♥</span></li>
</ul>
</div>
<div id="contenu_onglet_1er" class="contenu_onglet">
<img alt="" src="https://i.imgur.com/tEBBxqU.png"> <!-- Signature 500x200px ou même rapport -->
</div>
<div id="contenu_onglet_2eme" class="contenu_onglet">
<div id="photo"></div> <div id="para-moi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur justo blandit, vehicula nisl nec, ultrices ex. Integer blandit elit ex. Mauris malesuada vulputate condimentum. In tristique neque lacus, vel vehicula nisl vestibulum a. Donec porta tristique arcu vitae interdum. Curabitur sollicitudin feugiat aliquet. Cras non mollis ante. Etiam semper in ipsum a rhoncus. Duis massa arcu, pulvinar et dictum sed, viverra non erat.</div> <!-- A remplacer par votre texte -->
</div>
<div id="contenu_onglet_3eme" class="contenu_onglet">
<img class="autosize-gift" alt="" src="https://i.imgur.com/tEBBxqU.png">
<div id="thanks" class="oneline">Merci M. Renard !</div>
</div>
<div id="contenu_onglet_4eme" class="contenu_onglet">
<div class="paragraphe"><p>Ici j'aimerais écrire un ou plusieurs paragraphes.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur justo blandit, vehicula nisl nec, ultrices ex. Integer blandit elit ex. Mauris malesuada vulputate condimentum.</p></div>
<div class="oneline">Tandis que là une ligne suffira =) </div>
</div>
</div><div id="gelso">MERCI GELSO POUR LA SIGNATURE CODÉE ♥</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
Accueil 
Sujet: signature test 
Lun 3 Aoû - 20:52
