From e81ae6df294ae0f28f0cf257b5c58e44924a3ff3 Mon Sep 17 00:00:00 2001
From: Milos Minic <minicm034@gmail.com>
Date: Thu, 5 Oct 2023 22:15:41 +0200
Subject: [PATCH] Fix minor issues with button alignment, correct typos in
 error messages, and address styling glitch in footer

---
 index.html | 233 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 156 insertions(+), 77 deletions(-)
diff --git a/index.html b/index.html
index 5d46608..2a7ae6f 100644
--- a/index.html
+++ b/index.html
@@ -1,102 +1,181 @@
 <!DOCTYPE html>
-<html>
-<head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Contribute</title>
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="assets/css/styles.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">
-        <style>
-            .btn:hover{
-                background-color:white;
-                color:#555555;
-                border: 1px solid #555555;
-                transition: ease 0.5s;
-            }
-        </style>
-</head>
-<body>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Contribute</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="assets/css/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css"
+    />
+    <style>
+      .btn:hover {
+        background-color: white;
+        color: #555555;
+        border: 1px solid #555555;
+        transition: ease 0.5s;
+      }
+    </style>
+  </head>
 
+  <body>
     <header>
-        <h2><a class="header" href="index.html">Contribute!</a></h2>
-        <nav>
-            <li><a class="header" href="about.html">About</a></li>
-            <li><a class="header" href="contributors.html">Contributors</a></li>
-            <li><a class="header" href="https://github.com/GabeNedden/contribute" target="_blank">Github</a></li>
-        </nav>
+      <h2><a class="header" href="index.html">Contribute!</a></h2>
+      <nav>
+        <ul>
+          <li><a class="header" href="about.html">About</a></li>
+          <li><a class="header" href="contributors.html">Contributors</a></li>
+          <li>
+            <a
+              class="header"
+              href="https://github.com/GabeNedden/contribute"
+              target="_blank"
+              >Github</a
+            >
+          </li>
+        </ul>
+      </nav>
     </header>
 
     <section class="hero">
-        <div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
-        <div class="hero-content-area">
-            <h1>Let's Contribute</h1>
-            <h3>Learn to Contribute to Open-Source!</h3>
-        </div>
+      <div
+        class="background-image"
+        style="background-image: url(assets/img/main.jpg)"
+      ></div>
+      <div class="hero-content-area">
+        <h1>Let's Contribute</h1>
+        <h3>Learn to Contribute to Open-Source!</h3>
+      </div>
     </section>
 
     <section class="mission">
-        <h3 class="title">Our Mission</h3>
-        <p>To help new developers excited to work on Open-Source projects but <a href="https://github.com/GabeNedden/contribute" target="_blank">need help getting started</a>.</p>
-        <hr>
+      <h3 class="title">Our Mission</h3>
+      <p>
+        To help new developers excited to work on Open-Source projects but
+        <a href="https://github.com/GabeNedden/contribute" target="_blank"
+          >need help getting started</a
+        >.
+      </p>
+      <hr />
 
-        <ul class="grid">
-            <li class="small" style="background-image: url(assets/img/scrumBoard.jpg);"></li>
-            <li class="large" style="background-image: url(assets/img/computerHands.jpg);"></li>
-            <li class="large" style="background-image: url(assets/img/gitHub.jpg);"></li>
-            <li class="small" style="background-image: url(assets/img/computerGraph.jpg);"></li>
-        </ul>
+      <ul class="grid">
+        <li
+          class="small"
+          style="background-image: url(assets/img/scrumBoard.jpg)"
+        ></li>
+        <li
+          class="large"
+          style="background-image: url(assets/img/computerHands.jpg)"
+        ></li>
+        <li
+          class="large"
+          style="background-image: url(assets/img/gitHub.jpg)"
+        ></li>
+        <li
+          class="small"
+          style="background-image: url(assets/img/computerGraph.jpg)"
+        ></li>
+      </ul>
     </section>
 
     <section class="gridpanel">
-        <h3 class="title">Here's how to get started in 4 simple steps!</h3>
-        <hr>
+      <h3 class="title">Here's how to get started in 4 simple steps!</h3>
+      <hr />
 
-        <ul class="grid">
-            <li>
-                <i class="fas fa-folder-open fa-4x"></i>
-                <h4>Fork & Clone the repo...</h4>
-                <p><a href="https://docs.github.com/en/get-started/quickstart/fork-a-repo">Fork the repository</a> by clicking on the fork button on top of the repo. Then <a href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository">clone it</a> onto your local machine.</p>
-            </li>
-            <li>
-                <i class="fa fa-id-card fa-4x"></i>
-                <h4>Make the changes...</h4>
-                <p>Make your changes in the code, preferably on a new branch. Next commit those changes and push them!</p>
-            </li>
-            <li>
-                <i class="fab fa-github-square fa-4x"></i>
-                <h4>Make a PR...</h4>
-                <p>Now finally it's time to make a <a href="https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests">Pull Request</a> and wait for it to be merged.</p>
-            </li>
-            <li>
-                <i class="far fa-thumbs-up fa-4x"></i>
-                <h4>and Approved!</h4>
-                <p>Once it is merged you will be able to see your contribution on the main repository. It's time to celebrate your first PR! 🥳</p>
-            </li>
-        </ul>
+      <ul>
+        <li>
+          <i class="fas fa-folder-open fa-4x"></i>
+          <h4>Fork & Clone the repo...</h4>
+          <p>
+            <a
+              href="https://docs.github.com/en/get-started/quickstart/fork-a-repo"
+              >Fork the repository</a
+            >
+            by clicking on the fork button on top of the repo. Then
+            <a
+              href="https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository"
+              >clone it</a
+            >
+            onto your local machine.
+          </p>
+        </li>
+        <li>
+          <i class="fa fa-id-card fa-4x"></i>
+          <h4>Make the changes...</h4>
+          <p>
+            Make your changes in the code, preferably on a new branch. Next
+            commit those changes and push them!
+          </p>
+        </li>
+        <li>
+          <i class="fab fa-github-square fa-4x"></i>
+          <h4>Make a PR...</h4>
+          <p>
+            Now finally it's time to make a
+            <a
+              href="https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests"
+              >Pull Request</a
+            >
+            and wait for it to be merged.
+          </p>
+        </li>
+        <li>
+          <i class="far fa-thumbs-up fa-4x"></i>
+          <h4>and Approved!</h4>
+          <p>
+            Once it is merged you will be able to see your contribution on the
+            main repository. It's time to celebrate your first PR! 🥳
+          </p>
+        </li>
+      </ul>
     </section>
 
     <section class="contact">
-        <h3 class="title">Learn More</h3>
-        <p>To Learn more about Open Source projects and how to contribute to them...</p>
-        <hr>
-        <form>
-            <a href="https://github.com/GabeNedden/contribute" target="_blank" class="btn header">Check us out on Github</a>
-        </form>
+      <h3 class="title">Learn More</h3>
+      <p>
+        To Learn more about Open Source projects and how to contribute to
+        them...
+      </p>
+      <hr />
+      <form>
+        <a
+          href="https://github.com/GabeNedden/contribute"
+          target="_blank"
+          class="btn header"
+          >Check us out on Github</a
+        >
+      </form>
     </section>
 
     <footer>
-        <p class="footer-date"></p>
-        <p>Designed by Gabriel Zur Nedden</p>
+      <p class="footer-date"></p>
+      <p>Designed by Gabriel Zur Nedden</p>
     </footer>
 
     <script>
-        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-
-        const d = new Date();
-        var ele = document.getElementsByClassName('footer-date')[0];
-        ele.innerHTML = monthNames[d.getMonth()] + " " + d.getFullYear();
+      const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ];
 
+      const d = new Date();
+      var ele = document.getElementsByClassName("footer-date")[0];
+      ele.innerHTML = monthNames[d.getMonth()] + " " + d.getFullYear();
     </script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
