<div class="flex-container-cards">
<div class="card">
<div class="card-img-shadow"><img src="https://variety.com/wp-content/uploads/2022/05/SRV-12030_R.jpg" alt="wanda"></div>
<div class="card-content">
<h2> Scarlet Witch</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore?</p>
<div class="button-shadow">
<div class="card-button">View More </div>
</div>
</div>
</div>
<div class="card">
<div class="card-img-shadow"><img src="https://free4kwallpapers.com/uploads/originals/2017/01/30/agent-natasha-romanoff-wallpaper.jpg" alt="natasha"></div>
<div class="card-content">
<h2>Black Widow</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore?</p>
<div class="button-shadow">
<div class="card-button">View More </div>
</div>
</div>
</div>
<div class="card">
<div class="card-img-shadow"><img src="https://estaticos-cdn.sport.es/clip/76d5c74a-111d-4482-896f-4910500d901b_media-libre-aspect-ratio_default_0.jpg" alt="thor"></div>
<div class="card-content">
<h2> Mighty Thor</h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore? .</p>
<div class="button-shadow">
<div class="card-button">View More </div>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap");
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
font-family: "Jost", sans-serif;
}
body {
padding: 60px 20px;
color: rgb(211, 211, 211);
background: rgb(12,12,12);
}
p{
margin: 10px 0px;
letter-spacing: 2px;
}
.flex-container-cards {
filter: drop-shadow(rgb(255, 100, 0) 0px 0px 1px);
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
align-items: center;
}
.flex-container-cards .card {
background: linear-gradient(240deg, rgba(0,0,0,1) 0%, rgba(36,36,36,1) 100%);
width: 300px;
-webkit-clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
transition: all 0.2s linear;
filter: drop-shadow(rgb(255, 0, 0) 0px 0px 10px);
}
.flex-container-cards .card:hover {
transform: scale(1.1);
}
.flex-container-cards .card .card-img-shadow {
filter: drop-shadow(rgb(255, 0, 0) 0px 0px 10px);
}
.flex-container-cards .card .card-img-shadow img {
width: 100%;
height: 170px;
object-fit: cover;
margin-bottom: 30px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.flex-container-cards .card .card-content {
margin: 0px 30px;
}
.flex-container-cards .card h2 {
color: rgb(255, 128, 0);
text-align: center;
}
.flex-container-cards .card .button-shadow {
filter: drop-shadow(rgb(255, 64, 0) 0px 0px 5px);
transition: all 0.2s ease-in;
}
.flex-container-cards .card .button-shadow:hover {
filter: drop-shadow(rgb(255, 64, 0) 0px 0px 10px);
}
.flex-container-cards .card .button-shadow .card-button {
text-align: center;
margin: 20px 0px;
padding: 10px 0px;
background: linear-gradient(45deg, rgb(255, 30, 0) 0%, rgb(255, 89, 0) 100%);
-webkit-clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
color: black;
font-weight: 600;
transition: all 0.2s ease-in;
}
.flex-container-cards .card .button-shadow .card-button:hover {
color: white;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.