Hugging Face's logo

Spaces:
kindahex
/
solar-system
Running

App Files Community
Blane187 commited on
Commit
8a99c65
·
verified ·
1 Parent(s): 06e4295

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +85 -18
index.html CHANGED
@@ -1,19 +1,86 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <style>
5
+ body {
6
+ margin: 0;
7
+ height: 100vh;
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: center;
11
+ background-color: black;
12
+ overflow: hidden;
13
+ }
14
+ .container {
15
+ font-size: 10px;
16
+ width: 40em;
17
+ height: 40em;
18
+ position: relative;
19
+ }
20
+ .sun {
21
+ position: absolute;
22
+ top: 15em;
23
+ left: 15em;
24
+ width: 10em;
25
+ height: 10em;
26
+ background-color: yellow;
27
+ border-radius: 50%;
28
+ box-shadow: 0 0 3em white;
29
+ }
30
+ .earth,.moon {
31
+ position: absolute;
32
+ border-style: solid;
33
+ border-color: white transparent transparent transparent;
34
+ border-width: 0.1em 0.1em 0 0;
35
+ border-radius: 50%;
36
+ }
37
+ .earth {
38
+ top: 5em;
39
+ left: 5em;
40
+ width: 30em;
41
+ height: 30em;
42
+ animation: orbit 36.5s linear infinite;
43
+ }
44
+ .moon {
45
+ top: 0;
46
+ right: 0;
47
+ width: 8em;
48
+ height: 8em;
49
+ animation: orbit 2.7s linear infinite;
50
+ }
51
+ .earth::before,
52
+ .moon::before {
53
+ content: '';
54
+ position: absolute;
55
+ border-radius: 50%;
56
+ }
57
+ .earth::before {
58
+ top: 2.8em;
59
+ right: 2.8em;
60
+ width: 3em;
61
+ height: 3em;
62
+ background-color: aqua;
63
+ }
64
+ .moon::before {
65
+ top: 0.8em;
66
+ right: 0.2em;
67
+ width: 1.2em;
68
+ height: 1.2em;
69
+ background-color: silver;
70
+ }
71
+ @keyframes orbit {
72
+ to {
73
+ transform: rotate(360deg);
74
+ }
75
+ }
76
+ </style>
77
+ </head>
78
+ <body>
79
+ <div class="container">
80
+ <div class="sun"></div>
81
+ <div class="earth">
82
+ <div class="moon"></div>
83
+ </div>
84
+ </div>
85
+ </body>
86
+ </html>