animations foundations donation

css/styles.css

@@ -205,6 +205,123 @@ main {
     transform: translateY(0);
   }
 }
+/* progress bar */
+.progress-bg {
+  margin: 0 auto;
+  width: 65%;
+  height: 50px;
+  border-radius: 10px;
+  text-align: center;
+  -moz-box-shadow: inset 0 0 10px #ccc;
+  -webkit-box-shadow: inset 0 0 10px #ccc;
+  box-shadow: inset 0 0 10px #ccc;
+}
+
+.progress-bar {
+  height: 50px;
+  border-radius: 10px;
+  float: left;
+  width: 50%;
+  /* fallback */
+  background-color: #1c314a;
+
+  /* Safari 4-5, Chrome 1-9 */
+  background: -webkit-gradient(
+    linear,
+    0% 0%,
+    0% 100%,
+    from(#1c314a),
+    to(#27425f)
+  );
+
+  /* Safari 5.1, Chrome 10+ */
+  background: -webkit-linear-gradient(top, #1c314a, #27425f);
+
+  /* Firefox 3.6+ */
+  background: -moz-linear-gradient(top, #1c314a, #27425f);
+
+  /* IE 10 */
+  background: -ms-linear-gradient(top, #1c314a, #27425f);
+
+  /* Opera 11.10+ */
+  background: -o-linear-gradient(top, #1c314a, #27425f);
+}
+
+.progress-bg h3.goal,
+.progress-bg h3.raised {
+  font-family: Arial, sans-serif;
+  font-size: 2em;
+  font-weight: 600;
+  line-height: 50px;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  display: inline;
+}
+
+.progress-bg h3.raised {
+  color: #fff;
+  margin: 14px 25px 0 50px;
+  padding: 0 25px 0 0;
+}
+
+.progress-bg h3.goal {
+  color: #b2b2b2;
+  text-align: center;
+}
+
+body .progress-bg h3.raised {
+  -webkit-animation: fadein 4s; /* Safari and Chrome */
+  -moz-animation: fadein 4s; /* Firefox */
+  -ms-animation: fadein 4s; /* Internet Explorer */
+  -o-animation: fadein 4s; /* Opera */
+  animation: fadein 4s;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.progress-bg h3.goal {
+  float: right;
+  display: inline;
+  padding: 0 25px 0 0;
+  text-align: center;
+}
+
+body .progress-bg div {
+  -webkit-animation: progress-bar 2s ease forwards;
+  -moz-animation: progress-bar 2s ease forwards;
+  -o-animation: progress-bar 2s ease forwards;
+  animation: progress-bar 4s infinite ease forwards;
+}
+
+@keyframes progress-bar {
+  0% {
+    width: 2%;
+  }
+  20% {
+    width: 5%;
+  }
+  40% {
+    width: 8%;
+  }
+  60% {
+    width: 3%;
+  }
+  80% {
+    width: 6%;
+  }
+  100% {
+    width: 2%;
+  }
+}
+
+/*END progress bar */
 
 .column1 {
   flex: 1;
@@ -670,4 +787,19 @@ div.card > img {
     flex: none;
     padding: 0;
   }
+  .progress-bg {
+    width: 90%;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+
+  .progress-bg h3.goal,
+  .progress-bg h3.raised {
+    font-size: 1.5em;
+    line-height: 50px;
+  }
+
+  .progress-bg h3.raised {
+    margin: 10px 15px 0 30px;
+  }
 }

index.html

@@ -649,24 +649,38 @@
       </div>
       <div id="donate" class="container bg-alt">
         <div class="column1">
-          <div>
-            <h2 class="white">
-              Give Back to Our
-              <span class="italic"> Community!</span>
-            </h2>
-            <div class="flex-row">
-              <p class="white">
-                <span class="bold">10% of ALL RETREAT REVENUE</span> will be
-                donated to this year's non-profit partner:
-              </p>
-              <a href="https://foundationsk12school.org/">
-                <img
-                  src="https://cdn.lasthourhosting.org/assets/foundations-school.webp"
-                />
-              </a>
+          <h2 class="white">
+            Give Back to the
+            <span class="italic"> Community!</span>
+          </h2>
+          <div class="flex-row">
+            <p class="white">
+              <span class="bold">5% of ALL RETREAT REVENUE</span> will be
+              donated to this year's non-profit partner:
+            </p>
+            <a href="https://foundationsk12school.org/">
+              <img
+                src="https://cdn.lasthourhosting.org/assets/foundations-school.webp"
+              />
+            </a>
+            <p class="white">
+              For <span class="bold">EVERY</span> 100 tickets sold, we'll
+              <span class="bold">ADD 2.5%</span>, up to
+              <span class="bold">25% MAX</span>!
+            </p>
+          </div>
+
+          <div class="flex-row">
+            <div class="progress-bg">
+              <div class="progress-bar">
+                <h3 class="raised">5%</h3>
+              </div>
+
+              <h3 class="goal">Goal: 25%</h3>
             </div>
           </div>
         </div>
+
         <div class="column1">
           <div>
             <h3 class="float white">Watch This ↓</h3>