From c5493a4fcba9f3a9dbd4065146e331e8ffa48318 Mon Sep 17 00:00:00 2001
From: Ayo <mail@ayoayco.com>
Date: Tue, 6 Feb 2018 18:10:02 +0800
Subject: [PATCH] add subscription message speech bubble

---
 _layouts/default-home.html            |   9 +++++
 assets/images/{hmm2-2.jpg => ayo.jpg} | Bin
 assets/main.scss                      |  46 ++++++++++++++++++++++++++
 3 files changed, 55 insertions(+)
 rename assets/images/{hmm2-2.jpg => ayo.jpg} (100%)

diff --git a/_layouts/default-home.html b/_layouts/default-home.html
index 149f357..35b32d5 100644
--- a/_layouts/default-home.html
+++ b/_layouts/default-home.html
@@ -28,6 +28,15 @@
                             <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address..." required>
                             <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_85102052c447ce8a8bba06f24_2366f7f35a" tabindex="-1" value=""></div>
                             <div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+                            <div class="subscription-message-div">
+                                <div class="subscription-message-thumb float-left">
+                                    <img src="../assets/images/ayo.jpg" alt="Free exclusive web development tips!" />
+                                </div>
+                                <div class="subscription-message-text float-right">
+                                    <p>Learn practical methods to improve your web dev skills!</p>
+                                </div>
+                                <div class="clear-both"></div>
+                            </div>
                         </div>
                     </form>
                 </div>
diff --git a/assets/images/hmm2-2.jpg b/assets/images/ayo.jpg
similarity index 100%
rename from assets/images/hmm2-2.jpg
rename to assets/images/ayo.jpg
diff --git a/assets/main.scss b/assets/main.scss
index 36b9a3d..4af72c5 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -196,6 +196,52 @@ article .post-content p {
     text-align: center;
 }
 
+.subscription-message-text p {
+    margin: 20px 5px;
+    font-size: 16px;
+}
+
+.subscription-message-text {
+    width: 270px;
+}
+
+.subscription-message-div:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border: 20px solid transparent;
+    border-bottom-color: #80ae3c;
+    border-top: 0;
+    border-left: 0;
+    margin-left: -10px;
+    margin-top: -20px;
+}
+.subscription-message-div {
+    color: #ffffff;
+    background-color: #80ae3c;
+    width: 350px;
+    text-align: left;
+    margin: 50px auto 0;
+    position: relative;
+    border: 1px solid transparent;
+    border-bottom-left-radius: 2.5rem;
+    border-top-left-radius: 2.5rem;
+    border-bottom-right-radius: 2.5rem;
+    border-top-right-radius: 2.5rem;
+}
+
+.subscription-message-thumb {
+    width: 72px;
+}
+
+.subscription-message-thumb img {
+    border: 5px solid #80ae3c;
+    border-radius: 50%;
+}
+
 @media screen and (max-width: 600px) {
     .post-thumb {
         width: 100%;