kulpot commented 4 months ago

###############################i index.html ######################################

<!DOCTYPE html>

. Solar System

Solar System

mercury

venus

earth

mars

jupiter

saturn

uranus

neptune

kulpot commented 4 months ago

################################### style.css #########################################

body{ margin: 0px; padding: 0px; background-image:url(Bg.jpg); background-size: 100%; } .sun{ height: 120px; width: 120px; background-image: url(3.png); border-radius: 50%; background-size: cover; box-shadow: -4px 2px 56px #f9c05f; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50% ); } .mercury{ height: 30px; width: 30px; background-image: url(8.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #f9c05f; left: 46%; top: 42%; transform: translate(-50%,-50%); animation: orbit2 2s linear infinite; }

@keyframes orbit2 { from{transform: rotate(0deg)translatex(70px) rotate(0deg);} to{transform: rotate(360deg)translatex(70px) rotate(-360deg);}

} p{ color: white; font-family: system-ui; position: absolute; left:-62px; top: -11px; } .mercury-outline,.venus-outline-1,.earth-outline-1,.mars-outline-1,.jupiter-outline-1, .saturn-outline-1,.uranus-outline-1,.neptune-outline-1{ border-radius: 50%; border: 1px dotted #ddd9; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);

} .mercury-outline{ height: 140px; width:140px; } .venus{ height: 40px; width: 40px; background-image: url(4.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #a36f13; left: 40%; top: 42%; transform: translate(-50%,-50%); animation: orbit3 10s linear infinite; } @keyframes orbit3 { from{transform: rotate(0deg)translatex(100px) rotate(0deg);} to{transform: rotate(360deg)translatex(100px) rotate(-360deg);} } .venus-outline-1{ height: 200px; width:200px; }

.earth{ height: 50px; width: 50px; background-image: url(5.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #2855d6; left: 44%; top: 43%; transform: translate(-50%,-50%); animation: orbit4 20s linear infinite; } @keyframes orbit4 { from{transform: rotate(0deg)translatex(150px) rotate(0deg);} to{transform: rotate(360deg)translatex(150px) rotate(-360deg);} }

.earth-outline-1{ height: 300px; width:300px; } .earth-circle{ height: 65px; width: 65px; border: 1px dotted #fff; position: relative; left: -8px; top: -8px; border-radius: 40px; } .earth-inner{ height: 10px; width: 10px; background-color: white; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); left:45%; top:45%; animation: orbit5 3s linear infinite; } @keyframes orbit5 { from{transform: rotate(0deg)translatex(33px) rotate(0deg);} to{transform: rotate(360deg)translatex(33px) rotate(-360deg);} }

.mars{ height: 40px; width: 40px; background-image: url(1.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #ca0505; left: 46.5%; top: 46.5%; transform: translate(-50%,-50%); animation: orbit6 30s linear infinite; } @keyframes orbit6 { from{transform: rotate(0deg)translatex(185px) rotate(0deg);} to{transform: rotate(360deg)translatex(185px) rotate(-360deg);} } .mars-outline-1{ height: 370px; width:370px; }

.jupiter{ height: 40px; width: 40px; background-image: url(10.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #cac2b9; left: 45%; top: 45%; transform: translate(-50%,-50%); animation: orbit7 60s linear infinite; } @keyframes orbit7 { from{transform: rotate(0deg)translatex(217px) rotate(0deg);} to{transform: rotate(360deg)translatex(217px) rotate(-360deg);} } .jupiter-outline-1{ height: 430px; width:430px; }

.saturn{ height: 60px; width: 60px; background-image: url(7.png); background-size: 100%; border-radius: 50%; position:absolute; left: 45%; top: 45%; transform: translate(-50%,-50%); animation: orbit9 90s linear infinite; } @keyframes orbit9 { from{transform: rotate(0deg)translatex(250px) rotate(0deg);} to{transform: rotate(360deg)translatex(250px) rotate(-360deg);} } .saturn-outline-1{ height: 500px; width:500px; }

.uranus{ height: 50px; width: 50px; background-image: url(9.png); background-size: 100%; border-radius: 50%; position:absolute;

left: 38%;
top: 48%;
transform: translate(-50%,-50%);
animation: orbit10 200s linear infinite;

} @keyframes orbit10 { from{transform: rotate(0deg)translatex(280px) rotate(0deg);} to{transform: rotate(360deg)translatex(280px) rotate(-360deg);} } .uranus-outline-1{ height: 560px; width:560px; }

.neptune{ height: 40px; width: 40px; background-image: url(6.png); background-size: 100%; border-radius: 50%; position:absolute; box-shadow: -4px 2px 56px #9581c1; left: 48%; top: 48%; transform: translate(-50%,-50%); animation: orbit11 400s linear infinite; } @keyframes orbit11 { from{transform: rotate(0deg)translatex(310px) rotate(0deg);} to{transform: rotate(360deg)translatex(310px) rotate(-360deg);} } .neptune-outline-1{ height: 620px; width:620px; }

kulpot commented 4 months ago

kulpot / VS2022.CSS.HTML.SolarSystem

Solar System #1

Solar System