portfolio/components/projects.html

<section class="projects section-padding" id="section_4">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-8 col-12 ms-auto">
          <div
            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=""
            />

            <h2 class="text-white ms-4 mb-0">Projects</h2>
          </div>
        </div>

        <div class="clearfix"></div>

        <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 Login</h3>
              <p class="projects-description">A secure login system for law office management with role-based access control and advanced security features.</p>
              <div class="projects-links">
                <a href="#" class="projects-link">View Demo</a>
                <a href="#" class="projects-link">Source Code</a>
              </div>
            </div>
            <a href="images/projects/law-office-login.png" class="popup-image">
              <img src="images/projects/law-office-login.png" class="projects-image img-fluid" alt="Law Office Login System" />
            </a>
          </div>
        </div>

        <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">Easy-pay Login</h3>
              <p class="projects-description">A modern payment system login interface with secure authentication and user-friendly design.</p>
              <div class="projects-links">
                <a href="#" class="projects-link">View Demo</a>
                <a href="#" class="projects-link">Source Code</a>
              </div>
            </div>
            <a href="images/projects/easy-pay-login.png" class="popup-image">
              <img src="images/projects/easy-pay-login.png" class="projects-image img-fluid" alt="Easy Pay Login System" />
            </a>
          </div>
        </div>

        <div class="col-lg-4 col-md-6 col-12">
          <div class="projects-thumb">
            <div class="projects-info">
              <small class="projects-tag">E-commerce</small>
              <h3 class="projects-title">Cloths Ecommerce</h3>
              <p class="projects-description">A full-featured e-commerce platform for clothing with advanced filtering and shopping cart functionality.</p>
              <div class="projects-links">
                <a href="#" class="projects-link">View Demo</a>
                <a href="#" class="projects-link">Source Code</a>
              </div>
            </div>
            <a href="images/projects/cloths-e-commerce.png" class="popup-image">
              <img src="images/projects/cloths-e-commerce.png" class="projects-image img-fluid" alt="Clothing E-commerce Platform" />
            </a>
          </div>
        </div>

        <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
              href="images/projects/law-office-home.png"
              class="popup-image"
            >
              <img
                src="images/projects/law-office-home.png"
                class="projects-image img-fluid"
                alt="law office"
              />
            </a>
          </div>
        </div>

        <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
              href="images/projects/svu-hw.png"
              class="popup-image"
            >
              <img
                src="images/projects/svu-hw.png"
                class="projects-image img-fluid"
                alt=""
              />
            </a>
          </div>
        </div>

        <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
              href="images/projects/nanas-main-dashboard.png"
              class="popup-image"
            >
              <img
                src="images/projects/nanas-main-dashboard.png"
                class="projects-image img-fluid"
                alt=""
              />
            </a>
          </div>
        </div>
        
        <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
              href="images/projects/majsin-dashborad.png"
              class="popup-image"
            >
              <img
                src="images/projects/majsin-dashborad.png"
                class="projects-image img-fluid"
                alt=""
              />
            </a>
          </div>
        </div>

        <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">
              <img
                src="images/projects/bpro-erp.jpg"
                class="projects-image img-fluid"
                alt=""
              />
            </a>
          </div>
        </div>

        <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
              href="images/projects/moneyout.png"
              class="popup-image"
            >
              <img
                src="images/projects/moneyout.png"
                class="projects-image img-fluid"
                alt=""
              />
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>