Merge pull request #2121 from thelostone-mc/feature/how-it-works

update : how_it_works page

app/assets/v2/css/gitcoin.css

@@ -223,6 +223,10 @@ h4,
   font-weight: 200;
 }
 
+.font-title-xl {
+  font-size: 1.8rem;
+}
+
 .font-title-lg {
   font-size: 22px;
 }
@@ -392,6 +396,12 @@ div.button-pink {
   font-size: 0.55rem;
 }
 
+.center-block {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
 .how-it-works-video {
   width: 100%;
   height: 600px;

app/assets/v2/css/howitworks.css

@@ -2,12 +2,42 @@
   display: flex;
 }
 
+h1,
+h2 {
+  color: #0D0764;
+  line-height: 0;
+}
+
+h2 {
+  font-weight: bold;
+}
+
 .how-it-works__step {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 2em;
 }
 
+
+.howworks-container ul {
+  text-align: left;
+}
+
+.howworks-container li {
+  list-style-type: none;
+  margin-right: 1rem;
+  display: inline;
+}
+
+.howworks-container li a {
+  text-decoration: none;
+  color: #3E00FF;
+}
+
+.howworks-container li a:hover {
+  border-bottom: 2px solid #3E00FF;
+}
+
 .how-it-works__step:nth-child(even) {
   flex-direction: row-reverse;
 }
@@ -19,10 +49,6 @@
   align-items: center;
 }
 
-.how-it-works__hor-line {
-  height: 5px;
-}
-
 .how-it-works__vert-line {
   position: absolute;
   background-color:rgba(0, 0, 0, 0.05);
@@ -50,30 +76,40 @@
   bottom: 0px;
 }
 
-.how-it-works__step-number {
-  position: relative;
-  z-index: 1;
+.how-it-works__step-number,
+.how-it-works__step-exclamation,
+.how-it-works__step-wait {
   margin-top: 1em;
+  z-index: 1;
   width: 30px;
   height: 30px;
   line-height: 26px;
   border-radius: 100%;
+  position: relative;
+  left: -1px;
+}
+
+.how-it-works__step-number {
   background: #05B66A;
   color: #333333;
 }
 
+.how-it-works__text-grey {
+  color: #86939E;
+}
+
 .how-it-works__step-exclamation {
-  margin-top: 1em;
-  width: 30px;
-  height: 30px;
-  line-height: 26px;
-  border-radius: 100%;
   background: #F9006C;
   color: #FFFFFF;
 }
 
+.how-it-works__step-wait {
+  background-color: #EBC629;
+}
+
 .how-it-works__step-title {
   font-weight: bold;
+  min-width: 10px;
 }
 
 .how-it-works__step-title,
@@ -110,7 +146,40 @@
 }
 
 .how-it-works__step-icon img {
-  width: 50px;
+  max-width: 5rem;
+}
+
+#permissions h2 img {
+  position: relative;
+  top: -3px;
+  height: 1.6rem;
+}
+
+.grey-border {
+  border-bottom: 1px solid #979797;
+  padding-bottom: 1.5rem;
+}
+
+@media (max-width: 767.98px) {
+
+  .in-some-cases-container img {
+    margin-top: 2.2rem;
+  }
+
+  #payment img {
+    width: 100%;
+  }
+
+  #project-types img {
+    width: 20rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+
+  .howworks-container ul {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
 }
 
 @media (min-width: 992px) {

app/assets/v2/css/landing_page.css

@@ -385,6 +385,13 @@ body {
 .in-some-cases-container {
   background-color: #FAFCFD;
 }
+
+.in-some-cases-container .flex-row div {
+  max-width: 12rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .how-it-works-footer {
   background-color: #0D0764;
 }