feat: Modified report-song-page (#384)

* Modified requirements page

* Modified report-song page

* modiefied requirements heading

* modified requirements link style

you-may-like/report-song/index.html

@@ -26,30 +26,30 @@ <h2 class="info">Even though our team tries to ensure that there are no songs in
 
       <!-- Input field for the user's name -->
       <p>
-        <label>Your Name: <input type="text" name="name" /></label>
+        <label for="name">Your Name: <br><input type="text" name="name" /></label>
       </p>
 
       <!-- Input field for the user's email -->
       <p>
-        <label>Your Email: <input type="email" name="email" /></label>
+        <label>Your Email: <br><input type="email" name="email" /></label>
       </p>
 
       <!-- Input field for the name of the song that is being reported -->
       <p>
         <label
-          >Song Violating Requirements <input type="text" name="song"
+          >Song Violating Requirements <br><input type="text" name="song"
         /></label>
       </p>
 
       <!-- Input field for the requirement that the song is violating -->
       <p>
         <label
-          >Which requirement is it violating? <input type="text" name="violation">
+          >Which requirement is it violating? <br><input type="text" name="violation">
       </p>
 
       <!-- Input field for any additional information the user wants to provide -->
       <p>
-        <label>Additional Info: <textarea name="message"></textarea></label>
+        <label>Additional Info: <br><textarea name="message"></textarea></label>
       </p>
 
       <!-- Button for submitting the form -->

you-may-like/report-song/styles.css

@@ -4,15 +4,18 @@
 
 /* Style for the information header */
 .info {
-  color: purple;
+  margin-inline: 5%;
+  color: rgb(99, 98, 98);
   text-align: center;
   font-size: 15px;
 }
 
 /* Style for the form */
 form {
   margin: 0 auto;
-  width: 250px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
 }
 
 /* Style for the paragraphs inside the form */
@@ -35,13 +38,34 @@ p {
 
 /* Style for the 'Requirements' link */
 .requirements {
+  text-decoration: none;
   padding-left: 5px;
-  color: blue;
-  text-decoration: underline;
+  color: rgb(191, 40, 40);
 }
 
 /* Style for the 'Requirements' link */
 .requirements:hover {
   text-decoration: none;
-  color: orange;
+  color: rgb(191, 40, 40);
+}
+
+input{
+  margin-top: 1%;
+  padding: 0.5%;
+  width: 40%;
 }
+button {
+  background-color: green;
+  width: 13%;
+  padding: 1%;
+  text-align: center;
+  border-radius: 5px;
+  color: aliceblue;
+  margin-inline: auto;
+  margin-top: 2%;
+}
+h1{
+  margin-inline: 5%;
+  text-align: center;
+  color: rgb(191, 40, 40);
+}