redesign newsletter

index.html

@@ -425,22 +425,22 @@ <h3>Community Support</h3>
       </div>
     </section>
 <!-- Newsletters Section  -->
-    <div class="container newsletter bg-light p-5 rounded">
-      <div class="row align-items-center justify-content-between">
-        <div class="col-lg-6">
+    <div class="container newsletter d-flex flex-column p-5 rounded">
+      <div class="align-items-center justify-content-between w-100">
+        <div class="mx-auto col-lg-6">
           <h1 class="h4">Sign Up for Newsletters</h1>
           <p>Get updates in your email about the latest deals and products</p>
         </div>
-        <div class="col-lg-6">
-          <div class="input-group">
+        <div class="mx-auto col-lg-6 d-flex flex-wrap items-center">
+          <div class="input-group ">
             <input
               type="email"
               id="email"
-              class="form-control"
+              class="form-control me-md-3 rounded-pill border border-dark px-4 py-2"
               placeholder="Enter your email"
               required
             />
-            <button class="btn btn-primary mb-2" type="submit" id="submit-button">
+            <button class="btn btn-primary mb-2 rounded-pill bg-dark p-2 px-4" style="width: max-content;" type="submit" id="submit-button">
               Subscribe
             </button>
           </div>

style/style.css

@@ -205,16 +205,17 @@ body {
 
   /*Newsletter Styles*/
   .newsletter {
-    height: 200px;
+    height: auto;
     width: 100%;
-    background-color: whitesmoke;
+    background-color: #489bff;
+    color: white;
     margin-top: 30px;
     display: flex;
-    flex-direction: column;
+    flex-direction: column !important;
     justify-content: center;
     text-align: center;
     align-items: center;
-    box-shadow: 10px 10px 10px solid white;
+    box-shadow: 0px 0px 10px #afafaf;
   }
   .newsletter-left {
     margin-left: 0px;
@@ -1516,14 +1517,14 @@ body {
       height: 300px;
       padding: 40px;
       width: 100%;
-      background-color: whitesmoke;
+      background-color: #489bff;
 
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
 
-      box-shadow: 10px 10px 10px solid white;
+      box-shadow: 0 0 10px white;
     }
     .newsletter-left {
       margin-left: 0;