Tiny File Manager

Back Back Up Advanced Editor

<!doctype html>
<html lang="en">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<title>FSIBLBD</title>

.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>

<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://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>