From 773ded553507839f7554ea224eabf14f4e78aa43 Mon Sep 17 00:00:00 2001
From: Aditya Anand <aditya.anandmc@gmail.com>
Date: Fri, 31 Aug 2018 13:31:31 +0530
Subject: [PATCH] landing: removed inline css

---
 app/assets/v2/css/landing_page.css            | 13 +++++++++
 .../templates/landing/funder/howworks.html    | 28 +++++++++----------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/assets/v2/css/landing_page.css b/app/assets/v2/css/landing_page.css
index 1389b1eeed0..cad106f90d2 100644
--- a/app/assets/v2/css/landing_page.css
+++ b/app/assets/v2/css/landing_page.css
@@ -141,6 +141,19 @@ body {
   margin-bottom: 1rem;
 }
 
+.howworks-step i {
+  font-size: 2rem;
+  padding: 0.5rem 0;
+}
+
+.funder-container .howworks-step i {
+  color: #FFCE08;
+}
+
+.contributor-container .howworks-step i {
+  color: #25E899;
+}
+
 .howworks-step__label {
   border-radius: 50%;
   height: 2rem;
diff --git a/app/retail/templates/landing/funder/howworks.html b/app/retail/templates/landing/funder/howworks.html
index 1ea483142b6..dc03cd03cf8 100644
--- a/app/retail/templates/landing/funder/howworks.html
+++ b/app/retail/templates/landing/funder/howworks.html
@@ -26,7 +26,7 @@
   <div id="howworks-toggle-indicator"></div>
 </div>
 <div class="howworks-sections d-flex">
-  <div class="howworks-section">
+  <div class="howworks-section funder-container">
     <div class="row mt-5 mb-5">
       <div class="col text-center">
         <h1>{% trans "Fund An Issue. Grow Your Project." %}</h1>
@@ -35,24 +35,24 @@ <h1>{% trans "Fund An Issue. Grow Your Project." %}</h1>
     <div class="howworks-steps">
       <div class="howworks-step">
         <div class="howworks-step__label">1</div>
-        <i class="fab fa-ethereum" style="padding: 10px 0 10px 0; font-size: 40px; color: #FFCE08;" aria-hidden="true"></i>
+        <i class="fab fa-ethereum" aria-hidden="true"></i>
         <h5>{% trans "Post A Bounty." %}</h5>
-        <p>{% blocktrans %}Fund a well specified issue on your Github repo which is a good
+        <p class="font-subheader">{% blocktrans %}Fund a well specified issue on your Github repo which is a good
           candidate for external contribution.{% endblocktrans %}</p>
       </div>
       <div class="howworks-step">
         <div class="howworks-step__label">2</div>
-        <i class="fas fa-users" style="padding: 10px 0 10px 0; font-size: 40px; color: #FFCE08" aria-hidden="true"></i>
+        <i class="fas fa-users" aria-hidden="true"></i>
 
         <h5>{% trans "Work With A Gitcoiner." %}</h5>
-        <p>{% blocktrans %}Provide a Gitcoiner with a timeline and
+        <p class="font-subheader">{% blocktrans %}Provide a Gitcoiner with a timeline and
           collaborate to complete the task.{% endblocktrans %}</p>
       </div>
       <div class="howworks-step">
         <div class="howworks-step__label">3</div>
-        <i class="fas fa-project-diagram" style="padding: 10px 0 10px 0; font-size: 40px; color: #FFCE08" aria-hidden="true"></i>
+        <i class="fas fa-project-diagram" aria-hidden="true"></i>
         <h5>{% trans "Grow Your Project." %}</h5>
-        <p>{% blocktrans %}Merge the Gitcoiner’s contribution, pay for a job well done,
+        <p class="font-subheader">{% blocktrans %}Merge the Gitcoiner’s contribution, pay for a job well done,
             and grow a healthy open source ecosystem.{% endblocktrans %}</p>
       </div>
     </div>
@@ -65,7 +65,7 @@ <h5>{% trans "Grow Your Project." %}</h5>
     </p>
   </div>
 
-  <div class="howworks-section">
+  <div class="howworks-section contributor-container">
     <div class="row mt-5 mb-5">
       <div class="col text-center">
         <h1>{% trans "Contribute to Open Source. Get Paid." %}</h1>
@@ -74,9 +74,9 @@ <h1>{% trans "Contribute to Open Source. Get Paid." %}</h1>
     <div class="howworks-steps">
       <div class="howworks-step">
         <div class="howworks-step__label">1</div>
-        <i class="fas fa-search" style="padding: 10px 0 10px 0; font-size: 40px; color: #25E899;" aria-hidden="true"></i>
+        <i class="fas fa-search" aria-hidden="true"></i>
         <h5>{% trans "Find An Open Bounty." %}</h5>
-        <p>
+        <p class="font-subheader">
           {% trans "Whether it's Bugs, Features, or Security Issues, Gitcoin's" %}
           <a href="{% url "explorer" %}">{% trans "Issue Explorer" %}</a>
           {% trans "is the easiest way to find paid work in open source." %}
@@ -84,18 +84,18 @@ <h5>{% trans "Find An Open Bounty." %}</h5>
       </div>
       <div class="howworks-step">
         <div class="howworks-step__label">2</div>
-        <i class="fas fa-desktop" style="padding: 10px 0 10px 0; font-size: 40px; color: #25E899;" aria-hidden="true"></i>
+        <i class="fas fa-desktop" aria-hidden="true"></i>
         <h5>{% trans "Build Something Great." %}</h5>
-        <p>
+        <p class="font-subheader">
           {% blocktrans %}Select an open issue, work on a project, collaborate, build your
           skills, and contribute towards the open source projects.{% endblocktrans %}
         </p>
       </div>
       <div class="howworks-step">
         <div class="howworks-step__label">3</div>
-        <i class="fab fa-ethereum" style="padding: 10px 0 10px 0; font-size: 40px; color: #25E899;" aria-hidden="true"></i>
+        <i class="fab fa-ethereum" aria-hidden="true"></i>
         <h5>{% trans "Get Paid." %}</h5>
-        <p>
+        <p class="font-subheader">
           {% blocktrans %}Payments are Ethereum-based, & released automatically after code is
           accepted by the bounty submitter.{% endblocktrans %}
         </p>