Beautiful Responsive Image Gallery Using Only HTML & CSS
<!DOCTYPE html>
<html>
<title>Beautiful Responsive Image Gallery Using Only HTML & CSS</title>
<link rel="stylesheet" href="css/style.css" />
<head>
</head>
<body>
<h1 class="text-center">Beautiful Responsive Image Gallery Using Only HTML & CSS</h1>
<div class="images_main_div">
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/sdfdf.jpg">
<img src="https://codekarnedo.com/uploads/upload/sdfdf.jpg" alt="Cinque Terre">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/footer.png">
<img src="https://codekarnedo.com/uploads/upload/footer.png" alt="Forest">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/Responsive%20Hero%20Section%20Css%20and%20Html.jpeg">
<img src="https://codekarnedo.com/uploads/upload/Responsive%20Hero%20Section%20Css%20and%20Html.jpeg" alt="Northern Lights">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/responsive_slider.jpg">
<img src="https://codekarnedo.com/uploads/upload/responsive_slider.jpg" alt="Mountains">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/footer.png">
<img src="https://codekarnedo.com/uploads/upload/footer.png" alt="Forest">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/sdfdf.jpg">
<img src="https://codekarnedo.com/uploads/upload/sdfdf.jpg" alt="Cinque Terre">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/responsive_slider.jpg">
<img src="https://codekarnedo.com/uploads/upload/responsive_slider.jpg" alt="Mountains">
</a>
</div>
<div class="images_box_new">
<a target="_blank" href="https://codekarnedo.com/uploads/upload/Responsive%20Hero%20Section%20Css%20and%20Html.jpeg">
<img src="https://codekarnedo.com/uploads/upload/Responsive%20Hero%20Section%20Css%20and%20Html.jpeg" alt="Northern Lights">
</a>
</div>
</div>
</body>
</html>
.text-center{text-align: center;}
.images_main_div {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}
.images_box_new {
border: 1px solid #ff577d;
border-radius: 1px;
transition: .4s;
flex: 1 1 calc(25% - 10px);
box-sizing: border-box;
}
.images_box_new:hover {
border: 1px solid #fff;
box-shadow: 0px 0px 0px 3px #ff5d7d;
transition: .4s;
}
.images_box_new img {
width: 100%;
height: auto;
display: block;
}
@media screen and (max-width: 1024px) {
.images_box_new {
flex: 1 1 calc(33.33% - 10px);
}
}
@media screen and (max-width: 768px) {
.images_box_new {
flex: 1 1 calc(50% - 10px);
}
}
@media screen and (max-width: 480px) {
.images_box_new {
flex: 1 1 100%;
}
}
empty
Comments (0 )
Leave A Comment