FTR

- Minor CSS tweaks and adjustments to the content for the mission page

about.html

@@ -90,19 +90,18 @@ <h4>Breakdowns</h4>
             <!--<footer class="module__footer">
                 I am the footer
             </footer>-->
-
             <!--  -->
             <!--<h2>What are we about?</h2>
             <p>
                 Helping runners!
             </p>-->
-                    <!--<p>
+            <!--<p>
                 Running is a passion sport. We love it. You love it.
             </p>
             <p>
                 Our proceeds will either go to helping runners meet their fundraising goals or towards races that are raising funds.
             </p>-->
-                    <!--<h3>
+            <!--<h3>
                 How we plan to help.
             </h3>
             <p>
@@ -122,3 +121,55 @@ <h4>Breakdowns</h4>
 </body>
 
 </html>
+
+
+<p><span class="mission__hashtag">#runners4runners</span> - That hashtag is where this all started. Runners support each other, motivate each other, and prove to their bodies and their minds that they can do more. For the Run is an extension of these things. We aim to provide runners with wonderful products and in turn take at least 50% of what we make and give back.</p>
+<p>Races can take us to travel to new places. Causes often come up that remind us why we run and motivate us to do more to help those both near and far. This community both humbles and inspires. It reminds us that we are both fragile and unbreakable. We are runners.</p>
+<p>So what is our mission? We want to help. We want to give away race entries to help runners have amazing new adventures! We want to help others where help is needed. We want to take the joy and love that this community generates and amplify it.</p>
+<p>Train for your run. Be ready for your run. Remember why you run. Love every step</p>
+<p>We are For the Run. We are for your run. We were all built for this. Let’s keep going.</p>
+<span class="mission__heart">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
+        <path d="M36 55.9l18-18c2.3-2.3 3.7-5.5 3.7-9 0-7-5.7-12.8-12.8-12.8-3.5 0-6.7 1.4-9 3.7-2.3-2.3-5.5-3.7-9-3.7-7 0-12.8 5.7-12.8 12.8 0 3.5 1.4 6.7 3.7 9l18.2 18z" fill="#303030" />
+    </svg>
+</span>
+<p>For the Run</p>
+
+
+
+<h2>Why was For The Run created?</h2>
+<p>The running community is filled with amazing people who come from a seemingly unlimited number of backgrounds. No matter the reason, we all share a passion for lacing up our shoes and getting our legs moving. Running has given us so much back in both our lives and the people who inspire us.</p>
+<p>For the Run is an opportunity for us to take the joy running has given us and send that back out into the world. We want this to be something that becomes a part of the running community. We can't wait to see where you all take us!</p>
+<h2>How will we give back</h2>
+<p>At least 50% of every product we sell will go towards helping runners or the causes they care about.</p>
+<h2>Ways we plan to give back</h2>
+<ul class="content__charity-breakdown">
+    <li class="charity--example">
+        <strong>4 shirts</strong>
+        <span> = </span>
+        Donation to a runner's charity
+    </li>
+    <li class="charity--example">
+        <strong>12 shirts</strong>
+        <span> = </span>
+        Give away a half marathon race entry
+    </li>
+    <li class="charity--example">
+        <strong>24 shirts</strong>
+        <span> = </span>
+        Give away a marathon race entry
+    </li>
+    <li class="charity--example">
+        <strong>Weekly causes</strong>
+        <span> = </span>
+        Proceeds for that week go to a cause
+    </li>
+    <li class="charity--example">
+        <strong>Merch for a cause</strong>
+        <span> = </span>
+        Proceeds from a product will go to a cause
+    </li>
+</ul>
+<p>Have ideas for how we can give back? Let us know!</p>
+<a href="/contact" class="button large positive">Contact us</a>
+<p>-<br><strong>For the Run</strong></p>

assets/css/_components.custom-page.scss

@@ -95,5 +95,30 @@
             line-height: 125%;
         }
         //
+        .mission__hashtag {
+            display: inline-block;
+            padding: .75rem 1.5rem;
+            font-family: $brand-text;
+            font-size: 1.25rem;
+            font-weight: 900;
+            text-transform: uppercase;
+            color: $white;
+            background: linear-gradient(30deg, $green 0%, $yellow 33%, $orange 66%, $red 100%);
+        }
+        //
+        .mission__heart {
+            display: block;
+            margin: 0;
+            width: 2rem;
+            height: 2rem;
+            //
+            svg {
+                width: 100%;
+                //
+                path {
+                    fill: $red; 
+                }
+            }
+        }
     }
 }

assets/css/styles.css

@@ -2176,6 +2176,24 @@ button {
   .custom-page li {
     font-size: 1.4125rem;
     line-height: 125%; }
+  .custom-page .mission__hashtag {
+    display: inline-block;
+    padding: .75rem 1.5rem;
+    font-family: "Raleway", sans-serif;
+    font-size: 1.25rem;
+    font-weight: 900;
+    text-transform: uppercase;
+    color: #fff;
+    background: linear-gradient(30deg, #57eec7 0%, #dbfc35 33%, #ffa357 66%, #ff5a5a 100%); }
+  .custom-page .mission__heart {
+    display: block;
+    margin: 0;
+    width: 2rem;
+    height: 2rem; }
+    .custom-page .mission__heart svg {
+      width: 100%; }
+      .custom-page .mission__heart svg path {
+        fill: #ff5a5a; }
 
 .module__footer {
   background: #303030; }