Bootstrap portfolio snipp example v01

Bootstrap portfolio snipp example v01

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="bootstrap.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;
}
</style>
</head>
<body>
<div class="container">
  <div class="row py-5">
    <div class="col-md-8 col-lg-8 col-xl-7 col-xxl-6">
      <h2 class="display-5 mb-3">Recent Projects</h2>
      <p class="lead">We love to turn ideas into beautiful things.</p>
    </div>
  </div>
  <div class="row gx-5">
    <div class="col-md-6 align-self-start">
      <div class="mb-5 pp"> <a href=""><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 class="pp"> <a href=""><img src="https://image.freepik.com/free-psd/landscape-book-album-mockup_165789-343.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 class="col-md-6 align-self-center pp">
      <div class="ms-lg-5"> <a href=""><img src="https://image.freepik.com/free-psd/letterhead-business-card-layout-mockup_160403-191.jpg" class="img-fluid rounded w-100"></a>
        <h6 class="opacity-50 text-success mt-4">INVITATION</h6>
        <h5 class="mt-3">Mollis Ipsum Mattis</h5>
      </div>
    </div>
  </div>
</div>
</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