Create donation gif component 4439

_includes/donate-card.html

@@ -1,26 +1,8 @@
 <div class="page-card card-primary page-card-lg page-card--donate">
   <h3 class="title6 donate-title ">Provide In-Kind Software & Services</h3>
     {% include donation/in-kind.html %}
-</div>
-<div class="page-card card-primary page-card-lg page-card--donate donation-grid">
-  <div class="donation-body">
-    <h3 class="title6 donate-title">Make a donation to Hack for LA</h3>
-    <ol>
-      <li>
-        Please follow this link to the Code for America
-        <a href="https://www.codeforamerica.org/donate" target="_blank" rel="noopener noreferrer">donation
-          form</a>
-      </li>
-      <li>
-        To make a donation please select <strong>Hack for LA</strong> under the brigades
-        listed.
-      </li>
-    </ol>
-  </div>
-  <img
-    class="donation-gif"
-    src="/assets/images/about/hfla-donate.gif"
-    alt=""
-  />
-  <p id='donation-footer'>*100% of proceeds go to Hack for LA when option is selected.</p>
+</div>  
+<div class="page-card card-primary page-card-lg page-card--donate">  
+  <h3 class="title6 donate-title">Make a Donation</h3>
+    {% include donation/donate-gif-text.html %}
 </div>

_includes/donation/donate-gif-text.html

@@ -0,0 +1,21 @@
+<div class="donation-grid">
+  <div class="donation-body">
+    <p>Hack for LA takes donations through Code for America.</p>  
+    <ol>
+      <li>
+        Please follow this link to the Code for America
+        <a href="https://www.codeforamerica.org/donate" target="_blank" rel="noopener noreferrer">donation form.</a>
+      </li>
+      <li>
+        To make a donation please select <strong>Hack for LA</strong> under the brigades
+        listed.
+      </li>
+    </ol>            
+  </div>
+  <img
+  class="donation-gif"
+  src="/assets/images/about/hfla-donate.gif"
+  alt=""
+  />
+  <p class="donation-footer" id='donation-footer'>*100% of donated proceeds go directly to Hack for LA when option is selected.</p>
+</div>

_sass/components/_donate-components.scss

@@ -12,7 +12,6 @@
 .circle-full-container {
     display: flex;
     flex-direction: column;
-    padding: 1em 2em;
     justify-content: center;
     align-items: center;
     padding: 0;
@@ -73,4 +72,93 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+}
+
+.donation-gif {
+    box-shadow: 0px 2px 4px 0px #00000040;       
+}
+
+.donation-grid {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    p {
+        margin-top: 20px;
+        margin-left: 20px;
+    }
+}
+
+.donation-body  {
+    p {
+        margin-left: -10px;
+        font-size: 18px;
+    }
+
+    ol {
+        padding-left: 5px;
+    }
+
+    li {
+        padding-bottom: 15px;
+    }
+}
+
+.donation-footer {
+    margin-left: -10px;
+    font-style: italic;
+}
+
+@media #{$bp-tablet-up} {
+    .donation-grid{
+        display: grid;
+        grid-template-columns: 50% 50%;
+        grid-template-rows: 50% 50%;
+        padding: 20px;
+        text-align: left;  
+        align-items: flex-start;
+        font-size:18px;         
+
+        .donation-body {
+            grid-column: 1 / span 1;
+            grid-row: 1 / span 1;
+
+            p {
+                margin-left: 0px;
+            }
+
+            ol {
+                margin-bottom: 0px;
+                padding-left: 50px;
+                max-width: 360px;
+                line-height: 24px;
+            }
+
+            li {
+                padding: 10px 10px 25px 0px;
+                font-size: 1.125rem;
+            }
+        }
+
+        .donation-footer {
+            max-width: 3340px;
+            margin: 20px 0px 0px -10px;
+            padding: 0px 48px 0px 60px;
+            font-size: 15px;
+        }
+
+        .donation-gif {
+            grid-column: 2 / span 1;
+            grid-row: 1 / span 2;
+            margin: auto;
+            width: 318px;
+            padding-bottom: 20px;
+        }
+
+        p {
+            margin-top: 0px;
+            padding: 0 10px 0 30px;
+            grid-row: 2 / span 3;
+            grid-column: 1 / span 1;
+        }       
+    } 
 }

_sass/components/_donate.scss

@@ -1,6 +1,10 @@
 /*--------
 | Mobile 
 ----------*/
+.donate-title {
+    text-align: center;
+    font-size: 1.5rem;
+}
 
 .donate-wrapper {
     min-height: 100vh;
@@ -12,16 +16,13 @@
     align-items: center;
     padding: 4rem 1rem;
     height: fit-content;
-
     .donate-banner-text {
         display: flex;
         flex-direction: column;
         align-items: center;
-
         .title1 {
             padding-bottom: 28px;
         }
-
         p {
             font-size: 18px;
             max-width: 300px;
@@ -31,79 +32,13 @@
             }
             @media #{$bp-mobile-up} {
                 font-size: 16px;
-                text-align: left;                
+                text-align: left;
+                padding-left: 0px;                
             }
         }
     }   
 }
 
 .page-card--donate{
     padding: 32px;
-
-    .donate-title {
-        text-align: center;
-    }
-    .donation-gif {
-        box-shadow: 0px 2px 4px 0px #00000040;       
-    }   
-}
-
-.donation-grid{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    p {
-        margin-top: 20px;
-    }
-}
-
-
-@media #{$bp-tablet-up} {
-    .donation-grid{
-        display: grid;
-        grid-template-columns: 50% 50%;
-        grid-template-rows: 50% 50%;
-        padding: 20px;
-        text-align: left;  
-        align-items: flex-start;            
-
-        .donation-body {
-            grid-column: 1 / span 1;
-            grid-row: 1 / span 1;
-            margin-top: 15%;
-            padding: 0 32px 0 16px;
-
-            h3 {
-                text-align: left;
-            }
-
-            ol {
-                padding-left: 30px;
-                max-width: 480px;
-                line-height: 24px;
-            }
-
-            li {
-            padding: 5px 0;
-            font-size: 1.125rem;
-            }
-        }
-
-        .donation-gif {
-            grid-column: 2 / span 1;
-            grid-row: 1 / span 2;
-            margin: auto;
-            width: 318px;
-            padding-bottom: 20px;
-        }
-
-        p {
-            margin-top: 10px;
-            padding: 0 32px 0 36px;
-            font-size: 15px;
-            grid-row: 2 / span 3;
-            grid-column: 1 / span 1;
-        }       
-    } 
-}
+}