css-solar-system/index.html at master · nikonet/css-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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Solar System</title>
    <link rel="stylesheet" href="animations.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <main>
        <header class="title-container">
            <h1 id="title">
                <a href="index.html">
                    <span>CSS</span>
                    <span>Solar</span>
                    <span>System</span>
                </a>
            </h1>
        </header>
        <aside class="info-box">
            <h2>Everything is relative</h2>
            <p>The planet size and orbital period is to scale. Distance is not.</p>
            <h4>Time</h4>
            <p>1 second = 1 month</p>
            <h4>Size</h4>
            <p>1 pixel = 2548 km</p>
            <p>Earth here is 10 pixels.</p>
            <nav>
                <h4>Planets</h4>
                <p>Click a planet to zoom in:</p>
                <ul>
                    <li>
                        <a href="#mercury">Mercury</a>
                    </li>
                    <li>
                        <a href="#venus">Venus</a>
                    </li>
                    <li>
                        <a href="#earth">Earth</a>
                    </li>
                    <li>
                        <a href="#mars">Mars</a>
                    </li>
                    <li>
                        <a href="#jupiter">Jupiter</a>
                    </li>
                    <li>
                        <a href="#saturn">Saturn</a>
                    </li>
                    <li>
                        <a href="#uranus">Uranus</a>
                    </li>
                    <li>
                        <a href="#neptune">Neptune</a>
                    </li>
                </ul>
            </nav>
        </aside>
        <div id="space">
            <div class="background-assets">
                <div class="star star-1"></div>
                <div class="star star-2"></div>
                <div class="star star-3"></div>
                <div class="star star-4"></div>
                <div class="star star-5"></div>
                <div class="star star-6"></div>
            </div>
            <div id="solar-system">
                <a id="pause" class="controller-btn" href="#pause">Pause</a>
                <a id="play" class="controller-btn" href="#play">Play</a>
                <div id="sun" class="pos"></div>
                <div class="mercury-pos pos planet-pos">
                    <a href="#mercury">
                        <div id="mercury" class="planet"></div>
                    </a>
                </div>
                <div class="venus-pos pos planet-pos">
                    <a href="#venus">
                        <div id="venus" class="planet"></div>
                    </a>
                </div>
                <div class="earth-pos pos planet-pos">
                    <a href="#earth">
                        <div id="earth" class="planet"></div>
                    </a>
                </div>
                <div class="mars-pos pos planet-pos">
                    <a href="#mars">
                        <div id="mars" class="planet"></div>
                    </a>
                </div>
                <div class="jupiter-pos pos planet-pos">
                    <a href="#jupiter">
                        <div id="jupiter" class="planet"></div>
                    </a>
                </div>
                <div class="saturn-pos pos planet-pos">
                    <a href="#saturn">
                        <div id="saturn" class="planet"></div>
                    </a>
                </div>
                <div class="uranus-pos pos planet-pos">
                    <a href="#uranus">
                        <div id="uranus" class="planet"></div>
                    </a>
                </div>
                <div class="neptune-pos pos planet-pos">
                    <a href="#neptune">
                        <div id="neptune" class="planet"></div>
                    </a>
                </div>
            </div>
        </div>
    </main>
</body>

</html