File "product_old.php"
Full path: /home/fsibplc/public_html/fsib/product_old.php
File
size: 8.23 B (8.23 KB bytes)
MIME-type: text/html
Charset: utf-8
Download Open Edit Advanced Editor Back
<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>FSIBLBD</title>
<style>
/* example - 2 css start*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
.card-product {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 4rem 0;
}
.img-box img {
display: block;
width: 100%;
height: 17rem;
object-fit: cover;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: center;
grid-gap: 1.2rem;
text-align: center;
width: 85%;
margin: auto;
}
.product-card {
display: block;
overflow: hidden;
/* border-radius: 0.6rem; */
cursor: pointer;
transition: 0.2s;
position: relative;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.7);
}
.card-content {
position: absolute;
background-color: rgba(0 0 0/80%);
bottom: 0;
color: #fff;
width: 100%;
height: 20%;
padding: 0.6rem 0;
overflow: hidden;
transition: 0.7s;
}
.card-content h2 {
padding-top:5px;
font-size: 1.4rem;
line-height:1.3rem;
font-weight: 600;
text-transform: capitalize;
}
.card-content p {
font-size: 0.8rem;
font-weight: 400;
line-height: 1.2rem;
padding: 1rem;
}
.card-content button {
padding: 5px 35px;
border-radius:10px;
font-size:0.8rem;
}
.card-content:hover {
height: 100%;
transition: 0.7s;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
/* responsive start */
@media (max-width:1024px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:660px) {
.grid {
grid-template-columns: repeat(1, 1fr);
}
}
/* responsive end */
/* example - 2 css end */
</style>
</head>
<body>
<div class="container card-product">
<div class="cards grid ">
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-1.jpg" alt="pic1">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam aliquam cum </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-2.jpg" alt="pic2">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-1.jpg" alt="pic3">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-1.jpg" alt="pic3">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam .</p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-1.jpg" alt="pic1">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam aliquam cum </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-2.jpg" alt="pic2">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-1.jpg" alt="pic3">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam </p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
<div class="product-card">
<div class="img-box">
<img src="assets/images/img-2.jpg" alt="pic3">
</div>
<div class="card-content">
<h2 class="card-heading">Deposit Scheme</h2>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, magni. Labore
optio id vero nam .</p>
<button class="btn btn-success" name="" type="submit">View</button>
</div>
</div>
</div>
</div>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</body>
</html>