From 5a686bf4691d628967326279bb7fa42cd107a61a Mon Sep 17 00:00:00 2001
From: Katlyn Tucker <studioquirk@yahoo.com>
Date: Wed, 20 Dec 2017 01:45:25 -0800
Subject: [PATCH] finished css styling for about page

---
 index.html        | 59 ++++++++++++++++++--------------
 styles/base.css   | 16 ++++-----
 styles/layout.css |  5 +++
 styles/module.css | 86 ++++++++++++-----------------------------------
 styles/theme.css  | 65 ++++++++++++++++++++++++++++++++---
 5 files changed, 128 insertions(+), 103 deletions(-)

diff --git a/index.html b/index.html
index 68b4899..d961ef8 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy|Roboto" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Carter+One|Roboto" rel="stylesheet">
     <link rel="stylesheet" href="styles/vendor/normalize.css">
     <link rel="stylesheet" href="styles/base.css">
     <link rel="stylesheet" href="styles/layout.css">
@@ -38,18 +38,18 @@
 
     <main>
         
-            <section id="home">
-                <aside style ="background-color:#000">
-                <iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="1000" height="1000" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a>
-                </aside>
+        <section id="home">
+            <aside style ="background-color:#000">
+            <iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="1000" height="1000" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a>
+            </aside>
         
-            </section>
+        </section>
 
 
         <section id="photos">
 
             <div id="searchHowTo"></div>
-                <p>This is a test, this is ONLY a test....</p>
+                <!--This is a test, this is ONLY a test.... -->
         <fieldset>
             <form id="dropdowns">
                 <div id= "rovers">
@@ -90,7 +90,7 @@
 
         <section id="favePhotos">
            <div id="userFaves">
-                <p>This is a test, this is ONLY a test....</p>
+                <!--This is a test, this is ONLY a test....-->
 
                <form id="getFaves">
                    <label for="userName">Your Name</label>
@@ -107,7 +107,7 @@
         </section>
 
         <section id="learn">
-            <h1>Interesting Facts about Mars and the Mars Rover</h1>
+            <h1>Facts about Mars and the Mars Rover</h1>
             <div class="faq_container">
                 <div class="faq">
                     <p id="question">How long is one Mars year?</p>
@@ -129,7 +129,7 @@ <h1>Interesting Facts about Mars and the Mars Rover</h1>
                     <p id="question">Is Curiosity powerful?</p>
                     <p id="answer">Yes and no. The iPhone in your pocket has at least 4 times the computing power of Curiosity, which packs a mere 200MHz CPU, to iPhones 800MHz CPU. Further, Curiosity packs just 256MB of RAM, and 2GB of on-board storage space. The iPhone has 512MB of RAM and up to 64GB of storage. However, Curiosity has multiple computers in case one breaks, all of which are capable of withstanding massive amounts of radiation an iPhone would not survive.</p>
                     <p id="question">"How did Curiosity get to Mars in the first place?"></p>
-                    <p id="question">Curiosity has a rough journey to get to Mars and there is no guarantee it will arrive.  Below is a video of it's hard journey to Mars.</p>
+                    <p id="answer">Curiosity has a rough journey to get to Mars and there is no guarantee it will arrive.  Below is a video of it's hard journey to Mars.</p>
                     <iframe width="560" height="315" src="https://www.youtube.com/embed/uxVVgBAosqg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
                     <p id="question">Does Curiosity have a birthday?</p>
                     <p id="answer">Yes. Its birthday is on August 5, 2012.  For it's 1st Birthday, it sang itself a lonely birthday song.  Millions of Earthlings were sad Curiosity was all alone.  However, Curiosity runs on a nuclear battery that turns heat into electricity and it will eventually die.  In the scientific world, there is no value in songs, so it's vibration unit has been reprogrammed for scientific data collection.  If you would like to hear it sing Happy Birthday, watch the video below.</p>
@@ -138,21 +138,30 @@ <h1>Interesting Facts about Mars and the Mars Rover</h1>
             </div>
         </section>
         <section id="about">
-            <h1>"About Team Nitrogen"</h1>
-            <div class="team">
-                <h2>Charlie Heiner</h2>
-                <p id="bio">I love getting away from the city and into nature with my camera.  It's not as easy these days while learning to code and juggle a family, but my supportive, beautiful wife and two amazing children make it very worthwhile. </p>
-                <img src="https://media-exp2.licdn.com/mpr/mpr/AAEAAQAAAAAAAArIAAAAJDQ1ZWRkMTU1LTQ5NjEtNGUxMi05ZTA5LTE0MjQ4N2FhYWVjYg.jpg" alt = "black and white alien image"/>
-                <h2>Liz Petersen</h2>
-                <p id="bio">When I was 11, I wanted to be an astronaut. That dream quickly changed with the onset of the teen years and a driver’s license. A graphic and web designer by training, I am currently studying software development at Alchemy Code Lab in Portland, OR. Hobbies include riding my motorcycle to beautiful places, nature photography, hiking, and camping. I'm a plant nerd, parent of one, and practitioner of mindful communication. The farthest reaches of space have continued to hold my interest, and I have been totally excited working on this project.</p>
-                <img src="https://i.pinimg.com/474x/f8/29/03/f82903b0aa0debc29bbbf75dcdec094d--mars-attacks-alien-art.jpg" alt = "cute alien holding cat"/>
-                <h2>Carmen Perezchica</h2>
-                <p id="bio">Carmen</p>
-                <img src="https://vignette.wikia.nocookie.net/phineasandferb/images/7/7a/Martians_and_rover.png/revision/latest?cb=20120102080004" alt = "Martians pointing at Mars rover"/>
-                <h2>Katlyn Tucker</h2>
-                <p id="bio">I enjoy warping time and space while learning to speak in code. Although not an astronaut, I watched two space shuttle launches and spent many childhood hours at Nasa. I almost applied to the program to colonize Mars,but leaving behind my two teens, friends and family behind and never returning to Earth was a dealbreaker.  In my free time, I take photos, make jewelry and hang out with my kids, where we often sit and watch the Universe.</p>
-                <img src="http://wwwcdn.skyandtelescope.com/wp-content/uploads/mars_rover_journey_480px.jpg" alt = "Mars rover leaves a message in the Mars sand which spells out Mars"/>
-            </div>
+            <h2>Team Nitrogen</h1>
+                <div class="bio-wrapper">
+                    <h3>Charlie Heiner</h2>
+                    <img src="https://media-exp2.licdn.com/mpr/mpr/AAEAAQAAAAAAAArIAAAAJDQ1ZWRkMTU1LTQ5NjEtNGUxMi05ZTA5LTE0MjQ4N2FhYWVjYg.jpg" alt = "black and white alien image"/>
+                    <p id="bio">I appreciate the Universe most by getting away from the city and into nature with my camera.  It's not as easy these days while learning to code with a new one at home, but my supportive, beautiful wife and two amazing children make it very worthwhile. </p>
+                </div>
+
+                <div class="bio-wrapper">
+                    <h3>Liz Petersen</h2>
+                    <img src="https://i.pinimg.com/474x/f8/29/03/f82903b0aa0debc29bbbf75dcdec094d--mars-attacks-alien-art.jpg" alt = "cute alien holding cat"/>
+                    <p id="bio">When I was 11, I wanted to be an astronaut. That dream quickly changed with the onset of the teen years and a driver’s license. A graphic and web designer by training, I am currently studying software development at Alchemy Code Lab in Portland, OR. Hobbies include riding my motorcycle to beautiful places, nature photography, hiking, and camping. I'm a plant nerd, parent of one, and practitioner of mindful communication. The farthest reaches of space have continued to hold my interest, and I have been totally excited working on this project.</p>
+                </div>
+
+                <div class="bio-wrapper">
+                    <h3>Carmen Perezchica</h2>
+                    <img src="https://vignette.wikia.nocookie.net/phineasandferb/images/7/7a/Martians_and_rover.png/revision/latest?cb=20120102080004" alt = "Martians pointing at Mars rover"/>
+                    <p id="bio">Carmen</p>
+                </div>
+
+                <div class="bio-wrapper">
+                    <h3>Katlyn Tucker</h2>
+                    <img src="http://wwwcdn.skyandtelescope.com/wp-content/uploads/mars_rover_journey_480px.jpg" alt = "Mars rover leaves a message in the Mars sand which spells out Mars"/>
+                    <p id="bio">I enjoy warping time and space while learning to speak in code. Although not an astronaut, I watched two space shuttle launches and spent many childhood hours at Nasa. I almost applied to the program to colonize Mars,but leaving behind my two teens, friends and family behind and never returning to Earth was a dealbreaker.  In my free time, I take photos, make jewelry and hang out with my kids, where we often sit and watch the Universe.</p>
+                </div>
 
         </section>
 
diff --git a/styles/base.css b/styles/base.css
index c0c7c8e..e8682be 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -2,30 +2,28 @@ body {
     margin: 0;
     padding: 0;
     background-color: #000000;
-    background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/hubble_friday_05292015.jpg');
-    background-position: center top;
-    background-repeat: no-repeat;
+    
 }
 
 h1 {
-    font-family: 'Luckiest Guy', cursive;
+    font-family: 'Carter+One',cursive;
     font-size: 2.3em;
     color: rgb(228, 53, 9);
     margin: 0;
     padding-top: 50px;
     padding-left: 100px;
-    position: fixed;
+    position: absolute;
     z-index: 1;
 } 
 
 h2 {
-    font-family: 'Luckiest Guy', cursive;
+    font-family: 'Carter+One', cursive;
     font-size: 1.7em;
 }
 
 h3 {
-    font-family: 'Luckiest Guy', cursive;
-    font-size: 1.3em;
+    font-family: 'Carter+One', cursive;
+    /* font-size: 1em; */
 }
 
 p {
@@ -39,7 +37,7 @@ a {
     display: block;
   }
    
- a:hover {
+a:hover {
     color: rgb(228, 53, 9);
   }
    
diff --git a/styles/layout.css b/styles/layout.css
index bbb4507..d0f063b 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -3,6 +3,11 @@
     
 }
 
+#learn {
+    background-image: url('https://www.nasa.gov/sites/default/files/thumbnails/image/hubble_friday_05292015.jpg');
+    background-position: center top;
+    background-repeat: repeat;
+}
 
 footer{
     width: 100%;
diff --git a/styles/module.css b/styles/module.css
index bf86f14..0fad651 100644
--- a/styles/module.css
+++ b/styles/module.css
@@ -10,8 +10,8 @@
 
 .nav li {
     display: inline-block;
-    font-family: 'Luckiest Guy', cursive;
-    font-size: 1em;
+    font-family: 'Carter+One', cursive;
+    font-size: 1.25em;
     line-height: 40px;
     height: 40px;
     padding: 5px 10px;
@@ -34,71 +34,27 @@
 
 
 /* Container module for Gallery */
-/* 
-.flex-container {
-    display: inline-flex;
-    flex-direction: row;
+ 
+#gallery-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
     flex-wrap: wrap;
-    justify-content: flex-start;
-    align-content: space-between;
-    align-items: flex-start;
-    }
-
-.flex-item:nth-child(1) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(2) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(3) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(4) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(5) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
-
-.flex-item:nth-child(6) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    } */
-    #gallery-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: space-around;
-        flex-wrap: wrap;
-        padding: 40px 40px 100px 40px;
+    padding: 40px 40px 100px 40px;
     }
     
-    .imageBlock {
-        display: block;
-        position: relative;
-        width: 25%;
-        height: 200px;
-        margin: 20px 0;
-        padding: 40px;
-        background-position: center;
-        background-size: cover;
-        text-align: center;
-        border-radius: 20px;
-        transition: box-shadow .3s ease-in-out;
+.imageBlock {
+    display: block;
+    position: relative;
+    width: 25%;
+    height: 200px;
+    margin: 20px 0;
+    padding: 40px;
+    background-position: center;
+    background-size: cover;
+    text-align: center;
+    border-radius: 20px;
+    transition: box-shadow .3s ease-in-out;
     }
 /* LEARN page module     */
 
@@ -110,7 +66,7 @@ div.faq_container {
     position: relative;
     margin-left: auto;
     margin-right: auto;
-    height: 1000px;
+    height: 2000px;
     padding-top: 100px;
     padding-left: 150px;
     }
diff --git a/styles/theme.css b/styles/theme.css
index b15364e..6712ae2 100644
--- a/styles/theme.css
+++ b/styles/theme.css
@@ -3,13 +3,70 @@
 div.faq p#question {
     font-family: 'Roboto', sans-serif;
     font-weight: bold;
-    font-size: 14px;
+    font-size: 20px;
     color: #35aa06;
+    margin: 2%;
+
     }
 
-            /* Learn page styling */
+/* Learn page styling */
 div.faq p#answer {
     font-family: 'Roboto', sans-serif;
-    font-size: 14px;
+    font-size: 18px;
     color: rgb(37,57,79);
-    }
\ No newline at end of file
+    margin: 2%;
+    }
+
+
+/* About page styling */
+
+#about h2 {
+    font-size: 40px;
+    color: rgb(74,98,163);
+    width:60%;
+    justify-content: space-around;
+    text-align: center;
+    padding-left: 15%;
+    padding-right: 15%;
+
+}
+#about h3 {
+    font-weight: bold;
+    font-size: 30px;
+    color: #35aa06;
+    padding-left: 70px;
+}
+
+#about p#bio {
+    font-family: 'Roboto', sans-serif;
+    font-size: 20px;
+    color: rgb(250, 245, 245);
+    margin-top: 100px;
+    justify-content: space-around;
+    justify-content: space-between;
+     
+}
+
+#about img{
+    display: block;
+    position: relative;
+    width: 25%;
+    height: 25%;
+    padding: 20px;
+    background-position: center;
+    background-size: cover;
+    text-align: center;
+    border-radius: 10px;
+    float:left;
+    clear: both;
+    margin-left: 30px;
+    }
+
+#about .bio-wrapper{
+    display: block;
+    block-size: 20%;
+    width: 100%;
+    float:right;
+    clear: both;
+    padding: 30px 30px 50px 50px;
+}