<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> -->
<style>
body {
font-family: Arial, sans-serif;
background: url('https://codezillaye.com/wp-content/uploads/2024/06/web.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 154, 158, 0.8) 0%, rgba(250, 208, 196, 0.8) 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
z-index: 1;
}
.container {
position: relative;
z-index: 2;
padding-top: 60px;
}
.portfolio-item {
display: none; /* Hide items by default */
}
.portfolio-item img {
width: 100%;
height: auto;
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="container my-5">
<div class="text-center mb-4">
<button class="btn btn-primary filter-btn" data-filter="all">All Categories</button>
<button class="btn btn-secondary filter-btn" data-filter="web-design">Web Design</button>
<button class="btn btn-secondary filter-btn" data-filter="app">App</button>
<button class="btn btn-secondary filter-btn" data-filter="graphic-design">Graphic Design</button>
</div>
<div class="row">
<div class="col-md-4 portfolio-item web-design">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/landing-page2.png" alt="Web Design Project 1">
<h3>Web Design Project 1</h3>
</div>
<div class="col-md-4 portfolio-item web-design">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/b5landing.png" alt="Web Design Project 2">
<h3>Web Design Project 2</h3>
</div>
<div class="col-md-4 portfolio-item app">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/t5landing.png" alt="App Project 1">
<h3>App Project 1</h3>
</div>
<div class="col-md-4 portfolio-item graphic-design">
<img src="https://codezillaye.com/wp-content/uploads/2024/06/clip3.png" alt="Graphic Design Project 1">
<h3>Graphic Design Project 1</h3>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const filterButtons = document.querySelectorAll('.filter-btn');
const portfolioItems = document.querySelectorAll('.portfolio-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const filter = button.getAttribute('data-filter');
portfolioItems.forEach(item => {
if (filter === 'all' || item.classList.contains(filter)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
filterButtons.forEach(btn => btn.classList.remove('btn-primary'));
button.classList.add('btn-primary');
});
});
// Initially display all items
document.querySelector('.filter-btn[data-filter="all"]').click();
});
</script>
</body>
</html>