added Email rounded corner and subscribe button hover effect sugarlab…

…s#625 done

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

index.html

@@ -4,6 +4,70 @@
 ---
 {% include nav.html %}
 
+<style>
+
+
+.embeddable-buttondown-form {
+max-width: 500px;
+font-family: Arial, sans-serif;
+text-align: center;
+}
+
+.form-description {
+font-size: 16px;
+margin-bottom: 15px;
+}
+
+.form-label {
+font-weight: bold;
+margin-bottom: 5px;
+display: block;
+text-align: left;
+}
+
+.email-input {
+width: 100%;
+padding: 10px 15px;
+margin-bottom: 15px;
+border: 2px solid #ccc;
+border-radius: 8px;
+font-size: 16px;
+outline: none;
+transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.email-input:focus {
+border-color: #66afe9;
+box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
+}
+
+.submit-button {
+width: 100%;
+padding: 12px 20px;
+background-color: #007bff;
+color: white;
+border: none;
+border-radius: 8px;
+font-size: 16px;
+cursor: pointer;
+transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.submit-button:hover {
+background-color: #0056b3;
+box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.submit-button:active {
+background-color: #004085;
+}
+
+.submit-button:focus {
+outline: none;
+box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
+}
+
+</style>
 <!-- Loader -->
 <div id="loaderDiv" class="loader" >
     <div class="loader2">
@@ -102,14 +166,18 @@ <h2 class="text-center customMargin1">Challenging and fun: It's hard fun!</h2>
             <h2 >EXCITED?</h2>
             <p>The simplest way to get involved is to join our newsletter.</p>
 	    <br>
-	    <form action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs" method="post" class="embeddable-buttondown-form">
-	      <p>Sign up for our mailing list to receive regular
-		news and updates from Sugar Labs.</p>
-	      <label for="email">Email</label>
-	      <input type="email" name="email" placeholder="[email protected]" />
-	      <input type="hidden" value="1" name="embed" />
-	      <input type="submit" value="Subscribe" />
-	    </form>
+<form action="https://buttondown.com/api/emails/embed-subscribe/sugarlabs" method="post" class="embeddable-buttondown-form">
+  <p class="form-description">Sign up for our mailing list to receive regular news and updates from Sugar Labs.</p>
+  <label for="email" class="form-label">Email</label>
+  <div style="display: flex; align-items: flex-start; column-gap: 20px;"">
+    <input type="email" name="email" class="email-input" placeholder="[email protected]" required />
+
+  <input style="max-width: 25%;" type="submit" class="submit-button" value="Subscribe" />
+
+</div>
+</form>
+
+
 	    <br>
 	  </div>
 	</div>