<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<title>Signature Levina - Libre Graph</title>
<style>
html {
position: absolute;
height: 100%;
width: 100%;
}
body {
margin: 0;
background: transparent;
font-family: Ubuntu;
}
* {
transition: all 0.3s;
}
#wrap {
width: 590px;
height: 340px;
margin: 5px;
border: 5px solid rgba(255,255,255,0.5);
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1) inset;
overflow: hidden;
background: url('http://img11.hostingpics.net/pics/810391signature.png');
background-position: -10px -10px;
background-size: 605px 355px;
position: relative;
}
#wrap:hover .titre {
transform: scale(5);
opacity: 0;
transition-delay: 0s;
}
.titre {
font-weight: 900;
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
margin-top: 200px;
height: 100px;
text-align: center;
text-shadow: 0px 0px 20px rgba(0,0,0,1);
transition-delay: 0.3s;
}
.titre div:nth-child(1) {
font-size: 50px;
color: darkred;
}
.onglet {
width: 116px;
height: 340px;
background: rgba(0,0,0,0.3);
display: inline-block;
border-left: 1px solid rgba(255,255,255,0.2);
border-right: 1px solid rgba(0,0,0,0.2);
position: absolute;
z-index: 1;
overflow: hidden;
transition-delay: opacity 0.3s;
}
.onglet:nth-child(2) {
margin-left: 118px;
}
.onglet:nth-child(3) {
margin-left: 236px;
}
.onglet:nth-child(4) {
margin-left: 354px;
}
.onglet:nth-child(5) {
margin-left: 472px;
}
.signature {
transform: scale(5);
opacity: 0;
transition-delay: 0s;
}
#wrap:hover .signature {
transform: scale(1);
opacity: 1;
transition-delay: 0.3s;
}
.onglet .menu_lien {
display: inline-block;
width: 116px;
height: 340px;
overflow: hidden;
text-decoration: none;
}
.onglet .menu_lien .menu_lien_effect {
color: rgba(255,255,255,0.7);
text-shadow: 0px 0px 5px rgba(0,0,0,1);
font-size: 45px;
transform: rotate(-90deg);
position: absolute;
width: 340px;
height: 116px;
margin-left: -112px;
line-height: 2.2;
margin-top: 112px;
text-align: center;
}
.close {
position: absolute;
z-index: 4;
text-decoration: none;
font-size: 30px;
transform: rotate(-45deg);
color: white;
margin-left: 558px;
}
.close:hover {
color: darkred;
}
.menu_lien:hover {
box-shadow: 0px 0px 5px #000 inset;
background: rgba(0,0,0,0.3);
}
.menu_lien:hover .menu_lien_effect {
color: rgba(255,255,255,1);
}
.target:target ~ .signature .menu_lien {
box-shadow: 0px 0px 5px #000 inset;
background: rgba(0,0,0,0.3);
}
.target:target ~ .signature .menu_lien .menu_lien_effect {
color: rgba(255,255,255,1);
}
.target:target ~ .signature .onglet {
opacity: 0;
}
#t1:target ~ .signature .onglet:nth-child(1) {
opacity: 1;
width: 590px;
height: 340px;
z-index: 2;
margin-left: 0px;
transition-delay: 0.3s;
}
#t2:target ~ .signature .onglet:nth-child(2) {
opacity: 1;
width: 590px;
height: 340px;
z-index: 2;
margin-left: 0px;
transition-delay: 0.3s;
}
#t3:target ~ .signature .onglet:nth-child(3) {
opacity: 1;
width: 590px;
height: 340px;
z-index: 2;
margin-left: 0px;
transition-delay: 0.3s;
}
#t4:target ~ .signature .onglet:nth-child(4) {
opacity: 1;
width: 590px;
height: 340px;
z-index: 2;
margin-left: 0px;
transition-delay: 0.3s;
}
#t5:target ~ .signature .onglet:nth-child(5) {
opacity: 1;
width: 590px;
height: 340px;
z-index: 2;
margin-left: 0px;
transition-delay: 0.3s;
}
#target_reset:target ~ .signature .onglet {
transition: all 0.3s linear 0s, opacity 0.3s linear 0.3s;
}
.content {
float: right;
padding: 5px;
width: 464px;
height: 330px;
}
</style>
<meta charset="utf-8" />
</head>
<body>
<div id="wrap">
<div class="titre">
<div>LEVINA</div>
<div>CODEUSE</div>
</div>
<div class="target" id="t1"></div>
<div class="target" id="t2"></div>
<div class="target" id="t3"></div>
<div class="target" id="t4"></div>
<div class="target" id="t5"></div>
<div id="target_reset"></div>
<div class="signature">
<div class="onglet">
<a href="#target_reset" class="close">+</a>
<a href="#t1" class="menu_lien">
<div class="menu_lien_effect">Qui suis-je ?</div>
</a>
<div class="content">
Joyeux Noël ! ♥<br />
J'espère que ton cadeau te plaira. ^^
Je ne savais pas quoi te mettre comme contenu, désolé. :S
</div>
</div><!--
--><div class="onglet">
<a href="#target_reset" class="close">+</a>
<a href="#t2" class="menu_lien">
<div class="menu_lien_effect">Liens utiles</div>
</a>
<div class="content">
Contenu !
</div>
</div><!--
--><div class="onglet">
<a href="#target_reset" class="close">+</a>
<a href="#t3" class="menu_lien">
<div class="menu_lien_effect">Cadeaux</div>
</a>
<div class="content">
Contenu !
</div>
</div><!--
--><div class="onglet">
<a href="#target_reset" class="close">+</a>
<a href="#t4" class="menu_lien">
<div class="menu_lien_effect">Créations</div>
</a>
<div class="content">
Contenu !
</div>
</div><!--
--><div class="onglet">
<a href="#target_reset" class="close">+</a>
<a href="#t5" class="menu_lien">
<div class="menu_lien_effect">Besoin d'aide ?</div>
</a>
<div class="content">
Contenu !
</div>
</div>
</div>
</div>
</body>
</html>
Accueil 
Dim 25 Déc - 23:37 
