<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="site-title">My Gallery</h1>
<div class="container">
<input type="text" id="searchInput" placeholder="Search...">
<div class="gallery">
<a href="https://rare-gallery.com/thumbs/548658-sakura-4k-wallpaper.jpg" target="_blank" class="image-link">
<div class="image">
<img src="https://rare-gallery.com/thumbs/578283-sunset-grass.jpg" alt="Image 1">
<div class="title">Sari</div>
</div>
</a>
<a href="https://rare-gallery.com/thumbs/592034-1920x1080-clouds.jpg" target="_blank" class="image-link">
<div class="image">
<img src="https://rare-gallery.com/thumbs/517923-waves-sunset.jpg" alt="Image 2">
<div class="title">Deniz</div>
</div>
</a>
<a href="https://rare-gallery.com/thumbs/573742-river-uruguay.jpg" target="_blank" class="image-link">
<div class="image">
<img src="https://rare-gallery.com/thumbs/565931-underwater-wallpaper.jpg" alt="Image 3">
<div class="title">Agac</div>
</div>
</a>
<a href="https://rare-gallery.com/thumbs/3603140-nature-lake-landscape-reflection-fog-ultrahd-4k-wallpaper.jpg" target="_blank" class="image-link">
<div class="image">
<img src="https://rare-gallery.com/thumbs/507826-moon-sky.jpg" alt="Image 4">
<div class="title">Pardon More</div>
</div>
</a>
<a href="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/09677159-9ef0-4f15-8c55-6896981e29a0/dgt0quf-03ce63d9-c1ca-4747-bff3-86d44f188574.png/v1/fill/w_1150,h_695/dragon_among_sheep_by_volinfer_dgt0quf-pre.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTEwMCIsInBhdGgiOiJcL2ZcLzA5Njc3MTU5LTllZjAtNGYxNS04YzU1LTY4OTY5ODFlMjlhMFwvZGd0MHF1Zi0wM2NlNjNkOS1jMWNhLTQ3NDctYmZmMy04NmQ0NGYxODg1NzQucG5nIiwid2lkdGgiOiI8PTE4MjAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.HxzWxZvBlgq_0-lyyT5xkBFah5vNrgAwm_A0-R_8J48" target="_blank" class="image-link">
<div class="image">
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4628e861-dd1d-468e-a95b-857a9e895e42/dh3dxf0-51e3f01d-b677-4562-9892-ea49dcb887b8.jpg/v1/fit/w_600,h_1291,q_70,strp/2024__nobody__just_silence_by_eysescope_dh3dxf0-300w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTI5MSIsInBhdGgiOiJcL2ZcLzQ2MjhlODYxLWRkMWQtNDY4ZS1hOTViLTg1N2E5ZTg5NWU0MlwvZGgzZHhmMC01MWUzZjAxZC1iNjc3LTQ1NjItOTg5Mi1lYTQ5ZGNiODg3YjguanBnIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.2ztI7Yb08DwS0Ne-xk0Nya_mD6a09hwkJlbr8z5qKyc" alt="Image 4">
<div class="title">Deno Pardon More</div>
</div>
</a>
<a href="https://images.wallpaperscraft.com/image/single/ford_mustang_gtr_ford_car_143660_3840x2160.jpg" target="_blank" class="image-link">
<div class="image">
<img src="https://images.wallpaperscraft.com/image/single/ford_mustang_gtr_ford_car_143660_300x168.jpg" alt="Image 3">
<div class="title">Araba</div>
</div>
</a>
<!-- Add more images as needed -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 30px;
}
.site-title {
text-align: center; font-size: 22px; margin-bottom: 0px; margin-top: 30px;
}
#searchInput {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 11px;
box-sizing: border-box;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust min and max width as needed */
gap: 15px;
}
.image {
position: relative;
border: 5px solid #FFF;
border-radius: 22px;
}
.image img {
width: 100%;
height: auto;
display: block;
border-radius: 15px;
margin-bottom: 0px;
}
.title {
position: absolute;
bottom: 7px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.8);
padding: 2px 8px;
border-radius: 5px;
}
/* Media query for smaller screens */
@media screen and (max-width: 1800px) {
.gallery {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Adjust min and max width as needed */
}
.title {
font-size: 14px; /* Adjust font size for smaller screens */
}
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Oxygen:400,700);
body {
margin: 0;
background: #EAE2FF;
color: #353d46;
font: 18px/27px 'Oxygen', sans-serif;
}
h1, h2, h3 { color: #9C78FA; margin: 0 0 27px; }
/*
Content
*/
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: -3px 0 6px darken(#556270, 5%);
-webkit-box-shadow: -3px 0 6px darken(#556270, 5%);
box-shadow: -3px 0 6px darken(#556270, 5%);
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
div.menu-trigger {
position: fixed;
top: 10px;
left: 10px;
width: 36px;
height: 36px;
background: #dfe5eb;
cursor: pointer;
border-radius: 5px;
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
&:before {
content: '\e801';
display: inline-block;
width: 36px;
height: 36px;
color: black;
font-family: "ico";
font-style: normal;
font-size: 1.2em;
font-weight: normal;
font-variant: normal;
text-align: center;
text-transform: none;
line-height: 36px;
}
&:hover { background: #556270; &:before { color: #fcfeff; } }
}
}
body.menu-active div#content { left: 284px; border-radius: 7px 0 0 7px; }
body.menu-active div#content .menu-trigger { left: 294px; }
document.getElementById('searchInput').addEventListener('input', function() {
var searchTerm = this.value.toLowerCase();
var images = document.querySelectorAll('.image');
images.forEach(function(image) {
var title = image.querySelector('.title').innerText.toLowerCase();
if (title.includes(searchTerm)) {
image.style.display = 'block';
} else {
image.style.display = 'none';
}
});
});
