Old stuff/old_sites/pingu_html/index.html
(Deskargatu)
<html>
<head>
<title>Pingu in css</title>
<style type="text/css">
div.pingu span
{
display:block;
position:absolute;
z-index:6;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.bec1, .bec2
{
top:62px;
left:50px;
height:27px;
width:100px;
background:#ff901d;
-moz-border-radius: 200px / 100px;
-webkit-border-radius: 200px / 100px;
-khtml-border-radius: 200px / 100px;
border-radius: 200px / 100px;
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
-ms-transform:rotate(10deg);
z-index:6;
}
.bec2
{
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
top:49px;
}
.bec1
{
box-shadow:-1px 8px 20px black;
}
.tete
{
box-shadow:3px 3px 10px black;
left:88px;
top:15px;
background:black;
width:112px;
height:86px;
-moz-border-radius: 120px / 100px;
-webkit-border-radius: 120px / 100px;
-khtml-border-radius: 120px / 100px;
border-radius: 120px / 100px;
z-index:6;
}
.yeux1
{
z-index:6;
background:white;
width:23px;
height:25px;
-moz-border-radius: 25px / 25px;
-webkit-border-radius: 25px / 25px;
-khtml-border-radius: 25px / 25px;
border-radius: 25px / 25px;
left:100px;
top:34px;
}
.yeux2
{
z-index:6;
background:black;
width:14px;
height:15px;
-moz-border-radius: 15px / 15px;
-webkit-border-radius: 15px / 15px;
-khtml-border-radius: 15px / 15px;
border-radius: 15px / 15px;
left:104px;
top:43px;
}
.wood
{
box-shadow:-3px 3px 22px black;
border:2px solid black;
background:#c18341;
width:350px;
height:10px;
-moz-border-radius: 20px / 20px;
-webkit-border-radius: 20px / 20px;
-khtml-border-radius: 20px / 20px;
border-radius: 20px / 20px;
left:0px;
top:85px;
z-index:7 !important;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
}
.body1, .body2
{
box-shadow:-3px -2px 24px black;
background:black;
width:100px;
height:157px;
top:107px;
left:86px;
-moz-border-radius: 63px / 100px;
-webkit-border-radius: 63px / 100px;
-khtml-border-radius: 63px / 100px;
border-radius: 63px / 100px;
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
}
.body2
{
background:black;
width:125px;
height:100px;
top:165px;
left:90px;
-moz-border-radius: 43px / 48px;
-webkit-border-radius: 43px / 48px;
-khtml-border-radius: 43px / 48px;
border-radius: 43px / 48px;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
}
.dos1
{
background:black;
top:95px;
left:140px;
-moz-border-radius: 23px / 34px;
-webkit-border-radius: 23px / 34px;
-khtml-border-radius: 23px / 34px;
border-radius: 23px / 34px;
-moz-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
-o-transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
width:53px;
height:125px;
}
.queue1
{
background:black;
top:205px;
left:162px;
-moz-border-radius: 32px / 34px;
-webkit-border-radius: 32px / 34px;
-khtml-border-radius: 32px / 34px;
border-radius: 32px / 34px;
-moz-transform:rotate(88deg);
-webkit-transform:rotate(88deg);
-o-transform:rotate(88deg);
-ms-transform:rotate(88deg);
width:51px;
height:71px;
}
.queue_white1
{
background:white;
top:87px;
left:196px;
-moz-border-radius: 95px / 88px;
-webkit-border-radius: 95px / 88px;
-khtml-border-radius: 95px / 88px;
border-radius: 95px / 88px;
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
width:200px;
height:200px;
}
.epaule1
{
border:1px solid white;
width:42px;
height:135px;
-moz-border-radius: 30px / 100px;
-webkit-border-radius: 30px / 100px;
-khtml-border-radius: 30px / 100px;
border-radius: 30px / 100px;
-moz-transform:rotate(-11deg);
-webkit-transform:rotate(-11deg);
-o-transform:rotate(-11deg);
-ms-transform:rotate(-11deg);
left:133px;
top:110px;
}
.epaule_black1
{
background:black;
width:34px;
height:40px;
top:105px;
left:115px;
}
.cheville1
{
background:#ff901d;
width:14px;
height:53px;
-moz-border-radius: 17px / 100px;
-webkit-border-radius: 17px / 100px;
-khtml-border-radius: 17px / 100px;
border-radius: 17px / 100px;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
left:151px;
top:229px;
z-index:4 !important;
border:1px solid white;
}
.cheville2
{
background:#966026;
width:14px;
height:53px;
left:132px;
top:220px;
-moz-border-radius: 17px / 100px;
-webkit-border-radius: 17px / 100px;
-khtml-border-radius: 17px / 100px;
border-radius: 17px / 100px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
z-index:4 !important;
border:1px solid white;
}
.pied1
{
box-shadow:-8px 6px 19px black;
background:#966026;
width:110px;
height:19px;
-moz-border-radius: 98px / 40px;
-webkit-border-radius: 98px / 40px;
-khtml-border-radius: 98px / 40px;
border-radius: 98px / 40px;
-moz-transform:rotate(1deg);
-webkit-transform:rotate(1deg);
-o-transform:rotate(1deg);
-ms-transform:rotate(1deg);
left:59px;
top:271px;
z-index:3 !important;
}
.pied2
{
box-shadow:-3px 6px 22px black;
z-index:3 !important;
background:#ff901d;
width:114px;
height:19px;
top:275px;
left:61px;
border:1px solid white;
-moz-border-radius: 87px / 28px;
-webkit-border-radius: 87px / 28px;
-khtml-border-radius: 87px / 28px;
border-radius: 87px / 28px;
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
}
.bras1
{
box-shadow:-6px -1px 20px black;
z-index:3 !important;
background:black;
width:45px;
height:106px;
top:68px;
left:72px;
-moz-border-radius: 47px / 68px;
-webkit-border-radius: 47px / 68px;
-khtml-border-radius: 47px / 68px;
border-radius: 47px / 68px;
-moz-transform:rotate(-102deg);
-webkit-transform:rotate(-102deg);
-o-transform:rotate(-102deg);
-ms-transform:rotate(-102deg);
}
.bras2
{
z-index:7 !important;
background:black;
width:24px;
height:35px;
top:81px;
left:43px;
border-left:1px solid white;
-moz-border-radius: 47px / 68px;
-webkit-border-radius: 47px / 68px;
-khtml-border-radius: 47px / 68px;
border-radius: 47px / 68px;
-moz-transform:rotate(-102deg);
-webkit-transform:rotate(-102deg);
-o-transform:rotate(-102deg);
-ms-transform:rotate(-102deg);
}
.bras3
{
z-index:3 !important;
background:black;
width:49px;
height:41px;
top:94px;
left:34px;
-moz-border-radius: 47px / 68px;
-webkit-border-radius: 47px / 68px;
-khtml-border-radius: 47px / 68px;
border-radius: 47px / 68px;
-moz-transform:rotate(-102deg);
-webkit-transform:rotate(-102deg);
-o-transform:rotate(-102deg);
-ms-transform:rotate(-102deg);
}
.sac1
{
z-index:6 !important;
background:red;
width:61px;
height:53px;
top:82px;
left:263px;
-moz-border-radius: 85px / 57px;
-webkit-border-radius: 85px / 57px;
-khtml-border-radius: 85px / 57px;
border-radius: 85px / 57px;
-moz-transform:rotate(-68deg);
-webkit-transform:rotate(-68deg);
-o-transform:rotate(-68deg);
-ms-transform:rotate(-68deg);
}
.sac2
{
z-index:6 !important;
background:red;
width:76px;
height:83px;
top:85px;
left:265px;;
-moz-border-radius: 71px / 68px;
-webkit-border-radius: 71px / 68px;
-khtml-border-radius: 71px / 68px;
border-radius: 71px / 68px;
-moz-transform:rotate(-97deg);
-webkit-transform:rotate(-97deg);
-o-transform:rotate(-97deg);
-ms-transform:rotate(-97deg);
}
.sac3
{
z-index:6 !important;
background:red;
width:74px;
height:53px;
top:85px;
left:273px;
-moz-border-radius: 71px / 68px;
-webkit-border-radius: 71px / 68px;
-khtml-border-radius: 71px / 68px;
border-radius: 71px / 68px;
-moz-transform:rotate(-134deg);
-webkit-transform:rotate(-134deg);
-o-transform:rotate(-134deg);
-ms-transform:rotate(-134deg);
}
</style>
<body>
<div class="pingu">
<span class="bec1"></span>
<span class="bec2"></span>
<span class="tete"></span>
<span class="yeux1"></span>
<span class="yeux2"></span>
<span class="wood"></span>
<span class="body1"></span>
<span class="body2"></span>
<span class="dos1"></span>
<span class="queue1"></span>
<span class="queue_white1"></span>
<span class="epaule1"></span>
<span class="epaule_black1"></span>
<span class="cheville2"></span>
<span class="cheville1"></span>
<span class="pied1"></span>
<span class="pied2"></span>
<span class="bras1"></span>
<span class="bras2"></span>
<span class="bras3"></span>
<!--
<span class="sac1"></span>
<span class="sac2"></span>
<span class="sac3"></span>
-->
</body>
</html>
Tfe