make this responsive and only 5 cards in a row. I tried this but not working what should I add? all I want it to change number of item in a row according to size and hold max 5 element in a row..............................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tours</title>
<link rel="stylesheet" href="3destination_style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div >
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Barrackpore
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Hooghly
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
South 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Kolkata
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
display: grid;
place-items: center;
background: #1d222b;
text-align: center;
}
.container{
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.card{
height: 280px;
max-width: 350px;
margin: 0 20px;
background: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.card:hover{
height: 470px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.card .img{
height: 200px;
width: 100%;
}
.card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.card .top-text{
padding: 5px;
}
.card .top-text .name{
font-size: 25px;
font-weight: 600;
color: #202020;
}
.card .top-text p{
font-size: 20px;
font-weight: 600;
color: #007bff;
line-height: 20px;
}
.card .bottom-text{
padding: 0 20px 10px 20px;
margin-top: 5px;
background: white;
opacity: 0;
visibility: hidden;
transition: 0.1s;
}
.card:hover .bottom-text{
opacity: 1;
visibility: visible;
}
.card .bottom-text .text{
text-align: justify;
}
.card .bottom-text .btn{
margin: 10px 0;
text-align: left;
}
.card .bottom-text .btn a{
text-decoration: none;
background: #000;
color: #f2f2f2;
padding: 5px 8px;
border-radius: 3px;
display: inline-flex;
transition: 0.2s;
}
.card .bottom-text .btn a:hover{
transform: scale(0.9);
}
@media screen and (max-width: 978px) {
.container{
flex-wrap: wrap;
flex-direction: column;
}
.card{
max-width: 700px;
margin: 20px 0;
}
}
CodePudding user response：
i added this to your css
.container {
flex-wrap: wrap;
gap: 1rem;
}
now there is 4 rows (pretty close to what you want)
and is also responsive!
final result
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,
body {
height: 100%;
display: grid;
place-items: center;
background: #1d222b;
text-align: center;
}
.container {
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2em;
}
.card {
height: 280px;
max-width: 350px;
margin: 0 20px;
background: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.card:hover {
height: 470px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.card .img {
height: 200px;
width: 100%;
}
.card .img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.card .top-text {
padding: 5px;
}
.card .top-text .name {
font-size: 25px;
font-weight: 600;
color: #202020;
}
.card .top-text p {
font-size: 20px;
font-weight: 600;
color: #007bff;
line-height: 20px;
}
.card .bottom-text {
padding: 0 20px 10px 20px;
margin-top: 5px;
background: white;
opacity: 0;
visibility: hidden;
transition: 0.1s;
}
.card:hover .bottom-text {
opacity: 1;
visibility: visible;
}
.card .bottom-text .text {
text-align: justify;
}
.card .bottom-text .btn {
margin: 10px 0;
text-align: left;
}
.card .bottom-text .btn a {
text-decoration: none;
background: #000;
color: #f2f2f2;
padding: 5px 8px;
border-radius: 3px;
display: inline-flex;
transition: 0.2s;
}
.card .bottom-text .btn a:hover {
transform: scale(0.9);
}
@media screen and (max-width: 978px) {
.container {
flex-wrap: wrap;
flex-direction: column;
}
.card {
max-width: 700px;
margin: 20px 0;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tours</title>
<link rel="stylesheet" href="3destination_style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Barrackpore
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Hooghly
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
South 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Kolkata
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Hope you are doing well.
I just reviewed your code snippet and updated your CSS. I hope it'll help you out. Thank You
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
display: grid;
place-items: center;
background: #1d222b;
text-align: center;
}
.container{
padding: 0 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.card{
height: 280px;
max-width: 350px;
margin: 0 20px 40px;
background: white;
transition: 0.4s;
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
width: calc(20% - 40px);
}
.card:hover{
height: 560px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.card .img{
height: 200px;
width: 100%;
}
.card .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.card .top-text{
padding: 5px;
}
.card .top-text .name{
font-size: 25px;
font-weight: 600;
color: #202020;
}
.card .top-text p{
font-size: 20px;
font-weight: 600;
color: #007bff;
line-height: 20px;
}
.card .bottom-text{
padding: 0 20px 10px 20px;
margin-top: 5px;
background: white;
display: none;
transition: 0.1s;
}
.card:hover .bottom-text{
display: block;
}
.card .bottom-text .text{
text-align: justify;
}
.card .bottom-text .btn{
margin: 10px 0;
text-align: left;
}
.card .bottom-text .btn a{
text-decoration: none;
background: #000;
color: #f2f2f2;
padding: 5px 8px;
border-radius: 3px;
display: inline-flex;
transition: 0.2s;
}
.card .bottom-text .btn a:hover{
transform: scale(0.9);
}
@media screen and (max-width: 978px) {
.container{
flex-wrap: wrap;
flex-direction: column;
}
.card{
max-width: 700px;
margin: 20px 0;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tours</title>
<link rel="stylesheet" href="3destination_style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div >
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Barrackpore
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Hooghly
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
South 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
Kolkata
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
<div >
<div >
<img src="https://media.istockphoto.com/vectors/stamprsimp2red-vector-id1096052566?k=20&m=1096052566&s=612x612&w=0&h=CPU7LLHBwJm2OKoXCLxqKDzGaR0Xa1WGTQoryfdWQ3g=">
</div>
<div >
<div >
North 24 parganas
</div>
<p>
Area Description
</p>
</div>
<div >
<div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto adipisci reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
</div>
<div >
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</body>
</html>