Sujet: Re: Hedge réclame l'assistance d'Alexielios [Terminé] Dim 3 Juil - 14:09 | |
Done. Va bien voir le tuto pour savoir comment faire. AperçuCode signa - Code:
-
<!DOCTYPE html> <html lang="fr">
<head> <meta charset="utf-8" />
<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> <style type="text/css"> /*onglets*/ .onglet, .onglet_0 { z-index: 1; width: 126.8px; display:inline-block; position: relative; background: #f3f3f3; margin:auto; margin-bottom: -1px; padding: 5px; border: 1px solid #c0c0c0; letter-spacing: 3px; text-align: center; font-variant: small-caps; font-style: bold; color: #575757; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .onglet_1 { z-index: 2; width: 126.8px; display:inline-block; position: relative; background: #f3f3f3; margin:auto; margin-bottom: -1px; padding: 5px; border: 1px solid #c0c0c0; letter-spacing: 5px; text-align: center; font-variant: small-caps; font-style: bold; color: #575757; -webkit-transition: 300ms; -moz-transition: 300ms; transition: 300ms; } .onglet:hover { background: #c0c0c0; } /*contenu des onglets*/ .contenu_onglet { z-index: 3; height : 200px; width : 545px; font-family : "Times New Roman"; background: #f3f3f3; border: 1px solid #c0c0c0; padding: 10px; display:none; overflow : auto; color: #575757; } #contenu_onglet_1er { font-size : 12px ; font-variant: small-caps; } #contenu_onglet_2eme { font-size : 12px ; font-variant: small-caps; font-style: bold; } #contenu_onglet_1er img, #contenu_onglet_2eme img { max-width: 525px; } /*lien de bas de signa*/ .links { width : 565px; height : 32px; border: 1px solid #c0c0c0; margin-top: -1px; background: #f3f3f3; text-align: center; color: #575757; font-variant: small-caps; text-decoration: none !important; } .button img { width: 75px; height:auto; padding-left:30px; padding-right:30px; top:0px; } .button2 img { width: 75px; height:auto; padding-left:30px; padding-right:30px; padding-top: 5px; margin-bottom:-5px } /*intérieur onglet présentation de la IOT*/ .avatar { max-width: 100px; max-height: 100px; padding:10px; } div.infobulle { position: relative; cursor:pointer; } div.infobulle > div { display: none; } div.infobulle:hover { background: none; z-index: 500; }
/* Lorsqu'on survole le contenu du bloc */ div.infobulle:hover > div { display: block; width:92px; position: absolute; top: 110px; left:10px; background: #e9e9e6; padding: 3px; border: 1px solid #c0c0c0; text-align:center; color: #575757; font-variant: small-caps; text-decoration: none !important; font-size : 12px ; font-style: bold; } .texte_infobulle { color: #575757 !important; }
:*onglet présentation perso*/ .presentation { position: relative; width: 85%; } .prez-titre { margin-bottom: 10px; text-align: center; font-size: 1.6em; font-style: bold; font-variant: small-caps; } .prez-image { position: absolute; z-index: 4; top: 80px; left:40px; width: 150px; height: 150px; background-size: cover; background-position: top; } .prez-contenu { left: 190px; width: 300px; max-height:136px; padding: 10px 15px; font-size: 14px; line-height: 1.5; position: relative; background: #e9e9e6; border: 1px solid #c0c0c0; } .prez-overflow { max-height: 137px; overflow: auto; } .prezname { font-style: bold; font-variant: small-caps; text-decoration: underline; } .prez-image2 { top: 80px; left:40px; max-width: 0px; max-height: 0px; } .prez-image2 img { padding-top: 5px; max-width: 175px; max-height: 175px; } /*scrollbar sur chrome */ .contenu_onglet::-webkit-scrollbar, .prez-overflow::-webkit-scrollbar { width: 5px; } .contenu_onglet::-webkit-scrollbar-track, .prez-overflow::-webkit-scrollbar-track { background: rgba(121, 119, 115, 0.3); } .contenu_onglet::-webkit-scrollbar-thumb, .prez-overflow::-webkit-scrollbar-thumb { background: rgba(121, 119, 115, 0.7); } a:link { text-decoration: none; color: #333333; } a:hover { text-decoration: none; color: #999999; } </style>
</head>
<body> <!-- TITRE DES ONGLETS --> <div class="onglets"> <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Signature</span> <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Gifs</span> <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">IOT</span> <span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">Prez'</span> </div>
<div class="signa"> <!-- CONTENU 1ER ONGLET --> <div class="contenu_onglet" id="contenu_onglet_1er" align="center"> <img src="http://image.noelshack.com/fichiers/2016/24/1465820403-1459094039-sign-hedge.png" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820403-10906042-416749018480000-4115101416577683479-n.jpg" alt=""><br/> <br/> <img src="http://www.hapshack.com/images/mLwn4.jpg" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820404-sign-h10.png" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820403-hkvr.jpg" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820403-banniere-hedge.jpg" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820500-1459076269-hb-hedge.png" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2016/24/1465820475-310086-493306107404005-611766678-n.jpg" alt=""><br/> <br/> <img src="http://image.noelshack.com/fichiers/2015/49/1448986437-iot-fan.gif" alt="IOT Fan"><br/> </div>
<!-- CONTENU 2EME ONGLET --> <div class="contenu_onglet" id="contenu_onglet_2eme" align="center"> - Requiem -<br/> <img src="http://image.noelshack.com/fichiers/2016/22/1464717407-gif-requiem.gif" alt=""></br> <img src="https://67.media.tumblr.com/bfac225aba129ab8a5692dc3d335431a/tumblr_nb1s01oPAf1smmq2po1_500.gif" alt=""></br> <img src="https://66.media.tumblr.com/56a161197d0b0fbbc308a3952d3b55aa/tumblr_niozrgSX1e1rfmdfoo1_500.gif" alt=""></br> <img src="https://66.media.tumblr.com/0cf677acbc470b7bcb7285a108adeb16/tumblr_nlxmmiqTkk1rfmdfoo1_500.gif" alt=""></br> L-Elf<br/> <img src="http://25.media.tumblr.com/bdc6a45008e71e2e0fd6152c802df049/tumblr_mx1o90go4d1silg3fo1_500.gif" alt=""></br> <img src="http://67.media.tumblr.com/2fb1522f688a8a0d1e45bad021c74416/tumblr_mmcgirRokQ1qm65fgo1_400.gif" alt=""></br> Revolution - BOS -<br/> <img src="http://67.media.tumblr.com/23f3656a67cc615f9f36ce63afc34c2f/tumblr_ndoevwUEnw1tiivhqo1_500.gif" alt=""></br> <img src="https://66.media.tumblr.com/76cf3545da12464514b032b823fc1ac3/tumblr_nlk2jqqfFH1toqhwfo1_r1_500.gif" alt=""></br> <img src="http://66.media.tumblr.com/17a2af1da846ff07073cfcb987ab7f4a/tumblr_n9elw8XEge1r72ht7o1_500.gif" alt=""></br> <img src="https://66.media.tumblr.com/6c48150f83dbcfd9c05d435582d06deb/tumblr_nqrj339sme1s46sooo1_500.gif" alt=""></br> - Nightmare -<br/> <img src="http://66.media.tumblr.com/f7ffd3aa4d2f31aed0cce738f16fe12b/tumblr_mtrca0EeQg1rydwbvo1_500.gif" alt=""></br> <img src="https://67.media.tumblr.com/c5072ff3627e961f7d242fc11f40d1d9/tumblr_mhcmmwzXF41ry0xouo1_500.gif" alt=""></br> <img src="https://67.media.tumblr.com/8633224d53b5a78f47cc4705f80dee1d/tumblr_nlc3ryd0pr1sg1ksjo1_500.gif" alt=""></br> -MasterPiece-<br/> <img src="http://i.imgur.com/CobjZ5W.gif" alt=""></br> - Deviance - <br/> <img src="https://gimmebar-assets.s3.amazonaws.com/55a414d51f501.gif" alt=""></br> </div>
<!-- CONTENU 3EME ONGLET : PRESENTATION DE LA TEAM --> <div class="contenu_onglet" id="contenu_onglet_3eme"> <div class="presentation"> <div class="prez-image2"><img src="http://image.noelshack.com/fichiers/2016/08/1456410329-logo-3.jpg" alt=""></div> <div class="prez-titre">La IOT</div> <div class="prez-contenu"> <div class="prez-overflow"> La Imagination Overflow Team est une team d'AMVs et de graphisme créé le 5 mai 2013 par KazeShin, Umi et Keintseru. Elle comprend actuellement 14 membres, 9 AMV-makers et 5 graphistes dont 2 codeurs.</br> <span class="button2"><a href="https://www.youtube.com/user/ImaginationTeamAmvs" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span> <span class="button2"><a href="https://www.facebook.com/imaginationoverflowteam/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span> </div> </div> </div> <table align="center"> <tr> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448913337-avatarkeint.jpg" alt="avatar Keintseru" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u4" target="_blank">Profil</a> | <a href="https://www.youtube.com/channel/UCGXZ5HefgMwTYIFpfMMgilw" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449055543-avatar-azazel.jpg" alt="avatar Azazel" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u58" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/ahmedjarid" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448886953-avatarama.jpg" alt="avatar Amariyo" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u98" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Amaryio" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448899809-avatarluubioo.jpg" alt="avatar LuubiOo" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u32" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/LuubiOo" target="_blank">Youtube</a></div> </div> </td> </tr> <tr> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887405-avataretov2jpg.jpg" alt="avatar ETO" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u119" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/tehCruumby" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054916-avatar-xeno.jpg" alt="avatar Xeno" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u30" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/02Lyric" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448887502-avatarlachevrolait.jpg" alt="avatar Lachèvre" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u100" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/Lachevrolait" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2016/08/1456485635-1456401539-avataryuki.jpg" alt="avatar AzukaYuki" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u61" target="_blank">Profil</a> | <a href="https://www.youtube.com/user/AnimeFanGirl199/featured" target="_blank">Youtube</a></div> </div> </td> </tr> <tr> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1449054914-avatar-yu-kun.jpg" alt="avatar Yu-Kun" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u3" target="_blank">Profil</a> | <a href="http://yuu-graphique.deviantart.com/" target="_blank">Deviant</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2016/08/1456485635-2894hedge.jpg" alt="avatar HedgeProduction" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u28" target="_blank">Profil</a> | <a href="https://www.youtube.com/channel/UCii8lhFAQZFxm5xVwp7pIcA" target="_blank">Youtube</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/48/1448739391-avatarteam.jpg" alt="avatar Deathfire" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u117" target="_blank">Profil</a> | <a href="http://deathfireiot.deviantart.com/" target="_blank">Deviant</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg" alt="avatar Alexielios" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u45" target="_blank">Profil</a> | <a href="http://alexielios.deviantart.com/" target="_blank">Deviant</a></div> </div> </td> </tr> <tr> <td> <div class="infobulle"> <img class="avatar" src="http://image.noelshack.com/fichiers/2016/08/1456417003-1456401539-avatarchup.jpg" alt="avatar Chup" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u54" target="_blank">Profil</a> | <a href="http://skittlesart.deviantart.com/" target="_blank">Deviant</a></div> </div> </td> <td> <div class="infobulle"> <img class="avatar" src="http://www.zupimages.net/up/16/17/9yqz.png" alt="avatar S.Yuuki" /> <div class="texte_infobulle"><a href="http://imaginationoverflow.forumactif.org/u34" target="_blank">Profil</a> | <a href="http://s-yuuki.deviantart.com/" target="_blank">Deviant</a></div> </div> </td> <td> </td> <td> </td> </tr> </table> </div>
<!-- CONTENU 4EME ONGLET : PRESENTATION DU MEMBRE --> <div class="contenu_onglet" id="contenu_onglet_4eme"> <div class="presentation"> <div class="prez-image" style="background-image: url('http://image.noelshack.com/fichiers/2016/08/1456485635-2894hedge.jpg')"></div> <div class="prez-titre">Présentation</div> <div class="prez-contenu"> <div class="prez-overflow"> Je suis Hedge, AMV Maker depuis 2012 et membre de la IOT depuis 2 ans. J'étudie en Production & PostProduction Télévisuelle et j'habite au Canada! J'adore Slaine, car il est trop stylé, et tout ce qui se prête à la noblesse et la royauté! Certains me considèrent comme un gros troll, allez savoir pourquoi...</div> </div> </div> </div> </div>
<!-- LIENS DE BAS DE SIGNA --> <div class="links"> <table align="center" class="button_table"> <tr> <td><span class="button"><a href="https://www.youtube.com/user/HedgeProductionAMV" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png" alt="blogger" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017340-youtube.png';" /></a></span></td> <td><span class="button"><a href="https://www.facebook.com/HedgeProductionAMV/?ref=ts&fref=ts" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png" alt="facebook" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017825-facebook-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449017826-facebook.png';" /></a></span></td> </tr> </table> </div> <script type="text/javascript"> //<!-- var anc_onglet = '1er'; change_onglet(anc_onglet); //--> </script>
</body>
</html> Code iframe - Code:
-
<iframe src="LIEN SIGNA N°2" frameborder="0" scrolling="no" style="width: 600px; height: 300px;"></iframe> |
| Messages : 3377 Date d'inscription : 27/09/2013 Age : 32
|