├── img ├── bus.png ├── logo.png ├── search.png ├── engines.png ├── rocket1.png ├── rocket2.png ├── rocket3.png ├── sunrise.jpg └── astronaut.png ├── README.md ├── variables.css ├── utlilities.css ├── app.js ├── index.html └── styles.css /img/bus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/bus.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/search.png -------------------------------------------------------------------------------- /img/engines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/engines.png -------------------------------------------------------------------------------- /img/rocket1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/rocket1.png -------------------------------------------------------------------------------- /img/rocket2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/rocket2.png -------------------------------------------------------------------------------- /img/rocket3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/rocket3.png -------------------------------------------------------------------------------- /img/sunrise.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/sunrise.jpg -------------------------------------------------------------------------------- /img/astronaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DYNAMICMORTAL/SpaceX_redesign/HEAD/img/astronaut.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SpaceX_redesign 2 | A complete static re-design of Space X. 3 | 4 | Updates:- 5 | => Responsive Design on the way. 6 | -------------------------------------------------------------------------------- /variables.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary: #1E1E1E; 3 | --dark: #121212; 4 | --pure: #ffffff; 5 | --gray: #1D1D1D; 6 | --mild: #B9B8B8; 7 | } -------------------------------------------------------------------------------- /utlilities.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | width: 1460px; 3 | max-width: 90%; 4 | margin: 0 auto; 5 | } 6 | .btn{ 7 | padding: 8px 30px; 8 | border: 1px solid transparent; 9 | border-radius: 50px; 10 | outline: none; 11 | cursor: pointer; 12 | font-size: 16px; 13 | transition: all .5s ease-in-out; 14 | } 15 | .btn-primary{ 16 | color: var(--dark); 17 | background: var(--pure); 18 | } 19 | .btn-primary:hover{ 20 | background: transparent; 21 | color: var(--pure); 22 | border: 1px solid var(--pure); 23 | } 24 | .btn-secondary{ 25 | background: transparent; 26 | color: var(--pure); 27 | border: 1px solid var(--pure); 28 | } 29 | .btn-secondary:hover{ 30 | color: var(--dark); 31 | background: var(--pure); 32 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | (function (){ 2 | let socials = document.querySelectorAll('.social div') 3 | 4 | socials.forEach(function(social, index) { 5 | social.style.animation = `moveIn 1s ease-in-out forwards $(index/5)s` 6 | }) 7 | 8 | let rocketPieces = document.querySelectorAll('.rocket-body span') 9 | 10 | let rocket = document.querySelector('.rocket') 11 | 12 | let triggerStart = window.innerHeight / 5; 13 | 14 | let rocketOffsetTop = rocket.offsetTop; 15 | 16 | let thirdOffsetTop = rocketPieces[2].offsetTop; 17 | 18 | document.addEventListener('scroll', (e) =>{ 19 | if(window.scrollY > (rocketOffsetTop - triggerStart)){ 20 | rocketPieces[0].classList.add('active'); 21 | rocketPieces[1].classList.add('active'); 22 | } else { 23 | rocketPieces[0].classList.remove('active'); 24 | rocketPieces[1].classList.remove('active'); 25 | } 26 | 27 | if(window.scrollY > (thirdOffsetTop - triggerStart)){ 28 | rocketPieces[2].classList.add('active'); 29 | } else { 30 | rocketPieces[2].classList.remove('active'); 31 | } 32 | } ) 33 | 34 | 35 | }()) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Space X 9 | 10 | 11 | 12 | 13 | 14 |
15 | 37 |
38 | 44 |
45 |
46 |

Space Exploration Technologies Corp. trading as SpaceX, is a private american aerospace 47 | manafacturer headquartered California.

48 | 49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 |

Starlink Mission

58 | 59 |
60 | 61 |
62 |
63 |
64 |

FALCON9

65 |

66 | Falcon 9 is a two-stage rocket designed and manafactured by Space X for the reliable and safe transport of Satellites and the Dragon Spacecraft into Orbit. 67 |

68 |
69 |
70 |

DRAGON SPACECRAFT

71 |

72 | Dragon carries cargo in the spacecraft's pressurized cap and unpressurized trunk, which can also accomodate secondary payloads. In future, Dragon will carry astronauts in the pressurized capsule as well. 73 |

74 | 75 |
76 |
77 |

COMPOSITE FAIRING

78 |

79 | The payload fairing is for the delivery of the satellites to the destinations in Low Earth Orbit (LEO), Geosynchronous transfer orbit (GTO) and beyond. 80 |

81 | 82 |
83 |
84 |

FIRST STAGE

85 |

86 | Falcon 9's first stage incorporates nine Merlin engines and aluminum-lithium alloy tanks containing liquid oxygen and rocket-grade kerosene (RP-1) propellant. 87 |

88 | 89 |
90 |
91 |
92 |

ENGINE

93 |
9
94 |
95 |
96 |

BURNTIME

97 |
162 SEC
98 |
99 |
100 |
101 |
102 |

Thrust At Sea Level

103 |
7,607kN1
104 |
105 |
106 |
107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 |
118 |
119 |
120 | 121 |
122 |
123 |

PAYLOAD

124 |

125 | Falcon 9 delivers payloads to space aboard the Dragon spacecraft or inside a composite fairing. 126 |

127 |
128 |
129 |

SECOND STAGE

130 |

131 | The second stage powered by a single Merlin vaccumm engine delivers Falcon 9's payload to the desired orbit. For maximum reliablity the second stage has redundant igniter systems. 132 |

133 |
134 |
135 |
136 |

ENGINE

137 |
9
138 |
139 |
140 |

BURNTIME

141 |
162 SEC
142 |
143 |
144 |
145 |
146 |

Thrust At Sea Level

147 |
7,607kN1
148 |
149 |
150 |
151 | 152 |
153 |
154 |

NINE MARLINE ENGINES

155 |

156 | With its nine first-stage Merlin engines clustered together, Falcon 9 can sustain upto two engines shutdown during flight and successfully complete its mission. Falcon 9 is the only launch vehicle in its class with this key reliablity feature. 157 |

158 |
159 |
160 |
161 | 162 | 200 | 201 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;700&display=swap'); 2 | @import './utlilities.css'; 3 | @import './variables.css'; 4 | 5 | *{ 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | -webkit-font-smoothing: antialiased; 10 | } 11 | 12 | body{ 13 | font-family: 'Montserrat', sans-serif; 14 | color: var(--pure); 15 | background: var(--primary); 16 | } 17 | header{ 18 | background: linear-gradient(135deg, rgba(0,0,0,1), rgba(0,0,0,0.2)), url('./img/sunrise.jpg'); 19 | min-height: 100vh; 20 | background-size: cover; 21 | } 22 | header nav{ 23 | padding: 20px 40px 20px 100px; 24 | display: grid; 25 | grid-template-columns: 1fr 2fr; 26 | align-items: center; 27 | border-bottom: 1px solid var(--gray); 28 | } 29 | header nav .nav-right{ 30 | display: flex; 31 | align-items: center; 32 | justify-content: space-between; 33 | } 34 | header nav .nav-right a{ 35 | text-decoration: none; 36 | color: var(--pure); 37 | margin-right: 30px; 38 | position: relative; 39 | } 40 | header nav .nav-right a::after{ 41 | content: ''; 42 | position: absolute; 43 | left: 0; 44 | bottom: -30px; 45 | width: 0; 46 | height: 2px; 47 | background: var(--pure); 48 | transition: width .3s ease-in-out; 49 | } 50 | header nav .nav-right a:hover::after{ 51 | width: 75%; 52 | } 53 | header nav .nav-right a.active:after{ 54 | width: 70%; 55 | } 56 | 57 | header nav .nav-right .search > div{ 58 | background: var(--dark); 59 | display: flex; 60 | align-items: center; 61 | padding: 10px 15px; 62 | border-radius: 50px; 63 | } 64 | header nav .nav-right .search > div input{ 65 | background: transparent; 66 | border: none; 67 | outline: none; 68 | font-size: 16px; 69 | color: var(--pure); 70 | } 71 | header nav .nav-right .search > div img{ 72 | padding-right: 16px; 73 | } 74 | 75 | .social div{ 76 | border: 2px solid var(--pure); 77 | width: 40px; 78 | height: 40px; 79 | border-radius: 50%; 80 | display: flex; 81 | justify-content: center; 82 | align-items: center; 83 | margin-bottom: 30px; 84 | opacity: 0; 85 | animation: moveIn .6s cubic-bezier(.51,.92,.24,1.15) forwards; 86 | } 87 | 88 | @keyframes moveIn { 89 | from{ 90 | transform: translateX(-100px); 91 | } 92 | to{ 93 | transform: translateX(0px); 94 | opacity: 1; 95 | } 96 | } 97 | .social svg path{ 98 | fill: var(--pure); 99 | } 100 | .social div:hover svg path{ 101 | fill: var(--dark); 102 | transition: all .5s ease-in-out; 103 | } 104 | .social div:hover{ 105 | background: var(--pure); 106 | } 107 | 108 | .hero{ 109 | position: relative; 110 | } 111 | .social{ 112 | position: absolute; 113 | left: 0; 114 | top:0; 115 | border-right: 1px solid var(--gray); 116 | width: 100px; 117 | display: flex; 118 | align-items: center; 119 | justify-content: center; 120 | flex-direction: column; 121 | min-height: 90vh; 122 | } 123 | 124 | .hero .cta{ 125 | display: flex; 126 | align-items: center; 127 | justify-self: space-between; 128 | min-height: calc(100vh - 80px); 129 | width: 1100px; 130 | } 131 | .hero .cta h1{ 132 | font-weight: 400; 133 | font-size: 22px; 134 | line-height: 1.7; 135 | margin-bottom: 30px; 136 | } 137 | 138 | .hero .cta > div{ 139 | flex: 1; 140 | } 141 | .hero .cta .left-section{ 142 | padding: 0 60px 0 30px; 143 | } 144 | 145 | .hero .cta .right-section img{ 146 | height: 70vh; 147 | animation: moveInSpace 12s ease-in-out infinite alternate; 148 | transform: rotate(20deg); 149 | } 150 | @keyframes moveInSpace { 151 | 50%{ 152 | transform: translateY(100px) rotate(-30deg) scale(.8); 153 | } 154 | } 155 | 156 | section.strip{ 157 | display: flex; 158 | justify-content: space-around; 159 | align-items: center; 160 | background: var(--dark); 161 | padding: 45px 0; 162 | } 163 | 164 | section.rocket{ 165 | display: grid; 166 | grid-template-columns: 1fr 100px 1fr; 167 | grid-gap: 80px; 168 | padding: 100px 0; 169 | } 170 | section.rocket .rocket-body{ 171 | display: flex; 172 | flex-direction: column; 173 | justify-content: center; 174 | } 175 | 176 | section.rocket .rocket-body span{ 177 | font-size: 0; 178 | position: relative; 179 | } 180 | section.rocket .rocket-body span img{ 181 | width: 100%; 182 | } 183 | section.rocket .block{ 184 | width: 70%; 185 | } 186 | section.rocket .block h1{ 187 | font-size: 32px; 188 | font-weight: 400; 189 | } 190 | 191 | section.rocket .block .with-underline{ 192 | position: relative; 193 | margin-bottom: 38px; 194 | } 195 | section.rocket .block .with-underline::before{ 196 | content: ''; 197 | position: absolute; 198 | left: 0; 199 | bottom: -12px; 200 | display: block; 201 | width: 38%; 202 | height: 2px; 203 | background: var(--pure); 204 | } 205 | 206 | section.rocket p{ 207 | line-height: 1.6; 208 | } 209 | 210 | section.rocket h2{ 211 | font-weight: 400; 212 | margin-bottom: 20px; 213 | } 214 | 215 | section.rocket .block.payload{ 216 | padding-top: 111px; 217 | } 218 | 219 | section.rocket .block.payload h2{ 220 | padding-left: 80px; 221 | } 222 | section.rocket .block.dragon{ 223 | padding-top: 120px; 224 | } 225 | 226 | section.rocket .block button{ 227 | margin-top: 30px; 228 | } 229 | section.rocket .block.composite{ 230 | padding-top: 60px; 231 | } 232 | 233 | section.rocket .block.first-stage{ 234 | padding-top: 60px; 235 | } 236 | section.rocket .block.capacity{ 237 | display: flex; 238 | align-items: center; 239 | padding-top: 40px; 240 | } 241 | section.rocket .block.capacity > div:first-child{ 242 | margin-right: 40px; 243 | } 244 | section.rocket .block.capacity h1{ 245 | font-size: 12px; 246 | font-weight: 400; 247 | margin-bottom: 20px; 248 | } 249 | 250 | section.rocket .block.capacity h6 { 251 | font-size: 40px; 252 | font-weight: 400; 253 | } 254 | section.rocket .block.capacity small{ 255 | font-size: 12px; 256 | } 257 | 258 | section.rocket .right-block .block.capacity{ 259 | padding-top: 120px; 260 | } 261 | section.rocket .right-block .block.capacity.single{ 262 | padding-top: 40px; 263 | } 264 | 265 | section.rocket .right-block .block.engines{ 266 | display: flex; 267 | justify-content: center; 268 | padding-top: 40px; 269 | } 270 | 271 | section.rocket .right-block .block.engines img{ 272 | width: 180px; 273 | } 274 | 275 | section.rocket .right-block .block.marine{ 276 | padding-top: 100px; 277 | width: 70%; 278 | } 279 | 280 | section.rocket .right-block .block.marine h2{ 281 | font-size: 14px; 282 | padding-left: 100px; 283 | margin-bottom: 26px; 284 | } 285 | section.rocket .right-block .floating-graphics{ 286 | position: sticky; 287 | float: right; 288 | top: 60px; 289 | margin-right: -60px; 290 | } 291 | section.rocket .right-block .floating-graphics img{ 292 | height: 300px; 293 | } 294 | 295 | section.rocket .rocket-body span::after, section.rocket .rocket-body span:nth-child(3):before{ 296 | content: ''; 297 | display: block; 298 | position: absolute; 299 | height: 2px; 300 | background: var(--pure); 301 | width: 0px; 302 | transition: width 1s ease-in-out; 303 | } 304 | section.rocket .rocket-body span:nth-child(1)::after{ 305 | bottom: 40px; 306 | left: 96%; 307 | } 308 | 309 | section.rocket .rocket-body span:nth-child(2)::after{ 310 | bottom: 62%; 311 | right: 100%; 312 | } 313 | 314 | section.rocket .rocket-body span:nth-child(3)::after{ 315 | bottom: 58%; 316 | right: 90%; 317 | } 318 | 319 | section.rocket .rocket-body span.active:nth-child(3)::before{ 320 | bottom: 35%; 321 | left: 90%; 322 | width: 160px; 323 | } 324 | section.rocket .rocket-body span.active:nth-child(1)::after{ 325 | width: 120px; 326 | } 327 | section.rocket .rocket-body span.active:nth-child(2)::after{ 328 | width: 180px; 329 | } 330 | 331 | section.rocket .rocket-body span.active:nth-child(3)::after{ 332 | width: 200px; 333 | } 334 | 335 | @keyframes jump { 336 | 50%{ 337 | transform: translateY(-50px); 338 | } 339 | } 340 | 341 | section.rocket .rocket-body span.active:nth-child(1) { 342 | animation: jump 1s ease-in-out forwards; 343 | } 344 | 345 | footer { 346 | background: var(--dark); 347 | padding: 60px 0; 348 | } 349 | 350 | footer > div { 351 | display: grid; 352 | grid-template-columns: repeat(4, 1fr); 353 | } 354 | 355 | footer .copyright span { 356 | font-size: 12px; 357 | display: inline-block; 358 | margin-top: 5px; 359 | } 360 | 361 | footer .copyright img { 362 | height: 30px; 363 | } 364 | 365 | footer h1 { 366 | font-size: 18px; 367 | position: relative; 368 | margin-bottom: 30px; 369 | } 370 | 371 | footer h1::after{ 372 | content: ''; 373 | position: absolute; 374 | left: 0; 375 | bottom: -8px; 376 | display : block; 377 | width: 60px; 378 | height: 2px; 379 | background: var(--pure); 380 | } 381 | 382 | footer ul { 383 | list-style-type: none; 384 | } 385 | 386 | footer li:nth-child(even) { 387 | margin: 10px 0; 388 | } 389 | 390 | footer ul li a { 391 | text-decoration: none; 392 | color: var(--mild); 393 | font-size: 14px; 394 | transition: all .3s ease-in-out; 395 | } 396 | 397 | footer ul li a:hover{ 398 | color: var(--pure); 399 | } 400 | 401 | footer .footer-socials a { 402 | margin-right: 20px; 403 | font-size: 22px; 404 | color: var(--mild) 405 | } 406 | 407 | footer .footer-socials a:hover{ 408 | color: var(--pure); 409 | } --------------------------------------------------------------------------------