Cards with image in BOOTSTRAP - html

Question

I would like to build some cards with categories, like: Men, Women and Kids.
I would like to these cards look like these: .
I want to let user click on one of them and going to Men or Women page.
Any Ideas how I could do that?
I am using JS, BS, CSS, HTML

Answer 1

Here is the HTML CODE For Custom Card
<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>
Discover NOW
</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>
Discover NOW
</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>
Discover NOW
</div>
</div>
</div>
</div>
Custom Card Design 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;
}
Source Code: https://github.com/HassanNazmul/stack-Overflow/blob/main/Cards%20with%20image%20in%20BOOTSTRAP/index.html