How to make Responsive card in HTML, CSS With Flex
How to make Responsive card in HTML, CSS With Flex
Hello friends, Today we know how to make an responsive card in html with the help of Css flex propery .
show Below the code to create responsive html card in css with flex box propery.
CODE : -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flex card</title>
<link rel="stylesheet" href="style.css">
<!-- https://somuwebd.blogspot.com -->
</head>
<body>
<section class="cards">
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/152/3888/2592.jpg?hmac=M1xv1MzO9xjf5-tz1hGR9bQpNt973ANkqfEVDW0-WYU"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/416/1280/853.jpg?hmac=B9Bc5K0QP3GbA6b2Dsfmjm_YpNCOlB_5zm6ZCXUnoHw"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/1063/4867/3215.jpg?hmac=-ksdmOruOUma2z6ENQo9Yqp9T7lsnokLo8SFfAt-UNU"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/227/1024/683.jpg?hmac=63Bm3-6abEba_BO4lpAKdrnmSL04wZpwK17xue1mCXw"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/412/7360/4912.jpg?hmac=dubFBADU6F0oiMSaPGLhcOk7wMV86JpXAgLY1ZkK8fw"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
sed dignissimos nobis corporis laudantium vero doloribus
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
<div class="card">
<div class="card_image">
<img src="https://i.picsum.photos/id/411/5183/2444.jpg?hmac=84Rb7FV31ExwFZ5l0fIaubSUVG9Ivrs51Tr6edx1BY8"
alt="">
</div>
<div class="card_content">
<div class="card_title">
Responsive Flex Card In CSS!
</div>
<div class="card_text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aliquid molestias accusantium
</div>
<a href="#" class="card_readmore">Read More</a>
</div>
</div>
</section>
</body>
</html>
Add The CSS :-
/* https://somuwebd.blogspot.com */
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 15px;
display: flex;
justify-content: center;
background-color: #30303040;
line-height: 1.4;
font-family: 'Raleway';
}
.cards {
display: flex;
justify-content: center;
gap: 2rem;
padding: 2rem;
flex-wrap: wrap;
}
.cards>* {
flex-grow: 1;
flex-basis: calc((600px - 100%)*999);
min-width: 280px;
max-width: 330px;
}
.card {
display: flex;
flex-direction: column;
color: #000;
background-color: #fff;
font-size: 1rem;
border-radius: 0.45rem;
overflow: hidden;
box-shadow: 2px 2px 15px rgba(40, 40, 50, 0.4);
}
@media(max-width: 715px) {
.card {
max-width: 460px;
flex-direction: row;
}
}
.card_image {
position: relative;
width: 100%;
display: flex;
flex: 0 0 160px;
}
.card_image img {
position: relative;
width: 100%;
min-height: 220px;
}
.card_content {
padding: 1rem;
display: flex;
align-items: center;
flex-direction: column;
}
.card_title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.card_text {
font-size: 1.1rem;
margin-bottom: 1em;
}
.card_readmore {
position: relative;
margin-bottom: 0.5em;
text-decoration: none;
padding: 0.45em 1.05em;
display: inline-flex;
color: #fff;
background: linear-gradient(-34deg, #8989ff, 50%, plum);
box-shadow: 0 0.5em 1.2rem #0004;
border-radius: 0.5em;
}
thank for the comming on my blog. keep support......
Post a Comment