From 34be20665bd5eac84a45e5a43ac5811ca82bc4a7 Mon Sep 17 00:00:00 2001
From: Lizabeth Petersen <lizpetersen928@gmail.com>
Date: Tue, 19 Dec 2017 20:29:21 -0800
Subject: [PATCH] adds images wrapper to favorites page

---
 index.html        | 16 +++++-------
 styles/base.css   |  6 ++---
 styles/module.css | 62 ++++++++++++++++-------------------------------
 3 files changed, 30 insertions(+), 54 deletions(-)

diff --git a/index.html b/index.html
index 68b4899..516cdfe 100644
--- a/index.html
+++ b/index.html
@@ -79,7 +79,7 @@
             </form>
         </fieldset>
 
-            <div id="gallery-wrapper"><!-- this is where images will be appended--></div>
+            <div id="gallery-wrapper" class="imageBlock"> <!-- this is where images will be appended--> </div>
 
             
             <label for="username">Create a username to save your favorite images.</label>
@@ -89,21 +89,17 @@
         </section>
 
         <section id="favePhotos">
-           <div id="userFaves">
-                <p>This is a test, this is ONLY a test....</p>
 
-               <form id="getFaves">
+           <div id="userFaves">
+                <form id="getFaves">
                    <label for="userName">Your Name</label>
                    <input type="text">
                    <button id="view" type="submit">View</button>
                </form>
             </div> 
-            <div id="topImages">
-                <form>
-                    <label for="topUserImages">Top Images</label>
-                    <button id="viewTopImages" type="submit">View Top Images</button>
-                </form>                  
-            </div> 
+
+            <div id="favorites-wrapper" class="imageBlock"> <!-- this is where images will be appended--> </div>    
+
         </section>
 
         <section id="learn">
diff --git a/styles/base.css b/styles/base.css
index c0c7c8e..72ee01e 100644
--- a/styles/base.css
+++ b/styles/base.css
@@ -8,7 +8,7 @@ body {
 }
 
 h1 {
-    font-family: 'Luckiest Guy', cursive;
+    font-family: 'Carter One', cursive;
     font-size: 2.3em;
     color: rgb(228, 53, 9);
     margin: 0;
@@ -19,12 +19,12 @@ h1 {
 } 
 
 h2 {
-    font-family: 'Luckiest Guy', cursive;
+    font-family: 'Carter One', cursive;
     font-size: 1.7em;
 }
 
 h3 {
-    font-family: 'Luckiest Guy', cursive;
+    font-family: 'Carter One', cursive;
     font-size: 1.3em;
 }
 
diff --git a/styles/module.css b/styles/module.css
index bf86f14..30a59cb 100644
--- a/styles/module.css
+++ b/styles/module.css
@@ -34,52 +34,32 @@
 
 
 /* Container module for Gallery */
-/* 
-.flex-container {
-    display: inline-flex;
-    flex-direction: row;
-    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;
+    #gallery-wrapper {
+        position: relative;
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        padding: 40px 40px 100px 40px;
     }
-
-.flex-item:nth-child(4) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
+    
+    .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;
     }
 
-.flex-item:nth-child(5) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    }
+    /* Container module for Favorites */
 
-.flex-item:nth-child(6) {
-    order: 0;
-    flex: 0 1 auto;
-    align-self: auto;
-    } */
-    #gallery-wrapper {
+    #favorites-wrapper {
         position: relative;
         display: flex;
         justify-content: space-around;