Change in css code

GarimaSingh0109 · Oct 16, 2024 · 0b2946f · 0b2946f
1 parent 3ed77a8
commit 0b2946f
Showing 1 changed file with 75 additions and 52 deletions.
diff --git a/styles.css b/styles.css
@@ -230,6 +230,11 @@ nav ul li a:hover {
   transform: rotateY(180deg);
   padding: 10px;
   color: #444;
+  display: flex; /* Add this */
+  flex-direction: column; /* Add this */
+  align-items: center; /* Center horizontally */
+  justify-content: center; /* Center vertically */
+  text-align: center; /* Center text */
 }
 
 .card-back h3 {
@@ -507,114 +512,132 @@ nav ul li a:hover {
 }
 /* feature section */
 
+/* General styling for the section */
 .features {
-  padding: 50px 20px;
-  background-color: #f4f4f9;
+  padding: 60px 20px;
+  background-color: #f9f9f9;
   text-align: center;
 }
 
 .features h2 {
-  font-size: 2.5rem;
+  font-size: 36px;
   margin-bottom: 40px;
   color: #333;
-  font-family: 'Arial', sans-serif;
 }
 
+/* Container for feature cards */
 .features-container {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 30px;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px; /* Adds space between each card */
 }
-
-/* Common styling for all feature cards */
+.feature-card{
+  background-color: #28a745;
+}
+/* Styling for each feature card */
 .feature-card, .feature-card1 {
-  background-color: #fff;
+  background-color: #f4f4f4; /* Background color for the cards */
   padding: 20px;
-  border: 2px solid #28a745;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  max-width: 350px;
+  border-radius: 8px;
+  width: 80%; /* Make the cards take up 80% of the container width */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Adding shadow for card effect */
   text-align: center;
-  transition: transform 0.3s ease;
 }
-
 .feature-card:hover, .feature-card1:hover {
-  transform: translateY(-10px);
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
 
+/* Styling for icons inside feature cards */
 .feature-card .icon, .feature-card1 .icon {
-  font-size: 3rem;
+  font-size: 50px;
+  color: #4CAF50;
   margin-bottom: 20px;
-  color: #43a047;
+  text-align: center;
 }
 
-.feature-card h3, .feature-card1 h3 {
-  font-size: 1.8rem;
-  margin-bottom: 15px;
-  color: #2e7d32;
+.feature-card .icon i, .feature-card1 .icon i {
+  font-size: inherit;
 }
 
+/* Heading for each card */
+.feature-card h2, .feature-card1 h3 {
+  font-size: 24px;
+  color: #45a049;
+  margin-bottom: 10px;
+}
+
+/* Paragraph styling */
 .feature-card p, .feature-card1 p {
-  font-size: 1.1rem;
-  color: #555;
+  font-size: 16px;
+  color: black;
   line-height: 1.6;
-  margin-bottom: 20px;
 }
 
-/* Specific styling for the blockquote in eco-friendly card */
+/* Blockquote styling */
 .feature-card blockquote {
-  font-size: 1.25rem;
-  font-style: italic;
-  color: #333;
-  background-color: #c8e6c9;
-  padding: 1rem;
-  margin-bottom: 1.5rem;
-  border-radius: 5px;
+  font-size: 16px;
+  color: #555;
+  background-color: #f0f8e8;
+  padding: 10px;
+  border-left: 4px solid #007bff;
+  margin-bottom: 15px;
 }
 
 #fact-highlight {
   font-weight: bold;
-  color: #e53935;
+  color: red;
 }
 
-/* Button styling */
+/* Call-to-action button */
 .cta-button {
   display: inline-block;
   padding: 10px 20px;
-  font-size: 1.1rem;
-  background-color: #007bff;
-  color: white;
+  background-color: #0056b3;
+  color: #fff;
   text-decoration: none;
   border-radius: 5px;
-  transition: background-color 0.3s ease;
+  margin-top: 15px;
 }
 
 .cta-button:hover {
-  background-color: #388e3c;
+  background-color: #45a049;
 }
 
-/* Responsive layout */
+/* Responsive Design */
 @media (max-width: 768px) {
   .features-container {
-    flex-direction: column;
+      flex-direction: column;
+      align-items: center;
   }
 
   .feature-card, .feature-card1 {
-    max-width: 100%;
+      width: 100%;
+      max-width: 100%; /* Full-width for smaller screens */
   }
-}
 
+  .features h2 {
+      font-size: 28px;
+  }
 
-#eco-fact {
-  background-color: #f9f9f9;
-  border-left: 5px solid #007bff;
-  padding: 15px;
-  font-size: 1rem;
-  color: #555;
-  margin-bottom: 20px;
-  font-style: italic;
+  .feature-card h2, .feature-card1 h3 {
+      font-size: 20px;
+  }
+
+  .cta-button {
+      font-size: 14px;
+      padding: 8px 16px;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .feature-card, .feature-card1 {
+      max-width: 45%; /* Slightly narrower for medium screens */
+  }
 }
 
+
 body.dark-mode {
   background-color: #1f1f1f;
   color: #ffffff; /* Default text color */