Solar-System/style.css at main · M-Adil-AS/Solar-System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
html, body{
    margin: 0;
    padding: 0;
    height: 98vw;
    width: 98vw;
    background-image: url('sky1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

#solar-system{
    height:90vw;
    width:90vw;
    transform: translateX(calc(4vw)) translateY(calc(4vw));
}

.object{
    border-radius:50%;
    position: absolute;
    margin: auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.p-orbit, #m-orbit{
    border:0.10px solid lightgrey;
    opacity:0.5;
    background: transparent;
}

#belt{
    height:48.5%;
    width:48.5%;
    animation: spin 50s infinite linear;
}

@keyframes spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

#m-orbit{
    height:4%;
    width:4%;
}

.planet,#moon{
    z-index:100;
    animation: spin 10s infinite linear;
}

#sun{
    height:6%;
    width:6%;
}

#moon{
    height:0.5%;
    width: 0.5%;
    background-color: white;
}

#mercury{
    height:1%;
    width:1%;
}

#venus{
    height:1.5%;
    width:1.5%;
}

#earth{
    height:2%;
    width:2%;
}

#mars{
    height:1.75%;
    width:1.75%;
}

#jupiter{
    height:4%;
    width:4%;
}

#saturn{
    height:6%;
    width:6%;
    border-radius:0%;
}

#uranus{
    height:3%;
    width:3%;
}

#neptune{
    height:2.5%;
    width:2.5%;
}