├── LICENSE
├── README.md
├── _config.yml
├── index.html
├── info.txt
└── style.css
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Mihir
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Solar System
2 | A model of Solar System, who can't see in reality 😂 !
3 | Check the 'info.txt' file for more information about this project.
4 |
5 |
6 | ---- Maintained under the MIT License. ----
7 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-slate
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Solar System
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/info.txt:
--------------------------------------------------------------------------------
1 | This project is registered under the MIT License. All rights are reserved with Mihir Amin {DYNAMICMORTAL}. For any queries contact me from here:-
2 | Instagram - marshal_op
3 | Github - DYNAMICMORTAL
4 |
5 | For Demo (Click Here) - www.dynamicmortal.github.io/solar_system
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root{
2 | --dark-color: rgb(0,0,0);
3 | --glossy-red: #9a02ff;
4 | --hidden-red: rgba(238, 17, 17, 0);
5 | --light-red: rgba(76, 17, 238, 0.5);
6 | --paths-theme: var(--very-light-red) var(--glossy-red);
7 | --planets-theme: var(--light-red) var(--light-red) var(--light-red) var(--glossy-red);
8 | --very-light-red: rgb(174, 0, 255);
9 | }
10 | *{
11 | -webkit-box-sizing: border-box;
12 | -moz-box-sizing: border-box;
13 | box-sizing: border-box;
14 | padding: 0;
15 | border: 0;
16 | }
17 | body
18 | {
19 | overflow: hidden;
20 | background-color: var(--dark-color);
21 | }
22 | body #solar-system
23 | {
24 | display: flex;
25 | width: 100vw;
26 | height: 100vh;
27 | -webkit-transform: skewX(-45deg);
28 | -moz-transform: skewX(-45deg);
29 | -ms-transform: skewX(-45deg);
30 | -o-transform: skewX(-45deg);
31 | transform: skewX(-45deg);
32 | -webkit-transform-origin: center;
33 | -moz-transform-origin: center;
34 | -ms-transform-origin: center;
35 | -o-transform-origin: center;
36 | transform-origin: center;
37 | justify-content: center;
38 | align-items: center;
39 | }
40 | section #sun
41 | {
42 | position: fixed;
43 | z-index: 100;
44 | width: 174.085px;
45 | height: 174.085px;
46 | -webkit-transform: skewX(45deg);
47 | -moz-transform: skewX(45deg);
48 | -ms-transform: skewX(45deg);
49 | -o-transform: skewX(45deg);
50 | transform: skewX(45deg);
51 | -webkit-border-radius: 50%;
52 | -moz-border-radius: 50%;
53 | border-radius: 50%;
54 | background: var(--glossy-red);
55 | background: linear-gradient(135deg, var(--glossy-red) 20%, var(--hidden-red) 100%);
56 | -webkit-background: linear-gradient(135deg, var(--glossy-red) 20%, var(--hidden-red) 100%);
57 | -moz-background: linear-gradient(135deg, var(--glossy-red) 20%, var(--hidden-red) 100%);
58 | -o-background: linear-gradient(135deg, var(--glossy-red) 20%, var(--hidden-red) 100%);
59 | -ms-background: linear-gradient(135deg, var(--glossy-red) 20%, var(--hidden-red) 100%);
60 | filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
61 | -webkit-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
62 | -moz-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
63 | -o--ms-filter: drop-shadow(0 0 2rem var(--glossy-red)) blur(1px);
64 | }
65 | article #mercury{
66 | position: fixed;
67 | z-index: 99;
68 | top: 38px;
69 | display: flex;
70 | width: 24.397px;
71 | height: 24.397px;
72 | -webkit-animation: planets-rotation 29.3225s linear infinite;
73 | -moz-animation: planets-rotation 29.3225s linear infinite;
74 | -ms-animation: planets-rotation 29.3225s linear infinite;
75 | -o-animation: planets-rotation 29.3225s linear infinite;
76 | animation: planets-rotation 29.3225s linear infinite;
77 | border-width: 2px;
78 | border-style: solid;
79 | border-color: var(--planets-theme);
80 | -webkit-border-radius: 50%;
81 | -moz-border-radius: 50%;
82 | border-radius: 50%;
83 | background: var(--hidden-red);
84 |
85 | justify-content: center;
86 | align-items: center;
87 | }
88 | article #venus{
89 | position: fixed;
90 | z-index: 99;
91 | top: 15px;
92 | display: flex;
93 | width: 60.518px;
94 | height: 60.518px;
95 | -webkit-animation: planets-rotation 121.765s linear infinite;
96 | -moz-animation: planets-rotation 121.765s linear infinite;
97 | -ms-animation: planets-rotation 121.765s linear infinite;
98 | -o-animation: planets-rotation 121.765s linear infinite;
99 | animation: planets-rotation 121.765s linear infinite;
100 | border-width: 2px;
101 | border-style: solid;
102 | border-color: var(--planets-theme);
103 | -webkit-border-radius: 50%;
104 | -moz-border-radius: 50%;
105 | border-radius: 50%;
106 | background: var(--hidden-red);
107 | justify-content: center;
108 | align-items: center;
109 | }
110 | article #earth{
111 | position: fixed;
112 | z-index: 99;
113 | top: 35px;
114 | display: flex;
115 | width: 63.71px;
116 | height: 63.71px;
117 | -webkit-animation: planets-rotation .4874s linear infinite;
118 | -moz-animation: planets-rotation .4874s linear infinite;
119 | -ms-animation: planets-rotation .4874s linear infinite;
120 | -o-animation: planets-rotation .4874s linear infinite;
121 | animation: planets-rotation .4874s linear infinite;
122 | border-width: 2px;
123 | border-style: solid;
124 | border-color: var(--planets-theme);
125 | -webkit-border-radius: 50%;
126 | -moz-border-radius: 50%;
127 | border-radius: 50%;
128 | background: var(--hidden-red);
129 | justify-content: center;
130 | align-items: center;
131 | }
132 | article #earth::after
133 | {
134 | position: inherit;
135 | width: 40%;
136 | height: 40%;
137 | content: '';
138 | -webkit-animation: earth-blinking 2s linear infinite;
139 | -moz-animation: earth-blinking 2s linear infinite;
140 | -ms-animation: earth-blinking 2s linear infinite;
141 | -o-animation: earth-blinking 2s linear infinite;
142 | animation: earth-blinking 2s linear infinite;
143 | -webkit-border-radius: inherit;
144 | -moz-border-radius: inherit;
145 | border-radius: inherit;
146 | background: var(--glossy-red);
147 | -webkit-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
148 | -moz-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
149 | -o-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
150 | -ms-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
151 | filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
152 | }
153 | article #mars
154 | {
155 | position: fixed;
156 | z-index: 99;
157 | top: 288px;
158 | display: flex;
159 | width: 33.895px;
160 | height: 33.895px;
161 | -webkit-animation: planets-rotation .5128s linear infinite;
162 | -moz-animation: planets-rotation .5128s linear infinite;
163 | -ms-animation: planets-rotation .5128s linear infinite;
164 | -o-animation: planets-rotation .5128s linear infinite;
165 | animation: planets-rotation .5128s linear infinite;
166 | border-width: 2px;
167 | border-style: solid;
168 | border-color: var(--planets-theme);
169 | -webkit-border-radius: 50%;
170 | -moz-border-radius: 50%;
171 | border-radius: 50%;
172 | background: var(--hidden-red);
173 | justify-content: center;
174 | align-items: center;
175 | }
176 | article #mars::after,
177 | article #venus::after,
178 | article #mercury::after{
179 | width: 40%;
180 | height: 40%;
181 | content: '';
182 | -webkit-border-radius: inherit;
183 | -moz-border-radius: inherit;
184 | border-radius: inherit;
185 | background: var(--glossy-red);
186 | -webkit-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
187 | -moz-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
188 | -o-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
189 | -ms-filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
190 | filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
191 | }
192 | section #mercury-trajectory{
193 | position: fixed;
194 | z-index: 98;
195 | width: 203.085px;
196 | height: 203.085px;
197 | -webkit-animation: solar-revolution 43.9845s linear infinite;
198 | -moz-animation: solar-revolution 43.9845s linear infinite;
199 | -ms-animation: solar-revolution 43.9845s linear infinite;
200 | -o-animation: solar-revolution 43.9845s linear infinite;
201 | animation: solar-revolution 43.9845s linear infinite;
202 | border-width: 2px;
203 | border-style: solid;
204 | border-color: var(--paths-theme);
205 | -webkit-border-radius: 50%;
206 | -moz-border-radius: 50%;
207 | border-radius: 50%;
208 | }
209 | section #venus-trajectory{
210 | position: fixed;
211 | z-index: 98;
212 | width: 257.085px;
213 | height: 257.085px;
214 | -webkit-animation: solar-revolution 112.3335s linear infinite;
215 | -moz-animation: solar-revolution 112.3335s linear infinite;
216 | -ms-animation: solar-revolution 112.3335s linear infinite;
217 | -o-animation: solar-revolution 112.3335s linear infinite;
218 | animation: solar-revolution 112.3335s linear infinite;
219 | border-width: 2px;
220 | border-style: solid;
221 | border-color: var(--paths-theme);
222 | -webkit-border-radius: 50%;
223 | -moz-border-radius: 50%;
224 | border-radius: 50%;
225 | }
226 | section #earth-trajectory{
227 | position: fixed;
228 | z-index: 98;
229 | width: 332.085px;
230 | height: 332.085px;
231 | -webkit-animation: solar-revolution 182.6211s linear infinite;
232 | -moz-animation: solar-revolution 182.6211s linear infinite;
233 | -ms-animation: solar-revolution 182.6211s linear infinite;
234 | -o-animation: solar-revolution 182.6211s linear infinite;
235 | animation: solar-revolution 182.6211s linear infinite;
236 |
237 | border-width: 2px;
238 | border-style: solid;
239 | border-color: var(--paths-theme);
240 | -webkit-border-radius: 50%;
241 | -moz-border-radius: 50%;
242 | border-radius: 50%;
243 | }
244 | section #mars-trajectory{
245 | position: fixed;
246 | z-index: 98;
247 | width: 446.085px;
248 | height: 446.085px;
249 | -webkit-animation: solar-revolution 343.4425s linear infinite;
250 | -moz-animation: solar-revolution 343.4425s linear infinite;
251 | -ms-animation: solar-revolution 343.4425s linear infinite;
252 | -o-animation: solar-revolution 343.4425s linear infinite;
253 | animation: solar-revolution 343.4425s linear infinite;
254 | border-width: 2px;
255 | border-style: solid;
256 | border-color: var(--paths-theme);
257 | -webkit-border-radius: 50%;
258 | -moz-border-radius: 50%;
259 | border-radius: 50%;
260 | }
261 | @keyframes solar-revolution{
262 | to
263 | {
264 | transform: rotate(360deg) ;
265 | }
266 | }
267 |
268 | @keyframes planets-rotation{
269 | to
270 | {
271 | transform: rotate(360deg) ;
272 | }
273 | }
274 | @keyframes earth-blinking{
275 | from
276 | {
277 | background-color: var(--glossy-red);
278 |
279 | filter: drop-shadow(0 0 .3rem var(--light-red)) blur(.5px);
280 | }
281 | to
282 | {
283 | background-color: var(--dark-color);
284 |
285 | filter: drop-shadow(0 0 0 var(--light-red)) blur(0);
286 | }
287 | }
288 | @media only screen and (max-width: 768px){
289 | section #sun
290 | {
291 | width: 87.0425px;
292 | height: 87.0425px;
293 | }
294 | section #mercury-trajectory
295 | {
296 | width: 101.5425px;
297 | height: 101.5425px;
298 | }
299 | article #mercury
300 | {
301 | top: 17px;
302 |
303 | width: 12.1985px;
304 | height: 12.1985px;
305 | }
306 | section #venus-trajectory
307 | {
308 | width: 128.5425px;
309 | height: 128.5425px;
310 | }
311 | article #venus
312 | {
313 | top: 6px;
314 |
315 | width: 30.259px;
316 | height: 30.259px;
317 | }
318 | section #earth-trajectory
319 | {
320 | width: 166.0425px;
321 | height: 166.0425px;
322 | }
323 | article #earth
324 | {
325 | top: 16px;
326 |
327 | width: 31.855px;
328 | height: 31.855px;
329 | }
330 | section #mars-trajectory
331 | {
332 | width: 223.0425px;
333 | height: 223.0425px;
334 | }
335 | article #mars
336 | {
337 | top: 56px;
338 |
339 | width: 16.9475px;
340 | height: 16.9475px;
341 | }
342 | }
343 | @media only screen and (min-width: 1921px)
344 | {
345 | section #sun
346 | {
347 | width: 348.17px;
348 | height: 348.17px;
349 | }
350 | section #mercury-trajectory
351 | {
352 | width: 406.17px;
353 | height: 406.17px;
354 | }
355 | article #mercury
356 | {
357 | top: 82px;
358 |
359 | width: 48.794px;
360 | height: 48.794px;
361 | }
362 | section #venus-trajectory
363 | {
364 | width: 514.17px;
365 | height: 514.17px;
366 | }
367 | article #venus
368 | {
369 | top: 28px;
370 |
371 | width: 121.036px;
372 | height: 121.036px;
373 | }
374 | section #earth-trajectory
375 | {
376 | width: 664.17px;
377 | height: 664.17px;
378 | }
379 | article #earth
380 | {
381 | top: 68px;
382 |
383 | width: 127.42px;
384 | height: 127.42px;
385 | }
386 | section #mars-trajectory
387 | {
388 | width: 892.14px;
389 | height: 892.14px;
390 | }
391 | article #mars
392 | {
393 | top: 242px;
394 |
395 | width: 67.79px;
396 | height: 67.79px;
397 | }
398 | }
--------------------------------------------------------------------------------