HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>Responsive Card Design </title>
</head>
<body>
<div class="container">
<a href="#"class="card-item">
<img src="developer.jpg"alt="image1" />
<h2>This is Box 1</h2>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
<a href="#"class="card-item">
<img src="designer.jpg"alt="image2" />
<h2>This is Box 2</h2>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
</div>
<a href="#"class="card-item">
<img src="editor.jpg"alt="image2" />
<h2>This is Box 3</h2>
<div class="arrow">
<i class="fas fa-arrow-right card-icon"></i>
</div>
</a>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body {
backgroun-color: 0 ;
}
.container {
display: grid ;
grid-template-columans: repeat(auto-fill, minmax(300px, 1fr));
margin: 150px auto ;
padding: 20px ;
width: 100% ;
max-width: 1200px ;
gap: 20px ;
}
.container .card-item {
background-color: #fff ;
padding :15px ;
list-style :none ;
cursor :pointer ;
box-shadow : 0 8px 12px rgba(0, 0, 0, 0.4) ;
border : 2px solid transparent ;
text-decoration : none ;
border-radius : 12px ;
}
/* Add border on hover */
.container .card-item:hover {
border :3px solid #000 ;
}
.container .card-item img {
width :100% ;
aspect-ratio :16/9 ;
border-radius :8px ;
object-fit :cover ;
}
.card-item h2 {
color :#000 ;
font-size :18px ;
margin-top :27px ;
font-weight :600 ;
}
.card-item .arrow {
display :flex ;
align-items :center ;
justify-content :center ;
transform :rotate(-35deg) ;
height :41px ;
weight :41px ;
color :#000 ;
border :1px solid #000 ;
transition :0.2s ease ;
margin-top :40px ;
border-radius :50% ;
}
@media (max-width: 1200px) {
{
.container.card-item {
padding : 15px ;
}
}
@media (max-width: 600px) {
{
.container {
margin : 0 auto ;
}
}
