From 8c0ebb9aef9b6a08771ad3aa1ae88838e5ba0974 Mon Sep 17 00:00:00 2001
From: john-emerson14 <john.carv.sousa@gmail.com>
Date: Mon, 23 Mar 2020 14:26:15 -0300
Subject: [PATCH] feat: add popup quote

---
 index.html | 14 ++++----------
 style.css  | 40 ++++++++++++++++------------------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/index.html b/index.html
index f424b9f..3eac940 100644
--- a/index.html
+++ b/index.html
@@ -25,16 +25,10 @@
         <div class="popup">
             <div class="popup-photo">
                 <img src="https://avatars0.githubusercontent.com/u/43749971" alt="Profile Picture">
-            </div>
-
-            <!-- <div class="popup-text">
-                <h1>
-                    John Emerson
-                </h1>
-                <p>
+                <div class="popup-quote">
                     But... the sensation that I've lost something lingers for a longtime after I wake up.
-                </p>
-            </div> -->
+                </div>
+            </div>
 
             <a class="popup-close" onclick="history.back()">&times;</a>
         </div>
@@ -59,7 +53,7 @@
                 class="fa fa-play-circle">&nbsp;</i>MyAnimeList</a>
     </div>
 
-    <div id="profileQuote">
+    <div id="hashtag">
         #SejaFeliz❤
     </div>
 
diff --git a/style.css b/style.css
index 17d3258..8e9b943 100644
--- a/style.css
+++ b/style.css
@@ -78,7 +78,7 @@ body {
     color: var(--bgColor);
 }
 
-#profileQuote {
+#hashtag {
     position: relative;
     padding-bottom: 20px;
     color: var(--accentColor);
@@ -160,13 +160,27 @@ body {
     max-height: 500px;
     width: auto;
     height: auto;
-    margin: 64px;
+    margin: 56px;
     background-color: var(--accentColor);
     /* transform: rotate(32deg); */
     transform: scale(0);
     transition: .5s ease-in-out;
 }
 
+.popup-quote {
+    font-family : Baskerville, Georgia, serif;
+    font-style : italic;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    color: var(--accentColor);
+    padding: 20px;
+    background-color: rgba(0, 0, 0, 0.7);
+    text-align: center;
+    font-size: 1rem;
+}
+
 .popup-photo {
     display: flex;
     width: 100%;
@@ -178,28 +192,6 @@ body {
     height: 100%;
 }
 
-.popup-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    width: 80%;
-    height: 100%;
-}
-
-.popup-text h1 {
-    font-size: 2rem;
-    font-weight: bold;
-    margin-bottom: 2rem;
-    text-transform: uppercase;
-    color: var(--bgColor2);
-}
-
-.popup-text p {
-    font-size: 0.8rem;
-    color: var(--bgColor2);
-    line-height: 1.5;
-}
-
 .overlay:target {
     visibility: visible;
     opacity: 1;