<style>
@import url(http://fonts.googleapis.com/css?family=Gudea);
body{
overflow: hidden;
}
.bg{
position: absolute;
width: 100%;
}
#top{
z-index:999;
width:140%;
height: 88%;
margin-left:-20%;
background: #111;
border-radius:0 0 50% 50%;
}
#bottom{
top: 70%;
height: 30%;
background: #000;
}
#back-top{
position: absolute;
top: 50px;
right: 400px;
width: 100px;
height: 100px;
background: #2C2C2C;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#moon{
margin: 20px 10px 0;
width: 70px;
height: 70px;
background: #FFF;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.cloude{
width: 230px;
height: 50px;
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
-ms-opacity: .7;
-o-opacity: .7;
}
@-webkit-keyframes cloude{
0% {margin-left: -110px;}
50% {margin-left: -5px;}
100% {margin-left: -110px;}
}
@keyframes cloude{
0% {margin-left: -110px;}
50% {margin-left: -5px;}
100% {margin-left: -110px;}
}
@-webkit-keyframes cloude2{
0% {margin-left: -210px;}
50% {margin-left: -15px;}
100% {margin-left: -210px;}
}
@keyframes cloude2{
0% {margin-left: -210px;}
50% {margin-left: -5px;}
100% {margin-left: -210px;}
}
.cloude div{
background: #000;
display: inline-block;
position: relative;
}
.cloude div div{
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.cloude div{
width: 100%;
height: 50px;
}
.cloude div div:nth-child(1){
position: absolute;
margin-left: -45px;
bottom: 0;
width: 100px;
height: 100px;
}
.cloude div div:nth-child(2){
position: absolute;
margin-left: 30px;
bottom: 19.2px;
width: 100px;
height: 100px;
}
.cloude div div:nth-child(3){
position: absolute;
margin-left: 97px;
bottom: 0;
width: 100px;
height: 100px;
}
.cloude div div:nth-child(4){
position: absolute;
margin-left: 180px;
bottom: 0;
width: 100px;
height: 100px;
}
#c1{
margin-top: 30px;
margin-left: -110px;
animation: cloude linear 15s infinite;
-webkit-animation: cloude linear 15s infinite;
}
#c2{
margin-top: -90px;
margin-left: -210px;
animation: cloude2 linear 25s infinite;
-webkit-animation: cloude2 linear 25s infinite;
}
#text-top{
width: 200px;
position: absolute;
top: 20px;
left: 250px;
text-align: center;
}
#text-top h1{
font-family: 'Gudea', sans-serif;
color: #FFF;
font-weight: bold;
font-size: 40px;
padding-left: 8px;
}
#text-top p{
margin-top:-35px;
padding: 5px;
font: 12px Tahoma;
color: #FFF;
width: 100%;
}
#bc{
z-index: 999;
position: absolute;
left: 150px;
bottom: 20px;
}
#aghab{
width: 150px;
}
#lastik-aghab{
width: 150px;
height: 150px;
border-top: 6px solid yellow !important;
border-right: 6px solid yellow !important;
border: 6px solid #000;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(-45.5deg);
-webkit-transform: rotate(-45.5deg);
-moz-transform: rotate(-45.5deg);
-ms-transform: rotate(-45.5deg);
-o-transform: rotate(-45.5deg);
}
#charkh{
width: 134px;
height: 134px;
border: 8px solid red;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#pare{
width: 120px;
height: 120px;
margin: 4px auto;
border-bottom: 3px solid rgb(9, 77, 250) !important;
border-left: 3px solid rgb(9, 77, 250) !important;
border: 3px solid #333;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(25.5deg);
-webkit-transform: rotate(25.5deg);
-moz-transform: rotate(25.5deg);
-ms-transform: rotate(25.5deg);
-o-transform: rotate(25.5deg);
animation: pare linear 5s infinite;
-webkit-animation: pare linear 5s infinite;
}
@-webkit-keyframes pare {
from {-webkit-transform: rotate(25.5deg);}
to {-webkit-transform: rotate(385.5deg);}
}
@keyframes pare {
from {transform: rotate(25.5deg);}
to {transform: rotate(385.5deg);}
}
#volivoring{
animation: volivoring linear 0s infinite;
-webkit-animation: volivoring linear 0s infinite;
padding:3px;
width:15px;
margin: 48px auto;
border-left: 2px solid #FFF !important;
border-bottom: 2px solid #FFF !important;
border: 2px solid #111;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(63deg);
-webkit-transform: rotate(63deg);
-moz-transform: rotate(63deg);
-ms-transform: rotate(63deg);
-o-transform: rotate(63deg);
}
#markas{
margin: auto;
width: 5px;
height: 5px;
border: 5px solid #FFF;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#kole-poshti{
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 31px;
z-index: 9;
background:#111;
}
#head-kole{
margin: 0 auto;
background: rgb(9, 77, 250);
width: 93%;
height: 10px;
}
#bodykole{
width: 93%;
height: 40px;
background: red;
margin: 2px auto;
}
#kilidkole{
width: 20px;
height: 15px;
position: absolute;
background: #111;
top: 5px;
left: 41%;
}
#aghab ol{
width: 20px;
height: 10px;
background: yellow;
position: absolute;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#aghab ol:nth-child(1){
margin-left: -20px;
}
#aghab ol:nth-child(2){
margin-left: -39px;
margin-top: 30px;
}
#aghab ol:nth-child(3){
width:5px !important;
margin-left: -30px;
margin-top: 45px;
}
#aghab ol:nth-child(4){
margin-left: -49px;
margin-top: 60px;
}
#motaselbesandali{
background: yellow;
width: 50px;
height: 10px;
position: absolute;
right: -28px;
top: 3px;
transform: rotate(-65deg);
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
}
#center{
width: 50px;
}
#mile7aval{
z-index: 9;
width: 140px;
height: 7px;
background: rgb(9, 77, 250);
position: absolute;
right: -105px;
top: 30px;
transform: rotate(65deg);
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-ms-transform: rotate(65deg);
-o-transform: rotate(65deg);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#sandali{
width: 50px;
height: 50px;
position: absolute;
right: 105px;
top: -20px;
transform: rotate(-65deg);
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
}
#mile-zin{
height: 7px;
width: 35px;
background: #333;
margin-left: -5px;
position: absolute;
bottom: 50px;
transform: rotate(65deg);
-webkit-transform: rotate(65deg);
-moz-transform: rotate(65deg);
-ms-transform: rotate(65deg);
-o-transform: rotate(65deg);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#zin{
background: red;
width: 45px;
height: 10px;
margin-top: -24px;
margin-left: -15px;
z-index: 9;
position: absolute;
border-radius: 5px 5px 5px 0;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
-ms-border-radius: 5px 5px 5px 0;
-o-border-radius: 5px 5px 5px 0;
}
#downzin{
background: red;
width: 25px;
height: 10px;
margin-top: 4px;
margin-left: 0px;
z-index: 9;
position: absolute;
border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
}
#mile7dovom{
width: 120px;
height: 7px;
background: rgb(9, 77, 250);
position: absolute;
right: -170px;
top: 58px;
z-index: 9;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#zangirkesh{
width: 40px;
height: 40px;
position: absolute;
left: 190px;
top: 70px;
border: 5px solid yellow;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#zanjir1{
width: 120px;
height: 1px;
background: yellow;
margin-left: -110px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}
#zanjir2{
width: 140px;
height: 1px;
background:yellow;
margin-left: -120px;
margin-top: 26px;
transform: rotate(13deg);
-webkit-transform: rotate(13deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(13deg);
-o-transform: rotate(13deg);
}
#jolo{
width: 150px;
position: absolute;
left: 300px;
top: -20px;
}
#milejolofarman{
position: absolute;
z-index:9;
left: -76px;
top: 30px;
width: 150px;
height: 7px;
background: rgb(9, 77, 250);
transform: rotate(-35deg);
-webkit-transform: rotate(55deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#milefarmon1{
background: #333;
width: 30px;
height: 7px;
margin-left: -32px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#dastefarmon1{
background: red;
width: 20px;
height: 7px;
margin-left: -54px;
margin-top: -7px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#dastefarmon2{
background: red;
width: 7px;
height: 30px;
margin-left: -60px;
margin-top: -10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#cheragh{
position: absolute;
background: red;
width: 60px;
height: 30px;
margin-top: -45px;
margin-left: 20px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(-55deg);
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
-o-transform: rotate(-55deg);
}
#nore{
width: 50%;
height: 40px;
margin-top: -5px;
background: #111;
float: right;
}
#nore ol:nth-child(1){
background: yellow;
width: 30px;
height: 1px;
margin-top: -5px;
margin-left: 4px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
animation: nore2 linear 1s infinite;
-webkit-animation: nore2 linear 1s infinite;
}
#nore ol:nth-child(2){
background: rgb(9, 77, 250);
width: 5px;
height: 1px;
margin-top: -10px;
margin-left: 20px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
animation: nore1 linear 1s infinite;
-webkit-animation: nore1 linear 1s infinite;
}
#nore ol:nth-child(3){
background: #FFF;
width: 10px;
height: 1px;
margin-top: 40px;
margin-left: 40px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
animation: nore2 linear 1s infinite;
-webkit-animation: nore2 linear 1s infinite;
}
#nore ol:nth-child(4){
background: yellow;
width: 30px;
height: 1px;
margin-top: -15px;
margin-left: 4px;
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
animation: nore1 linear 1s infinite;
-webkit-animation: nore1 linear 1s infinite;
}
@-webkit-keyframes nore1 {
0% {-webkit-opacity:1;}
50% {-webkit-opacity:0;}
100% {-webkit-opacity:1;}
}
@keyframes nore1 {
0% {-webkit-opacity:1;}
50% {-webkit-opacity:0;}
100% {-webkit-opacity:1;}
}
@-webkit-keyframes nore2 {
0% {-webkit-opacity:0;}
50% {-webkit-opacity:1;}
100% {-webkit-opacity:0;}
}
}
@keyframes nore2 {
0% {-webkit-opacity:0;}
50% {-webkit-opacity:1;}
100% {-webkit-opacity:0;}
}
#lastik-jolo{
width: 150px;
height: 150px;
margin-top:10px;
margin-left:-40px;
border-top: 6px solid yellow !important;
border: 6px solid #000;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(-45.5deg);
-webkit-transform: rotate(-45.5deg);
-moz-transform: rotate(-45.5deg);
-ms-transform: rotate(-45.5deg);
-o-transform: rotate(-45.5deg);
}
#charkh2{
width: 134px;
height: 134px;
border: 8px solid red;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
#pare2{
width: 120px;
height: 120px;
margin: 4px auto;
border: 3px solid yellow;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(25.5deg);
-webkit-transform: rotate(25.5deg);
-moz-transform: rotate(25.5deg);
-ms-transform: rotate(25.5deg);
-o-transform: rotate(25.5deg);
}
#volivoring2{
width:100px;
height:100px;
margin: 8px auto;
border-left: 2px solid #FFF !important;
border-bottom: 2px solid #FFF !important;
border: 2px solid #111;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(63deg);
-webkit-transform: rotate(63deg);
-moz-transform: rotate(63deg);
-ms-transform: rotate(63deg);
-o-transform: rotate(63deg);
animation: pare4 linear 5s infinite;
-webkit-animation: pare4 linear 5s infinite;
}
@-webkit-keyframes pare4 {
from {transform: rotate(63deg);}
to {transform: rotate(423deg);}
}
@keyframes pare4 {
from {transform: rotate(63deg);}
to {transform: rotate(423deg);}
}
#markas2{
margin: 25px auto;
width:50px;
height:50px;
border-right: 2px solid #FFF !important;
border-top: 2px solid #FFF !important;
border: 2px solid #111;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
transform: rotate(63deg);
-webkit-transform: rotate(63deg);
-moz-transform: rotate(63deg);
-ms-transform: rotate(63deg);
-o-transform: rotate(63deg);
animation: pare3 linear 2s infinite;
-webkit-animation: pare3 linear 2s infinite;
}
@-webkit-keyframes pare3 {
from {transform: rotate(63deg);}
to {transform: rotate(-297deg);}
}
@keyframes pare3 {
from {transform: rotate(63deg);}
to {transform: rotate(-297deg);}
}
</style>
<div id="top" class="bg">
<div id="back-top">
<div id="moon"></div>
<div class="cloude" id="c1">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="cloude" id="c2">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="text-top">
<h1>4O4</h1>
<p> Page not found <br> Iranian designers :
Eghbal & mehdi
</p>
</div>
</div>
<div id="bottom" class="bg">
<div id="bc">
<div id="aghab">
<ol></ol>
<ol></ol>
<ol></ol>
<ol></ol>
<ol></ol>
<div id="motaselbesandali"></div>
<div id="kole-poshti">
<div id="head-kole">
<div id="kilidkole"></div>
</div>
<div id="bodykole"></div>
</div>
<div id="lastik-aghab">
<div id="charkh">
<div id="pare">
<div id="volivoring">
<div id="markas"></div>
</div>
</div>
</div>
</div>
</div>
<div id="center">
<div id="mile7aval">
<div id="sandali">
<div id="zin">
<div id="downzin"></div>
</div>
<div id="mile-zin"></div>
</div>
</div>
<div id="mile7dovom"></div>
<div id="zangirkesh">
<div id="zanjir1"></div>
<div id="zanjir2"></div>
</div>
</div>
<div id="jolo">
<div id="milejolofarman">
<div id="milefarmon1">
<div id="cheragh">
<div id="nore">
<ol></ol>
<ol></ol>
<ol></ol>
<ol></ol>
</div>
</div>
</div>
<div id="dastefarmon1"></div>
<div id="dastefarmon2"></div>
</div>
<div id="lastik-jolo">
<div id="charkh2">
<div id="pare2">
<div id="volivoring2">
<div id="markas2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
حمایت شدهThanks :
