<!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>
<link href='https://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<style type="text/css">
/* ONGLETS */
.onglets
{
position: absolute;
z-index: 10;
magin-top:10px;
margin-left:10px;
font-family: 'Six Caps', sans-serif;
letter-spacing: 2px;
}
#onglet_1er
{
position: absolute;
z-index:5;
top:30px;
display:inline-block;
background:#686868;
border-radius:50%;
width:20px;
height:20px;
border:9px solid #424242;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
color:transparent;
}
#onglet_2eme
{
position: absolute;
z-index:5;
top:80px;
display:inline-block;
background:#989898;
border-radius:50%;
width:20px;
height:20px;
border:9px solid #686868;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
color:transparent;
}
#onglet_3eme
{
position: absolute;
z-index:5;
top:130px;
display:inline-block;
background:#d1d1d1;
border-radius:50%;
width:20px;
height:20px;
border:9px solid #989898;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
color:transparent;
}
#onglet_4eme
{
position: absolute;
z-index:5;
top:180px;
display:inline-block;
background:#ffffff;
border-radius:50%;
width:20px;
height:20px;
border:9px solid #d1d1d1;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
color:transparent;
}
#onglet_1er:hover, #onglet_2eme:hover, #onglet_3eme:hover, #onglet_4eme:hover
{
width:25px;
height:25px;
border-radius:50%;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
}
/* CONTENU DES ONGLETS */
.signa
{
position:relative;
z-index: 4;
height : 250px;
width : 545px;
left:25px;
font-family: 'Fjalla One', sans-serif;
}
.contenu_onglet
{
position:relative;
z-index: 3;
height : 250px;
width : 545px;
overflow: auto;
display: none;
color:#000000;
text-shadow: 1px 1px 2px white;
margin-right:-10px!important;
border:4px solid #131313;
border-left: 10px solid #131313;
border-right: 10px solid #131313;
background-image:linear-gradient(rgba(231,231,231,1), rgba(171,171,171,1), rgba(111,111,111,1), rgba(51,51,51,1));
}
/* CONTENU ONGLET 1 : SIGNA */
#contenu_onglet_1er img, #contenu_onglet_2eme img
{
position: relative;
top:30px;
}
/* CONTENU ONGLET 3 : IOT */
.prez-titre2
{
margin-bottom: 10px;
margin-top:5px;
padding-left:170px;
text-align: center;
font-size: 1.6em;
font-style: bold;
font-variant: small-caps;
}
.prez-image2
{
max-width: 0px;
max-height: 0px;
}
.prez-image2 img
{
position:absolute;
top: -2px;
left:-25px;
max-width: 175px;
max-height: 175px;
}
.prez-contenu2
{
left: 90px;
top: -5px;
width: 300px;
max-height:150px;
padding: 10px 5px 10px 10px;
font-size: 13px;
line-height: 1.5;
position: relative;
background-image:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5));
}
.prez-overflow2
{
max-height: 150px;
overflow: auto;
}
.button2 img
{
width: 75px;
height:auto;
padding-left:10px;
padding-right:10px;
padding-top: 5px;
margin-bottom:-5px
}
.imgPA
{
width: 90px;
height: 90px;
padding:5px;
align:center;
}
.titrePA1
{
font-size:18px;
text-shadow: 1px 1px 2px white!important;
line-height: 1.5;
}
.info
{
position: relative;
z-index: 24;
text-decoration: none;
font-size:13px;
text-shadow: none!important;
}
c.info:hover
{
z-index: 25;
}
c.info span
{
display: none;
}
c.info:hover span
{
display: block;
position: absolute;
top: -6.4em;
left: 0.4em;
width: 90px;
height: 90px;
background-image: linear-gradient(rgba(51,51,51,.9), rgba(51,51,51,.9));
background-size:90px 90px;
color: #F3F3F3;
text-align: center;
font-weight: none;
}
/* CONTENU ONGLET 4 : PREZ */
.presentation
{
position: relative;
width: 85%;
}
.prez-titre
{
margin-bottom: 10px;
margin-top:5px;
text-align: center;
font-size: 1.6em;
font-style: bold;
font-variant: small-caps;
}
.prez-image
{
position: absolute;
z-index: 4;
top: 55px;
left:-10px;
width: 150px;
height: 150px;
background-size: cover;
background-position: top;
}
.prez-contenu
{
left: 90px;
top: 5px;
width: 300px;
max-height:150px;
padding: 10px 5px 10px 10px;
font-size: 13.3px;
line-height: 1.5;
position: relative;
background-image:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5));
}
.prez-overflow
{
max-height: 150px;
overflow: auto;
}
.prezname
{
font-style: bold;
font-variant: small-caps;
text-decoration: underline;
}
.button img
{
width: 75px;
height:auto;
padding-left:15px;
padding-right:15px;
top:0px;
}
/*SCROLLBAR SUR CHROME */
.contenu_onglet::-webkit-scrollbar,
.prez-overflow::-webkit-scrollbar,
.prez-overflow2::-webkit-scrollbar
{
width: 5px;
}
.contenu_onglet::-webkit-scrollbar-track,
.prez-overflow::-webkit-scrollbar-track,
.prez-overflow2::-webkit-scrollbar-track
{
background: rgba(255,255,255,0.5);
}
.contenu_onglet::-webkit-scrollbar-thumb,
.prez-overflow::-webkit-scrollbar-thumb,
.prez-overflow2::-webkit-scrollbar-thumb
{
background: rgba(255,255,255,.9);
}
/* COULEUR DES LIENS */
a, a:link, a:active, a:visited
{
text-decoration: none!important;
color: #ffffff!important;
}
a:hover
{
text-decoration: none!important;
color: #989898!important;
}
/* SOUTENEZ LES BLEUS */
.soutenezlesbleus
{
position:relative;
z-index:1;
font-family: 'Fjalla One', sans-serif;
font-size:25px;
text-align: center;
top:-60px;
left:10px;
color:#0000ff;
border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
}
.soutenezlesbleus img
{
position:relative;
z-index:2;
max-width:50px;
}
.soutenezlesbleus:hover
{
top:0px;
-webkit-transition: 300ms;
-moz-transition: 300ms;
transition: 300ms;
}
/* COPYRIGHT */
.copyright
{
position:absolute;
z-index:5;
font-family: 'Fjalla One', sans-serif;
font-size: 12px;
top:203px;
left:525px;
color: rgba(255,255,255,.5);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
</head>
<body>
<div class="copyright">Codage par Alexielios</div>
<!-- TITRE DES ONGLETS -->
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');"></span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');"></span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');"></span>
<span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');"></span>
</div>
<div class="signa">
<!-- CONTENU 1ER ONGLET : SIGNATURE -->
<div class="contenu_onglet" id="contenu_onglet_1er" align="center">
<!-- DEBUT CONTENU ONGLET -->
<img src="http://image.noelshack.com/fichiers/2016/06/1454942289-duo-kit-with-chupxdeath-5.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/21/1464088305-hestia.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/21/1464088313-deathv2.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/21/1464088330-signatureteamv1.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/21/1464088395-c39c1893dbebec4de3e489a9b52aa862.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/21/1464088365-loriiiis.jpg" alt=""/><br/>
<br/>
<br/>
<!-- FIN CONTENU ONGLET -->
</div>
<!-- CONTENU 2EME ONGLET : CADEAUX -->
<div class="contenu_onglet" id="contenu_onglet_2eme" align="center">
<!-- DEBUT CONTENU ONGLET -->
<img src="http://image.noelshack.com/fichiers/2016/19/1463325232-sabo-fire.png" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/15/1460619194-c39c1893dbebec4de3e489a9b52aa862.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/15/1460619300-1457466941-dedeath.png" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/15/1460619190-5d6e9da5e4c9c98dd9ee0394bddc1802.jpg" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/13/1459330928-kit-death-signa-1.png" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2016/10/1457458432-signature-misaka-mikoto-by-yusukegraph-d9uhfa5.png" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2015/50/1449674612-signa-for-deathfire-v2.png" alt=""/><br/>
<br/>
<img src="http://image.noelshack.com/fichiers/2015/50/1449773460-crea-dethfire.png" alt=""/><br/>
<br/>
<br/>
<!-- FIN CONTENU ONGLET -->
</div>
<!-- CONTENU 3EME ONGLET : IOT -->
<div class="contenu_onglet" id="contenu_onglet_3eme" align="center">
<!-- DEBUT CONTENU ONGLET -->
<div class="presentation">
<div class="prez-image2"><img src="http://nsa38.casimages.com/img/2016/06/29/160629113352713499.png" alt=""/></div>
<div class="prez-titre2">La IOT</div>
<div class="prez-contenu2">
<div class="prez-overflow2">
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>
<span class="button2"><a href="http://ioteam.deviantart.com/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png" alt="deviantart" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-deviantart-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png';" /></a></span>
</div>
</div>
</div>
<div class="avatarmembre">
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448913337-avatarkeint.jpg" alt="avatar Keintseru" class="imgPA" />
<span><br />
<d class="titrePA1">Keintseru</d><br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u4" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/SwordBankai1" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1449055543-avatar-azazel.jpg" alt="avatar Azazel" class="imgPA" />
<span><br />
<d class="titrePA1">Azazel</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u58" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/ahmedjarid" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448886953-avatarama.jpg" alt="avatar Amariyo" class="imgPA" />
<span><br />
<d class="titrePA1">Amariyo</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u98" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/Amaryio" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448899809-avatarluubioo.jpg" alt="avatar LuubiOo" class="imgPA" />
<span><br />
<d class="titrePA1">LuubiOo</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u32" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/LuubiOo" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1449054916-avatar-xeno.jpg" alt="avatar Xeno" class="imgPA" />
<span><br />
<d class="titrePA1">Xeno</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u30" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/02Lyric" target="_blank">Youtube</a>
</div>
</span>
</c>
<br/>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448887405-avataretov2jpg.jpg" alt="avatar ETO" class="imgPA" />
<span><br />
<d class="titrePA1">ETO</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u119" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/tehCruumby" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2016/08/1456341117-avayuki.jpg" alt="avatar AzukaYuki" class="imgPA" />
<span><br />
<d class="titrePA1">AzukaYuki</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u61" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/AnimeFanGirl199/featured" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448887502-avatarlachevrolait.jpg" alt="avatar Lachèvre" class="imgPA" />
<span><br />
<d class="titrePA1">Lachevrolait</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u100" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/user/Lachevrolait" target="_blank">Youtube</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1449054914-avatar-yu-kun.jpg" alt="avatar Yu-Kun" class="imgPA" />
<span><br />
<d class="titrePA1">Yu-Kun</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u3" target="_blank">Profil</a><br />
<a href="http://yuu-graphique.deviantart.com/" target="_blank">Deviant</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2016/08/1456485635-2894hedge.jpg" alt="avatar HedgeProduction" class="imgPA" />
<span><br />
<d class="titrePA1">Hedge</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u28" target="_blank">Profil</a><br />
<a href="https://www.youtube.com/channel/UCii8lhFAQZFxm5xVwp7pIcA" target="_blank">Youtube</a>
</div>
</span>
</c>
<br />
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/49/1448992301-avatar-alex-by-death.jpg" alt="avatar Alexielios" class="imgPA" />
<span><br />
<d class="titrePA1">Alexielios</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u45" target="_blank">Profil</a><br />
<a href="http://alexielios.deviantart.com/" target="_blank">Deviant</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2015/48/1448739391-avatarteam.jpg" alt="avatar Deathfire" class="imgPA" />
<span><br />
<d class="titrePA1">Deathfire</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u117" target="_blank">Profil</a><br />
<a href="http://deathfireiot.deviantart.com/" target="_blank">Deviant</a>
</div>
</span>
</c>
<c class="info">
<img src="http://image.noelshack.com/fichiers/2016/08/1456417003-1456401539-avatarchup.jpg" alt="avatar Chup'" class="imgPA" />
<span><br />
<d class="titrePA1">Chup'</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u54" target="_blank">Profil</a><br />
<a href="http://skittlesart.deviantart.com/" target="_blank">Deviant</a>
</div>
</span>
</c>
<c class="info">
<img src="http://www.zupimages.net/up/16/17/9yqz.png" alt="avatar S.Yuuki" class="imgPA" />
<span><br />
<d class="titrePA1">S.Yuuki</d> <br />
<div class ="linkmembre">
<a href="http://imaginationoverflow.forumactif.org/u34" target="_blank">Profil</a><br />
<a href="http://s-yuuki.deviantart.com/" target="_blank">Deviant</a>
</div>
</span>
</c>
</div>
<!-- FIN CONTENU ONGLET -->
</div>
<!-- CONTENU 4EME ONGLET : PRESENTATION -->
<div class="contenu_onglet" id="contenu_onglet_4eme" align="center">
<!-- DEBUT CONTENU ONGLET -->
<div class="presentation">
<div class="prez-image" style="background-image: url('http://image.noelshack.com/fichiers/2016/21/1464089033-160414010753454456.jpg')"></div>
<div class="prez-titre">Présentation</div>
<div class="prez-contenu">
<div class="prez-overflow">
<span class="prezname">Pseudo</span> : Deathfire <br/>
<span class="prezname">Age</span> : 22ans <br/>
<span class="prezname">Fonction</span> : Héros de la hestia familia <br/>
<span class="prezname">Hobbies</span> : Graphs, Jeuxvideo, Animes, mangas, dessins <br/>
<span class="prezname">Autre</span> : Les gros boobs c'est la vie Hestia <3 <br/>
<br/>
<span class="button"><a href="http://deathfireiot.deviantart.com/" target="_blank"><img src="http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png" alt="deviantart" onmouseover="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010090-deviantart-on.png';" onmouseout="javascript:this.src='http://image.noelshack.com/fichiers/2015/49/1449010091-deviantart.png';" /></a></span>
<span class="button"><a href="https://www.youtube.com/channel/UCYkfAL32du1HdDNeeLn-5Cg/feed?activity_view=7" 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>
</div>
</div>
<!-- FIN CONTENU ONGLET -->
</div>
</div>
<div class="soutenezlesbleus">
SOUTENEZ LES BLEUS !<br/>
<img src="http://nsa37.casimages.com/img/2016/05/26/16052612405670254.png"/>
</div>
<script type="text/javascript">
//<!--
var anc_onglet = '1er';
change_onglet(anc_onglet);
//-->
</script>
</body>
</html>
