Enhanced Styling of Newsletter section (#662)

* Ehanced Styling of Newsletter section * Changed HTML and CSS
sugarlabs · Jan 31, 2025 · 4e9047c · 4e9047c
1 parent b627576
commit 4e9047c
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 21 deletions.
diff --git a/css/custom.css b/css/custom.css
@@ -428,3 +428,133 @@ ul {
   margin-top: 1rem; 
 }
 
+/* Styles for Newsletter Section */
+
+#cta-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #3b3b4f; /* Matching the dark theme */
+  padding: 50px 20px;
+  color: white;
+  text-align: center;
+}
+
+#cta-section .cta-heading {
+  font-size: 3rem;
+  font-weight: 700;
+  margin-bottom: 15px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  text-align: center;
+}
+
+#cta-section .cta-description {
+  font-size: 1.2rem;
+  margin-bottom: 0px;
+  line-height: 1.6;
+  text-align: center;
+}
+
+/* Ensuring proper layout for label and input */
+.cta-d-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.cta-d-flex label {
+  text-align: center;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 0;
+  color: rgb(171, 169, 169);
+  font-weight: bold;
+}
+
+.cta-form-control {
+  border-radius: 30px;
+  padding: 12px 20px;
+  margin: 0px;
+  border: 2px solid #ccc;
+  font-size: 1rem;
+  transition: all 0.3s ease-in-out;
+  width: 100%;
+  max-width: 350px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.cta-form-control:focus {
+  border-color: #ffcc00;
+  box-shadow: 0 0 10px rgba(255, 204, 0, 0.7);
+  outline: none;
+}
+
+.cta-btn-primary {
+  background: linear-gradient(90deg, #ffcc00, #ffdb4d);
+  border: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  border-radius: 30px;
+  padding: 12px 25px;
+  font-size: 1.1rem;
+  color: #3b3b4f;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  text-transform: uppercase;
+  box-shadow: 0 2px 10px rgba(255, 204, 0, 0.3);
+}
+
+.cta-btn-primary:hover {
+  background: linear-gradient(90deg, #ffdb4d, #ffcc00);
+  box-shadow: 0 5px 20px rgba(255, 204, 0, 0.5);
+  transform: translateY(-2px);
+}
+
+.cta-btn-primary:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 5px rgba(255, 204, 0, 0.4);
+}
+
+/* Responsive design for Newsletter Section */
+@media (max-width: 768px) {
+  .cta-buttondown-form input[type="email"],
+  .cta-buttondown-form input[type="submit"] {
+    width: auto;
+  }
+
+  /* Adjust form layout for smaller screens */
+  .cta-buttondown-form {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .cta-form-control {
+    max-width: 90%;
+  }
+
+  .cta-btn-primary {
+    width: auto;
+    max-width: 90%;
+  }
+}
+
+/* Additional enhancements */
+#cta-section .cta-heading {
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Added text shadow for better contrast and visibility */
+}
+
+.cta-buttondown-form input[type="email"]::placeholder {
+  color: #aaa; /* Lightens placeholder text */
+  font-style: italic; /* Makes the placeholder text italic for better visibility */
+  font-size: 0.9rem; /* Adjusted font size for better readability */
+}
+
+.cta-buttondown-form input[type="submit"]:active {
+  transform: translateY(1px); /* Makes the button appear pressed when clicked */
+  box-shadow: 0 2px 5px rgba(255, 204, 0, 0.4); /* Adds a subtle shadow effect when the button is active */
+}
diff --git a/index.html b/index.html
@@ -93,33 +93,33 @@ <h2 class="text-center customMargin1">Challenging and fun: It's hard fun!</h2>
 </section>
 
 <!-- Newsletter CTA section -->
-<section id="call-to-action">
-  <div class="container">
-    <div class="row">
-      <div class="col-md-12" >
-        <div class="row justify-content-center">
-          <div class="col-md-6 col-md-push-3" >
-            <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>
-	      <div class="d-flex align-items-center justify-content-center w-100">
-          <label for="email" class="text-center my-3">Email</label>
-          <input type="email" name="email" placeholder="[email protected]" class="form-control w-100 col-md-8 m-2" />
-          <input type="hidden" value="1" name="embed" />
+<section id="cta-section">
+  <div class="cta-container">
+    <div class="cta-row">
+      <div class="cta-col">
+        <div class="cta-inner-row justify-content-center">
+          <div class="cta-form-col">
+            <h2 class="cta-heading">EXCITED?</h2>
+            <p class="cta-description">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="cta-buttondown-form">
+              <p class="cta-signup-description">Sign up for our mailing list to receive regular news and updates from Sugar Labs.</p>
+              <div class="cta-d-flex align-items-center justify-content-center w-100">
+                <label for="email" class="cta-label">Enter Your Email Address</label>
+                <input type="email" name="email" placeholder="[email protected]" class="cta-form-control w-100 col-md-8 m-2" />
+                <input type="hidden" value="1" name="embed" />
+              </div>
+              <input type="submit" value="Subscribe" class="cta-btn-primary" />
+            </form>
+            <br>
+          </div>
         </div>
-        <input type="submit" value="Subscribe" class="btn btn-primary" />
-      </form>
-	    <br>
-	  </div>
-	</div>
       </div>
     </div>
   </div>
 </section>
 
+
 <!-- By the numbers -->
 <section id="testimonial" class="customPadding5">
   <div class="container">