HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chandrayan</title>
<link rel="stylesheet" href="css/st.css">
</head>
<body>
<section>
<div class="star star1"></div>
<div class="star star2"></div>
<div class="star star3"></div>
<div class="star star4"></div>
<div class="star star5"></div>
<div class="star star6"></div>
<div class="star star7"></div>
<div class="star star8"></div>
</section>
<div class="container">
<div class="moon">
<div class="crater crater-1"></div>
<div class="crater crater-2"></div>
<div class="crater crater-3"></div>
<div class="crater crater-4"></div>
<div class="crater crater-5"></div>
<div class="shadow"></div>
</div>
<div class="orbit">
<div class="sat">
<div class="window"></div>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
background: #000200;
display: flex;
justify-content: center;
align-items: center;
}
section .star{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
animation: animate 8s ease-in-out infinite,
backgroundmove 16s linear infinite;
}
section .star.star1{
animation-delay: 0s;
background: url(star1.png);
}
section .star.star2{
animation-delay: -1s;
background: url(star2.png);
}
section .star.star3{
animation-delay: -2s;
background: url(star3.png);
}
section .star.star4{
animation-delay: -3s;
background: url(star4.png);
}
section .star.star5{
animation-delay: -4s;
background: url(star5.png);
}
section .star.star6{
animation-delay: -5s;
background: url(star6.png);
}
section .star.star7{
animation-delay: -6s;
background: url(star7.png);
}
section .star.star8{
animation-delay: -7s;
background: url(star8.png);
}
@keyframes animate{
0%,20%,40%,60%,80%,100%
{
opacity: 0;
}
10%,30%,50%,70%,90%
{
opacity: 1;
}
}
@keyframes backgroundmove{
0%{
transform: scale(1);
}
100%{
transform: scale(2);
}
}
.container{
height: 370px;
width: 370px;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.moon{
background-color: #F6F1D5;
height: 170px;
width: 170px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
}
.crater{
background-color: lightgray;
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
}
.crater:before{
content: "";
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
box-shadow: -5px 0 0 2px darkgray;
top: 2px;
left: 7px;
}
.crater-1{
top: 27px;
left: 90px;
transform: scale(0.9);
}
.crater-2{
bottom: 15px;
left: 61px;
transform: scale(0.6);
}
.crater-3{
left: 15px;
transform: scale(0.75);
}
.crater-4{
left: 107px;
top: 32px;
transform: scale(1.18);
}
.crater-5{
left: 33px;
bottom: 4px;
transform: scale(0.65);
}
.shadow{
height: 190px;
width: 190px;
box-shadow: 21px 0 0 5px rgba(0,0,0,0.15);
border-radius: 50%;
position: relative;
bottom: 157.5px;
right: 46px;
}
.orbit{
height: 280px;
width: 280px;
border-radius: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
animation: spin 5s infinite linear;
}
@keyframes spin{
100%{
transform: rotate(360deg);
}
}
.sat{
background: rgb(255,165,0);
background: linear-gradient(97deg, rgba(255,165,0,1) 0%, rgba(255,255,255,1) 49%, rgba(0,255,0,1) 100%);
height: 50px;
width: 25px;
position: relative;
left: -11px;
top: 115px;
}
.sat:before{
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
top: -10px;
left: 4.3px;
}
.sat:after{
position: absolute;
content: "";
background-color: #39beff;
height: 4px;
width: 15px;
border-radius: 0 0 2px 2px;
bottom: -10px;
left: 4.3px;
}
.window{
height: 10px;
width: 10px;
background-color: #151845;
border: 2px solid #b8d2ec;
border-radius: 50%;
position: relative;
top: 17px;
left: 5px;
}
Comments
Post a Comment