Pulled Updated Changes

ML-Fusion-Lab · Oct 19, 2024 · 2e55287 · 2e55287
2 parents 9148492 + 8738093
commit 2e55287
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 21 deletions.
diff --git a/image/contact.webp b/image/contact.webp
diff --git a/image/project.jpg b/image/project.jpg
diff --git a/index.html b/index.html
@@ -426,22 +426,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">
+      <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 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-secondary mb-2 rounded bg-dark p-2 px-4" style="width: max-content;" type="submit" id="submit-button">
               Subscribe
             </button>
           </div>

diff --git a/pages/projects.html b/pages/projects.html
@@ -319,6 +319,74 @@
     }
   }
   /* this is only end of footer style */
+  /* bg image */
+  .projects-hero {
+    position: relative;
+    padding: 80px 20px;
+    background-image: url('../image/project.jpg'); 
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Dark overlay to ensure text readability */
+.projects-hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
+}
+
+.hero-content {
+    position: relative; 
+    text-align: center;
+    color: #ffffff;
+    max-width: 800px;
+    z-index: 1; 
+}
+
+.hero-content h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+}
+
+.hero-content p {
+    font-size: 1.2rem;
+    line-height: 1.6;
+    opacity: 0.9;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+    .projects-hero::before {
+        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-content h2 {
+        font-size: 2rem;
+    }
+
+    .hero-content p {
+        font-size: 1.1rem;
+    }
+
+    .projects-hero {
+        min-height: 300px;
+        padding: 60px 20px;
+    }
+}
+/* end */
    </style>
 
 </head>

diff --git a/style/contact.css b/style/contact.css
@@ -69,8 +69,8 @@ body{
     left: 33px;
     background-image: url("../Assets/sun.png");
 } */
-
-.contact-bg{
+/* 
+/*.contact-bg{
     height: 40vh;
     background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url(assets/booking.jpeg);
     background-position: 50% 100%;
@@ -119,7 +119,103 @@ body{
 }
 .contact-bg .text{
     margin: 1.6rem 0;
+} */
+ /* bg image */
+.contact-bg {
+    position: relative;
+    padding: 80px 20px;
+    background-image: url('../image/contact.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+/* Dark overlay for better readability */
+.contact-bg::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
+    z-index: 1;
+}
+
+/* Style for all direct children to appear above overlay */
+.contact-bg > * {
+    position: relative;
+    z-index: 2;
+    color: #ffffff;
+}
+
+.contact-bg h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    font-weight: 500;
+}
+
+.contact-bg h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    font-weight: 600;
+}
+
+/* Line styling */
+.contact-bg .line {
+    display: flex;
+    gap: 8px;
+    margin: 15px 0;
+}
+
+.contact-bg .line div {
+    width: 30px;
+    height: 3px;
+    background: #ffffff;
+    border-radius: 3px;
+}
+
+.contact-bg .text {
+    max-width: 600px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    opacity: 0.9;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+    .contact-bg::before {
+        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .contact-bg {
+        min-height: 300px;
+        padding: 60px 20px;
+    }
+
+    .contact-bg h2 {
+        font-size: 2rem;
+    }
+
+    .contact-bg h3 {
+        font-size: 1.2rem;
+    }
+
+    .contact-bg .text {
+        font-size: 1rem;
+    }
 }
+/* end */
 .contact-body{
     max-width: 1320px;
     margin: 0 auto;

diff --git a/style/style.css b/style/style.css
@@ -205,16 +205,18 @@ body {
 
   /*Newsletter Styles*/
   .newsletter {
-    height: 200px;
-    width: 100%;
-    background-color: whitesmoke;
-    margin-top: 30px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-    align-items: center;
-    box-shadow: 10px 10px 10px solid white;
+    height: auto;
+        width: 100%;
+        background-color: #f5f5f7;
+        color: black;
+        border-radius: 20px;
+        margin: 30px auto;
+        display: flex;
+        flex-direction: column !important;
+        justify-content: center;
+        text-align: center;
+        align-items: center;
+        box-shadow: 0px 0px 10px #afafafad;
   }
   .newsletter-left {
     margin-left: 0px;
@@ -1531,14 +1533,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;