Merge pull request #1 from pipeline-foundation/feature/styling-improvement

Made links more visible and positioned footer content AB#258

Author: kulov

index.html

@@ -65,22 +65,23 @@ <h1 class="heading">
               <i class="fas fa-sign-in-alt"></i>Who can join
             </h1>
             <ul class="text">
-                <li>
-                    <i class="fas fa-caret-right"></i>
-                    <span>Any OSS project, based on availability and complexity</span>
-                </li>
-                <li>
-                    <i class="fas fa-caret-right"></i>
-                    <span>
-                        Commercial projects can be supported based on eligibility
-                    </span>
-                </li>
-                <li>
-                    <i class="fas fa-caret-right"></i>
-                    <span>
-                        Submit an issue to apply <a href="https://github.com/pipeline-foundation/projects" target="_blank">here</a>
-                    </span>
-                </li>
+              <li>
+                <i class="fas fa-caret-right"></i>
+                <span>Any OSS project, based on availability and complexity</span>
+              </li>
+              <li>
+                <i class="fas fa-caret-right"></i>
+                <span>
+                  Commercial projects can be supported based on eligibility
+                </span>
+              </li>
+              <li>
+                <i class="fas fa-caret-right"></i>
+                <span>
+                  Submit an issue to apply
+                  <a href="https://github.com/pipeline-foundation/projects/issues/new/choose" target="_blank">here</a>
+                </span>
+              </li>
             </ul>
           </div>
           <div class="benefits line" id="Benefits">
@@ -115,9 +116,11 @@ <h1 class="heading"><i class="fas fa-chart-line"></i>Benefits</h1>
     </div>
 
     <div class="footer">
-      <p>© 2021 Pipeline Foundation</p>
-      <br/>
-      <h2>Non profit initiative sponsored by <a href="https://singlet.dev">Singlet Dev</a></h2>
+      <p class="copyright">© 2021 Pipeline Foundation</p>
+      <p class="info">
+        Non profit initiative sponsored by
+        <a href="https://singlet.dev" target="_blank">Singlet Dev</a>
+      </p>
     </div>
   </body>
 </html>

style.css

@@ -30,9 +30,13 @@ li {
 }
 a {
   text-decoration: none;
+  color: var(--orange);
+}
+a:hover {
+  text-decoration: underline;
 }
 body {
-  font-family: "Poppins", sans-serif;
+  font-family: 'Poppins', sans-serif;
   height: 100%;
   margin: 0;
 }
@@ -42,24 +46,21 @@ body {
 .content {
   min-height: 100%;
 }
-.content-inside {
-  padding-bottom: 8rem;
-}
 
 .container {
   padding: 0rem 17rem 0rem 17rem;
 }
 
-.active {
-  border-bottom: 4px solid var(--orange);
-}
-
 .line {
   padding-top: 3rem;
   padding-bottom: 2rem;
   border-bottom: 3px solid var(--border);
 }
 
+.line:last-child {
+  border: 0;
+}
+
 .heading {
   font-size: 6rem;
   color: var(--blue);
@@ -107,35 +108,41 @@ body {
 }
 
 .item {
+  text-decoration: none !important;
   font-size: 4rem;
   margin-right: 6rem;
   padding: 1rem;
   font-weight: var(--medium);
   color: var(--black);
 }
+.item:hover {
+  border-bottom: 4px solid var(--orange);
+}
 
 .heading i {
   display: none;
 }
 
 .footer {
-  height: 50px;
-  margin-top: -50px;
-  width: 100%;
+  margin-top: 3rem;
+  padding: 3rem;
   background-color: var(--black);
   color: white;
-  height: 7.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  text-align: center;
 }
 
-.footer p {
-  font-size: 3rem;
+.footer .copyright {
+  font-size: 2rem;
   color: var(--white);
   font-weight: var(--regular);
 }
 
+.footer .info {
+  font-size: 2rem;
+  color: var(--white);
+  margin-top: 5px;
+}
+
 /* Extra small devices (phones, 600px and down) */
 @media (max-width: 600px) {
   html {
@@ -205,6 +212,19 @@ body {
   html {
     font-size: 7px;
   }
+
+  .footer {
+    overflow: hidden;
+  }
+
+  .footer .copyright {
+    float: right;
+  }
+
+  .footer .info {
+    float: left;
+    margin-top: 0;
+  }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */