图片在 BOOTSTRAP 中的卡片

Question

我想制作一些带有类别的卡片，例如：男士、女士和儿童。我希望这些卡片看起来像这样：.

我想让用户点击其中之一并转到“男性”或“女性”页面。有什么想法吗？

我正在使用 JS，BS，CSS，HTML

Answer 1

这是自定义卡的 HTML 代码

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12">
            <div class="custom-card content-left">
                <h3>TOP TRENDING</h3>
                <h1>SPRING TRENDS</h1>
                <h2>Collections</h2>
                <a href="#">Discover NOW</a>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">
            <div class="custom-card content-center">
                <h3>TOP WANTED TODAY</h3>
                <h1>SPRING TRENDS</h1>
                <h2>Jumpsuit</h2>
                <a href="#">Discover NOW</a>
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-12">
            <div class="custom-card content-right">
                <h3>SOMETHING NEVER GET OLD</h3>
                <h1>For Men</h1>
                <h2>Collections</h2>
                <a href="#">Discover NOW</a>
            </div>
        </div>
    </div>
</div>

自定义卡片设计CSS

    /* USE BACKGROUND IMAGE INSTADE OF BACKGROUND COLOR */
    .content-left {
        background-color: tan;
        background-size: cover;
        background-position: 50% 100%;
        height: 100%;
        width: 100%;
        padding: 30px 20px;
    }

    .content-center {
        background-color: orange;
        background-size: cover;
        background-position: 50% 100%;
        height: 100%;
        width: 100%;
        padding: 30px 20px;

    }

    .content-right {
        background-color: powderblue;
        background-size: cover;
        background-position: 50% 100%;
        height: 100%;
        width: 100%;
        padding: 30px 20px;

    }

    /* CARD TEXT STYLE */
    .custom-card h1 {
        font-family: 'Roboto', sans-serif;
        font-weight: 900;
        font-size: 28px;
        text-align: left;
        padding: 10px 0;
    }

    .custom-card h2 {
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        font-size: 24px;
        text-align: left;
        padding: 5px 0;
    }

    .custom-card h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 18px;
        text-align: left;

    }

    .custom-card a {
        font-family: 'Roboto', sans-serif;
        color: black;
        font-weight: 500;
        font-size: 16px;
        text-align: left;
        padding: 5px 0;
        text-decoration: none;
        padding-bottom: 5px;
        border-bottom-style: solid;
        border-bottom-width: 4px;
        border-color: red;

    }

源代码：https://github.com/HassanNazmul/stack-Overflow/blob/main/Cards%20with%20image%20in%20BOOTSTRAP/index.html

图片在 BOOTSTRAP 中的卡片

Cards with image in BOOTSTRAP

html

css

e-commerce

bootstrap-4