Added the modal for prices

Signed-off-by: cjyabraham <[email protected]>

Author: cjyabraham

_sass/announcement.scss

@@ -216,8 +216,11 @@
     td.benefit {
       min-width: 300px;
       text-align: left;
+      @include desktop {
+        min-width: 520px; 
+      }
     }
-    thead {
+    thead, tfoot {
       background-color: #812CE5;
       color: white;
       font-size: 16px; 
@@ -226,8 +229,20 @@
         font-size: 20px; 
       }
       td {
+        vertical-align: middle;
         border-top: none;
       }
+      a {
+        text-decoration: underline;
+        color: white;
+      }
+      td.price {
+        font-size: 14px;
+        line-height: 1.2;
+        @include desktop {
+          font-size: 16px; 
+        }
+      }
     }
     img {
       width: 15px;

join.html

@@ -81,25 +81,35 @@ <h3 class="upper">Community</h3>
         <h2 class="upper">Join the Membership that fits your goals</h2>
         <table class="table benefits table-responsive-sm mt-5">
           <thead>
-          <tr>
-            <td class="benefit">Benefit</td>
-            <td>Premier</td>
-            <td>General</td>
-            <td>Associate</td>
-          </tr>
+            <tr>
+              <td class="benefit">Benefit</td>
+              <td>Premier</td>
+              <td>General</td>
+              <td>Associate</td>
+            </tr>
           </thead>
-          <tr>
-            <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative </td>
-            <td><img alt="X icon" src="/assets/images/x.svg" /></td>
-            <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
-            <td><img alt="X icon" src="/assets/images/x.svg" /></td>
-          </tr>
-          <tr>
-            <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative </td>
-            <td><img alt="X icon" src="/assets/images/x.svg" /></td>
-            <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
-            <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
-          </tr>
+          <tbody>
+            <tr>
+              <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative</td>
+              <td><img alt="X icon" src="/assets/images/x.svg" /></td>
+              <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
+              <td><img alt="X icon" src="/assets/images/x.svg" /></td>
+            </tr>
+            <tr>
+              <td class="benefit">Hold one (1) seat on PTF Governing Board + one alternate (1) representative</td>
+              <td><img alt="X icon" src="/assets/images/x.svg" /></td>
+              <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
+              <td><img alt="Checkmark icon" src="/assets/images/check.svg" /></td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td class="benefit">Annual Fee</td>
+              <td class="price">LF Silver Membership + $150,000</td>
+              <td class="price">LF Silver Membership + <br/><a data-toggle="modal" data-target="#exampleModal" href="#">see sliding scale</a></td>
+              <td class="price">Free: Exclusive to academic and nonprofit organizations</td>
+            </tr>
+          </tfoot>
         </table>
         <div class="row member-boxes mt-5">
           <div class="col-sm">
@@ -135,3 +145,51 @@ <h2>Apply for Membership Today</h2>
     </div>
   </div>
 </div>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <table class="table benefits">
+          <thead>
+            <tr>
+              <td class="text-left">Consolidated Employees</td>
+              <td>Price</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="text-left">5,000 employees +</td>
+              <td>$50,000</td>
+            </tr>
+            <tr>
+              <td class="text-left">3,000 - 4,999 employees</td>
+              <td>$40,000</td>
+            </tr>
+            <tr>
+              <td class="text-left">1,000 - 2,999 employees</td>
+              <td>$35,000</td>
+            </tr>
+            <tr>
+              <td class="text-left">500 - 999 employees</td>
+              <td>$30,000</td>
+            </tr>
+            <tr>
+              <td class="text-left">1 - 499 employees</td>
+              <td>$25,000</td>
+            </tr>
+            <tr>
+              <td colspan="2">1 Board Seat per 10 members  (max 3)</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>