responsiveness of homepage

ML-Fusion-Lab · Oct 24, 2024 · 5e5df02 · 5e5df02
1 parent 18571c7
commit 5e5df02
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 260 deletions.
diff --git a/index.html b/index.html
@@ -54,66 +54,6 @@
           color: #333;
         }
 
-        footer {
-          background-color: #333;
-          color: white;
-          text-align: center;
-          padding: 20px 0;
-          margin-top: auto;
-        }
-
-        .footer-container {
-          max-width: 800px;
-          margin: auto;
-          padding: 0 20px;
-          color: #333;
-
-        }
-
-        /* .footer-links,
-        .footer-socials,
-        .footer-contact {
-          margin: 10px 0;
-        }
-
-        .footer-links a,
-        .footer-socials a {
-          color: white;
-          text-decoration: none;
-          margin: 0 10px;
-          transition: all .38s ease-in-out;
-        } */
-
-        /* .footer-links a:hover,
-        .footer-socials a:hover {
-          color: #007bff;
-        } */
-
-        /* Facebook hover color with gradient */
-        /* . a.facebook:hover {
-          background: linear-gradient(to right, white, #3b5998);
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
-        } */
-
-        /* Twitter hover color */
-        /* .footer-socials a.twitter:hover {
-          color: black; /* Twitter black 
-        } */
-
-        /* LinkedIn hover color */
-        /* .footer-socials a.linkedin:hover {
-          color: #0077b5; /* LinkedIn light blue 
-        } */
-
-        .footer-socials a {
-          font-size: 24px;
-          margin: 0 15px;
-        }
-
-        .footer-contact a {
-          color: white;
-        }
 
         .newsletter .input-group .input {
           color: black;
@@ -499,6 +439,7 @@ <h1 class="h4">Sign Up for Newsletters</h1>
     <style>
       .input-group {
         display: flex;
+        flex-wrap: wrap;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;

diff --git a/style/style.css b/style/style.css
@@ -76,54 +76,24 @@ body {
   height: 120px;
 }
 
-/* footer {
-  background: #333;
-  color: white;
-  text-align: center;
-  padding: 20px 0;
-  margin-top: auto;
-}
-
-.footer-container {
-  max-width: 800px;
-  margin: auto;
-  padding: 0 20px;
-} */
-
-/* .footer-links,
-.footer-socials {
-  margin: 10px 0;
-}
-
-.footer-links a,
-.footer-socials a {
-  color: white;
-  text-decoration: none;
-  margin: 0 10px;
-  transition: all .38s ease-in-out;
-}
-
-.footer-links a:hover,
-  .footer-socials a:hover {
-          color: white;
-          transform: scale(1.2);
-          padding: 2px 5px;
-          border-radius: 4px;} */
-
-/* .footer-contact {
-  margin: 10px 0;
-} */
 
 /* new footer properties */
 .footer {
   padding: 5rem 1rem;
   position: relative;
   display: grid;
-  grid-template-columns: 400px repeat(3, 1fr);
+  grid-template-columns: minmax(200px, 400px) repeat(auto-fit, minmax(200px, 1fr));
   gap: 2rem;
   background-color:#191919;
 }
 
+@media (max-width: 400px) {
+  .footer {
+    grid-template-columns: 1fr;
+    text-align: center; 
+  }
+}
+
 .footer-col img {
   width: 4rem;
   height: 4rem;
@@ -220,11 +190,7 @@ body {
   background-color: black;
 }
 
-@media (max-width: 900px) {
-  .footer {
-      grid-template-columns: 1fr 200px;
-  }
-}
+
 /* this is only end of footer style */
 
 body {
@@ -605,26 +571,6 @@ body {
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
 }
 
-/* Footer Styles */
-footer {
-  background-color: #1a1a1a;
-  color: white;
-  padding: 40px 0;
-  text-align: center;
-}
-
-footer p {
-  margin: 10px 0;
-}
-
-footer p a {
-  color: #00c6ff;
-  text-decoration: none;
-}
-
-footer p a:hover {
-  text-decoration: underline;
-}
 
 /* Features Section */
 
@@ -1271,44 +1217,7 @@ body.dark-mode .newsletter-right {
   color: white;
 }
 
-/* Here are the styles for the theme toggel  */
-/* .theme-switch {
-  display: inline-block;
-  width: 60px;
-  height: 30px;
-  border-radius: 30px;
-  background: linear-gradient(82deg, #ffffff, #00796b);
-  position: relative;
-  cursor: pointer;
-  transition: background 0.3s ease-in-out;
-  vertical-align: middle;
-  right: -10px;
-}
 
-.theme-switch::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 24px;
-  height: 24px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-  transition: left 0.3s ease-in-out, background-image 0.3s ease-in-out;
-  background-image: url("../Assets/moon.png");
-}
-
-.theme-switch.dark-theme {
-  background: linear-gradient(82deg, #ffffff, #1f1f1f);
-}
-
-.theme-switch.dark-theme::before {
-  left: 33px;
-  background-image: url("../Assets/sun.png");
-} */
-
-/* theme toggle switch */
 
 .checkbox {
   opacity: 0;
@@ -1498,23 +1407,6 @@ footer {
   padding: 0 20px;
 }
 
-/* .footer-links,
-.footer-socials {
-  margin: 10px 0;
-}
-
-.footer-links a,
-.footer-socials a {
-  color: white;
-  text-decoration: none;
-  margin: 0 10px;
-  transition: color 0.3s;
-}
-
-.footer-links a:hover,
-.footer-socials a:hover {
-  color: #007bff;
-} */
 
 .footer-contact {
   margin: 10px 0;
@@ -1792,6 +1684,7 @@ header nav ul li a {
   transition: color 0.3s ease;
 }
 
+
 /* Responsive styles */
 @media (max-width: 900px) {
   header {
@@ -2140,89 +2033,6 @@ h2 {
   }
 }
 
-/* .features {
-    padding: 80px 20px;
-    background-color: #f9f9f9;
-    text-align: center;
-  }
-
-  .features h2 {
-    font-size: 36px;
-    margin-bottom: 50px;
-    font-weight: 700;
-  }
-
-  .feature-grid {
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-  }
-
-  .feature-item {
-    background-color: #fff;
-    padding: 30px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    border-radius: 15px;
-    width: 30%;
-    text-align: center;
-    transition: transform 0.3s ease;
-  }
-
-  .feature-item:hover {
-    transform: translateY(-10px);
-  }
-
-  .feature-item h3 {
-    font-size: 26px;
-    color: #0077cc;
-    margin-bottom: 20px;
-  }
-
-  .feature-item p {
-    font-size: 18px;
-    color: #555;
-  } */
-
-/*   
-  footer {
-    background-color: #ffffff;
-    color: rgb(8, 7, 7);
-    padding: 40px 0;
-    text-align: center;
-  }
-
-  footer p {
-    margin: 10px 0;
-  }
-
-  footer p a {
-    color: #00c6ff;
-    text-decoration: none;
-  }
-
-  footer p a:hover {
-    text-decoration: underline;
-  }
-  footer {
-    background-color: #1a1a1a;
-    color: white;
-    padding: 40px 0;
-    text-align: center;
-  }
-
-  footer p {
-    margin: 10px 0;
-  }
-
-  footer p a {
-    color: #00c6ff;
-    text-decoration: none;
-  }
-
-  footer p a:hover {
-    text-decoration: underline;
-  } */
-
 /* Course Page Specific Styles */
 .hero-small {
   background-image: url("https://source.unsplash.com/1600x900/?education,learning");