├── preview.jpg ├── assets ├── favicon-32x32.png ├── destination │ ├── image-mars.png │ ├── image-moon.png │ ├── image-europa.png │ ├── image-europa.webp │ ├── image-mars.webp │ ├── image-moon.webp │ ├── image-titan.png │ ├── image-titan.webp │ ├── background-destination-desktop.jpg │ ├── background-destination-mobile.jpg │ └── background-destination-tablet.jpg ├── crew │ ├── image-douglas-hurley.png │ ├── image-victor-glover.png │ ├── image-victor-glover.webp │ ├── background-crew-mobile.jpg │ ├── background-crew-tablet.jpg │ ├── image-anousheh-ansari.png │ ├── image-anousheh-ansari.webp │ ├── image-douglas-hurley.webp │ ├── background-crew-desktop.jpg │ ├── image-mark-shuttleworth.png │ └── image-mark-shuttleworth.webp ├── home │ ├── background-home-mobile.jpg │ ├── background-home-tablet.jpg │ └── background-home-desktop.jpg ├── technology │ ├── image-spaceport-portrait.jpg │ ├── image-spaceport-landscape.jpg │ ├── background-technology-desktop.jpg │ ├── background-technology-mobile.jpg │ ├── background-technology-tablet.jpg │ ├── image-launch-vehicle-portrait.jpg │ ├── image-space-capsule-landscape.jpg │ ├── image-space-capsule-portrait.jpg │ └── image-launch-vehicle-landscape.jpg └── shared │ ├── icon-hamburger.svg │ ├── icon-close.svg │ └── logo.svg ├── space-tourism-website-figma ├── __MACOSX │ └── space-tourism-website-figma │ │ └── ._README.md └── space-tourism-website-figma │ └── README.md ├── space-tourism-website-sketch ├── __MACOSX │ └── space-tourism-website-sketch │ │ └── ._README.md └── space-tourism-website-sketch │ └── README.md ├── js ├── app.js ├── crew.js ├── technology.js └── destination.js ├── .gitignore ├── LICENSE ├── index.html ├── css ├── home.css ├── crew.css ├── technology.css ├── destination.css └── main.css ├── crew-commander.html ├── technology-vehicle.html ├── destination-moon.html └── README.md /preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/preview.jpg -------------------------------------------------------------------------------- /assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/favicon-32x32.png -------------------------------------------------------------------------------- /assets/destination/image-mars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-mars.png -------------------------------------------------------------------------------- /assets/destination/image-moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-moon.png -------------------------------------------------------------------------------- /assets/crew/image-douglas-hurley.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-douglas-hurley.png -------------------------------------------------------------------------------- /assets/crew/image-victor-glover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-victor-glover.png -------------------------------------------------------------------------------- /assets/crew/image-victor-glover.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-victor-glover.webp -------------------------------------------------------------------------------- /assets/destination/image-europa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-europa.png -------------------------------------------------------------------------------- /assets/destination/image-europa.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-europa.webp -------------------------------------------------------------------------------- /assets/destination/image-mars.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-mars.webp -------------------------------------------------------------------------------- /assets/destination/image-moon.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-moon.webp -------------------------------------------------------------------------------- /assets/destination/image-titan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-titan.png -------------------------------------------------------------------------------- /assets/destination/image-titan.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/image-titan.webp -------------------------------------------------------------------------------- /assets/crew/background-crew-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/background-crew-mobile.jpg -------------------------------------------------------------------------------- /assets/crew/background-crew-tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/background-crew-tablet.jpg -------------------------------------------------------------------------------- /assets/crew/image-anousheh-ansari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-anousheh-ansari.png -------------------------------------------------------------------------------- /assets/crew/image-anousheh-ansari.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-anousheh-ansari.webp -------------------------------------------------------------------------------- /assets/crew/image-douglas-hurley.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-douglas-hurley.webp -------------------------------------------------------------------------------- /assets/home/background-home-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/home/background-home-mobile.jpg -------------------------------------------------------------------------------- /assets/home/background-home-tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/home/background-home-tablet.jpg -------------------------------------------------------------------------------- /assets/crew/background-crew-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/background-crew-desktop.jpg -------------------------------------------------------------------------------- /assets/crew/image-mark-shuttleworth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-mark-shuttleworth.png -------------------------------------------------------------------------------- /assets/crew/image-mark-shuttleworth.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/crew/image-mark-shuttleworth.webp -------------------------------------------------------------------------------- /assets/home/background-home-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/home/background-home-desktop.jpg -------------------------------------------------------------------------------- /assets/technology/image-spaceport-portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-spaceport-portrait.jpg -------------------------------------------------------------------------------- /assets/shared/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/technology/image-spaceport-landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-spaceport-landscape.jpg -------------------------------------------------------------------------------- /assets/technology/background-technology-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/background-technology-desktop.jpg -------------------------------------------------------------------------------- /assets/technology/background-technology-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/background-technology-mobile.jpg -------------------------------------------------------------------------------- /assets/technology/background-technology-tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/background-technology-tablet.jpg -------------------------------------------------------------------------------- /assets/technology/image-launch-vehicle-portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-launch-vehicle-portrait.jpg -------------------------------------------------------------------------------- /assets/technology/image-space-capsule-landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-space-capsule-landscape.jpg -------------------------------------------------------------------------------- /assets/technology/image-space-capsule-portrait.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-space-capsule-portrait.jpg -------------------------------------------------------------------------------- /assets/destination/background-destination-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/background-destination-desktop.jpg -------------------------------------------------------------------------------- /assets/destination/background-destination-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/background-destination-mobile.jpg -------------------------------------------------------------------------------- /assets/destination/background-destination-tablet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/destination/background-destination-tablet.jpg -------------------------------------------------------------------------------- /assets/technology/image-launch-vehicle-landscape.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/assets/technology/image-launch-vehicle-landscape.jpg -------------------------------------------------------------------------------- /space-tourism-website-figma/__MACOSX/space-tourism-website-figma/._README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/space-tourism-website-figma/__MACOSX/space-tourism-website-figma/._README.md -------------------------------------------------------------------------------- /space-tourism-website-sketch/__MACOSX/space-tourism-website-sketch/._README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/all-my-frontend-mini-projects/Space-tourism-website-frontend/HEAD/space-tourism-website-sketch/__MACOSX/space-tourism-website-sketch/._README.md -------------------------------------------------------------------------------- /assets/shared/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/shared/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/app.js: -------------------------------------------------------------------------------- 1 | const openMenu = document.querySelector(".open-menu"); 2 | const closeMenu = document.querySelector(".close-menu"); 3 | const menu = document.querySelector("header nav"); 4 | openMenu.addEventListener("click", () => { 5 | menu.classList.add("active"); 6 | }); 7 | closeMenu.addEventListener("click", () => { 8 | menu.classList.remove("active"); 9 | }); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /js/crew.js: -------------------------------------------------------------------------------- 1 | const dots = document.querySelectorAll(".dots .dot"); 2 | let role = document.querySelector(".role"); 3 | let name = document.querySelector(".name"); 4 | let bio = document.querySelector(".bio"); 5 | let image = document.querySelector(".image"); 6 | let elements = []; 7 | 8 | fetch("https://achrafedd.github.io/Space-Tourism/data.json") 9 | .then((res) => res.json()) 10 | .then((data) => { 11 | for (let i = 0; i < data.crew.length; i++) { 12 | elements.push(data.crew[i]); 13 | } 14 | }); 15 | 16 | dots.forEach((dot) => { 17 | dot.addEventListener("click", (e) => { 18 | dots.forEach((dot) => { 19 | dot.classList.remove("active"); 20 | }); 21 | dot.classList.add("active"); 22 | role.innerText = elements[dot.dataset.num - 1].role; 23 | name.innerText = elements[dot.dataset.num - 1].name; 24 | bio.innerText = elements[dot.dataset.num - 1].bio; 25 | image.src = elements[dot.dataset.num - 1].images.webp; 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sarthak Sachdev 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 | -------------------------------------------------------------------------------- /js/technology.js: -------------------------------------------------------------------------------- 1 | const btns = document.querySelectorAll(".enumirate .num"); 2 | let name = document.querySelector(".name"); 3 | let description = document.querySelector(".description"); 4 | let image = document.querySelector(".image"); 5 | let allData = []; 6 | let num = 0; 7 | let img = ""; 8 | 9 | fetch("https://achrafedd.github.io/Space-Tourism/data.json") 10 | .then((res) => res.json()) 11 | .then((data) => { 12 | for (let i = 0; i < data.technology.length; i++) { 13 | allData.push(data.technology[i]); 14 | } 15 | }); 16 | 17 | (function () { 18 | window.onresize = displayWindowSize; 19 | window.onload = displayWindowSize; 20 | 21 | function displayWindowSize() { 22 | let myWidth = window.innerWidth; 23 | // your size calculation code here 24 | if (myWidth >= 1100) { 25 | img = "portrait"; 26 | } else { 27 | img = "landscape"; 28 | } 29 | image.src = allData[num].images[img]; 30 | } 31 | })(); 32 | 33 | btns.forEach((btn) => { 34 | btn.addEventListener("click", () => { 35 | btns.forEach((btn) => { 36 | btn.classList.remove("active"); 37 | }); 38 | btn.classList.add("active"); 39 | num = btn.innerText - 1; 40 | name.innerText = allData[num].name; 41 | description.innerText = allData[num].description; 42 | image.src = allData[num].images[img]; 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /space-tourism-website-figma/space-tourism-website-figma/README.md: -------------------------------------------------------------------------------- 1 | # Using the Figma design file 2 | 3 | Using this design file will help you practice building projects in the same way professionals do. Seeing the details in the design will help you improve your accuracy when building projects and build projects faster. 4 | 5 | [Figma](https://www.figma.com/) is an extremely popular design tool that has a generous free tier and can also be used on both Windows and Mac computers. 6 | 7 | To get started with Figma, [download the correct app for your operating system](https://www.figma.com/downloads/). You can then open the app and open the `.fig` design file by dragging it over the app and dropping it into the projects home screen. 8 | 9 | If you're going to use the Desktop App, you don't need to download the Font Installer from the downloads page. But if you're planning on using the Figma web app you should download and install it to ensure the fonts show up correctly. 10 | 11 | If you haven't used Figma before, here are a couple of great resources to get you up to speed: 12 | 13 | - [“Everything Developers Need To Know About Figma” article on Smashing Magazine](https://www.smashingmagazine.com/2020/09/figma-developers-guide/) 14 | - ["Introduction to Figma for Developers" video with Ryan Warner and Jason Lengstorf on Learn with Jason](https://www.learnwithjason.dev/introduction-to-figma-for-developers) 15 | 16 | --- 17 | 18 | **⚠️ IMPORTANT ⚠️: Please be sure not to share our design files with anyone else. We include `.gitignore` files in the starter code download to help prevent you from accidentally uploading it to GitHub. Another easy way to prevent this is to keep the design file separate from your codebase.** 19 | 20 | --- 21 | 22 | Thanks for being a PRO member. We hope you enjoy the challenge! 🙂 -------------------------------------------------------------------------------- /space-tourism-website-sketch/space-tourism-website-sketch/README.md: -------------------------------------------------------------------------------- 1 | # Using the Sketch design file 2 | 3 | Using this design files will help you practice building projects in the same way professionals do. Seeing the details in the design will help you improve your accuracy when building projects and build projects faster. 4 | 5 | [Sketch](https://www.sketch.com/) is a popular design tool, but it requires a license and macOS in order to use it. If you've got both, the Sketch file will be a great option for you. 6 | 7 | If you haven't used Sketch before, here's a great guide that gives [Sketch tips for developers](https://blog.prototypr.io/sketch-tips-for-developers-4cbc9789b244). 8 | 9 | You can also import the Sketch file into Adobe XD, if you prefer to use that. We provide information on how to do this below. 10 | 11 | ## Adobe XD 12 | 13 | We don't include XD files as a download option, but if you want to use it you can import the Sketch file into Adobe XD very easily. 14 | 15 | It's worth noting that there can be rendering issues when importing Sketch files into XD, so we strongly recommend using either Sketch or Figma to view the designs. 16 | 17 | If you do want to get started with XD though, [head over to the downloads page and choose the free version](https://www.adobe.com/uk/products/xd/pricing/individual.html). Once you’ve downloaded and opened the app, go to File > Open from Your Computer and then find the challenge Sketch file on your computer and open it up. Once that’s done, you’ll be able to dive into the design on Adobe XD! 18 | 19 | --- 20 | 21 | **⚠️ IMPORTANT ⚠️: Please be sure not to share our design files with anyone else. We include `.gitignore` files in the starter code download to help prevent you from accidentally uploading it to GitHub. Another easy way to prevent this is to keep the design file separate from your codebase.** 22 | 23 | --- 24 | 25 | Thanks for being a PRO member. We hope you enjoy the challenge! 🙂 -------------------------------------------------------------------------------- /js/destination.js: -------------------------------------------------------------------------------- 1 | const links = document.querySelectorAll(".navigation li"); 2 | let image = document.querySelector(".image"); 3 | let name = document.querySelector(".name"); 4 | let description = document.querySelector(".description"); 5 | let distance = document.querySelector(".distance"); 6 | let travel = document.querySelector(".travel"); 7 | let elements = []; 8 | 9 | fetch("https://achrafedd.github.io/Space-Tourism/data.json") 10 | .then((res) => res.json()) 11 | .then((data) => { 12 | for (let i = 0; i < data.destinations.length; i++) { 13 | elements.push(data.destinations[i]); 14 | } 15 | }); 16 | 17 | links.forEach((link) => { 18 | link.addEventListener("click", (e) => { 19 | e.preventDefault(); 20 | links.forEach((link) => { 21 | link.classList.remove("active"); 22 | }); 23 | link.classList.add("active"); 24 | switch (e.target.innerText) { 25 | case "Moon": 26 | image.src = elements[0].images.webp; 27 | name.innerText = elements[0].name; 28 | description.innerText = elements[0].description; 29 | distance.innerText = elements[0].distance; 30 | travel.innerText = elements[0].travel; 31 | break; 32 | case "Mars": 33 | image.src = elements[1].images.webp; 34 | name.innerText = elements[1].name; 35 | description.innerText = elements[1].description; 36 | distance.innerText = elements[1].distance; 37 | travel.innerText = elements[1].travel; 38 | break; 39 | case "Europa": 40 | image.src = elements[2].images.webp; 41 | name.innerText = elements[2].name; 42 | description.innerText = elements[2].description; 43 | distance.innerText = elements[2].distance; 44 | travel.innerText = elements[2].travel; 45 | break; 46 | case "Titan": 47 | image.src = elements[3].images.webp; 48 | name.innerText = elements[3].name; 49 | description.innerText = elements[3].description; 50 | distance.innerText = elements[3].distance; 51 | travel.innerText = elements[3].travel; 52 | break; 53 | default: 54 | break; 55 | } 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | Space tourism 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 | 41 | 46 |
47 |
48 |
49 | 50 | 51 | 52 |
53 |
54 |
55 |

56 | So, you want to travel to 57 |
58 | Space 59 |

60 |

61 | Let’s face it; if you want to go to space, you might as well 62 | genuinely go to outer space and not hover kind of on the edge of it. 63 | Well sit back, and relax because we’ll give you a truly out of this 64 | world experience! 65 |

66 |
67 | Explore 68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /css/home.css: -------------------------------------------------------------------------------- 1 | /* Start Landing */ 2 | .landing { 3 | background-image: url(../assets/home/background-home-desktop.jpg); 4 | background-position: center; 5 | background-size: cover; 6 | display: flex; 7 | padding-top: calc(136px + 76px); 8 | } 9 | .landing .container { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: flex-end; 13 | padding-bottom: var(--main-padding-bottom); 14 | } 15 | .landing .container .content { 16 | width: 382px; 17 | } 18 | .landing .container h1 { 19 | font-size: 28px; 20 | font-family: var(--main-font); 21 | color: var(--secend-color); 22 | font-weight: 400; 23 | letter-spacing: 4.72px; 24 | } 25 | .landing .container h1 span { 26 | font-family: var(--secend-font); 27 | font-size: 150px; 28 | color: #fff; 29 | text-transform: uppercase; 30 | display: inline-block; 31 | margin: 24px 0; 32 | letter-spacing: 0; 33 | } 34 | .landing .container p { 35 | font-size: 18px; 36 | color: var(--secend-color); 37 | font-family: var(--main-font); 38 | font-weight: 400; 39 | letter-spacing: 0; 40 | line-height: 32px; 41 | } 42 | .landing .container a { 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | width: 274px; 47 | height: 274px; 48 | background-color: #fff; 49 | border-radius: 50%; 50 | font-family: var(--secend-font); 51 | font-size: 32px; 52 | position: relative; 53 | color: var(--main-color); 54 | z-index: 5; 55 | margin-bottom: 65px; 56 | } 57 | .landing .container a::before { 58 | content: ""; 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | height: 0px; 64 | width: 0px; 65 | z-index: 3; 66 | border-radius: 50%; 67 | background-color: rgba(255, 255, 255, 0.1); 68 | transition: 0.3s linear; 69 | } 70 | .landing .container a:hover::before { 71 | height: 450px; 72 | width: 450px; 73 | } 74 | /* Tablet Divice */ 75 | @media (max-width: 768px) { 76 | .landing { 77 | background-image: url(../assets/home/background-home-tablet.jpg); 78 | } 79 | .landing .container { 80 | flex-direction: column; 81 | align-items: center; 82 | } 83 | .landing .container h1 { 84 | text-align: center; 85 | } 86 | .landing .container p { 87 | margin-bottom: 156px; 88 | } 89 | } 90 | /* Phone Divice */ 91 | @media (max-width: 576px) { 92 | .landing { 93 | background-image: url(../assets/home/background-home-mobile.jpg); 94 | } 95 | .landing .container .content { 96 | width: 327px; 97 | } 98 | .landing .container h1 span { 99 | font-size: 80px; 100 | } 101 | .landing .container p { 102 | font-size: 15px; 103 | } 104 | } 105 | /* End Landing */ 106 | -------------------------------------------------------------------------------- /css/crew.css: -------------------------------------------------------------------------------- 1 | /* Start Crew */ 2 | .crew { 3 | background-image: url(../assets/crew/background-crew-desktop.jpg); 4 | background-position: center; 5 | background-size: cover; 6 | display: flex; 7 | padding-top: calc(136px + 76px); 8 | } 9 | .crew .container { 10 | position: relative; 11 | } 12 | .crew .content { 13 | display: flex; 14 | flex-wrap: wrap; 15 | justify-content: space-between; 16 | } 17 | .crew .content .role { 18 | margin-top: 154px; 19 | font-family: var(--secend-font); 20 | color: #fff; 21 | font-weight: normal; 22 | font-size: 32px; 23 | text-transform: uppercase; 24 | margin-bottom: 15px; 25 | } 26 | .crew .content .name { 27 | font-family: var(--secend-font); 28 | color: #fff; 29 | font-size: 56px; 30 | text-transform: uppercase; 31 | margin-bottom: 27px; 32 | } 33 | .crew .content .bio { 34 | font-family: var(--main-font); 35 | color: var(--secend-color); 36 | line-height: 32px; 37 | margin-bottom: 100px; 38 | width: 488px; 39 | } 40 | .crew .content img { 41 | position: absolute; 42 | bottom: 0; 43 | right: 0; 44 | } 45 | .crew .dots { 46 | display: flex; 47 | gap: 24px; 48 | margin-bottom: 40px; 49 | } 50 | .crew .dots .dot { 51 | width: 15px; 52 | height: 15px; 53 | border-radius: 50%; 54 | background-color: #36373f; 55 | cursor: pointer; 56 | } 57 | .crew .dots .dot:hover { 58 | background-color: #292c34; 59 | } 60 | .crew .dots .dot.active { 61 | background-color: #fff; 62 | } 63 | @media (max-width: 1100px) { 64 | .crew .content img { 65 | position: initial; 66 | margin-bottom: 32px; 67 | width: 327px; 68 | } 69 | } 70 | @media (max-width: 768px) { 71 | .crew { 72 | background-image: url(../assets/crew/background-crew-tablet.jpg); 73 | } 74 | .crew .content { 75 | align-items: center; 76 | flex-direction: column-reverse; 77 | } 78 | .crew .info { 79 | display: flex; 80 | flex-direction: column-reverse; 81 | align-items: center; 82 | text-align: center; 83 | } 84 | .crew .dots .dot { 85 | background-color: #19191a; 86 | } 87 | } 88 | @media (max-width: 576px) { 89 | .crew { 90 | background-image: url(../assets/crew/background-crew-mobile.jpg); 91 | } 92 | .crew .content img { 93 | margin-bottom: 32px; 94 | width: 327px; 95 | } 96 | .crew .content { 97 | justify-content: center; 98 | } 99 | .crew .info { 100 | display: flex; 101 | flex-direction: column-reverse; 102 | align-items: center; 103 | text-align: center; 104 | } 105 | .crew .info .role { 106 | font-size: 16px; 107 | } 108 | .crew .info .name { 109 | font-size: 24px; 110 | } 111 | .crew .info .bio { 112 | font-size: 15px; 113 | width: 327px; 114 | } 115 | .crew .dots .dot { 116 | background-color: #19191a; 117 | } 118 | } 119 | /* End Crew */ 120 | -------------------------------------------------------------------------------- /crew-commander.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | Frontend Mentor | Space tourism website 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | 42 | 47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |

02 Meet your crew

55 |
56 |
57 |
58 |

Commander

59 |

Douglas Hurley

60 |

61 | Douglas Gerald Hurley is an American engineer, former Marine 62 | Corps pilot and former NASA astronaut. He launched into space 63 | for the third time as commander of Crew Dragon Demo-2. 64 |

65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | 78 |
79 |
80 |
81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /technology-vehicle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | Frontend Mentor | Space tourism website 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | 42 | 47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |

03 Space launch 101

55 |
56 |
57 |
1
58 |
2
59 |
3
60 |
61 |
62 |

The terminology...

63 |

Launch vehicle

64 |

65 | A launch vehicle or carrier rocket is a rocket-propelled vehicle 66 | used to carry a payload from Earth's surface to space, usually to 67 | Earth orbit or beyond. Our WEB-X carrier rocket is the most 68 | powerful in operation. Standing 150 metres tall, it's quite an 69 | awe-inspiring sight on the launch pad! 70 |

71 |
72 | 77 |
78 |
79 |
80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /css/technology.css: -------------------------------------------------------------------------------- 1 | /* Start Technology */ 2 | .technology { 3 | background-image: url(../assets/technology/background-technology-desktop.jpg); 4 | background-position: center; 5 | background-size: cover; 6 | display: flex; 7 | padding-top: calc(136px + 76px); 8 | } 9 | .technology .content { 10 | display: flex; 11 | align-items: center; 12 | gap: 80px; 13 | } 14 | .technology .enumirate { 15 | display: flex; 16 | flex-direction: column; 17 | gap: 32px; 18 | } 19 | .technology .enumirate .num { 20 | width: 80px; 21 | height: 80px; 22 | border-radius: 50%; 23 | border: 1px solid var(--hover-color); 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | color: #fff; 28 | font-size: 32px; 29 | font-family: var(--secend-font); 30 | cursor: pointer; 31 | } 32 | .technology .enumirate .num:hover { 33 | border-color: #fff; 34 | } 35 | .technology .enumirate .num.active { 36 | color: var(--main-color); 37 | background-color: #fff; 38 | } 39 | .technology .content h2 { 40 | font-size: 16px; 41 | letter-spacing: 2.7px; 42 | color: var(--secend-color); 43 | margin-bottom: 11px; 44 | font-family: var(--main-font); 45 | text-transform: uppercase; 46 | } 47 | .technology .content .name { 48 | font-size: 56px; 49 | font-family: var(--secend-font); 50 | text-transform: uppercase; 51 | color: #fff; 52 | margin-bottom: 17px; 53 | } 54 | .technology .content .description { 55 | width: 444px; 56 | font-size: 18px; 57 | color: var(--secend-color); 58 | line-height: 32px; 59 | word-spacing: 1px; 60 | margin-bottom: 97px; 61 | } 62 | .technology .content img { 63 | position: absolute; 64 | right: 0; 65 | } 66 | @media (max-width: 1100px) { 67 | .technology .main-title { 68 | margin-left: 15px; 69 | } 70 | .technology .container { 71 | width: 100%; 72 | padding: 0; 73 | } 74 | .technology .content { 75 | flex-direction: column-reverse; 76 | align-items: center; 77 | } 78 | .technology .content img { 79 | position: relative; 80 | width: 100vw; 81 | order: 4; 82 | } 83 | .technology .enumirate { 84 | order: 3; 85 | flex-direction: row; 86 | } 87 | .technology .content h2, 88 | .technology .content .name, 89 | .technology .content .description { 90 | text-align: center; 91 | } 92 | } 93 | @media (max-width: 768px) { 94 | .technology { 95 | background-image: url(../assets/technology/background-technology-tablet.jpg); 96 | } 97 | } 98 | @media (max-width: 576px) { 99 | .technology { 100 | background-image: url(../assets/technology/background-technology-mobile.jpg); 101 | } 102 | .technology .enumirate { 103 | gap: 16px; 104 | } 105 | .technology .enumirate .num { 106 | width: 40px; 107 | height: 40px; 108 | font-size: 16px; 109 | } 110 | .technology .content h2 { 111 | font-size: 14px; 112 | } 113 | .technology .content .name { 114 | font-size: 24px; 115 | } 116 | .technology .content .description { 117 | font-size: 15px; 118 | width: 327px; 119 | } 120 | } 121 | /* End Technology */ 122 | -------------------------------------------------------------------------------- /destination-moon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | 16 | 17 | Frontend Mentor | Space tourism website 18 | 19 | 20 | 21 |
22 |
23 | 24 |
25 | 26 | 43 | 48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 |

01 Pick your destination

56 |
57 | 62 |
63 | 69 |
70 |

Moon

71 |

72 | See our planet as you’ve never seen it before. A perfect 73 | relaxing trip away to help regain perspective and come back 74 | refreshed. While you’re there, take in some history by visiting 75 | the Luna 2 and Apollo 11 landing sites. 76 |

77 |
78 |
79 |
80 |

Avg. distance

81 |

384,400 km

82 |
83 |
84 |

Est. travel time

85 |

3 days

86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /css/destination.css: -------------------------------------------------------------------------------- 1 | /* Start destination */ 2 | .destination { 3 | background-image: url(../assets/destination/background-destination-desktop.jpg); 4 | background-position: center; 5 | background-size: cover; 6 | display: flex; 7 | padding-top: calc(136px + 76px); 8 | } 9 | .destination .main-box { 10 | display: flex; 11 | justify-content: space-around; 12 | align-items: center; 13 | flex-wrap: wrap; 14 | } 15 | .destination .main-box img { 16 | max-width: 445px; 17 | margin-bottom: 53px; 18 | } 19 | .destination .main-box .content { 20 | width: 445px; 21 | } 22 | .destination ul { 23 | display: flex; 24 | gap: 35px; 25 | margin-bottom: 37px; 26 | } 27 | .destination ul li { 28 | height: 39px; 29 | position: relative; 30 | } 31 | .destination ul li::before { 32 | content: ""; 33 | width: 0%; 34 | height: 2px; 35 | background: var(--hover-color); 36 | position: absolute; 37 | bottom: 0; 38 | left: 0; 39 | transition: 0.3s linear; 40 | } 41 | .destination ul li:hover::before { 42 | width: 100%; 43 | } 44 | .destination ul li.active::before { 45 | width: 100%; 46 | background-color: #fff; 47 | } 48 | .destination ul li a { 49 | color: var(--secend-color); 50 | font-size: 16px; 51 | letter-spacing: 2.7px; 52 | font-family: var(--main-font); 53 | cursor: pointer; 54 | } 55 | .destination ul li.active a { 56 | color: #fff; 57 | } 58 | .destination .text h2 { 59 | font-size: 100px; 60 | font-family: var(--secend-font); 61 | color: #fff; 62 | font-weight: 400; 63 | text-transform: uppercase; 64 | margin-bottom: 14px; 65 | transition: 0.3s linear; 66 | } 67 | .destination .text > p { 68 | color: var(--secend-color); 69 | font-weight: 400; 70 | font-family: var(--main-font); 71 | margin-bottom: 54px; 72 | line-height: 32px; 73 | } 74 | .destination .text .break { 75 | width: 100%; 76 | height: 1px; 77 | background-color: var(--secend-color); 78 | } 79 | .destination .info { 80 | display: flex; 81 | gap: 79px; 82 | margin-top: 28px; 83 | margin-bottom: 62px; 84 | } 85 | .destination .info .box h3 { 86 | color: var(--secend-color); 87 | font-family: var(--main-font); 88 | font-size: 14px; 89 | letter-spacing: 2.36px; 90 | margin-bottom: 12px; 91 | text-transform: uppercase; 92 | } 93 | .destination .info .box p { 94 | color: #fff; 95 | font-size: 28px; 96 | font-family: var(--secend-font); 97 | text-transform: uppercase; 98 | } 99 | @media (max-width: 767px) { 100 | .destination { 101 | background-image: url(../assets/destination/background-destination-tablet.jpg); 102 | } 103 | .destination .main-box { 104 | justify-content: center; 105 | } 106 | .destination ul { 107 | justify-content: center; 108 | } 109 | .destination .text h2, 110 | .destination .text > p { 111 | text-align: center; 112 | } 113 | .destination .info { 114 | justify-content: center; 115 | } 116 | } 117 | @media (max-width: 576px) { 118 | .destination { 119 | background-image: url(../assets/destination/background-destination-mobile.jpg); 120 | } 121 | .destination .main-box img { 122 | width: 170px; 123 | } 124 | .destination .main-box .content { 125 | width: 327px; 126 | } 127 | .destination ul { 128 | gap: 26px; 129 | } 130 | .destination ul li a { 131 | font-size: 14px; 132 | } 133 | .destination .text h2 { 134 | font-size: 56px; 135 | } 136 | .destination .info { 137 | flex-direction: column; 138 | align-items: center; 139 | gap: 32px; 140 | } 141 | } 142 | /* End destination */ 143 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* Start Main Rules */ 2 | @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Bellefair&display=swap"); 3 | :root { 4 | --main-color: #0b0d17; 5 | --secend-color: #d2d8f9; 6 | --hover-color: #85868b; 7 | --main-padding-top: 100px; 8 | --main-padding-bottom: 100px; 9 | --main-font: "Barlow Condensed", sans-serif; 10 | --secend-font: "Bellefair", serifs; 11 | } 12 | * { 13 | box-sizing: border-box; 14 | padding: 0; 15 | margin: 0; 16 | } 17 | section { 18 | width: 100vw; 19 | min-height: 100vh; 20 | position: absolute; 21 | top: 0; 22 | left: 0; 23 | } 24 | body { 25 | overflow-x: hidden; 26 | font-weight: 400; 27 | } 28 | .main-title { 29 | color: #fff; 30 | font-size: 28px; 31 | font-family: var(--main-font); 32 | font-weight: 400; 33 | letter-spacing: 4.72px; 34 | margin-bottom: 64px; 35 | } 36 | .main-title b { 37 | margin-right: 28px; 38 | color: #979797; 39 | } 40 | @media (max-width: 576px) { 41 | .main-title { 42 | font-size: 16px; 43 | text-align: center; 44 | } 45 | } 46 | .container { 47 | margin: 0 auto; 48 | padding: 0 15px; 49 | } 50 | /* Small devices */ 51 | @media (min-width: 576px) { 52 | .container { 53 | width: 560px; 54 | } 55 | } 56 | /* Medium devices */ 57 | @media (min-width: 768px) { 58 | .container { 59 | width: 750px; 60 | } 61 | } 62 | /* Extra large devices */ 63 | @media (min-width: 1200px) { 64 | .container { 65 | width: 1190px; 66 | } 67 | } 68 | ul { 69 | list-style: none; 70 | } 71 | a { 72 | text-decoration: none; 73 | } 74 | /* End Main Rules */ 75 | /* Start Header */ 76 | header { 77 | height: 96px; 78 | margin: 40px 0 0; 79 | position: relative; 80 | z-index: 9999; 81 | } 82 | header .container { 83 | height: 100%; 84 | display: flex; 85 | justify-content: space-between; 86 | align-items: center; 87 | position: relative; 88 | z-index: 9; 89 | } 90 | header .logo { 91 | width: 48px; 92 | height: 48px; 93 | } 94 | header .line { 95 | width: 473px; 96 | height: 1px; 97 | background-color: #fff; 98 | } 99 | header .open-menu, 100 | header .close-menu { 101 | display: none; 102 | } 103 | header nav ul { 104 | display: flex; 105 | gap: 48px; 106 | height: 96px; 107 | } 108 | header nav ul li { 109 | display: flex; 110 | align-items: center; 111 | position: relative; 112 | height: 100%; 113 | } 114 | header ul li::before { 115 | content: ""; 116 | width: 0%; 117 | height: 3px; 118 | position: absolute; 119 | bottom: 0; 120 | right: 0; 121 | transition: all 0.3s linear; 122 | } 123 | header ul li:hover::before { 124 | background-color: var(--hover-color); 125 | width: 100%; 126 | } 127 | header ul li.active::before { 128 | width: 100%; 129 | background-color: #fff; 130 | } 131 | header ul li a { 132 | font-family: var(--main-font); 133 | font-size: 16px; 134 | color: #fff; 135 | } 136 | header ul li a b { 137 | margin-right: 11px; 138 | } 139 | header .blure_back { 140 | width: 830px; 141 | height: 96px; 142 | background: rgba(255, 255, 255, 0.04); 143 | backdrop-filter: blur(81.5485px); 144 | position: absolute; 145 | top: 0; 146 | right: 0; 147 | } 148 | @media (max-width: 1100px) { 149 | header .line { 150 | display: none; 151 | } 152 | } 153 | @media (max-width: 768px) { 154 | header { 155 | margin: 0; 156 | } 157 | header ul li a b { 158 | display: none; 159 | } 160 | header .blure_back { 161 | width: 450px; 162 | } 163 | } 164 | @media (max-width: 576px) { 165 | header nav { 166 | height: 100vh; 167 | width: 80%; 168 | position: absolute; 169 | top: 0; 170 | right: 0; 171 | background: rgba(255, 255, 255, 0.04); 172 | backdrop-filter: blur(81.5485px); 173 | display: flex; 174 | flex-direction: column; 175 | opacity: 0; 176 | transition: 0.3s linear; 177 | pointer-events: none; 178 | } 179 | header nav .close-menu { 180 | display: block; 181 | width: 19.9px; 182 | margin-top: 34px; 183 | margin-bottom: 65px; 184 | margin-right: 26.5px; 185 | align-self: flex-end; 186 | cursor: pointer; 187 | } 188 | header .open-menu { 189 | display: block; 190 | cursor: pointer; 191 | } 192 | header nav.active { 193 | opacity: 1; 194 | pointer-events: all; 195 | } 196 | header nav ul { 197 | flex-direction: column; 198 | height: 100%; 199 | } 200 | header nav ul li { 201 | height: 19px; 202 | } 203 | header ul li::before { 204 | height: 100%; 205 | width: 3px; 206 | } 207 | header ul li.active::before { 208 | height: 100%; 209 | width: 5px; 210 | } 211 | header ul li a b { 212 | display: inline; 213 | margin-left: 32px; 214 | } 215 | header .blure_back { 216 | display: none; 217 | } 218 | } 219 | /* End Header */ 220 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Space Tourism Website 2 | 3 | ## Embark on an exciting journey into the cosmos with the Space Tourism Website. Explore the wonders of space travel and book your next adventure among the stars. 4 | 5 | ## Table of Contents 6 | 7 | - [Overview](#overview) 8 | - [The Challenge](#the-challenge) 9 | - [Screenshot](#screenshot) 10 | - [Links](#links) 11 | - [My Process](#my-process) 12 | - [Built With](#built-with) 13 | - [What I Learned](#what-i-learned) 14 | - [Continued Development](#continued-development) 15 | - [Useful Resources](#useful-resources) 16 | - [Author](#author) 17 | - [Acknowledgments](#acknowledgments) 18 | - [Got Feedback for Me?](#got-feedback-for-me) 19 | 20 | ## Overview 21 | 22 | ### The Challenge 23 | 24 | Embark on an exciting journey into the cosmos with the Space Tourism Website. Explore the wonders of space travel and book your next adventure among the stars. 25 | 26 | Users should be able to: 27 | 28 | - View the optimal layout for the site depending on their device's screen size 29 | - See hover states for all interactive elements on the page 30 | 31 | ### Screenshot 32 | 33 | ![Design Preview](./preview.jpg) 34 | 35 | ### Links 36 | 37 | - Solution URL: [GitHub Repository](https://github.com/SartHak-0-Sach/Space-tourism-website-frontend) 38 | - Live Site URL: [Live Site](https://space-tour-frontend.netlify.app/) 39 | 40 | ## My Process 41 | 42 | ### Built With 43 | 44 | - HTML5 45 | - CSS3 46 | - JavaScript 47 | 48 | You will find all the required assets in the `/design` folder. The assets are already optimized. 49 | 50 | There is also a `style-guide.md` file containing the information you'll need, such as color palette and fonts. 51 | 52 | ### What I Learned 53 | 54 | - Designing an immersive user interface for space tourism enthusiasts 55 | - Implementing interactive features for booking and exploring space travel options 56 | - Creating engaging visual elements to capture the excitement of space exploration 57 | 58 | ```js 59 | const openMenu = document.querySelector(".open-menu"); 60 | const closeMenu = document.querySelector(".close-menu"); 61 | const menu = document.querySelector("header nav"); 62 | openMenu.addEventListener("click", () => { 63 | menu.classList.add("active"); 64 | }); 65 | closeMenu.addEventListener("click", () => { 66 | menu.classList.remove("active"); 67 | }); 68 | ``` 69 | 70 | ### Continued Development 71 | 72 | - Integrating real-time booking and reservation systems for seamless user experience. 73 | - Expanding content and features to provide more comprehensive information about space travel destinations and experiences. 74 | - Enhancing performance and optimization for smoother navigation and faster loading times. 75 | 76 | The continuously learning journey of a programmer never ends. This project made me realize that there are many concepts that I need to work upon including fundamentals like flex-box and its properties, to more complex concepts like working with fetch and async await in javascript. These areas are some that I think I need to work more upon in the upcoming future as they highlight some of the most significant regions of web development that are important for every developer to know of. 77 | 78 | These key points mentioned here will help me grow accountable and consistent towards improving at writing good quality code and be a successful full stack developer one day. 79 | 80 | ### Useful resources 81 | 82 | - [Harkirat Singh course notes](https://github.com/SartHak-0-Sach/harkirat-singh-course_code_and_notes) - I have added notes of all lectures along with code and lecture insights of all weeks along with bonus lectures to help you all as much as I can. 83 | - [My development code and notes](https://github.com/SartHak-0-Sach/cwh-web-dev-playlist_code_and_notes) - These are my notes that I made while working on my development skills in initial days and did these courses. Make sure to star the repository if you like it.✨💫 84 | - [MDN documentation hover state for CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - This is an amazing article which helped me finally understand hover states. I'd recommend it to anyone still learning this concept. 85 | 86 | ## Author 87 | 88 | Sarthak Sachdev 89 | - Website - [Sarthak Sachdev](https://itsmesarthak.netlify.app/) 90 | - LeetCode - [@sarthak_sachdev](https://leetcode.com/u/sarthak_sachdev/) 91 | - Twitter - [@sarthak_sach69](https://www.twitter.com/sarthak_sach69) 92 | 93 | ## Acknowledgments 94 | 95 | I feel like the solutions provided on the website and the continuous doubt solving by industry experts on discord for free is something that is unmatched by anyone else and need to be acknowledged for their efforts in improving me as a developer by suggesting the best practices in your respective tech stack. 96 | 97 | ## Got feedback for me? 98 | 99 | I love receiving feedback! I am always looking to improve my code and take up new innovative ideas to work upon. So if you have anything you'd like to mention, please email 'hi' at saarsaach30[at]gmail[dot]com. 100 | 101 | If you liked this project make sure to spread the word and share it with all your friends. 102 | 103 | **Embark on an exciting journey into the cosmos with the Space Tourism Website.** 🚀🌌✨ 104 | --------------------------------------------------------------------------------