Bootstrap portfolio snipp example v04

Bootstrap portfolio snipp example v04

bootstrap portfolio snipp

Whole html/css code



<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet">
<title>Bootstrap portfolio snipp</title>
<style>
.pp a {
    position: relative;
    top: 0;
    transition: top ease 0.3s;
}
.pp a:hover {
    top: -15px;
}
.card {
    border: 0;
}
</style>
</head>
<body>
<div class="container">
  <div class="row py-5">
    <div class="col-md-8 col-lg-8 col-xl-8 col-xxl-8 mx-auto text-center">
      <p class="fw-bold mb-3 small text-muted text-uppercase">Our Projects</p>
      <h2 class="display-5">Check out some of our awesome projects with creative ideas and great design.</h2>
    </div>
  </div>
  <!-- /.row -->
  <div class="row gallery imageGallery1" data-masonry='{"percentPosition": true }'>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-with-tucked-olive-tree-branch_160403-188.jpg"><img src="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-with-tucked-olive-tree-branch_160403-188.jpg" class="img-fluid rounded"></a>
          <h6 class="mt-4 opacity-50 text-danger">STATIONARY</h6>
          <h5 class="mt-3">Ipsum Ultricies Cursus</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/desk-calendar-mockup_47987-2833.jpg"><img src="https://image.freepik.com/free-psd/desk-calendar-mockup_47987-2833.jpg" class="img-fluid rounded"></a>
          <h6 class="opacity-50 text-primary mt-4">NOTEBOOK</h6>
          <h5 class="mt-3">Magna Tristique Inceptos</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-olive-tree-branch_160403-189.jpg"><img src="https://image.freepik.com/free-psd/5x7in-card-mockup-envelope-olive-tree-branch_160403-189.jpg" class="img-fluid rounded"></a>
          <h6 class="opacity-50 text-success mt-4">INVITATION</h6>
          <h5 class="mt-3">Mollis Ipsum Mattis</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/minimal-branding-mockup_160403-193.jpg"><img src="https://image.freepik.com/free-psd/minimal-branding-mockup_160403-193.jpg" class="img-fluid rounded"></a>
          <h6 class="opacity-50 text-success mt-4">INVITATION</h6>
          <h5 class="mt-3">Mollis Ipsum Mattis</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/simple-print-stationary-mockup_160403-195.jpg"><img src="https://image.freepik.com/free-psd/simple-print-stationary-mockup_160403-195.jpg" class="img-fluid rounded"></a>
          <h6 class="opacity-50 text-success mt-4">INVITATION</h6>
          <h5 class="mt-3">Mollis Ipsum Mattis</h5>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4 mb-4">
      <div class="card">
        <div class="card-body pp"> <a href="https://image.freepik.com/free-psd/perspective-stationery-mockup_308775-23.jpg"><img src="https://image.freepik.com/free-psd/perspective-stationery-mockup_308775-23.jpg" class="img-fluid rounded"></a>
          <h6 class="opacity-50 text-success mt-4">INVITATION</h6>
          <h5 class="mt-3">Mollis Ipsum Mattis</h5>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> 
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js" ></script> 
<script>
$('.imageGallery1 a').simpleLightbox();
</script>
</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top