Added and Style signup form

assets/css/style.css

@@ -96,9 +96,14 @@ nav {
 
 /* main content */
 main {
-  /* make main element take up any surplus space to push footer down */
+  /* Enlarge main element to push footer down */
   flex: 1 0 auto;
+  /* Add margin at the top to prevent content from being covered by the header */
   margin-top: 47px;
+
+  /* Enable flex properties for child elements !signup-form*/
+  display: flex;
+  flex-direction: column;
 }
 
 /* Hero section */
@@ -194,6 +199,53 @@ hr {
   line-height: 0;
 }
 
+#signup {
+  background: url("../images/signup-image.webp");
+  background-size: cover;
+  background-position: 75%;
+  flex-grow:1;
+  padding: 20px 10% 0 10%;
+}
+
+#signup > h2 {
+  color: #fafafa;
+  margin-bottom: 20px;
+}
+
+#signup-form {
+  color: #ffffff;
+  background-color: rgba(60, 60, 60, .6);
+  padding: 30px;
+}
+
+.text-input {
+
+  background: transparent;
+  height: 25px;
+  padding: 0 5px;
+  margin: 5px 0 20px 0;  
+  width: 100%; 
+  color: #fafafa;
+  border: 1px solid #fafafa;
+  border-radius: 2px;
+}
+
+.radio-buttons {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.join-button {
+  border-radius: 2px;
+  background-color: #454b1b;
+  color: #fafafa;
+  font-size: 100%;
+  margin-top: 20px;
+  padding: 15px 32px;
+}
+
+
 /* footer */
 #social-networks {
   text-align: center;
@@ -281,6 +333,26 @@ hr {
     column-count: 3;
   }
 
+  /* signup form */
+  #signup {
+    background-position: center;
+    position: relative;
+  }
+
+  #signup-form {
+    max-width: 400px;
+    position: absolute;
+    left: 10%;
+    top: 150px;
+  }
+  .text-input:hover {
+    border-color: #f16c6b;
+  }
+  .join-button:hover {
+    background-color: #fafafa;
+    color: #454b1b;
+  }
+
 }
 
 @media screen and (min-width: 992px) {

signup.html

@@ -35,22 +35,55 @@ <h1 id="logo">Love Running</h1>
         </nav>
     </header>
     <!--Main content-->
-    <main>Main Content</main>
+    <main>
+        <section id="signup">
+            <form action="https://formdump.codeinstitute.net" method="POST" id="signup-form">
+                <h2><i class="fa-solid fa-heart-pulse"></i>LET'S GET YOU SIGNED UP!</h2>
+                <label for="first-name">First Name</label><br>
+                <input type="text" class="text-input" id="first-name" name="first-name" required /><br>
+                <label for="last-name">Last Name</label><br>
+                <input type="text" class="text-input" id="last-name" name="last-name" required /><br>
+                <label for="email-address">Email Address</label><br>
+                <input type="email" class="text-input" id="email-address" name="email-address" required /><br>
+                <div class="radio-buttons">
+                    <div>
+                        <label for="road">Road</label>
+                        <input type="radio" id="road" value="road" name="running-preference" required checked/><br>
+                    </div>
+                    <div>
+                        <label for="trail">Trail</label>
+                        <input type="radio" id="trail" value="trail" name="running-preference" required/><br>
+                    </div>
+                    <div>
+                        <label for="both">Both</label>
+                        <input type="radio" id="both" value="both" name="running-preference" required/><br>
+                    </div>
+                </div>
+                <button type="submit" class="join-button">Let's Run!</button>
+
+
+            </form>
+        </section>
+    </main>
 
     <!--Footer-->
     <footer>
         <ul id="social-networks">
             <li><a href="https://www.facebook.com/" target="_blank" rel="noopener"
-                    aria-label="Visit our Facebook page (opens in a new tap)"><i class="fa-brands fa-facebook"></i></a></li>
-
+                    aria-label="Visit our Facebook page (opens in a new tap)"><i class="fa-brands fa-facebook"></i></a>
+            </li>
+
             <li><a href="https://www.x.com/" target="_blank" rel="noopener"
-                    aria-label="Visit our X(twitter) page (opens in a new tap)"><i class="fa-brands fa-x-twitter"></i></a></li>        
-
+                    aria-label="Visit our X(twitter) page (opens in a new tap)"><i
+                        class="fa-brands fa-x-twitter"></i></a></li>
+
             <li><a href="https://www.youtube.com/" target="_blank" rel="noopener"
-                    aria-label="Visit our Youtube page (opens in a new tap)"><i class="fa-brands fa-youtube"></i></a></li>        
+                    aria-label="Visit our Youtube page (opens in a new tap)"><i class="fa-brands fa-youtube"></i></a>
+            </li>
 
             <li><a href="https://www.instagram.com/" target="_blank" rel="noopener"
-                    aria-label="Visit our Instagram page (opens in a new tap)"><i class="fa-brands fa-instagram"></i></a></li>                
+                    aria-label="Visit our Instagram page (opens in a new tap)"><i
+                        class="fa-brands fa-instagram"></i></a></li>
         </ul>
     </footer>
     <!-- Font Awesome kit -->