Fix card margins, background, and language on home page

apps/civic_pulse/static/styles.css

@@ -17,7 +17,7 @@
 body {
   font: 400 15px Lato, sans-serif;
   line-height: 1.8;
-  color: #818181;
+  color: #000000;
 }
 
 h2 {
@@ -293,26 +293,45 @@ body {
 .donut {
   stroke: #c4c4c4;
   stroke-width: 6;
+  stroke-dashoffset: 25;
   animation: donut2 3s;
-  stroke-dasharray: 80, 20;
+  stroke-dasharray: 20, 80;
   filter:url(#shadow);
 }
 
 @keyframes donut2 {
+
   0% {
       stroke-dasharray: 0, 100;
   }
   100% {
-      stroke-dasharray: 80, 20;
+      stroke-dasharray: 20, 80;
   }
 }
 
 .our-card {
-  background-color: rgba(255,255,255,0.8);
+  background-color: rgba(228,228,228,0.95);
 }
 
 .card-header {
   color: #2E2757;
   font-size: 1.4em;
   font-style: bold;
 }
+
+@media (min-width: 990px) {
+  .col-md-3 {
+    -ms-flex: 0 0 30%;
+    flex: 0 0 30%;
+    max-width: 30%;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 990px) {
+  .col-md-3 {
+    -ms-flex: none;
+    flex: none;
+    max-width: 100%;
+  }
+}
+

apps/civic_pulse/templates/home.html

@@ -24,7 +24,7 @@ <h4 class="tagline">
     <g class="donut">
         <circle class="donut2" cx="20" cy="20" r="15.91549431" fill="transparent"></circle>
     </g>
-    <text class="heavy" x="13" y="18">80</text>
+    <text class="heavy" x="13" y="18">20</text>
     <text class="small" x="24" y="18">%</text>
     <text class="tiny" x="10" y="23">of municipal</text>
     <text class="tiny" x="10" y="28">sites are not</text>
@@ -42,22 +42,24 @@ <h4 class="tagline">
 <div class="container">
     <div class="row">
         <div class="card our-card col-md-3 mt-3 mx-auto">
-          <div class="card-header" >What we do...</div>
+          <div class="card-header" >What is GovLens</div>
           <div class="card-body" >
-            <p>When our physical infrastructure — from bridges to sidewalks to playgrounds —isn’t up to shape, we can often see it, and the consequences are dire. Digital infrastructure can be just as important to maintain, and GovLens provides an easy way to see how your community is doing.</p>
-        </div><
+            <p>GovLens analyzes over ten thousand government websites all around the United States and checks on how well they use HTTPS — an important security standard</p>
+        </div>
         </div>
         <div class="card our-card col-md-3 mt-3 mx-auto">
             <div class="card-header" >Why does HTTPS matter?</div>
             <div class="card-body" >
-                <p><a href=”https://en.wikipedia.org/wiki/HTTPS”>HTTPS</a> means that your traffic is encrypted so only you and the website you are visiting know what you are communicating. This isn’t fool-proof security, but it is a basic step to ensure that it’s harder for people to eavesdrop on what you are reading, intercept messages you send to government agencies, and secretly modify what you see.</p>
+                <p>
+                  <a href="https://en.wikipedia.org/wiki/HTTPS">HTTPS</a> (Short for Hypertext Transfer Protocol Secure) means that your traffic is encrypted so only you and the website you are visiting know what you are communicating.
+                </p>
   </div>
           </div>
         <div class="card our-card col-md-3 mt-3 mx-auto">
             <div class="card-header" >Take action!</div>
             <div class="card-body" >
               <p>
-We want to help agency staff, the press, and the general public better understand the state of government web security while also providing tips on how things can be improved — even on tight budgets. Look up your city or an agency in the search box above, see how it scores, and learn more about potential ways to keep improving.
+                Look up your city or an agency near you in the search box above, and see tips on how the security can be improved, even on tight budgets!
               </p>
               </div>
           </div>