<div class="content">
<div class="sky">
<div class="moun m1"></div>
<div class="moun m2"></div>
<div class="moun m3"></div>
<div class="cloud c1"></div>
<div class="cloud c2"></div>
<div class="cloud c3"></div>
<div class="cloud c4"></div>
</div>
<div class="floor">
<div class="under_floor">
</div>
</div>
<div class="tunel _1"></div>
<div class="tunel _2"></div>
<div class="supermario">
<div class="head">
<div class="chap"></div>
<div class="hear"></div>
<div class="eye e1"></div>
<div class="eye e2"></div>
</div>
<div class="foot">
<div class="fo1"></div>
<div class="fo2"></div>
<div class="f1"></div>
<div class="f2"></div>
</div>
<div class="body">
<div class="tri"></div>
<div class="bra b1"></div>
<div class="bra b2"></div>
</div>
</div>
<div class="trie _t1"></div>
<div class="trie _t2"></div>
<div class="trie _t3"></div>
<div class="trie _t4"></div>
<div class="trie _t5"></div>
<div class="trie _t6"></div>
<div class="trie _t7"></div>
<div class="trie _t8"></div>
<div class="trie _t9"></div>
<div class="trie _t10"></div>
<div class="rbu r1"></div>
<div class="rbu r2"></div>
<div class="rbu r3"></div>
<div class="rbu r4"></div>
<div class="rbu r5"></div>
<div class="rbu r6"></div>
<div class="rbu r7"></div>
<div class="ground g1"></div>
<div class="ground g2"></div>
<div class="score">24431</div>
<div class="pause"></div>
<footer>
<label><a href="http://www.facebook.com/biodos">Created By :Hajji Tarek</a></label>
</footer>
*{
*{
padding:0px;
}
a{
font-weight:bold;
color:#fff;
font-size:11px;
text-decoration:none;
margin:10px;
}
.pause
{
background:#e56400;
position:absolute;
height:52px;
width:52px;
margin:10px;
border:2px solid #5c4600;
left:90%;
border-bottom:4px solid #542801;
box-shadow: 1px 1px 1px white inset;
}
.pause:after , .pause:before
{
content:'';
position:absolute;
background:#fff;
width:15px;
height:45px;
z-index:1;
margin-left:8px;
margin-top:4px;
border-bottom:1px solid #ad4007;
}
.pause:before {
margin-left:30px;
}
/* Wood Base Gradient */
body {
background-color:#D1A46B;
background-image: radial-gradient(#D1A46B,#B57744);
background-size: 100%;
background-image:
linear-gradient(0,transparent 97%, rgba(214, 171, 119, 0.5) 97%),
linear-gradient(0,transparent 93%, rgba(173, 97, 54, 0.45) 93%),
linear-gradient(0,transparent 97%, rgba(214, 171, 119, 0.9) 97%);
background-size: 40px;
}
.content{
height:600px;
width:1000px;
background:background: #a9e4f7; /* Old browsers */
background: linear-gradient(top, #a9e4f7 0%, #0fb4e7 33%, #0e8ed3 35%, #0e8ed3 57%, #76c1b7 68%, #d1b673 77%, #d1b673 100%); /* FF3.6+ */
background: gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7), color-stop(35%,#0e8ed3), color-stop(57%,#0e8ed3), color-stop(68%,#76c1b7), color-stop(77%,#d1b673), color-stop(100%,#d1b673)); /* Chrome,Safari4+ */
border:1px solid #eee;
position:relative;
overflow:hidden;
border:rgb(20,20,20) solid;
border-top:80px solid rgb(20,20,20);
border-left:20px solid rgb(20,20,20);
border-right:20px solid rgb(20,20,20);
border-bottom:100px solid rgb(20,20,20);
border-radius:30px;
box-shadow:0px 1px 0px rgb( 106, 106, 106),
1px 0px 0px rgb(106, 106, 106),
-1px 1px 0px rgb(106, 106, 106),
0px -1px 0px rgb(106, 106, 106),
-1px -1px #AAA,
1px 1px #333,
1px 1px #888 inset,
-1px -1px #bbb inset,
10px 10px 50px 0 #111,
inset 10px 10px 10px rgba(0,0,0,.2)
;
margin:50px auto;
}
.sky{
width:100%;
height:400px;
position:absolute;
z-index:2;
}
.moun{
width: 500px;
height: 700px;
background:#afb09e;
transform :rotate(45deg);
position:absolute;
top:180px;
box-shadow:inset 10px 10px 0px #cdd4c4,
inset 20px 20px 0px #c5c3b4;
border-radius:70px;
}
.m1{
width: 500px;
height: 700px;
background:#afb09e;
transform :rotate(45deg);
position:absolute;
top:180px;
left:500px;
border-radius:70px;
}
.m2{
width: 500px;
height: 700px;
background:#afb09e;
transform :rotate(45deg);
position:absolute;
top:180px;
left:00px;
border-radius:70px;
z-index:2;
}
.m3{
width: 700px;
height: 1000px;
background:#afb09e;
transform :rotate(45deg);
position:absolute;
top:120px;
left:-400px;
border-radius:70px;
}
.floor{
width:100%;
height:200px;
position:absolute;
top:400px;
z-index:3;
box-shadow:inset 10px 10px 10px rgba(0,0,0,.2),
inset -10px 10px 10px rgba(0,0,0,.2);
}
/* Tarek Hajji */
.supermario{
width:100px;
height:300px;
z-index:100;
position:absolute;
margin-top:90px;
}
.head{
width:75px;
height:70px;
background:#f5c191;
border-radius:50%;
position:absolute;
box-shadow:2px 3px 0px #000,
2px -1px 0px #000,
inset 4px -4px 0px #ea8e5f;
margin-top:80px;
margin-left:95px
}
.head:after{
content:"";
width:40px;
height:10px;
background:#000;
position:absolute;
left:50%;
top:60%;
border-radius:20% 40% 30% 100%;
transform : rotate(5deg);
z-index:3;
}
.head:before{
content:"";
width:35px;
height:25px;
background:#f5c191;
position:absolute;
left:75%;
top:27%;
border-radius:40% 50% 50% 40%;
z-index:5;
box-shadow:2px 3px 0px #000,
2px -1px 0px #000,
inset -2px -3px 0px #ea8e5f;
transform : rotate(10deg);
}
.eye{
width:20px;
height:20px;
background:#fff;
position:absolute;
z-index:3;
}
.e1{
width:10px;
height:10px;
background:#fff;
position:absolute;
left:80%;
top:10px;
border-radius:50% 60% 50% 60%;
}
.e2{
width:20px;
height:24px;
background:#fff;
position:absolute;
left:50%;
top:6px;
border-radius:60% 80% 60% 80%;
transform : rotate(-10deg);
box-shadow:inset 2px 1px 0px #F4F4F4,
0px -5px 0px #000
;
}
.e1:before{
content:"";
width:4px;
height:4px;
background:#000;
position:absolute;
border-radius:100%;
top:6px;
left:4px;
border-top:1px solid #1b9fed;
border-left:1px solid #1b9fed;
}
.e2:before{
content:"";
width:6px;
height:6px;
background:#000;
position:absolute;
border-radius:100%;
top:15px;
left:4px;
border-top:3px solid #1b9fed;
border-left:2px solid #1b9fed;
border-top:3px solid #1b9fed;
}
.chap{
width:86px;
height:70px;
background:#f5477a;
z-index:-1;
position:absolute;
top:-30px;
left:-20px;
border-radius:100% 60% 100% 100%;
transform:rotate(0deg);
border-top:5px solid #60000f;
box-shadow:inset -3px 0px 0px #60000f,
inset 0px -4px 0px #b0275b,
inset -11px 0px 0px #b0275b
;
}
.chap:before{
content:"";
width:20px;
height:20px;
background:#ffd862;
position:absolute;
top:5px;
left:55px;
border-radius:100%;
}
.chap:after{
content:"";
width:10px;
height:10px;
background:#fff;
position:absolute;
top:10px;
left:60px;
border-radius:100%;
}
.hear{
position:absolute;
width:80px;
height:80px;
background:#000;
left:-5px;
top:-12px;
border-radius:100%;
transform:rotate(40deg);
z-index:-1;
}
.hear:after{
content:"";
width:35px;
height:25px;
background:#f5c191;
position:absolute;
left:0px;
top:59%;
border-radius:40% 50% 50% 40%;
z-index:8;
box-shadow:2px 3px 0px #000,
2px -1px 0px #000,
inset -0px -5px 0px #ea8e5f;
transform : rotate(30deg);
}
.hear:before{
content:"";
width:10px;
height:10px;
background:#ea8e5f;
position:absolute;
left:11px;
top:73%;
border-radius:40% 50% 50% 40%;
z-index:9;
transform : rotate(30deg);
}
/*body*/
.body{
width:70px;
height:100px;
border-radius:40% 40% 100% 80%;
background:#0161cf;
margin-top:150px;
margin-left:90px;
z-index:-1;
position:absolute;
box-shadow:inset -10px 1px 0px #3591fa,
inset 0px 10px 0px #3591fa,
inset 0px -20px 0px #0859b4;
}
.body:after{
width:6px;
height:6px;
content:"";
background:#fff;
position:absolute;
left:30px;
top:35px;
border-radius:100%;
}
.body:before{
width:6px;
height:6px;
content:"";
background:#fff;
position:absolute;
left:60px;
top:35px;
border-radius:100%;
}
.tri{
background:#f84366;
width:30px;
height:40px;
position:absolute;
z-index:1;
left:35px;
border-radius:0% 50% 30% 40%;
box-shadow:-3px 3px 0px #d93152;
}
.bra{
background:#f84366;
position:absolute;
top:2px;
left:-3px;
}
.b1{
width:25px;
height:60px;
z-index:1;
transform: rotate(20deg);
border-radius:30% 50% 0% 0%;
box-shadow:-3px 3px 0px #d93152;
}
.b2{
width:25px;
height:30px;
left:70px;
z-index:-1;
transform: rotate(-100deg);
border-radius:0% 0% 100% 100%;
}
.b1:after ,.b2:after{
content:"";
width:22px;
height:20px;
background:#f8fef0;
position:absolute;
border-radius:100%;
border:3px solid #93561d;
box-shadow:inset 3px 4px 0px #c18955;
}
.b2:after{
left:-3px;
top:11px;
}
.b1:after{
content:"";
width:23px;
height:20px;
background:#f8fef0;
top:50px;
left:-3px;
position:absolute;
border-radius:100%;
border:3px solid #93561d;
}
.foot div{
position:absolute;
z-index:-1;
}
.f1{
background:#955228;
width:40px;
height:30px;
left:140px;
top:280px;
transform:rotate(-40deg);
box-shadow:inset 0px -10px 0px #000;
border-radius:5px 20px 10px 20px;
}
.f2{
top:280px;
background:#955228;
width:40px;
height:30px;
left:60px;
z-index:-5;
transform:rotate(70deg);
box-shadow:inset -5px -5px 0px #000;
border-radius:100% 20px 40px 20px;
}
.fo1{
width:25px;
height:50px;
top:245px;
left:127px;
transform: rotate(-20deg);
background:#3591fa;
box-shadow:inset 0px 20px rgba(8,89,180,.3);
}
.fo2{
width:25px;
height:66px;
top:225px;
left:82px;
transform: rotate(30deg);
background:#0859b4;
}
.floor{
background:#000;
height:100px;
width:100%;
}
/* Tarek Hajji */
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
border-radius: 200px;
border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
border-radius: 100px;
border-radius: 100px;
transform: rotate(30deg);
transform: rotate(30deg);
transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.c1 {
animation: moveclouds 15s linear infinite;
animation: moveclouds 15s linear infinite;
animation: moveclouds 15s linear infinite;
left:400px;
top:100px
}
.c3 {
z-index:-1;
left: 500px; top: 130px;
transform: scale(0.8);
transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
}
.c2 {
left: 200px;
transform: scale(0.6);
transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
}
.c4 {
left: 700px;
top:-100px;
transform: scale(0.6);
transform: scale(0.6);
transform: scale(0.6);
opacity: 1;
}
.floor
{
background:#ddd894;
border-top:5px solid #d6ba70;
height:300px;
}
.under_floor
{
border-top:40px dotted #6fb926;
box-shadow:1px 1px 1px #447f21;
background:#97e754;
}
.tunel
{
position:absolute;
height:180px;
width:60px;
margin-left:40px;
top:222px;
background:#74bf2e;
border:1px solid #74bf2e;
z-index:5;
box-shadow:inset 13px 0px 2px #9ae75b ,
inset 15px 0px 1px #f3fc85 ,
inset 18px 0px 2px #9ae75b ,
inset 19px 0px 2px #71bc2b ,
inset 21px 0px 2px #9ae75b ,
/*--------------------------------------*/
inset -14px 0px 1px #538127 ,
inset -16px 0px 1px #78c32a ,
inset -18px 0px 1px #4d7e22 ;
margin-top:-2px;
border:1px solid rgba(0,0,0,.2);
border-bottom:none;
}
._1:after , ._2:after
{
width:82px;
height:30px;
content:'';
z-index:6;
background:#74bf2e;
position:absolute;
margin:-14px 0px 0px -12px;
box-shadow:inset 13px 0px 2px #9ae75b ,
inset 15px 0px 1px #f3fc85 ,
inset 18px 0px 2px #9ae75b ,
inset 19px 0px 2px #71bc2b ,
inset 21px 0px 2px #9ae75b ,
/*--------------------------------------*/
inset -14px 0px 1px #538127 ,
inset -16px 0px 1px #78c32a ,
inset -18px 0px 1px #4d7e22 ;
border:1px solid rgba(0,0,0,.2);
}
._1{left:300px}
._2{left:750px; height:100px;top:302px}
.trie
{
position:absolute;
background:#84e28c;
border-radius:100% 100% 0px 0px;
border-top:30px solid #46AA5E;
border-left:10px solid #46AA5E;
z-index:2;
box-shadow:10px 2px 2px rgba(0,0,0,.3);
}
._t1{margin-left:0px;width:140px;height:120px;margin-top:302px;}
._t2{margin-left:120px;width:120px;height:110px;margin-top:342px;}
._t3{margin-left:230px;width:130px;height:120px;margin-top:322px;}
._t4{margin-left:300px;width:150px;height:130px;margin-top:272px;}
._t5{margin-left:370px;width:120px;height:110px;margin-top:292px;}
._t6{margin-left:431px;width:140px;height:120px;margin-top:352px;}
._t7{margin-left:550px;width:140px;height:110px;margin-top:292px;}
._t8{margin-left:600px;width:120px;height:110px;margin-top:322px;}
._t9{margin-left:710px;width:140px;height:120px;margin-top:312px;}
._t10{margin-left:850px;width:140px;height:110px;margin-top:362px;}
.score{
position:absolute;
color:white;
text-shadow:2px 1px black,
-2px 1px black,
2px -2px black,
1px -2px black;
font-size:39px;
margin:15px 43%;
font-family: 'Erica One', cursive;
z-index:999;
}
.rbu{
width:60px;
height:60px;
background:#fee445;
z-index:999;
position:absolute;
border-radius:50%;
border:4px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
box-shadow:inset 5px -6px 0px #cfaa1d,
inset -5px 6px 0px #fff78e;
top:300px;
/*#c84c0c*/
}
.rbu:after{
content:"";
position:absolute;
width:7px;
height:30px;
background:#cfaa1d;
border-radius:20%;
margin-left:30px;
margin-top:15px;
box-shadow:
-5px 0px 0px #fff78e;
}
.r1{left:520px;transform: rotateY(30deg);
transform: rotateY(30deg);}
.r2{top:120px;left:590px;transform: rotateY(130deg);
transform: rotateY(60deg);}
.r3{top:120px;left:660px;}
.r4{left:450px;transform: rotateY(40deg);
transform: rotateY(40deg);}
.r5{left:900px;transform: rotateY(60deg);
transform: rotateY(60deg);}
.r6{top:130px;left:340px;}
.r7{
top:20px;
transform:scale(0.6,0.6);
}
.r7:before{
content:"420";
margin-left:67px;
margin-top:10px;
position:absolute;
font-size:35px;
font-weight:bold;
color:black;
}
.ground{
position:absolute;
width:60px;
height:60px;
background:#c84c0c;
box-shadow:inset 3px 0px 0px #000,
inset 13px 0px 0px #c84c0c,
inset 23px 0px 0px #000,
inset 33px 0px 0px #c84c0c,
inset 0px 5px 0px #c84c0c,
inset 0px 15px 0px #000,
inset 0px 20px 0px #c84c0c,
inset 0px 25px 0px #000,
inset 0px 35px 0px #c84c0c,
inset 0px 45px 0px #000,
inset 0px 55px 0px #c84c0c;
border:1px solid #000;
z-index:999;
}
.g1{
top:200px;
left:600px;
}
.g2{
top:200px;
left:660px;
transform:rotateY(180deg);
border-right:5px solid #000;
}