portfolio.html

<section class="page-section portfolio" id="portfolio">
  <div class="container">
    <div class="text-center">
      <h2 class="page-section-heading text-secondary mb-0 d-inline-block">PORTFOLIO</h2>
    </div>
    <div class="divider-custom">
      <div class="divider-custom-line"></div>
      <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
      <div class="divider-custom-line"></div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal0">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/featured/lincoln-corner.jpeg" alt="Lincoln corner pakistan" />
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal1">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/featured/embedded-lab.jpg" alt="Tasty Cake" />
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal2">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/portfolio/circus.png" alt="Circus Tent" />
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal3">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/portfolio/game.png" alt="Controller" />
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal4">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/portfolio/safe.png" alt="Locked Safe" />
        </div>
      </div>
      <div class="col-md-6 col-lg-4 mb-5">
        <div class="portfolio-item mx-auto" data-toggle="modal" data-target="#portfolioModal5">
          <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
              <i class="fas fa-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" src="assets/img/portfolio/submarine.png" alt="Submarine" />
        </div>
      </div>
    </div>
  </div>
</section>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal0"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal0Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Lincoln Corner</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img
                class="img-fluid rounded mb-5"
                src="assets/img/featured/lincoln-corner.jpeg"
                alt="Lincoln corner pakistan"
              />
              <p class="mb-5">
                Lincoln Corner Lahore is a partnership between the information Technology University and the U.S.
                Consulate General Lahore. This Corner will provide access to the latest, in-depth information about the
                United States, and will connect Americans and Pakistanis in engaging discussions on U.S. policy, society
                and values. Lincoln Corner Lahore will be more than a library. This will be a comfortable and safe venue
                for civil discourse, conversations between individuals with diverse views and perspectives – a practice
                at the heart of any strong democracy. This space will be a place for the community to come together to
                increase mutual understanding between Pakistanis and Americans, between scientists and artists, between
                old and young, between innovators and traditionalists. This Corner will be a location for civil society
                organizations to develop their proposed improvements for society and share their ideas with the public.
                This space will be a classroom for lectures and workshops to cultivate new ideas and develop new skills
                in a cooperative group atmosphere. This place will be a gallery for exhibiting art and music from
                American and Pakistani artists and musicians, generating conversations about common themes of humanity.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal1"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal1Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Tasty Cake</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img class="img-fluid rounded mb-5" src="assets/img/portfolio/cake.png" alt="Tasty Cake" />
              <p class="mb-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.Mollitia neque assumenda ipsam nihil, molestias
                magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod
                consequuntur itaque. Nam.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal2"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal2Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Circus Tent</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img class="img-fluid rounded mb-5" src="assets/img/portfolio/circus.png" alt="Circus Tent" />
              <p class="mb-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.Mollitia neque assumenda ipsam nihil, molestias
                magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod
                consequuntur itaque. Nam.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal3"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal3Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Controller</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img class="img-fluid rounded mb-5" src="assets/img/portfolio/game.png" alt="Controller" />
              <p class="mb-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.Mollitia neque assumenda ipsam nihil, molestias
                magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod
                consequuntur itaque. Nam.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal4"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal4Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Locked Safe</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img class="img-fluid rounded mb-5" src="assets/img/portfolio/safe.png" alt="Locked Safe" />
              <p class="mb-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.Mollitia neque assumenda ipsam nihil, molestias
                magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod
                consequuntur itaque. Nam.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div
  class="portfolio-modal modal fade"
  id="portfolioModal5"
  tabindex="-1"
  role="dialog"
  aria-labelledby="#portfolioModal5Label"
  aria-hidden="true"
>
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fas fa-times"></i></span>
      </button>
      <div class="modal-body text-center">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-8">
              <h2 class="portfolio-modal-title text-secondary mb-0">Submarine</h2>
              <div class="divider-custom">
                <div class="divider-custom-line"></div>
                <div class="divider-custom-icon"><i class="fas fa-star"></i></div>
                <div class="divider-custom-line"></div>
              </div>
              <img class="img-fluid rounded mb-5" src="assets/img/portfolio/submarine.png" alt="Submarine" />
              <p class="mb-5">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit.Mollitia neque assumenda ipsam nihil, molestias
                magnam, recusandae quos quis inventore quisquam velit asperiores, vitae? Reprehenderit soluta, eos quod
                consequuntur itaque. Nam.
              </p>
              <button class="btn btn-primary" href="#" data-dismiss="modal">
                <i class="fas fa-times fa-fw"></i>Close Window
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>