frontEndMentorSpaceTourismChallenge

.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

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;
+}

crew-commander.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="crew-commander.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Bellefair&display=swap"
+    rel="stylesheet">
+    <title>Frontend Mentor | Space tourism website</title>
+  </head>
+  <body>
+    <section id="crew">
+      <nav class="header">
+        <a href="index.html"><img src="assets/shared/logo.svg"></a>
+        <div class="navLinks">
+          <hr class="simpleLine">
+          <!-- <div> -->
+          <ul>
+            <li class="home"><a href="index.html">00 Home</a></li>
+            <li class="dest"><a href="destination-moon.html">01 Destination</a></li>
+            <li class="crew"><a href="crew-commander.html">02 Crew</a></li>
+            <li class="tech"><a href="technology-capsule.html">03 Technology</a></li>
+          </ul>
+          <!-- </div> -->
+          <hr class="effectLineHome">
+          <hr class="effectLineDest">
+          <hr class="effectLineCrew">
+          <hr class="effectLineTech">
+        </div>
+      </nav>
+      <div class="crewMembers">
+        <h3><span>02</span> Meet your crew</h3>
+        <div id="commander">
+          <div class="commanderInfo">
+            <h4>Commander</h4>
+            <h1>Douglas Hurley</h1>
+            <p>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.</p>
+          </div>
+          <div class="commanderImg">
+            <img src="assets/crew/image-douglas-hurley.webp">
+          </div>
+        </div>
+        <div id="engineer">
+          <div class="engineerInfo">
+            <h4>Flight Engineer</h4>
+            <h1>Anousheh Ansari</h1>
+            <p>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.</p>
+          </div>
+          <div class="engineerImg">
+            <img src="assets/crew/image-anousheh-ansari.webp">
+          </div>
+        </div>
+        <div id="pilot">
+          <div class="pilotInfo">
+            <h4>Pilot</h4>
+            <h1>Victor Glover</h1>
+            <p>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.</p>
+          </div>
+          <div class="pilotImg">
+            <img src="assets/crew/image-victor-glover.webp">
+          </div>
+        </div>
+        <div id="specialist">
+          <div class="specialistInfo">
+            <h4>Mission Specialist</h4>
+            <h1>Mark Shuttleworth</h1>
+            <p>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.</p>
+          </div>
+          <div class="specialistImg">
+            <img src="assets/crew/image-mark-shuttleworth.webp">
+          </div>
+        </div>
+      </div>
+      <div class="indicators">
+        <button type="button" class="commander"></button>
+        <button type="button" class="engineer"></button>
+        <button type="button" class="pilot"></button>
+        <button type="button" class="specialist"></button>
+      </div>
+    </section>
+    <script src="crew-commander.js"></script>
+  </body>
+</html>