call to action, closes #6

_layouts/default.html

@@ -161,6 +161,19 @@
       if ( $(window).width() < 768) {
         $( "#scroll-arrow" ).remove();
       }
+
+      $('#answer-yes').hide()
+      $('#answer-no').hide()
+    });
+
+
+    $('#button-yes').click(function() {
+      $('#question').hide()
+      $('#answer-yes').show()
+    });
+    $('#button-no').click(function() {
+      $('#question').hide()
+      $('#answer-no').show()
     });
 
   </script>

css/custom.css

@@ -174,6 +174,10 @@ ul {
   margin-bottom: 8px;
 }
 
+#call-to-action{
+  height: 200px;
+}
+
 .btn-danger {
   background-color: #ddd;
   border-radius: 0px;

index.html

@@ -208,6 +208,26 @@ <h2>About</h2>
     <p>
       The code for this project is open source and available on <a href="https://github.com/datamade/million-dollar-blocks" target="_blank">github</a>.
     </p>
+    <hr>
+    <div id="call-to-action">
+      <div id="question">
+        <h3>Did you find this compelling?</h3>
+          <a class="btn btn-danger" id="button-yes">Yes!</a> <a class="btn btn-danger" id="button-no">Nope</a>
+          <p></p>
+        </h3>
+      </div>
+      <div id="answer-yes">
+        <h3>Glad to hear it.</h3>
+        <p>The first step is awareness; the next step is action. Want to stay posted on how you can help advocate for justice reform?</p>
+        <a href="http://opencityapps.us7.list-manage1.com/subscribe?u=0a8859c0fd97102b520ea5289&id=2d0ce75420" target="_blank" class="btn btn-danger">Stay in touch</a>
+        <p class="small">* We'll treat your inbox with the utmost respect. We won't bombard or spam you.</p>
+      </div>
+      <div id="answer-no">
+        <h3>Sorry to hear that.</h3>
+        <br>
+        <a href="https://docs.google.com/forms/d/19IN4nAmHcpMIp7fLLAeofgrgw2MnX8ots2DdeU0ihsk/viewform" target="_blank" class="btn btn-danger">Share what could have been better <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
+      </div>
+    </div>
   </div>
 </div>