styling prices boxes

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

Author: cjyabraham

_sass/announcement.scss

@@ -271,7 +271,7 @@
     td.no-border {
       border-left: none;
     }
-}
+  }
 
   .member-boxes {
     gap: 20px;
@@ -280,5 +280,23 @@
       background-color: white;
     }
   }
+
+  .prices-boxes {
+    gap: 20px;
+    margin: 0;
+    div {
+      background-color: white;
+    }
+    .employee-count {
+      color: #812CE5;
+    }
+    ul {
+      padding: 0;
+      li {
+        list-style: none;
+        margin: 0.1em;
+      }
+    }
+  }
 }
 

join.html

@@ -154,21 +154,52 @@ <h2 class="upper">Join the Membership that fits your goals</h2>
                 <td><img alt="Checkmark icon" src="/assets/images/join/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>
+
+        <h2 class="upper mt-5">Pricing</h2>
+
+        <div class="row mt-3 mb-4 prices-boxes">
+          <div class="col">
+            <h4 class="mt-3 mb-3">Premier Membership</h4>
+            <h5>Not Currently LF Member</h5>
+            <p>$170,000 USD / year</p>
+            <h5>Currently LF Member</h5>
+            <p>$150,000 USD / year</p>
+          </div>
+          <div class="col-md-8">
+            <h4 class="mt-3 mb-3">General Membership (price by <span class="employee-count">employee headcount</span>)</h4>
+            <div class="row">
+              <div class="col">
+                <h5>Not Currently LF Member</h5>
+                <ul>
+                  <li>$70,000 USD / year, <span class="employee-count">5000+</span></li>
+                  <li>$55,000 USD / year, <span class="employee-count">3,000-4,999</span></li>
+                  <li>$50,000 USD / year, <span class="employee-count">1,000-2,999</span></li>
+                  <li>$45,000 USD / year, <span class="employee-count">500-999</span></li>
+                  <li>$35,000 USD / year, <span class="employee-count">100-499</span></li>
+                  <li>$30,000 USD / year, <span class="employee-count">up to 99</span></li>
+                </ul>
+              </div>
+              <div class="col">
+                <h5>Currently LF Member</h5>
+                <ul>
+                  <li>$50,000 USD / year, <span class="employee-count">5000+</span></li>
+                  <li>$40,000 USD / year, <span class="employee-count">3,000-4,999</span></li>
+                  <li>$35,000 USD / year, <span class="employee-count">1,000-2,999</span></li>
+                  <li>$30,000 USD / year, <span class="employee-count">500-999</span></li>
+                  <li>$25,000 USD / year, <span class="employee-count">100-499</span></li>
+                  <li>$25,000 USD / year, <span class="employee-count">up to 99</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="container-fluid light-background-section mt-4">
+<div class="container-fluid light-background-section mt-3">
   <div class="container">
     <div class="row content">
       <div class="col-md-10 body-side-text text-center">