Refactor projects section layout for improved readability and consistency, update navbar styles for better responsiveness, and remove unused image assets.

components/projects.html

@@ -2,21 +2,17 @@
   <div class="container">
     <div class="row">
       <div class="col-lg-8 col-md-8 col-12 ms-auto">
-          <div
+        <div class="section-title-wrap d-flex justify-content-center align-items-center mb-4">
-            class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
+          <img src="images/white-desk-work-study-aesthetics.jpg" class="avatar-image img-fluid" alt="" />
-          >
-            <img
-              src="images/white-desk-work-study-aesthetics.jpg"
-              class="avatar-image img-fluid"
-              alt=""
-            />
-
           <h2 class="text-white ms-4 mb-0">Projects</h2>
         </div>
       </div>
+    </div>
 
     <div class="clearfix"></div>
 
+    <div class="row">
+      <!-- Law Office Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -34,6 +30,7 @@
         </div>
       </div>
 
+      <!-- Easy-pay Login -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -51,6 +48,7 @@
         </div>
       </div>
 
+      <!-- Cloths Ecommerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
@@ -68,116 +66,91 @@
         </div>
       </div>
 
+      <!-- Law Office -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Law Office</h3>
           </div>
-            <a
+          <a href="images/projects/law-office-home.png" class="popup-image">
-              href="images/projects/law-office-home.png"
+            <img src="images/projects/law-office-home.png" class="projects-image img-fluid" alt="law office" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/law-office-home.png"
-                class="projects-image img-fluid"
-                alt="law office"
-              />
           </a>
         </div>
       </div>
 
+      <!-- SVU E-commerce -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">SVU E-commerce</h3>
           </div>
-            <a
+          <a href="images/projects/svu-hw.png" class="popup-image">
-              href="images/projects/svu-hw.png"
+            <img src="images/projects/svu-hw.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/svu-hw.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- NANS's CRM -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">NANS's CRM</h3>
           </div>
-            <a
+          <a href="images/projects/nanas-main-dashboard.png" class="popup-image">
-              href="images/projects/nanas-main-dashboard.png"
+            <img src="images/projects/nanas-main-dashboard.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/nanas-main-dashboard.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- Majsin's Restaurant -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Majsin's Restaurant</h3>
           </div>
-            <a
+          <a href="images/projects/majsin-dashborad.png" class="popup-image">
-              href="images/projects/majsin-dashborad.png"
+            <img src="images/projects/majsin-dashborad.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/majsin-dashborad.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- BPro's ERP System -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">BPro's ERP System</h3>
           </div>
-            <a href="images/projects/bpro-erp.jpg" class="popup-image">
+          <a href="images/projects/bpro-erp.png" class="popup-image">
-              <img
+            <img src="images/projects/bpro-erp.png" class="projects-image img-fluid" alt="" />
-                src="images/projects/bpro-erp.jpg"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
 
+      <!-- Moneyout Bank -->
       <div class="col-lg-4 col-md-6 col-12">
         <div class="projects-thumb">
           <div class="projects-info">
             <small class="projects-tag">Website</small>
             <h3 class="projects-title">Moneyout Bank</h3>
           </div>
-            <a
+          <a href="images/projects/moneyout.png" class="popup-image">
-              href="images/projects/moneyout.png"
+            <img src="images/projects/moneyout.png" class="projects-image img-fluid" alt="" />
-              class="popup-image"
-            >
-              <img
-                src="images/projects/moneyout.png"
-                class="projects-image img-fluid"
-                alt=""
-              />
           </a>
         </div>
       </div>
     </div>
   </div>
-  </section>
+
+  <!-- Lightbox -->
+  <div class="lightbox">
+    <div class="lightbox-content">
+      <img src="" alt="" class="lightbox-image">
+      <span class="lightbox-close">&times;</span>
+    </div>
+  </div>
+</section>

css/templatemo-first-portfolio-style.css

@@ -1268,28 +1268,116 @@ strong {
   }
 
   .navbar {
-    background: var(--white-color);
+    background: rgba(83, 93, 161, 0.95);
     padding: 10px 0;
   }
 
   .navbar .container {
     background: transparent;
+    padding: 0 15px;
   }
 
   .navbar-brand {
-    color: var(--primary-color);
+    color: var(--white-color);
+    font-size: 24px;
   }
 
-  .navbar-nav .nav-link {
+  .navbar-toggler {
-    color: var(--primary-color);
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .navbar-toggler:focus {
+    box-shadow: none;
+  }
+
+  .navbar-toggler-icon {
+    background-image: none;
+    position: relative;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    display: inline-block;
+    vertical-align: middle;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before,
+  .navbar-toggler-icon:after {
+    content: '';
+    position: absolute;
+    width: 30px;
+    height: 2px;
+    background-color: var(--white-color);
+    left: 0;
+    transition: all 0.3s ease;
+  }
+
+  .navbar-toggler-icon:before {
+    top: -8px;
+  }
+
+  .navbar-toggler-icon:after {
+    bottom: -8px;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
+    background-color: transparent;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
+    transform: rotate(45deg);
+    top: 0;
+  }
+
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
+    transform: rotate(-45deg);
+    bottom: 0;
+  }
+
+  .navbar-collapse {
+    background: rgba(83, 93, 161, 0.98);
+    margin: 10px -15px -10px;
+    padding: 20px;
+    border-radius: 0 0 10px 10px;
+  }
+
+  .navbar-nav {
     padding: 10px 0;
   }
 
-  .navbar .custom-btn {
+  .navbar-nav .nav-link {
-    border-color: var(--secondary-color);
+    color: var(--white-color);
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .navbar-nav .nav-link:last-child {
+    border-bottom: none;
+  }
+
+  .navbar-nav .nav-link:hover {
     color: var(--secondary-color);
   }
 
+  .navbar-nav .nav-link::after {
+    display: none;
+  }
+
+  .navbar .custom-btn {
+    border-color: var(--white-color);
+    color: var(--white-color);
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+  }
+
+  .navbar .custom-btn:hover {
+    background: var(--white-color);
+    color: var(--primary-color);
+  }
+
   .hero {
     padding-top: 200px;
     padding-bottom: 400px;
@@ -1347,6 +1435,19 @@ strong {
 }
 
 @media screen and (max-width: 575px) {
+  .navbar-brand {
+    font-size: 20px;
+  }
+
+  .navbar .container {
+    padding: 0 10px;
+  }
+
+  .navbar-collapse {
+    margin: 10px -10px -10px;
+    padding: 15px;
+  }
+
   .navbar .container {
     margin-right: 12px;
     margin-left: 12px;