added css styling to home page

index.html

@@ -37,10 +37,14 @@
     </nav>
 
     <main>
-        <section id="home">
-            <iframe src="https://giphy.com/embed/EA4tMPoqsE6pq" width="600" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/mars-EA4tMPoqsE6pq" alt="gif of Mars, via GIPHY"></a></p>
+
+            <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">
 
@@ -75,10 +79,10 @@
             </form>
         </fieldset>
 
-            <div id="gallery"><!-- this is where images will be appended--></div>
+            <div id="gallery-wrapper"><!-- this is where images will be appended--></div>
 
 
-            <label for="username">Save your favorite images! Create a username</label>
+            <label for="username">Create a username to save your favorite images.</label>
             <input id = "user" type="text" name="username" required>
 
 
@@ -90,6 +94,7 @@
 
                <form id="getFaves">
                    <label for="userName">Your Name</label>
+                   <input type="text">
                    <button id="view" type="submit">View</button>
                </form>
             </div> 

styles/layout.css

@@ -1,7 +1,9 @@
 #home {
     background-color: #000000;
+
 }
 
+
 footer{
     width: 100%;
     margin: 0 auto;

styles/module.css

@@ -34,7 +34,7 @@
 
 
 /* Container module for Gallery */
-
+/* 
 .flex-container {
     display: inline-flex;
     flex-direction: row;
@@ -78,8 +78,28 @@
     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;
+    }
+
+    .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     */
 
 div.faq_container {

views/imageView.js

@@ -13,7 +13,7 @@ var app = app || {};
                 e.preventDefault();
                 app.Image.fetchImages();
         })
-       app.Image.all.map(image => $('#photos').append(image.toHtml()));
+       app.Image.all.map(image => $('#gallery-wrapper').append(image.toHtml()));
 
        $('.favImage').on('submit', function (event) {
         event.preventDefault();