midterm final

midterm/css/main.css

@@ -99,8 +99,8 @@ textarea {
    ========================================================================== */
 body{
   margin: 0;
-  background-image: url(../img/bkgd.png);
-  background-position: top;
+  background-image: url(../img/mobile-bkgd.png);
+  background-position: top 50%;
   background-size: cover;
   background-repeat: no-repeat;
 }
@@ -114,7 +114,6 @@ h1{
   font-family: Helvetica, Arial, sans-serif;
   margin: 0;
   font-size: 15vw;
-  padding-top: 13vw;
   text-align: right;
 }
 
@@ -136,6 +135,10 @@ h5{
   line-height: 9vw;
 }
 
+.hide-mobile{
+  display: none;
+}
+
 .grid{
   display: grid;
   grid-template-areas: 
@@ -170,10 +173,18 @@ main > h3{
 
 @media (min-width: 768px) {
 
+  body{
+    background-image: url(../img/desktop-bkgd.png);
+    background-position: top;
+    background-size: cover;
+
+
+  }
+
   .grid{
     display: grid;
-    grid-template-columns: 33.3vw 33.3vw 33.3vw;
-    grid-template-rows: 60vh 60vh 60vh 60vh 60vh;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: repeat(5, 30vw);
     grid-template-areas: 
     "header header header"
     "header header header"
@@ -182,44 +193,126 @@ main > h3{
     "footer footer footer";
     height: 100vh;
   }
+
   h1{
     font-family: Helvetica, Arial, sans-serif;
     margin: 0;
-    font-size: 7vw;
+    font-size: 13.3vw;
     text-align: right;
   }
 
   h3{
     font-family: Helvetica, Arial, sans-serif;
-    padding-top: 0px;
     margin: 0;
     font-size: 4vw;
     text-align: right;
+    padding-bottom: 0;
   }
 
   h5{
     font-family: Helvetica, Arial, sans-serif;
     margin: 0 auto;
     text-align: left;
-    font-size: 2vw;
+    font-size: 2.5vw;
     line-height: 3vw;
     padding: 0;
+
   }
 
   .hide{
     display: none;
   }
 
+  header{
+    grid-column: 1/3;
+    grid-row: 1/3;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #cessna-desktop{
+    grid-column: 3/4;
+    grid-row: 1/3;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+
+  #cessna-desktop > img{
+    width: 20vw;
+    align-self: flex-end;
+  }
+
+  #strut{
+    grid-row: 3/4;
+    grid-column: 1/2;
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    justify-content: flex-start;
+
+  }
+
+  #strut > img{
+    width: 20vw;
+    align-self: center;
+  }
+
+
+  main{
+    grid-column: 2/4;
+    grid-row: 3/5;
+
+  }
+
   #degrees{
-    grid-area: 1/3
+    grid-column: 1/2;
+    grid-row: 1/3;
   }
 
   #title{
-    grid-row-start: 1/3;
+    display: flex;
+    grid-column: 1/3;
+    grid-row: 2/3;
+    margin: 0;
+    align-content: flex-end;
+    width: 100%;
+    max-height: 100%;
+    justify-content: flex-start;
+  }
 
+  #about{
+    grid-column: 2/4;
+    grid-row: 4/5;
+  }
 
-}
+  .show-desktop{
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  #attitude{
+    grid-column: 1/3;
+    grid-row: 4/5;
+  }
+
+  #attitude > img{
+    max-height: 100%;
+  }
 
+  #coming{
+    grid-row: 5/6;
+    grid-column: 2/4;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  #coming > h3{
+    font-size: 5.5vw;
+    line-height: 5vw;
+  }
 
 /* ==========================================================================
    Helper classes

midterm/index.html

@@ -34,16 +34,34 @@
        <h3>an adventurous short film <br> by allie marsh</h3>
        </div>
     </header>
-
+
+    <div id="cessna-desktop" class="hide-mobile"><img src="img/cessna-desktop.png"></div>
+
+    <div id="strut" class="hide-mobile"><img src="img/strut-desktop.png"></div>
+
     <main>
     <div id="map-attitude">
         <img class="hide" src="img/map-mobile.png">
         <img class="hide" src="img/attitude.png">
     </div>
-      <h5>Artist statement or brief synopsis will go here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor. Ut wisi enim ad minim veniam,Ut wisi enim ad dfgs</h5>
-      <h3>coming april 2020</h3>
+      <div id="about">
+        <h5>In 2017, women only made up 7.1% of all pilots. <em>Why We Fly</em> is a celebration of the lady aviators who make up the 7.1% and a tribute to the brave women of the past who showed the world that the cockpit belonged to them, too. I want to open the eyes of girls of all ages to the possibility of becoming a pilot.  I also want to raise awareness and curiosity about the general aviation community.
+          </h5>
+      </div>
     </main>
 
+    <div id="attitude">
+      <img class="hide-mobile show-desktop" src="img/attitude_1.png">
+    </div>
+
+    <div id="coming">
+        <h3>coming april 2020</h3>
+        <br>
+        <h3 class="hide-mobile show-desktop">coming april 2020</h3>
+        <br>
+        <h3 class="hide-mobile show-desktop">coming april 2020</h3>
+    </div>
+
     <footer>
       <img class="hide" src="img/cessna-mobile.png">
     </footer>

week-5/css/main.css

@@ -227,6 +227,7 @@ h1{
       grid-column: 1/4;
       text-align: center;
     }
+
    }
 /* ==========================================================================
    Helper classes