Merge pull request #667 from lovelymahor/main

Add Subscription Form to Footer
Priyaaa1 · Aug 1, 2024 · b2e82b9 · b2e82b9
2 parents 1a77069 + e6437da
commit b2e82b9
Show file tree

Hide file tree

Showing 2 changed files with 154 additions and 120 deletions.
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
@@ -3,6 +3,7 @@
  color: white;
  padding: 2.5rem 2.5rem 1rem 2.5rem;
 }
+
 .footer-container {
  display: flex;
  flex-wrap: wrap;
@@ -15,9 +16,10 @@
  justify-content: center;
  align-items: center;
  gap: 20px;
- width: 40%;
+ width: 25%;
 }
-.star-us{
+
+.star-us {
  display: flex;
  border: 1px solid white;
  background: #c3c3c3;
@@ -28,34 +30,38 @@
  cursor: pointer;
  transition: all 0.3s;
 }
-.star-us:hover{
- scale: 1.1;
+
+.star-us:hover {
+ transform: scale(1.1); /* Change scale on hover */
 }
+
 .footer-1 img {
  height: 4rem;
 }
 
 .footer-half {
- width: 60%;
+ width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
 }
-.footer-text{
+
+.footer-text {
  display: flex;
  justify-content: center;
  align-items: center;
 }
+
 .footer-2 {
  width: 25%;
 }
 
 .footer-title {
  text-transform: uppercase;
- font-size: 2rem;
+ font-size: 28px;
  font-weight: bold;
  text-align: center;
- margin: 0px;
+ margin: 0;
 }
 
 .footer-section-title {
@@ -74,19 +80,19 @@
 .footer-link {
  padding: 0.25rem 0;
  cursor: pointer;
- transition: all 0.5s; 
+ transition: all 0.5s;
 }
 
 .footer-link a {
  text-decoration: none;
  color: white;
- transition: all 0.5s; 
+ transition: all 0.5s;
 }
 
 .footer-link a:hover, 
 .footer-link:hover {
- color: #dc54b1; 
- scale: 1.1; 
+ color: #dc54b1; /* Change color on hover */
+ transform: scale(1.1); /* Scale on hover */
 }
 
 .footer-icons {
@@ -98,23 +104,23 @@
 
 .footer-icons i {
  color: white;
- transition: color 0.3s, font-size 0.3s, transform 0.3s; 
+ transition: color 0.3s, font-size 0.3s, transform 0.3s;
 }
 
 .footer-icons i:hover {
- color: #dc54b1; 
- font-size: 2rem;
- transform: scale(1.2); 
+ color: #dc54b1; /* Change color on hover */
+ font-size: 2rem; /* Increase font size on hover */
+ transform: scale(1.2); /* Scale on hover */
 }
 
 .footer-icons a {
  text-decoration: none;
- transition: transform 0.3s; 
+ transition: transform 0.3s;
 }
 
 .footer-icons a:hover {
- color: #dc54b1; 
- transform: scale(1.2); 
+ color: #dc54b1; /* Change color on hover */
+ transform: scale(1.2); /* Scale on hover */
 }
 
 .footer-icons-md {
@@ -132,12 +138,12 @@
 .footer-bottom-link {
  padding-right: 4%;
  cursor: pointer;
- transition: color 0.3s, transform 0.3s; 
+ transition: color 0.3s, transform 0.3s;
 }
 
 .footer-bottom-link:hover {
- color: #dc54b1; 
- transform: scale(1.05); 
+ color: #dc54b1; /* Change color on hover */
+ transform: scale(1.05); /* Scale on hover */
 }
 
 .footer-sections {
@@ -153,6 +159,39 @@
  text-decoration: none;
 }
 
+/* Newsletter subscription form styles */
+.subscription-form {
+ margin-top: 20px;
+}
+
+.subscription-form h3 {
+ font-size: 1.2rem;
+ margin-bottom: 10px; /* Space below the heading */
+ margin-top: 24px;
+}
+
+.subscription-form input {
+ padding: 10px;
+ border: 1px solid #ced4da;
+ border-radius: 4px;
+ width: 100%;
+}
+
+.subscription-form button {
+ padding: 10px;
+ background-color: navy;
+ border: none;
+ color: white;
+ border-radius: 4px;
+ cursor: pointer;
+ border: 1px solid white;
+}
+
+.subscription-message {
+ color: #28a745; /* Green color for success message */
+ margin-top: 10px; /* Space above the message */
+}
+
 @media (max-width: 768px) {
  .footer-container {
  flex-direction: column;
@@ -194,6 +233,7 @@
  .footer-2 {
  width: 100%;
  }
+
  .footer-icons {
  justify-content: center;
  }
@@ -221,4 +261,4 @@
  justify-content: flex-start;
  margin-right: 0;
  }
-}
+}