-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (170 loc) · 15.7 KB
/
index.html
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<link rel="manifest" href="favicon/site.webmanifest" />
<!-- title -->
<title>To infinity and beyond!</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Black background for space */
body {
background-color: #000;
overflow: hidden;
}
/* Starfield using a tiny element with a massive box-shadow */
.main {
position: fixed;
top: 50%;
left: 50%;
height: 1px;
width: 1px;
background-color: #fff;
border-radius: 50%;
/* Star positions generated via JS (or pre-generated) */
box-shadow:
-42vw -4vh 0px 0px #fff,
25vw -41vh 0px 0px #fff,
-20vw 49vh 0px 1px #fff,
5vw 40vh 1px 1px #fff,
29vw 19vh 1px 0px #fff,
-44vw -13vh 0px 0px #fff,
46vw 41vh 0px 1px #fff,
-3vw -45vh 0px 1px #fff,
47vw 35vh 1px 0px #fff,
12vw -8vh 1px 0px #fff,
-34vw 48vh 1px 1px #fff,
32vw 26vh 1px 1px #fff,
32vw -41vh 1px 1px #fff,
0vw 37vh 1px 1px #fff,
34vw -26vh 1px 0px #fff,
-14vw -49vh 1px 0px #fff,
-12vw 45vh 0px 1px #fff,
-44vw -33vh 0px 1px #fff,
-13vw 41vh 0px 0px #fff,
-36vw -11vh 0px 1px #fff,
-23vw -24vh 1px 0px #fff,
-38vw -27vh 0px 1px #fff,
16vw -19vh 0px 0px #fff,
28vw 33vh 1px 0px #fff,
-49vw -4vh 0px 0px #fff,
16vw 32vh 0px 1px #fff,
36vw -18vh 1px 0px #fff,
-25vw -30vh 1px 0px #fff,
-23vw 24vh 0px 1px #fff,
-2vw -35vh 1px 1px #fff,
-25vw 9vh 0px 0px #fff,
-15vw -34vh 0px 0px #fff,
-8vw -19vh 1px 0px #fff,
-20vw -20vh 1px 1px #fff,
42vw 50vh 0px 1px #fff,
-32vw 10vh 1px 0px #fff,
-23vw -17vh 0px 0px #fff,
44vw 15vh 1px 0px #fff,
-40vw 33vh 1px 1px #fff,
-43vw 8vh 0px 0px #fff,
-48vw -15vh 1px 1px #fff,
-24vw 17vh 0px 0px #fff,
-31vw 50vh 1px 0px #fff,
36vw -38vh 0px 1px #fff,
-7vw 48vh 0px 0px #fff,
15vw -32vh 0px 0px #fff,
29vw -41vh 0px 0px #fff,
2vw 37vh 1px 0px #fff,
7vw -40vh 1px 1px #fff,
15vw 18vh 0px 0px #fff,
25vw -13vh 1px 1px #fff,
-46vw -12vh 1px 1px #fff,
-18vw 22vh 0px 0px #fff,
23vw -9vh 1px 0px #fff,
50vw 12vh 0px 1px #fff,
45vw 2vh 0px 0px #fff,
14vw -48vh 1px 0px #fff,
23vw 43vh 0px 1px #fff,
-40vw 16vh 1px 1px #fff,
20vw -31vh 0px 1px #fff,
-17vw 44vh 1px 1px #fff,
18vw -45vh 0px 0px #fff,
33vw -6vh 0px 0px #fff,
0vw 7vh 0px 1px #fff,
-10vw -18vh 0px 1px #fff,
-19vw 5vh 1px 0px #fff,
1vw 42vh 0px 0px #fff,
22vw 48vh 0px 1px #fff,
39vw -8vh 1px 1px #fff,
-6vw -42vh 1px 0px #fff,
-47vw 34vh 0px 0px #fff,
-46vw 19vh 0px 1px #fff,
-12vw -32vh 0px 0px #fff,
-45vw -38vh 0px 1px #fff,
-28vw 18vh 1px 0px #fff,
-38vw -46vh 1px 1px #fff,
49vw -6vh 1px 1px #fff,
-28vw 18vh 1px 1px #fff,
10vw -24vh 0px 1px #fff,
-5vw -11vh 1px 1px #fff,
33vw -8vh 1px 0px #fff,
-16vw 17vh 0px 0px #fff,
18vw 27vh 0px 1px #fff,
-8vw -10vh 1px 1px #fff;
/* Animate movement*/
animation: moveStars 9s linear infinite;
}
@keyframes moveStars {
from { transform: translate(0, 0); }
to { transform: translate(-20vw, 20vh); }
}
/* Rocket container*/
.rocket-container {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/*Rocket animation */
.animate-fly {
animation: fly 4s infinite ease-in-out;
}
@keyframes fly {
0% { transform: translateY(0); }
50% { transform: translateY(-35px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body>
<!-- Starfield Background -->
<div class="main"></div>
<!-- Rocket in the Foreground -->
<div class="rocket-container">
<!-- Inline SVG for the rocket -->
<svg class="w-32 animate-fly" width="358" height="341" viewBox="0 0 358 341" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M308.414 55.4476C290.023 51.986 270.758 52.0525 252.635 56.862C234.27 61.5026 217.291 70.5572 201.926 81.4955C194.048 87.0603 186.527 93.113 179.153 99.3164C168.804 107.87 160.006 118.126 151.783 128.701C151.216 129.389 150.782 130.22 150.02 130.725C150.082 129.881 151.099 129.177 151.241 128.519C140.124 128.07 128.851 129.4 118.278 132.969C110.484 135.728 102.729 139.449 97.0434 145.609C89.3286 153.274 81.7772 161.123 74.7601 169.442C72.0668 172.755 69.3129 176.074 67.2973 179.86C66.6731 181.152 65.8632 182.682 66.6199 184.09C67.6618 186.499 70.0339 189.134 72.9154 188.411C87.6794 186.112 102.535 183.316 117.351 181.066C114.526 186.496 111.338 191.765 108.589 197.246C109.426 200.712 110.939 204.004 112.1 207.342C104.113 207.831 96.5525 211.443 89.9763 215.788C78.2793 223.928 69.4896 235.62 62.947 248.29C56.9485 260.119 52.5169 272.826 49.518 285.67C49.6033 285.802 49.7247 285.952 49.9016 285.896C60.0718 285.037 70.1715 283.215 79.9878 280.424C94.2078 276.377 108.299 270.289 119.222 260.042C127.021 252.873 132.741 243.294 134.78 232.87C137.887 234.469 140.957 236.207 144.214 237.519C149.945 235.603 155.446 233.003 161.097 230.863C161.105 230.987 161.123 231.113 161.119 231.243C157.071 245.459 152.76 259.71 148.753 273.871C148.069 275.393 148.887 277.218 149.858 278.431C151.168 279.634 152.742 281.402 154.743 280.832C157.386 280.218 159.789 278.878 162.147 277.574C174.324 270.389 185.441 261.594 196.521 252.863C199.096 250.581 201.291 247.908 203.308 245.132C212.002 232.765 216.347 217.687 217.417 202.746C228.963 195.644 240.402 188.124 250.124 178.612C264.475 165.179 278.265 150.832 288.859 134.173C293.491 126.838 297.533 119.095 300.599 110.977C307.424 93.4339 309.926 74.2732 308.495 55.5742C308.474 55.5422 308.434 55.4789 308.414 55.4476L308.414 55.4476Z" fill="#85AAB2"/>
<path d="M308.413 55.4437C290.022 51.9821 270.757 52.0486 252.633 56.858C255.234 68.6181 260.572 79.7969 268.205 89.1204C268.627 89.4916 268.987 89.96 269.48 90.2471C282.482 78.6844 295.481 67.1195 308.494 55.5702C308.474 55.5382 308.433 55.4749 308.414 55.4436L308.413 55.4437ZM189.854 160.719C189.8 160.66 189.689 160.673 189.588 160.682C173.084 168.015 158.453 178.928 144.623 190.405C135.196 198.655 125.751 207.035 117.906 216.851C114.322 221.551 110.28 226.452 109.15 232.391C109.67 232.312 110.004 231.807 110.402 231.529C136.886 207.958 163.404 184.424 189.889 160.851C189.894 160.787 189.881 160.745 189.856 160.718L189.854 160.719ZM151.242 128.513C140.124 128.064 128.852 129.394 118.279 132.963C110.485 135.722 102.73 139.443 97.0442 145.603C89.3293 153.268 81.7779 161.117 74.7609 169.436C72.0675 172.749 69.3136 176.068 67.298 179.854C66.6738 181.146 65.8639 182.676 66.6206 184.084C67.6625 186.493 70.0347 189.128 72.9161 188.405C75.8698 186.286 79.1353 184.649 82.4614 183.205C94.7754 178.144 107.96 175.546 121.116 173.871C121.823 173.644 121.118 174.346 121.155 174.667C130.82 160.047 140.332 145.323 150.02 130.719C150.083 129.875 151.099 129.171 151.242 128.513L151.242 128.513ZM136.957 134.517C137.25 134.822 137.29 135.332 136.941 135.643C135.502 137.406 133.421 138.405 131.476 139.494C127.492 141.528 123.323 143.23 119.003 144.401C115.184 145.515 111.507 147.08 107.654 148.072C107.053 148.191 105.727 148.465 105.749 147.513C107.112 144.065 110.334 141.794 113.514 140.12C118.94 137.328 124.815 135.503 130.743 134.131C132.709 133.941 134.821 133.637 136.715 134.343C136.808 134.387 136.889 134.446 136.957 134.517L136.957 134.517Z" fill="#E23525"/>
<path d="M308.492 55.572C295.479 67.1214 282.48 78.6863 269.478 90.2489C268.985 89.9618 268.625 89.4935 268.203 89.1222C268.28 89.2171 268.358 89.3147 268.435 89.413C276.741 99.5375 288.088 107.096 300.596 110.975C307.422 93.4332 309.926 74.2739 308.493 55.5735L308.492 55.572ZM190.495 160.452C190.443 160.431 190.338 160.389 190.286 160.368C190.043 160.449 189.82 160.577 189.586 160.684C189.732 160.671 189.901 160.649 189.886 160.854C163.403 184.426 136.884 207.959 110.399 231.532C110 231.81 109.667 232.315 109.147 232.394C109.109 232.443 109.035 232.542 108.998 232.59C109.095 232.808 109.312 232.776 109.506 232.746C115.458 232.081 120.73 228.878 125.774 225.867C136.611 218.946 146.418 210.542 155.835 201.828C168.879 189.422 181.35 176.062 190.493 160.453L190.495 160.452ZM217.417 202.741C201.851 212.107 185.472 220.043 168.91 227.472C166.853 235.845 164.322 244.112 161.113 252.119C157.96 259.845 154.281 267.529 148.752 273.867C148.068 275.388 148.886 277.214 149.857 278.426C151.168 279.63 152.742 281.398 154.743 280.828C157.386 280.214 159.789 278.874 162.147 277.569C174.324 270.385 185.441 261.589 196.521 252.858C199.095 250.577 201.29 247.903 203.308 245.128C212.002 232.761 216.346 217.682 217.417 202.741Z" fill="#C62C24"/>
<path d="M252.634 56.858C234.269 61.4986 217.29 70.5533 201.925 81.4915C194.047 87.0564 186.526 93.109 179.152 99.3124C168.803 107.866 160.005 118.122 151.782 128.697C151.215 129.384 150.781 130.216 150.019 130.721C140.33 145.325 130.819 160.049 121.153 174.669C119.819 176.758 118.508 178.867 117.35 181.062C114.526 186.492 111.337 191.761 108.588 197.242C109.425 200.708 110.938 204 112.099 207.338C113.287 209.971 114.653 212.535 116.275 214.927C116.768 215.588 117.07 216.591 117.904 216.853C125.749 207.037 135.194 198.657 144.622 190.407C158.451 178.93 173.082 168.017 189.586 160.684C189.82 160.578 190.043 160.449 190.286 160.368C200.12 151.959 209.742 143.114 219.497 134.542C214.407 128.437 212.892 120.015 214.25 112.316C216.233 101.194 226.416 92.2341 237.72 91.7693C245.346 91.2713 253.103 94.4435 258.166 100.168C261.852 96.9335 265.448 93.5935 269.2 90.4359C268.964 90.0792 268.687 89.7507 268.434 89.4111C268.357 89.3128 268.28 89.2152 268.202 89.1204C260.569 79.7969 255.231 68.6181 252.631 56.858L252.634 56.858ZM247.672 108.072C247.591 107.979 247.503 107.89 247.408 107.806C245.587 105.864 241.924 106.772 241.304 109.415C240.411 112.016 243.206 114.8 245.79 113.951C248.347 113.418 249.333 109.955 247.672 108.072ZM237.114 107.035C237.032 106.945 236.941 106.858 236.841 106.776C233.488 104.333 227.278 107.257 227.746 111.569C229.224 115.079 234.237 114.004 236.378 111.73C237.681 110.616 238.353 108.393 237.114 107.035Z" fill="#F9F9F9"/>
<path d="M268.435 89.4089C276.741 99.5334 288.088 107.092 300.596 110.971C297.53 119.089 293.488 126.832 288.856 134.167C278.263 150.826 264.472 165.173 250.121 178.605C240.399 188.117 228.96 195.638 217.414 202.739C201.849 212.105 185.47 220.041 168.907 227.47C166.304 228.598 163.688 229.703 161.094 230.857C155.443 232.997 149.942 235.596 144.211 237.513C140.954 236.2 137.885 234.462 134.777 232.863C132.41 231.333 130.054 229.772 127.892 227.955C127.214 227.238 126.239 226.747 125.773 225.864C136.611 218.943 146.417 210.538 155.834 201.825C168.878 189.419 181.349 176.058 190.492 160.45C190.44 160.429 190.336 160.387 190.284 160.366C200.118 151.957 209.739 143.112 219.495 134.539C224.386 140.713 232.304 144.247 240.159 143.931C249.927 143.707 259.194 137.249 262.798 128.168C266.444 118.948 264.913 107.592 258.166 100.165C261.852 96.9313 265.449 93.5912 269.2 90.4337C268.965 90.077 268.688 89.7485 268.435 89.4089Z" fill="#E8E8E8"/>
<path d="M237.721 91.767C245.346 91.2691 253.103 94.4413 258.166 100.165C264.913 107.592 266.444 118.948 262.798 128.168C259.194 137.249 249.927 143.707 240.159 143.932C232.304 144.247 224.386 140.713 219.495 134.539C214.405 128.434 212.89 120.012 214.248 112.313C216.23 101.194 226.418 92.2325 237.721 91.767ZM247.765 99.5003C241.173 96.2461 232.75 97.1373 227.037 101.795C223.339 104.761 220.604 109.087 219.97 113.815C218.66 120.271 221.16 127.364 226.113 131.705C229.829 135.102 234.928 136.934 239.958 136.703C245.7 136.505 251.316 133.652 254.756 129.027C258.024 124.824 259.413 119.222 258.513 113.984C257.72 107.785 253.399 102.185 247.765 99.5003Z" fill="#3A3A3A"/>
<path d="M236.42 101.913C245.409 100.573 254.76 105.725 258.514 113.985C259.414 119.223 258.025 124.825 254.757 129.028C251.317 133.652 245.701 136.505 239.959 136.704C234.929 136.935 229.83 135.103 226.114 131.705C221.161 127.365 218.661 120.272 219.971 113.815C223.106 107.506 229.363 102.762 236.42 101.913ZM247.407 107.804C245.585 105.862 241.923 106.77 241.303 109.413C240.41 112.014 243.205 114.798 245.789 113.949C248.472 113.39 249.425 109.605 247.407 107.804ZM236.84 106.774C233.487 104.331 227.277 107.255 227.745 111.567C229.223 115.077 234.236 114.002 236.377 111.728C237.767 110.54 238.439 108.089 236.84 106.774Z" fill="#B6E2EF"/>
<path d="M136.708 134.343C137.205 134.577 137.363 135.261 136.934 135.643C135.495 137.406 133.414 138.405 131.469 139.494C127.486 141.528 123.317 143.23 118.996 144.401C115.177 145.515 111.5 147.08 107.647 148.073C107.046 148.192 105.72 148.465 105.742 147.514C107.105 144.065 110.327 141.795 113.507 140.12C118.933 137.328 124.808 135.504 130.736 134.131C132.702 133.941 134.814 133.638 136.708 134.343Z" fill="#F45349"/>
<path d="M121.411 173.85C121.377 173.811 121.289 173.81 121.112 173.867C107.956 175.541 94.7715 178.139 82.4575 183.2C79.1313 184.645 75.8659 186.281 72.9122 188.4C87.6762 186.101 102.532 183.305 117.348 181.055C118.506 178.86 119.816 176.751 121.151 174.662C121.124 174.421 121.513 173.967 121.411 173.85L121.411 173.85ZM168.907 227.465C166.303 228.594 163.688 229.699 161.094 230.852C161.102 230.976 161.12 231.102 161.115 231.232C157.068 245.448 152.757 259.699 148.75 273.86C154.278 267.522 157.958 259.839 161.11 252.112C164.319 244.106 166.851 235.838 168.907 227.465L168.907 227.465Z" fill="#9E1E1D"/>
<path d="M112.101 207.335C113.289 209.967 114.655 212.532 116.277 214.923C109.984 216.013 104.347 219.472 99.6988 223.745C90.2005 232.818 84.5686 245.137 80.9139 257.565C80.8758 257.687 80.8361 257.814 80.792 257.943C70.2732 267.067 59.9372 276.415 49.5197 285.663C52.5185 272.818 56.9501 260.112 62.9485 248.283C69.4911 235.612 78.2808 223.921 89.9778 215.78C96.554 211.435 104.115 207.823 112.101 207.335Z" fill="#EB9D21"/>
<path d="M127.893 227.957C130.055 229.774 132.411 231.334 134.779 232.865C132.74 243.29 127.019 252.868 119.22 260.038C108.297 270.284 94.2061 276.372 79.9861 280.419C70.1699 283.21 60.0701 285.033 49.9 285.892C49.723 285.947 49.6017 285.797 49.5164 285.666C59.9339 276.418 70.27 267.07 80.7888 257.946C91.9551 256.476 103.101 253.297 112.69 247.247C119.808 242.869 125.704 236.132 127.893 227.957Z" fill="#D3891E"/>
<path d="M116.273 214.929C116.765 215.591 117.067 216.593 117.902 216.855C114.317 221.555 110.275 226.456 109.145 232.395C109.108 232.444 109.034 232.543 108.997 232.592C99.6747 240.961 90.2983 249.274 80.909 257.571C84.5637 245.143 90.1956 232.823 99.694 223.751C104.342 219.478 109.98 216.019 116.273 214.929Z" fill="#FAEE1E"/>
<path d="M125.769 225.867C126.235 226.749 127.21 227.24 127.888 227.957C125.699 236.133 119.803 242.87 112.685 247.248C103.096 253.297 91.9501 256.477 80.7839 257.946C80.8279 257.817 80.8677 257.691 80.9057 257.568C90.295 249.272 99.6713 240.958 108.993 232.59C109.09 232.807 109.307 232.775 109.501 232.745C115.454 232.08 120.725 228.877 125.769 225.867Z" fill="#DECF1E"/>
</svg>
</div>
</body>
</html>