diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/assets/crew/background-crew-desktop.jpg b/assets/crew/background-crew-desktop.jpg new file mode 100644 index 0000000..34ac364 Binary files /dev/null and b/assets/crew/background-crew-desktop.jpg differ diff --git a/assets/crew/background-crew-mobile.jpg b/assets/crew/background-crew-mobile.jpg new file mode 100644 index 0000000..d823785 Binary files /dev/null and b/assets/crew/background-crew-mobile.jpg differ diff --git a/assets/crew/background-crew-tablet.jpg b/assets/crew/background-crew-tablet.jpg new file mode 100644 index 0000000..1699703 Binary files /dev/null and b/assets/crew/background-crew-tablet.jpg differ diff --git a/assets/crew/image-anousheh-ansari.png b/assets/crew/image-anousheh-ansari.png new file mode 100644 index 0000000..52a986f Binary files /dev/null and b/assets/crew/image-anousheh-ansari.png differ diff --git a/assets/crew/image-anousheh-ansari.webp b/assets/crew/image-anousheh-ansari.webp new file mode 100644 index 0000000..fe05e55 Binary files /dev/null and b/assets/crew/image-anousheh-ansari.webp differ diff --git a/assets/crew/image-douglas-hurley.png b/assets/crew/image-douglas-hurley.png new file mode 100644 index 0000000..1b036c0 Binary files /dev/null and b/assets/crew/image-douglas-hurley.png differ diff --git a/assets/crew/image-douglas-hurley.webp b/assets/crew/image-douglas-hurley.webp new file mode 100644 index 0000000..17d7b0d Binary files /dev/null and b/assets/crew/image-douglas-hurley.webp differ diff --git a/assets/crew/image-mark-shuttleworth.png b/assets/crew/image-mark-shuttleworth.png new file mode 100644 index 0000000..e4cf63b Binary files /dev/null and b/assets/crew/image-mark-shuttleworth.png differ diff --git a/assets/crew/image-mark-shuttleworth.webp b/assets/crew/image-mark-shuttleworth.webp new file mode 100644 index 0000000..b22b63b Binary files /dev/null and b/assets/crew/image-mark-shuttleworth.webp differ diff --git a/assets/crew/image-victor-glover.png b/assets/crew/image-victor-glover.png new file mode 100644 index 0000000..f31b581 Binary files /dev/null and b/assets/crew/image-victor-glover.png differ diff --git a/assets/crew/image-victor-glover.webp b/assets/crew/image-victor-glover.webp new file mode 100644 index 0000000..5cb85ec Binary files /dev/null and b/assets/crew/image-victor-glover.webp differ diff --git a/assets/destination/background-destination-desktop.jpg b/assets/destination/background-destination-desktop.jpg new file mode 100644 index 0000000..57eb025 Binary files /dev/null and b/assets/destination/background-destination-desktop.jpg differ diff --git a/assets/destination/background-destination-mobile.jpg b/assets/destination/background-destination-mobile.jpg new file mode 100644 index 0000000..4dd0203 Binary files /dev/null and b/assets/destination/background-destination-mobile.jpg differ diff --git a/assets/destination/background-destination-tablet.jpg b/assets/destination/background-destination-tablet.jpg new file mode 100644 index 0000000..9220c6c Binary files /dev/null and b/assets/destination/background-destination-tablet.jpg differ diff --git a/assets/destination/image-europa.png b/assets/destination/image-europa.png new file mode 100644 index 0000000..e6addcf Binary files /dev/null and b/assets/destination/image-europa.png differ diff --git a/assets/destination/image-europa.webp b/assets/destination/image-europa.webp new file mode 100644 index 0000000..532821f Binary files /dev/null and b/assets/destination/image-europa.webp differ diff --git a/assets/destination/image-mars.png b/assets/destination/image-mars.png new file mode 100644 index 0000000..d204043 Binary files /dev/null and b/assets/destination/image-mars.png differ diff --git a/assets/destination/image-mars.webp b/assets/destination/image-mars.webp new file mode 100644 index 0000000..f81679b Binary files /dev/null and b/assets/destination/image-mars.webp differ diff --git a/assets/destination/image-moon.png b/assets/destination/image-moon.png new file mode 100644 index 0000000..0bcaf85 Binary files /dev/null and b/assets/destination/image-moon.png differ diff --git a/assets/destination/image-moon.webp b/assets/destination/image-moon.webp new file mode 100644 index 0000000..ed3ed05 Binary files /dev/null and b/assets/destination/image-moon.webp differ diff --git a/assets/destination/image-titan.png b/assets/destination/image-titan.png new file mode 100644 index 0000000..3a6cb88 Binary files /dev/null and b/assets/destination/image-titan.png differ diff --git a/assets/destination/image-titan.webp b/assets/destination/image-titan.webp new file mode 100644 index 0000000..7165bf8 Binary files /dev/null and b/assets/destination/image-titan.webp differ diff --git a/assets/favicon-32x32.png b/assets/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/assets/favicon-32x32.png differ diff --git a/assets/home/background-home-desktop.jpg b/assets/home/background-home-desktop.jpg new file mode 100644 index 0000000..6d6bfe0 Binary files /dev/null and b/assets/home/background-home-desktop.jpg differ diff --git a/assets/home/background-home-mobile.jpg b/assets/home/background-home-mobile.jpg new file mode 100644 index 0000000..f88a6af Binary files /dev/null and b/assets/home/background-home-mobile.jpg differ diff --git a/assets/home/background-home-tablet.jpg b/assets/home/background-home-tablet.jpg new file mode 100644 index 0000000..e4a2d9a Binary files /dev/null and b/assets/home/background-home-tablet.jpg differ diff --git a/assets/shared/icon-close.svg b/assets/shared/icon-close.svg new file mode 100644 index 0000000..ace11db --- /dev/null +++ b/assets/shared/icon-close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/shared/icon-hamburger.svg b/assets/shared/icon-hamburger.svg new file mode 100644 index 0000000..7e5eab1 --- /dev/null +++ b/assets/shared/icon-hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/shared/logo.svg b/assets/shared/logo.svg new file mode 100644 index 0000000..94fe604 --- /dev/null +++ b/assets/shared/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/technology/background-technology-desktop.jpg b/assets/technology/background-technology-desktop.jpg new file mode 100644 index 0000000..bd29068 Binary files /dev/null and b/assets/technology/background-technology-desktop.jpg differ diff --git a/assets/technology/background-technology-mobile.jpg b/assets/technology/background-technology-mobile.jpg new file mode 100644 index 0000000..3846bba Binary files /dev/null and b/assets/technology/background-technology-mobile.jpg differ diff --git a/assets/technology/background-technology-tablet.jpg b/assets/technology/background-technology-tablet.jpg new file mode 100644 index 0000000..308e59d Binary files /dev/null and b/assets/technology/background-technology-tablet.jpg differ diff --git a/assets/technology/image-launch-vehicle-landscape.jpg b/assets/technology/image-launch-vehicle-landscape.jpg new file mode 100644 index 0000000..dce8f18 Binary files /dev/null and b/assets/technology/image-launch-vehicle-landscape.jpg differ diff --git a/assets/technology/image-launch-vehicle-portrait.jpg b/assets/technology/image-launch-vehicle-portrait.jpg new file mode 100644 index 0000000..0728b72 Binary files /dev/null and b/assets/technology/image-launch-vehicle-portrait.jpg differ diff --git a/assets/technology/image-space-capsule-landscape.jpg b/assets/technology/image-space-capsule-landscape.jpg new file mode 100644 index 0000000..7525b0e Binary files /dev/null and b/assets/technology/image-space-capsule-landscape.jpg differ diff --git a/assets/technology/image-space-capsule-portrait.jpg b/assets/technology/image-space-capsule-portrait.jpg new file mode 100644 index 0000000..334d9b6 Binary files /dev/null and b/assets/technology/image-space-capsule-portrait.jpg differ diff --git a/assets/technology/image-spaceport-landscape.jpg b/assets/technology/image-spaceport-landscape.jpg new file mode 100644 index 0000000..6d7e4a3 Binary files /dev/null and b/assets/technology/image-spaceport-landscape.jpg differ diff --git a/assets/technology/image-spaceport-portrait.jpg b/assets/technology/image-spaceport-portrait.jpg new file mode 100644 index 0000000..b882b27 Binary files /dev/null and b/assets/technology/image-spaceport-portrait.jpg differ diff --git a/crew-commander.css b/crew-commander.css new file mode 100644 index 0000000..4451353 --- /dev/null +++ b/crew-commander.css @@ -0,0 +1,236 @@ +*{ + margin: 0; + padding: 0; +} + +#crew{ + height: 100vh; + width: 100%; + background: url("assets/crew/background-crew-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav a{ + align-self: center; + position: relative; +} + +nav a img{ + position: relative; + left: 45px; +} + +nav div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(0); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(1); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.crewMembers{ + position: relative; +} + +.crewMembers h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.crewMembers h3 span{ + opacity: 0.25; +} +.crewMembers h4{ + margin-bottom: 10px; + margin-left: 182px; + color: #FFF; + font-family: Bellefair; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-transform: uppercase; + opacity: 0.5042; +} +.crewMembers h1{ + margin-bottom: 30px; + margin-left: 182px; + color: #FFF; + font-family: Bellefair; + font-size: 56px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.crewMembers p{ + margin-left: 182px; + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; + width: 444px; +} + +#commander{ + /* visibility: hidden; */ + position: absolute; + display: flex; + margin-top: 100px; + +} +#commander .commanderImg img{ + width: 350px; + position: absolute; + top: -62px; + left: 780px; +} + +#engineer{ + position: absolute; + visibility: hidden; + display: flex; + margin-top: 100px; +} +#engineer .engineerImg img{ + width: 350px; + position: absolute; + top: 48px; + left: 780px; +} + +#pilot{ + position: absolute; + visibility: hidden; + display: flex; + margin-top: 100px; +} +#pilot .pilotImg img{ + width: 350px; + position: absolute; + top: 2px; + left: 780px; +} + +#specialist{ + position: absolute; + visibility: hidden; + display: flex; + margin-top: 100px; +} +#specialist .specialistImg img{ + width: 278px; + position: absolute; + top: 2px; + left: 780px; +} + +.indicators{ + position: absolute; + bottom: 60px; + left: 186px; +} +.indicators button{ + border-radius: 20%; + background-color: #FFF; + margin-right: 5px; + outline: none; + width: 30px; + height: 3px; + border: 1px solid white; + opacity: 0.25; +} +button.commander{ + opacity: 1; +} \ No newline at end of file diff --git a/crew-commander.html b/crew-commander.html new file mode 100644 index 0000000..171c784 --- /dev/null +++ b/crew-commander.html @@ -0,0 +1,95 @@ + + + + + + + + + + + Frontend Mentor | Space tourism website + + +
+ +
+

02 Meet your crew

+
+
+

Commander

+

Douglas Hurley

+

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

+
+
+ +
+
+
+
+

Flight Engineer

+

Anousheh Ansari

+

Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. + Ansari was the fourth self-funded space tourist, the first self-funded woman to + fly to the ISS, and the first Iranian in space.

+
+
+ +
+
+
+
+

Pilot

+

Victor Glover

+

Pilot on the first operational flight of the SpaceX Crew Dragon to the + International Space Station. Glover is a commander in the U.S. Navy where + he pilots an F/A-18.He was a crew member of Expedition 64, and served as a + station systems flight engineer.

+
+
+ +
+
+
+
+

Mission Specialist

+

Mark Shuttleworth

+

Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind + the Linux-based Ubuntu operating system. Shuttleworth became the first South + African to travel to space as a space tourist.

+
+
+ +
+
+
+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/crew-commander.js b/crew-commander.js new file mode 100644 index 0000000..ebcc6ed --- /dev/null +++ b/crew-commander.js @@ -0,0 +1,99 @@ +let elem_home = document.querySelector("nav div ul li.home") +let elem_dest = document.querySelector("nav div ul li.dest") +let elem_crew = document.querySelector("nav div ul li.crew") +let elem_tech = document.querySelector("nav div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +elem_dest.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +}) +elem_dest.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +}) +// elem_crew.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +// }) +// elem_crew.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +// }) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) + +let elementCommander = document.getElementById('commander'); +let elementEngineer = document.getElementById('engineer'); +let elementPilot = document.getElementById('pilot'); +let elementSpecialist = document.getElementById('specialist'); + +let buttonCommander = document.getElementsByClassName("commander")[0]; +let buttonEngineer = document.getElementsByClassName("engineer")[0]; +let buttonPilot = document.getElementsByClassName("pilot")[0]; +let buttonSpecialist = document.getElementsByClassName("specialist")[0]; + +buttonCommander.addEventListener('click',()=>{ + elementCommander.style.visibility = 'visible'; + elementEngineer.style.visibility = 'hidden'; + elementPilot.style.visibility = 'hidden'; + elementSpecialist.style.visibility = 'hidden'; + document.getElementsByClassName("engineer")[0].style.opacity = "0.25"; + document.getElementsByClassName("pilot")[0].style.opacity = "0.25"; + document.getElementsByClassName("specialist")[0].style.opacity = "0.25"; + document.getElementsByClassName("commander")[0].style.opacity = "1"; +}) +buttonEngineer.addEventListener('click',()=>{ + elementCommander.style.visibility = 'hidden'; + elementEngineer.style.visibility = 'visible'; + elementPilot.style.visibility = 'hidden'; + elementSpecialist.style.visibility = 'hidden'; + document.getElementsByClassName("commander")[0].style.opacity = "0.25"; + document.getElementsByClassName("engineer")[0].style.opacity = "1"; + document.getElementsByClassName("pilot")[0].style.opacity = "0.25"; + document.getElementsByClassName("specialist")[0].style.opacity = "0.25"; +}) +buttonPilot.addEventListener('click',()=>{ + elementCommander.style.visibility = 'hidden'; + elementEngineer.style.visibility = 'hidden'; + elementPilot.style.visibility = 'visible'; + elementSpecialist.style.visibility = 'hidden'; + document.getElementsByClassName("commander")[0].style.opacity = "0.25"; + document.getElementsByClassName("engineer")[0].style.opacity = "0.25"; + document.getElementsByClassName("pilot")[0].style.opacity = "1"; + document.getElementsByClassName("specialist")[0].style.opacity = "0.25"; +}) +buttonSpecialist.addEventListener('click',()=>{ + elementCommander.style.visibility = 'hidden'; + elementEngineer.style.visibility = 'hidden'; + elementPilot.style.visibility = 'hidden'; + elementSpecialist.style.visibility = 'visible'; + document.getElementsByClassName("commander")[0].style.opacity = "0.25"; + document.getElementsByClassName("engineer")[0].style.opacity = "0.25"; + document.getElementsByClassName("pilot")[0].style.opacity = "0.25"; + document.getElementsByClassName("specialist")[0].style.opacity = "1"; +}) + +document.addEventListener("keydown",function(event) { + let visibilityCommander = getComputedStyle(document.getElementById('commander'))['visibility']; + let visibilityEngineer = getComputedStyle(document.getElementById('engineer'))['visibility']; + let visibilityPilot = getComputedStyle(document.getElementById('pilot'))['visibility']; + let visibilitySpecialist = getComputedStyle(document.getElementById('specialist'))['visibility']; + if(event.key=='ArrowRight' && visibilityCommander=='visible'){ + buttonEngineer.click(); + } else if(event.key=='ArrowRight' && visibilityEngineer=='visible'){ + buttonPilot.click(); + } else if(event.key=='ArrowRight' && visibilityPilot=='visible'){ + buttonSpecialist.click(); + } else if(event.key=='ArrowLeft' && visibilitySpecialist=='visible'){ + buttonPilot.click(); + } else if(event.key=='ArrowLeft' && visibilityPilot=='visible'){ + buttonEngineer.click(); + } else if(event.key=='ArrowLeft' && visibilityEngineer=='visible'){ + buttonCommander.click(); + } +}); \ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 0000000..2c1d7b9 --- /dev/null +++ b/data.json @@ -0,0 +1,108 @@ +{ + "destinations": [ + { + "name": "Moon", + "images": { + "png": "./assets/destination/image-moon.png", + "webp": "./assets/destination/image-moon.webp" + }, + "description": "See our planet as you’ve never seen it before. A perfect relaxing trip away to help regain perspective and come back refreshed. While you’re there, take in some history by visiting the Luna 2 and Apollo 11 landing sites.", + "distance": "384,400 km", + "travel": "3 days" + }, + { + "name": "Mars", + "images": { + "png": "./assets/destination/image-mars.png", + "webp": "./assets/destination/image-mars.webp" + }, + "description": "Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, the tallest planetary mountain in our solar system. It’s two and a half times the size of Everest!", + "distance": "225 mil. km", + "travel": "9 months" + }, + { + "name": "Europa", + "images": { + "png": "./assets/destination/image-europa.png", + "webp": "./assets/destination/image-europa.webp" + }, + "description": "The smallest of the four Galilean moons orbiting Jupiter, Europa is a winter lover’s dream. With an icy surface, it’s perfect for a bit of ice skating, curling, hockey, or simple relaxation in your snug wintery cabin.", + "distance": "628 mil. km", + "travel": "3 years" + }, + { + "name": "Titan", + "images": { + "png": "./assets/destination/image-titan.png", + "webp": "./assets/destination/image-titan.webp" + }, + "description": "The only moon known to have a dense atmosphere other than Earth, Titan is a home away from home (just a few hundred degrees colder!). As a bonus, you get striking views of the Rings of Saturn.", + "distance": "1.6 bil. km", + "travel": "7 years" + } + ], + "crew": [ + { + "name": "Douglas Hurley", + "images": { + "png": "./assets/crew/image-douglas-hurley.png", + "webp": "./assets/crew/image-douglas-hurley.webp" + }, + "role": "Commander", + "bio": "Douglas Gerald Hurley is an American engineer, former Marine Corps pilot and former NASA astronaut. He launched into space for the third time as commander of Crew Dragon Demo-2." + }, + { + "name": "Mark Shuttleworth", + "images": { + "png": "./assets/crew/image-mark-shuttleworth.png", + "webp": "./assets/crew/image-mark-shuttleworth.webp" + }, + "role": "Mission Specialist", + "bio": "Mark Richard Shuttleworth is the founder and CEO of Canonical, the company behind the Linux-based Ubuntu operating system. Shuttleworth became the first South African to travel to space as a space tourist." + }, + { + "name": "Victor Glover", + "images": { + "png": "./assets/crew/image-victor-glover.png", + "webp": "./assets/crew/image-victor-glover.webp" + }, + "role": "Pilot", + "bio": "Pilot on the first operational flight of the SpaceX Crew Dragon to the International Space Station. Glover is a commander in the U.S. Navy where he pilots an F/A-18.He was a crew member of Expedition 64, and served as a station systems flight engineer." + }, + { + "name": "Anousheh Ansari", + "images": { + "png": "./assets/crew/image-anousheh-ansari.png", + "webp": "./assets/crew/image-anousheh-ansari.webp" + }, + "role": "Flight Engineer", + "bio": "Anousheh Ansari is an Iranian American engineer and co-founder of Prodea Systems. Ansari was the fourth self-funded space tourist, the first self-funded woman to fly to the ISS, and the first Iranian in space." + } + ], + "technology": [ + { + "name": "Launch vehicle", + "images": { + "portrait": "./assets/technology/image-launch-vehicle-portrait.jpg", + "landscape": "./assets/technology/image-launch-vehicle-landscape.jpg" + }, + "description": "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!" + }, + { + "name": "Spaceport", + "images": { + "portrait": "./assets/technology/image-spaceport-portrait.jpg", + "landscape": "./assets/technology/image-spaceport-landscape.jpg" + }, + "description": "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch." + }, + { + "name": "Space capsule", + "images": { + "portrait": "./assets/technology/image-space-capsule-portrait.jpg", + "landscape": "./assets/technology/image-space-capsule-landscape.jpg" + }, + "description": "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained." + } + ] +} \ No newline at end of file diff --git a/destination-europa.css b/destination-europa.css new file mode 100644 index 0000000..ae74538 --- /dev/null +++ b/destination-europa.css @@ -0,0 +1,275 @@ +*{ + margin: 0; + padding: 0; +} + +#destination{ + height: 100vh; + width: 100%; + background: url("assets/destination/background-destination-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav.header{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav.header a{ + align-self: center; + position: relative; +} + +nav.header a img{ + position: relative; + left: 45px; +} + +nav.header div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(1); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav.header div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav.header div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav.header div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainContainer_Destin_Europa{ + display: grid; + grid-template-columns: 62% 38%; + grid-template-rows: 1fr; +} + +.imgEuropaContainer h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.imgEuropaContainer h3 span{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: 4.725px; + opacity: 0.25; +} + +.imgEuropaContainer img{ + width: 378px; + height: 378px; + margin-top: 78px; + margin-left: 260px; +} + +.textEuropaContainer nav{ + margin-top: 70px; + margin-bottom: 30px; + position: relative; +} + +.textEuropaContainer nav ul{ + display: flex; + justify-content: space-between; + width: 300px; +} + +.textEuropaContainer nav ul li{ + list-style: none; +} + +.textEuropaContainer nav ul li a{ + text-decoration: none; + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; +} + +.aboveEuropaContext_moon{ + transform: scale(0); + margin-top: 5px; + width: 41px; + height: 1px; + background: #FFF; + position: absolute; + transition: all 500ms; +} +.aboveEuropaContext_mars{ + transform: scale(0); + margin-top: 5px; + width: 34px; + height: 1px; + background: #FFF; + position: absolute; + left: 82px; + transition: all 500ms; +} +.aboveEuropaContext_europa{ + transform: scale(1); + margin-top: 5px; + width: 54px; + height: 1px; + background: #FFF; + position: absolute; + left: 160px; + transition: all 500ms; +} +.aboveEuropaContext_titan{ + transform: scale(0); + margin-top: 5px; + width: 37px; + height: 1px; + background: #FFF; + position: absolute; + left: 259px; + transition: all 500ms; +} + +.activeAboveEuropaContext{ + transform: scale(1); +} + +.europaContext{ + color: #FFF; + font-family: Bellefair; + font-size: 100px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; +} + +.textEuropaContainer p{ + width: 444px; + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 177.778% */ +} + +.behindEuropaContext{ + width: 444px; + height: 1px; + opacity: 0.2515; + background: #FFF; + margin-top: 40px; + margin-bottom: 20px; +} + +.europaDistanceInfo{ + display: flex; + width: 350px; + justify-content: space-between; +} + +.europaDistanceInfo h4{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.362px; + text-transform: uppercase; +} + +.europaDistanceInfo h1{ + color: #FFF; + font-family: Bellefair; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-transform: uppercase; +} \ No newline at end of file diff --git a/destination-europa.html b/destination-europa.html new file mode 100644 index 0000000..a23f934 --- /dev/null +++ b/destination-europa.html @@ -0,0 +1,73 @@ + + + + + + + + + + + Frontend Mentor | Space tourism website + + +
+ +
+
+

01 Pick your destination

+ +
+
+ +

Europa

+

The smallest of the four Galilean moons orbiting Jupiter, Europa is a + winter lover’s dream. With an icy surface, it’s perfect for a bit of + ice skating, curling, hockey, or simple relaxation in your snug + wintery cabin.

+
+
+
+

Avg. distance

+

628 mil. km

+
+
+

Est. travel time

+

3 years

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/destination-europa.js b/destination-europa.js new file mode 100644 index 0000000..eb20dc6 --- /dev/null +++ b/destination-europa.js @@ -0,0 +1,67 @@ +let elem_home = document.querySelector("nav.header div ul li.home") +let elem_dest = document.querySelector("nav.header div ul li.dest") +let elem_crew = document.querySelector("nav.header div ul li.crew") +let elem_tech = document.querySelector("nav.header div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +// elem_dest.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +// }) +// elem_dest.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +// }) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) + +let elem_moon = document.querySelector('.moon') +let elem_mars = document.querySelector('.mars') +let elem_europa = document.querySelector('.europa') +let elem_titan = document.querySelector('.titan') + +elem_moon.addEventListener("mouseover",()=>{ + document.querySelector(".aboveEuropaContext_moon").classList.add('activeAboveEuropaContext'); +}) +elem_moon.addEventListener("mouseout",()=>{ + document.querySelector(".aboveEuropaContext_moon").classList.remove('activeAboveEuropaContext') +}) +elem_mars.addEventListener("mouseover",()=>{ + document.querySelector(".aboveEuropaContext_mars").classList.add('activeAboveEuropaContext'); +}) +elem_mars.addEventListener("mouseout",()=>{ + document.querySelector(".aboveEuropaContext_mars").classList.remove('activeAboveEuropaContext') +}) +// elem_europa.addEventListener("mouseover",()=>{ +// document.querySelector(".aboveEuropaContext_europa").classList.add('activeAboveEuropaContext'); +// }) +// elem_europa.addEventListener("mouseout",()=>{ +// document.querySelector(".aboveEuropaContext_europa").classList.remove('activeAboveEuropaContext') +// }) +elem_titan.addEventListener("mouseover",()=>{ + document.querySelector(".aboveEuropaContext_titan").classList.add('activeAboveEuropaContext'); +}) +elem_titan.addEventListener("mouseout",()=>{ + document.querySelector(".aboveEuropaContext_titan").classList.remove('activeAboveEuropaContext') +}) + +document.addEventListener("keydown",(event)=>{ + let text = document.querySelector("h1").textContent; + if(event.key=='ArrowRight' && text=='Europa'){ + document.getElementsByClassName("titan")[0].children[0].click() + } else if(event.key=='ArrowLeft' && text=='Europa'){ + document.getElementsByClassName("mars")[0].children[0].click() + } +}) \ No newline at end of file diff --git a/destination-mars.css b/destination-mars.css new file mode 100644 index 0000000..1a3a010 --- /dev/null +++ b/destination-mars.css @@ -0,0 +1,275 @@ +*{ + margin: 0; + padding: 0; +} + +#destination{ + height: 100vh; + width: 100%; + background: url("assets/destination/background-destination-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav.header{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav.header a{ + align-self: center; + position: relative; +} + +nav.header a img{ + position: relative; + left: 45px; +} + +nav.header div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(1); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav.header div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav.header div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav.header div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainContainer_Destin_Mars{ + display: grid; + grid-template-columns: 62% 38%; + grid-template-rows: 1fr; +} + +.imgMarsContainer h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.imgMarsContainer h3 span{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: 4.725px; + opacity: 0.25; +} + +.imgMarsContainer img{ + width: 378px; + height: 378px; + margin-top: 78px; + margin-left: 260px; +} + +.textMarsContainer nav{ + margin-top: 70px; + margin-bottom: 30px; + position: relative; +} + +.textMarsContainer nav ul{ + display: flex; + justify-content: space-between; + width: 300px; +} + +.textMarsContainer nav ul li{ + list-style: none; +} + +.textMarsContainer nav ul li a{ + text-decoration: none; + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; +} + +.aboveMarsContext_moon{ + transform: scale(0); + margin-top: 5px; + width: 41px; + height: 1px; + background: #FFF; + position: absolute; + transition: all 500ms; +} +.aboveMarsContext_mars{ + transform: scale(1); + margin-top: 5px; + width: 34px; + height: 1px; + background: #FFF; + position: absolute; + left: 82px; + transition: all 500ms; +} +.aboveMarsContext_europa{ + transform: scale(0); + margin-top: 5px; + width: 54px; + height: 1px; + background: #FFF; + position: absolute; + left: 160px; + transition: all 500ms; +} +.aboveMarsContext_titan{ + transform: scale(0); + margin-top: 5px; + width: 37px; + height: 1px; + background: #FFF; + position: absolute; + left: 259px; + transition: all 500ms; +} + +.activeAboveMarsContext{ + transform: scale(1); +} + +.marsContext{ + color: #FFF; + font-family: Bellefair; + font-size: 100px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; +} + +.textMarsContainer p{ + width: 444px; + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 177.778% */ +} + +.behindMarsContext{ + width: 444px; + height: 1px; + opacity: 0.2515; + background: #FFF; + margin-top: 40px; + margin-bottom: 20px; +} + +.marsDistanceInfo{ + display: flex; + width: 350px; + justify-content: space-between; +} + +.marsDistanceInfo h4{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.362px; + text-transform: uppercase; +} + +.marsDistanceInfo h1{ + color: #FFF; + font-family: Bellefair; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-transform: uppercase; +} \ No newline at end of file diff --git a/destination-mars.html b/destination-mars.html new file mode 100644 index 0000000..6749c78 --- /dev/null +++ b/destination-mars.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + Frontend Mentor | Space tourism website + + + +
+ +
+
+

01 Pick your destination

+ +
+
+ +

Mars

+

Don’t forget to pack your hiking boots. You’ll need them to tackle Olympus Mons, + the tallest planetary mountain in our solar system. It’s two and a half times + the size of Everest!

+
+
+
+

Avg. distance

+

225 mil. km

+
+
+

Est. travel time

+

9 months

+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/destination-mars.js b/destination-mars.js new file mode 100644 index 0000000..0145623 --- /dev/null +++ b/destination-mars.js @@ -0,0 +1,67 @@ +let elem_home = document.querySelector("nav.header div ul li.home") +let elem_dest = document.querySelector("nav.header div ul li.dest") +let elem_crew = document.querySelector("nav.header div ul li.crew") +let elem_tech = document.querySelector("nav.header div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +// elem_dest.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +// }) +// elem_dest.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +// }) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) + +let elem_moon = document.querySelector('.moon') +let elem_mars = document.querySelector('.mars') +let elem_europa = document.querySelector('.europa') +let elem_titan = document.querySelector('.titan') + +elem_moon.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMarsContext_moon").classList.add('activeAboveMarsContext'); +}) +elem_moon.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMarsContext_moon").classList.remove('activeAboveMarsContext') +}) +// elem_mars.addEventListener("mouseover",()=>{ +// document.querySelector(".aboveMarsContext_mars").classList.add('activeAboveMarsContext'); +// }) +// elem_mars.addEventListener("mouseout",()=>{ +// document.querySelector(".aboveMarsContext_mars").classList.remove('activeAboveMarsContext') +// }) +elem_europa.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMarsContext_europa").classList.add('activeAboveMarsContext'); +}) +elem_europa.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMarsContext_europa").classList.remove('activeAboveMarsContext') +}) +elem_titan.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMarsContext_titan").classList.add('activeAboveMarsContext'); +}) +elem_titan.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMarsContext_titan").classList.remove('activeAboveMarsContext') +}) + +document.addEventListener("keydown",(event)=>{ + let text = document.querySelector("h1").textContent; + if(event.key=='ArrowRight' && text=='Mars'){ + document.getElementsByClassName("europa")[0].children[0].click() + } else if(event.key=='ArrowLeft' && text=='Mars'){ + document.getElementsByClassName("moon")[0].children[0].click() + } +}) \ No newline at end of file diff --git a/destination-moon.css b/destination-moon.css new file mode 100644 index 0000000..3f6dc12 --- /dev/null +++ b/destination-moon.css @@ -0,0 +1,275 @@ +*{ + margin: 0; + padding: 0; +} + +#destination{ + height: 100vh; + width: 100%; + background: url("assets/destination/background-destination-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav.header{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav.header a{ + align-self: center; + position: relative; +} + +nav.header a img{ + position: relative; + left: 45px; +} + +nav.header div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(1); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav.header div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav.header div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav.header div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainContainer_Destin_Moon{ + display: grid; + grid-template-columns: 62% 38%; + grid-template-rows: 1fr; +} + +.imgMoonContainer h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.imgMoonContainer h3 span{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: 4.725px; + opacity: 0.25; +} + +.imgMoonContainer img{ + width: 378px; + height: 378px; + margin-top: 78px; + margin-left: 260px; +} + +.textMoonContainer nav{ + margin-top: 70px; + margin-bottom: 30px; + position: relative; +} + +.textMoonContainer nav ul{ + display: flex; + justify-content: space-between; + width: 300px; +} + +.textMoonContainer nav ul li{ + list-style: none; +} + +.textMoonContainer nav ul li a{ + text-decoration: none; + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; +} + +.aboveMoonContext_moon{ + transform: scale(1); + margin-top: 5px; + width: 38px; + height: 1px; + background: #FFF; + position: absolute; + transition: all 500ms; +} +.aboveMoonContext_mars{ + transform: scale(0); + margin-top: 5px; + width: 34px; + height: 1px; + background: #FFF; + position: absolute; + left: 82px; + transition: all 500ms; +} +.aboveMoonContext_europa{ + transform: scale(0); + margin-top: 5px; + width: 54px; + height: 1px; + background: #FFF; + position: absolute; + left: 160px; + transition: all 500ms; +} +.aboveMoonContext_titan{ + transform: scale(0); + margin-top: 5px; + width: 37px; + height: 1px; + background: #FFF; + position: absolute; + left: 259px; + transition: all 500ms; +} + +.activeAboveMoonContext{ + transform: scale(1); +} + +.moonContext{ + color: #FFF; + font-family: Bellefair; + font-size: 100px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; +} + +.textMoonContainer p{ + width: 444px; + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 177.778% */ +} + +.behindMoonContext{ + width: 444px; + height: 1px; + opacity: 0.2515; + background: #FFF; + margin-top: 40px; + margin-bottom: 20px; +} + +.moonDistanceInfo{ + display: flex; + width: 350px; + justify-content: space-between; +} + +.moonDistanceInfo h4{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.362px; + text-transform: uppercase; +} + +.moonDistanceInfo h1{ + color: #FFF; + font-family: Bellefair; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-transform: uppercase; +} diff --git a/destination-moon.html b/destination-moon.html new file mode 100644 index 0000000..cbfa41a --- /dev/null +++ b/destination-moon.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + Frontend Mentor | Space tourism website + + +
+ +
+
+

01 Pick your destination

+ +
+
+ +

Moon

+

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

+
+
+
+

Avg. distance

+

384,400 km

+
+
+

Est. travel time

+

3 days

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/destination-moon.js b/destination-moon.js new file mode 100644 index 0000000..61ada76 --- /dev/null +++ b/destination-moon.js @@ -0,0 +1,65 @@ +let elem_home = document.querySelector("nav.header div ul li.home") +let elem_dest = document.querySelector("nav.header div ul li.dest") +let elem_crew = document.querySelector("nav.header div ul li.crew") +let elem_tech = document.querySelector("nav.header div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +// elem_dest.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +// }) +// elem_dest.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +// }) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) + +let elem_moon = document.querySelector('.moon') +let elem_mars = document.querySelector('.mars') +let elem_europa = document.querySelector('.europa') +let elem_titan = document.querySelector('.titan') + +// elem_moon.addEventListener("mouseover",()=>{ +// document.querySelector(".aboveMoonContext_moon").classList.add('activeAboveMoonContext'); +// }) +// elem_moon.addEventListener("mouseout",()=>{ +// document.querySelector(".aboveMoonContext_moon").classList.remove('activeAboveMoonContext') +// }) +elem_mars.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMoonContext_mars").classList.add('activeAboveMoonContext'); +}) +elem_mars.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMoonContext_mars").classList.remove('activeAboveMoonContext') +}) +elem_europa.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMoonContext_europa").classList.add('activeAboveMoonContext'); +}) +elem_europa.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMoonContext_europa").classList.remove('activeAboveMoonContext') +}) +elem_titan.addEventListener("mouseover",()=>{ + document.querySelector(".aboveMoonContext_titan").classList.add('activeAboveMoonContext'); +}) +elem_titan.addEventListener("mouseout",()=>{ + document.querySelector(".aboveMoonContext_titan").classList.remove('activeAboveMoonContext') +}) + +document.addEventListener("keydown",(event)=>{ + let text = document.querySelector("h1").textContent; + if(event.key=='ArrowRight' && text=='Moon'){ + document.getElementsByClassName("mars")[0].children[0].click() + } +}) \ No newline at end of file diff --git a/destination-titan.css b/destination-titan.css new file mode 100644 index 0000000..8543bcb --- /dev/null +++ b/destination-titan.css @@ -0,0 +1,275 @@ +*{ + margin: 0; + padding: 0; +} + +#destination{ + height: 100vh; + width: 100%; + background: url("assets/destination/background-destination-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav.header{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav.header a{ + align-self: center; + position: relative; +} + +nav.header a img{ + position: relative; + left: 45px; +} + +nav.header div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(1); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav.header div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav.header div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav.header div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainContainer_Destin_Titan{ + display: grid; + grid-template-columns: 62% 38%; + grid-template-rows: 1fr; +} + +.imgTitanContainer h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.imgTitanContainer h3 span{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: 4.725px; + opacity: 0.25; +} + +.imgTitanContainer img{ + width: 378px; + height: 378px; + margin-top: 78px; + margin-left: 260px; +} + +.textTitanContainer nav{ + margin-top: 70px; + margin-bottom: 30px; + position: relative; +} + +.textTitanContainer nav ul{ + display: flex; + justify-content: space-between; + width: 300px; +} + +.textTitanContainer nav ul li{ + list-style: none; +} + +.textTitanContainer nav ul li a{ + text-decoration: none; + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; +} + +.aboveTitanContext_moon{ + transform: scale(0); + margin-top: 5px; + width: 41px; + height: 1px; + background: #FFF; + position: absolute; + transition: all 500ms; +} +.aboveTitanContext_mars{ + transform: scale(0); + margin-top: 5px; + width: 34px; + height: 1px; + background: #FFF; + position: absolute; + left: 82px; + transition: all 500ms; +} +.aboveTitanContext_europa{ + transform: scale(0); + margin-top: 5px; + width: 54px; + height: 1px; + background: #FFF; + position: absolute; + left: 160px; + transition: all 500ms; +} +.aboveTitanContext_titan{ + transform: scale(1); + margin-top: 5px; + width: 37px; + height: 1px; + background: #FFF; + position: absolute; + left: 259px; + transition: all 500ms; +} + +.activeAboveTitanContext{ + transform: scale(1); +} + +.titanContext{ + color: #FFF; + font-family: Bellefair; + font-size: 100px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; +} + +.textTitanContainer p{ + width: 444px; + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 177.778% */ +} + +.behindTitanContext{ + width: 444px; + height: 1px; + opacity: 0.2515; + background: #FFF; + margin-top: 40px; + margin-bottom: 20px; +} + +.titanDistanceInfo{ + display: flex; + width: 350px; + justify-content: space-between; +} + +.titanDistanceInfo h4{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.362px; + text-transform: uppercase; +} + +.titanDistanceInfo h1{ + color: #FFF; + font-family: Bellefair; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-transform: uppercase; +} \ No newline at end of file diff --git a/destination-titan.html b/destination-titan.html new file mode 100644 index 0000000..42a0f21 --- /dev/null +++ b/destination-titan.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + Frontend Mentor | Space tourism website + + +
+ +
+
+

01 Pick your destination

+ +
+
+ +

Titan

+

The only moon known to have a dense atmosphere other than Earth, Titan + is a home away from home (just a few hundred degrees colder!). As a + bonus, you get striking views of the Rings of Saturn.

+
+
+
+

Avg. distance

+

1.6 bil. km

+
+
+

Est. travel time

+

7 years

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/destination-titan.js b/destination-titan.js new file mode 100644 index 0000000..6d7b4b0 --- /dev/null +++ b/destination-titan.js @@ -0,0 +1,64 @@ +let elem_home = document.querySelector("nav.header div ul li.home") +let elem_dest = document.querySelector("nav.header div ul li.dest") +let elem_crew = document.querySelector("nav.header div ul li.crew") +let elem_tech = document.querySelector("nav.header div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +// elem_dest.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +// }) +// elem_dest.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +// }) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) + +let elem_moon = document.querySelector('.moon') +let elem_mars = document.querySelector('.mars') +let elem_europa = document.querySelector('.europa') +let elem_titan = document.querySelector('.titan') + +elem_moon.addEventListener("mouseover",()=>{ + document.querySelector(".aboveTitanContext_moon").classList.add('activeAboveTitanContext'); +}) +elem_moon.addEventListener("mouseout",()=>{ + document.querySelector(".aboveTitanContext_moon").classList.remove('activeAboveTitanContext') +}) +elem_mars.addEventListener("mouseover",()=>{ + document.querySelector(".aboveTitanContext_mars").classList.add('activeAboveTitanContext'); +}) +elem_mars.addEventListener("mouseout",()=>{ + document.querySelector(".aboveTitanContext_mars").classList.remove('activeAboveTitanContext'); +}) +elem_europa.addEventListener("mouseover",()=>{ + document.querySelector(".aboveTitanContext_europa").classList.add('activeAboveTitanContext'); +}) +elem_europa.addEventListener("mouseout",()=>{ + document.querySelector(".aboveTitanContext_europa").classList.remove('activeAboveTitanContext') +}) +// elem_titan.addEventListener("mouseover",()=>{ +// document.querySelector(".aboveTitanContext_titan").classList.add('activeAboveTitanContext'); +// }) +// elem_titan.addEventListener("mouseout",()=>{ +// document.querySelector(".aboveTitanContext_titan").classList.remove('activeAboveTitanContext') +// }) +document.addEventListener("keydown",(event)=>{ + let text = document.querySelector("h1").textContent; + if(event.key=='ArrowLeft' && text=='Titan'){ + document.getElementsByClassName("europa")[0].children[0].click() + } +}) \ No newline at end of file diff --git a/index.css b/index.css new file mode 100644 index 0000000..fb5b957 --- /dev/null +++ b/index.css @@ -0,0 +1,172 @@ +*{ + margin: 0; + padding: 0; +} + +#home{ + height: 100vh; + width: 100%; + background: url("assets/home/background-home-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav a{ + align-self: center; + position: relative; +} + +nav a img{ + position: relative; + left: 45px; +} + +nav div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(1); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(0); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(0); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainContainer_Home{ + display: flex; +} + +.textContainer{ + width: 444px; + margin-left: 153px; + margin-top: 140px; +} + +.textContainer h3{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; +} + +.textContainer h1{ + color: #FFF; + font-family: Bellefair; + font-size: 150px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.textContainer p{ + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} + +.subTextContainer{ + display: flex; + width: 234px; + height: 234px; + margin-top: 215px; + margin-left: 384px; + border-radius: 274px; + background: #FFF; + justify-content: center; + align-items: center; +} + +.subTextContainer h1{ + color: #0B0D17; + font-family: Bellefair; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2px; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..778f930 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + Frontend Mentor | Space tourism website + + + + + + +
+ +
+
+

So, you want to travel to

+

Space

+

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

+
+
+

Explore

+
+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..2914e51 --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +let elem_home = document.querySelector("nav div ul li.home") +let elem_dest = document.querySelector("nav div ul li.dest") +let elem_crew = document.querySelector("nav div ul li.crew") +let elem_tech = document.querySelector("nav div ul li.tech") +// elem_home.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +// }) +// elem_home.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +// }) +elem_dest.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +}) +elem_dest.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +}) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +elem_tech.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +}) +elem_tech.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +}) \ No newline at end of file diff --git a/space-tourism-website-figma/__MACOSX/space-tourism-website-figma/._README.md b/space-tourism-website-figma/__MACOSX/space-tourism-website-figma/._README.md new file mode 100644 index 0000000..91933be Binary files /dev/null and b/space-tourism-website-figma/__MACOSX/space-tourism-website-figma/._README.md differ diff --git a/space-tourism-website-figma/space-tourism-website-figma/README.md b/space-tourism-website-figma/space-tourism-website-figma/README.md new file mode 100644 index 0000000..fa28f9e --- /dev/null +++ b/space-tourism-website-figma/space-tourism-website-figma/README.md @@ -0,0 +1,22 @@ +# Using the Figma design file + +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. + +[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. + +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. + +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. + +If you haven't used Figma before, here are a couple of great resources to get you up to speed: + +- [“Everything Developers Need To Know About Figma” article on Smashing Magazine](https://www.smashingmagazine.com/2020/09/figma-developers-guide/) +- ["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) + +--- + +**⚠️ 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.** + +--- + +Thanks for being a PRO member. We hope you enjoy the challenge! 🙂 \ No newline at end of file diff --git a/space-tourism-website-main/.gitignore b/space-tourism-website-main/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/space-tourism-website-main/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/space-tourism-website-main/README-template.md b/space-tourism-website-main/README-template.md new file mode 100644 index 0000000..7259860 --- /dev/null +++ b/space-tourism-website-main/README-template.md @@ -0,0 +1,112 @@ +# Frontend Mentor - Space tourism website solution + +This is a solution to the [Space tourism website challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3). Frontend Mentor challenges help you improve your coding skills by building realistic projects. + +## Table of contents + +- [Overview](#overview) + - [The challenge](#the-challenge) + - [Screenshot](#screenshot) + - [Links](#links) +- [My process](#my-process) + - [Built with](#built-with) + - [What I learned](#what-i-learned) + - [Continued development](#continued-development) + - [Useful resources](#useful-resources) +- [Author](#author) +- [Acknowledgments](#acknowledgments) + +**Note: Delete this note and update the table of contents based on what sections you keep.** + +## Overview + +### The challenge + +Users should be able to: + +- View the optimal layout for each of the website's pages depending on their device's screen size +- See hover states for all interactive elements on the page +- View each page and be able to toggle between the tabs to see new information + +### Screenshot + +![](./screenshot.jpg) + +Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. + +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. + +Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. + +**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** + +### Links + +- Solution URL: [Add solution URL here](https://your-solution-url.com) +- Live Site URL: [Add live site URL here](https://your-live-site-url.com) + +## My process + +### Built with + +- Semantic HTML5 markup +- CSS custom properties +- Flexbox +- CSS Grid +- Mobile-first workflow +- [React](https://reactjs.org/) - JS library +- [Next.js](https://nextjs.org/) - React framework +- [Styled Components](https://styled-components.com/) - For styles + +**Note: These are just examples. Delete this note and replace the list above with your own choices** + +### What I learned + +Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. + +To see how you can add code snippets, see below: + +```html +

Some HTML code I'm proud of

+``` +```css +.proud-of-this-css { + color: papayawhip; +} +``` +```js +const proudOfThisFunc = () => { + console.log('🎉') +} +``` + +If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. + +**Note: Delete this note and the content within this section and replace with your own learnings.** + +### Continued development + +Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect. + +**Note: Delete this note and the content within this section and replace with your own plans for continued development.** + +### Useful resources + +- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward. +- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept. + +**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.** + +## Author + +- Website - [Add your name here](https://www.your-site.com) +- Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername) +- Twitter - [@yourusername](https://www.twitter.com/yourusername) + +**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.** + +## Acknowledgments + +This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit. + +**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.** diff --git a/space-tourism-website-main/README.md b/space-tourism-website-main/README.md new file mode 100644 index 0000000..0fba94a --- /dev/null +++ b/space-tourism-website-main/README.md @@ -0,0 +1,89 @@ +# Frontend Mentor - Space tourism website + +![Design preview for the Space tourism website coding challenge](./preview.jpg) + +## Welcome! 👋 + +[Frontend Mentor](https://www.frontendmentor.io) challenges help you improve your coding skills by building realistic projects. Our challenges are perfect portfolio pieces, so please feel free to use what you create in your portfolio to show others. + +**To do this challenge, you need a strong understanding of HTML, CSS, and JavaScript.** + +## The challenge + +Your challenge is to build out this multi-page space tourism website and get it looking as close to the design as possible. + +**This project is a collaboration between us, Scrimba, and Kevin Powell. If you'd like to see how Kevin would tackle the project, you can [follow along on Scrimba's free course](https://scrimba.com/learn/spacetravel).** + +If you're working through it yourself, please use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. + +If you choose to use a JS-heavy approach, we provide a local `data.json` file for the different page data. This means you'll be able to pull the data from there instead of using the separate `.html` files. + +Your users should be able to: + +- View the optimal layout for each of the website's pages depending on their device's screen size +- See hover states for all interactive elements on the page +- View each page and be able to toggle between the tabs to see new information + +Want some support on the challenge? [Join our community](https://www.frontendmentor.io/community) and ask questions in the **#help** channel. + +## Where to find everything + +Your task is to build out the project to the design file provided. We provide both Sketch and Figma versions of the design, so you can choose which tool you prefer to use. You can download the design file on the platform. The design download comes with a `README.md` file as well to help you get set up. + +All the required assets for this project are in the `/assets` folder. The assets are already exported for the correct screen size and optimized. Some images are reusable at multiple screen sizes. + +The design system in the design file will give you more information about the various colors, fonts, and styles used in this project. + +## Building your project + +Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: + +1. Separate the `starter-code` from the rest of this project and rename it to something meaningful for you. Initialize the codebase as a public repository on [GitHub](https://github.com/). Creating a repo will make it easier to share your code with the community if you need help. If you're not sure how to do this, [have a read-through of this Try Git resource](https://try.github.io/). +2. Configure your repository to publish your code to a web address. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, and we provide some recommendations below. +3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes to create reusable styles. +4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. +5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. +6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. + +## Deploying your project + +As mentioned above, there are many ways to host your project for free. Our recommended hosts are: + +- [GitHub Pages](https://pages.github.com/) +- [Vercel](https://vercel.com/) +- [Netlify](https://www.netlify.com/) + +You can host your site using one of these solutions or any of our other trusted providers. [Read more about our recommended and trusted hosts](https://medium.com/frontend-mentor/frontend-mentor-trusted-hosting-providers-bf000dfebe). + +## Create a custom `README.md` + +We strongly recommend overwriting this `README.md` with a custom one. We've provided a template inside the [`README-template.md`](./README-template.md) file in this starter code. + +The template provides a guide for what to add. A custom `README` will help you explain your project and reflect on your learnings. Please feel free to edit our template as much as you like. + +Once you've added your information to the template, delete this file and rename the `README-template.md` file to `README.md`. That will make it show up as your repository's README file. + +## Submitting your solution + +Submit your solution on the platform for the rest of the community to see. Follow our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) for tips on how to do this. + +Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community. + +## Sharing your solution + +There are multiple places you can share your solution: + +1. Share your solution page in the **#finished-projects** channel of the [community](https://www.frontendmentor.io/community). +2. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor**, including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. +3. Share your solution on other social channels like LinkedIn. +4. Blog about your experience building your project. Writing about your workflow, technical choices, and talking through your code is a brilliant way to reinforce what you've learned. Great platforms to write on are [dev.to](https://dev.to/), [Hashnode](https://hashnode.com/), and [CodeNewbie](https://community.codenewbie.org/). + +We provide templates to help you share your solution once you've submitted it on the platform. Please do edit them and include specific questions when you're looking for feedback. + +The more specific you are with your questions the more likely it is that another member of the community will give you feedback. + +## Got feedback for us? + +We love receiving feedback! We're always looking to improve our challenges and our platform. So if you have anything you'd like to mention, please email hi[at]frontendmentor[dot]io. + +**Have fun building!** 🚀 diff --git a/space-tourism-website-main/preview.jpg b/space-tourism-website-main/preview.jpg new file mode 100644 index 0000000..20c81d3 Binary files /dev/null and b/space-tourism-website-main/preview.jpg differ diff --git a/technology-capsule.css b/technology-capsule.css new file mode 100644 index 0000000..4ca7c9f --- /dev/null +++ b/technology-capsule.css @@ -0,0 +1,265 @@ +*{ + margin: 0; + padding: 0; +} + +#technology{ + height: 100vh; + width: 100%; + background: url("assets/technology/background-technology-desktop.jpg"), lightgray 0px 0px / 100% 100% no-repeat; + mix-blend-mode: screen; + /* background-image: url("assets/home/background-home-desktop.jpg"); */ + /* background-position: center; + background-size: cover; + position: relative; */ +} + +nav{ + display: grid; + /* justify-content: space-around; */ + grid-template-columns: repeat(3, 1fr); + padding: 35px 0px; + +} + +nav a{ + align-self: center; + position: relative; +} + +nav a img{ + position: relative; + left: 45px; +} + +nav div{ + position: relative; + grid-column: 2/span 2; + justify-self: flex-end; +} + +.simpleLine{ + width: 520px; + position: absolute; + z-index: 10; + top: 35px; + right: 655px; + opacity: 0.2515; + background: #FFF; +} + +.effectLineHome{ + transform: scale(0); + background: white; + width: 70px; + position: absolute; + left: 66px; + transition: all 500ms; +} +.effectLineDest{ + transform: scale(0); + background: white; + width: 110px; + position: absolute; + left: 172px; + transition: all 500ms; +} +.effectLineCrew{ + transform: scale(0); + background: white; + width: 60px; + position: absolute; + left: 327px; + transition: all 500ms; +} +.effectLineTech{ + transform: scale(1); + background: white; + width: 108px; + position: absolute; + right: 143px; + transition: all 500ms; +} + +.activeEffectLine{ + transform: scale(1); +} + +nav div ul{ + display: flex; + width: fit-content; + padding: 25px 65px; + padding-right: 100px; + background: rgba(255, 255, 255, 0.04); + backdrop-filter: blur(40.774227142333984px); +} + +nav div ul li{ + list-style: none; + /* padding: 0px 37px; */ + padding-right: 40px; +} + +nav div ul li a{ + color: #FFF; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + text-decoration: none; +} + +.mainTechnology{ + position: relative; +} + +.mainTechnology h3{ + margin-left: 182px; + color: #FFF; + font-family: Barlow Condensed; + font-size: 28px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 4.725px; + text-transform: uppercase; +} + +.mainTechnology h3 span{ + opacity: 0.25; +} + +.mainTechnology h4{ + color: #D0D6F9; + font-family: Barlow Condensed; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2.7px; + margin-bottom: 15px; +} +.mainTechnology h1{ + color: #FFF; + font-family: Bellefair; + font-size: 56px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 30px; +} +.mainTechnology p{ + color: #D0D6F9; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 177.778% */ + width: 444px; +} + +.circle{ + width: 80px; + height: 80px; + border-radius: 100%; + background-color: #FFF; + text-align: center; + margin-bottom: 37px; +} +.circle span{ + color: #0B0D17; + font-family: Bellefair; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: 2px; + position: relative; + top: 21px; +} + +#vehicleTech{ + position: absolute; + /* visibility: hidden; */ + display: flex; +} +.vehicleTechInfo{ + display: flex; + margin-left: 182px; + margin-top: 100px; + justify-content: space-between; + width: 585px; +} +.vehicleTechimg img{ + width: 400px; + position: relative; + left: 199px; +} +#vehicleTech #i2,#vehicleTech #i3{ + background: transparent; + border: 1px solid rgba(36, 34, 34, 0.845); +} +#vehicleTech #i2 span,#vehicleTech #i3 span{ + stroke-width: 1px; + stroke: #FFF; + opacity: 0.25; + color: #FFF; +} + +#spaceportTech{ + position: absolute; + visibility: hidden; + display: flex; +} +.spaceportTechInfo{ + display: flex; + margin-left: 182px; + margin-top: 100px; + justify-content: space-between; + width: 585px; +} +.spaceportTechimg img{ + width: 400px; + position: relative; + left: 199px; +} +#spaceportTech #i1,#spaceportTech #i3{ + background: transparent; + border: 1px solid rgba(36, 34, 34, 0.845); +} +#spaceportTech #i1 span,#spaceportTech #i3 span{ + stroke-width: 1px; + stroke: #FFF; + opacity: 0.25; + color: #FFF; +} + +#capsuleTech{ + position: absolute; + visibility: hidden; + display: flex; +} +.capsuleTechInfo{ + display: flex; + margin-left: 182px; + margin-top: 100px; + justify-content: space-between; + width: 585px; +} +.capsuleTechimg img{ + width: 420px; + position: relative; + left: 179px; +} +#capsuleTech #i1,#capsuleTech #i2{ + background: transparent; + border: 1px solid rgba(36, 34, 34, 0.845); +} +#capsuleTech #i1 span,#capsuleTech #i2 span{ + stroke-width: 1px; + stroke: #FFF; + opacity: 0.25; + color: #FFF; +} \ No newline at end of file diff --git a/technology-capsule.html b/technology-capsule.html new file mode 100644 index 0000000..7789ff1 --- /dev/null +++ b/technology-capsule.html @@ -0,0 +1,100 @@ + + + + + + + + + + + Frontend Mentor | Space tourism website + + +
+ +
+

03 Space launch 101

+
+
+
+
1
+
2
+
3
+
+
+

The terminology...

+

Launch vehicle

+

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

+
+
+
+ +
+
+
+
+
+
1
+
2
+
3
+
+
+

The terminology...

+

Spaceport

+

A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, + by analogy to the seaport for ships or airport for aircraft. Based in the + famous Cape Canaveral, our spaceport is ideally situated to take advantage + of the Earth’s rotation for launch.

+
+
+
+ +
+
+
+
+
+
1
+
2
+
3
+
+
+

The terminology...

+

Space capsule

+

A space capsule is an often-crewed spacecraft that uses a blunt-body reentry + capsule to reenter the Earth's atmosphere without wings. Our capsule is where + you'll spend your time during the flight. It includes a space gym, cinema, + and plenty of other activities to keep you entertained.

+
+
+
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/technology-capsule.js b/technology-capsule.js new file mode 100644 index 0000000..4eb349e --- /dev/null +++ b/technology-capsule.js @@ -0,0 +1,47 @@ +let elem_home = document.querySelector("nav div ul li.home") +let elem_dest = document.querySelector("nav div ul li.dest") +let elem_crew = document.querySelector("nav div ul li.crew") +let elem_tech = document.querySelector("nav div ul li.tech") +elem_home.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineHome").classList.add('activeEffectLine'); +}) +elem_home.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineHome").classList.remove('activeEffectLine') +}) +elem_dest.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineDest").classList.add('activeEffectLine'); +}) +elem_dest.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineDest").classList.remove('activeEffectLine') +}) +elem_crew.addEventListener("mouseover",()=>{ + document.querySelector(".effectLineCrew").classList.add('activeEffectLine'); +}) +elem_crew.addEventListener("mouseout",()=>{ + document.querySelector(".effectLineCrew").classList.remove('activeEffectLine') +}) +// elem_tech.addEventListener("mouseover",()=>{ +// document.querySelector(".effectLineTech").classList.add('activeEffectLine'); +// }) +// elem_tech.addEventListener("mouseout",()=>{ +// document.querySelector(".effectLineTech").classList.remove('activeEffectLine') +// }) + +document.addEventListener("keydown",(event)=>{ + let visibilityVehicleTech = getComputedStyle(document.getElementById("vehicleTech"))['visibility']; + let visibilitySpaceportTech = getComputedStyle(document.getElementById("spaceportTech"))['visibility']; + let visibilityCapsuleTech = getComputedStyle(document.getElementById("capsuleTech"))['visibility']; + if(event.key=='ArrowDown' && visibilityVehicleTech=='visible'){ + document.getElementById("vehicleTech").style.visibility = 'hidden'; + document.getElementById("spaceportTech").style.visibility = 'visible'; + } else if(event.key=='ArrowDown' && visibilitySpaceportTech=='visible'){ + document.getElementById("spaceportTech").style.visibility = 'hidden'; + document.getElementById("capsuleTech").style.visibility = 'visible'; + } else if(event.key=='ArrowUp' && visibilityCapsuleTech=='visible'){ + document.getElementById("capsuleTech").style.visibility = 'hidden'; + document.getElementById("spaceportTech").style.visibility = 'visible'; + } else if(event.key=='ArrowUp' && visibilitySpaceportTech=='visible'){ + document.getElementById("spaceportTech").style.visibility = 'hidden'; + document.getElementById("vehicleTech").style.visibility = 'visible'; + } +}) \ No newline at end of file