x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-04-14 02:32:29 +03:00 committed by GitHub
parent 52a26a76f4
commit 9bd102f8f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 136 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
100_projects/52-filter-image-gallery/css/style.css Normal file
View File

@ -0,0 +1,63 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #F5FFFA;
}
section{
padding: 20px;
margin: 40px auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
section ul{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
section ul li{
list-style: none;
text-transform: uppercase;
background: #FFF5EE;
padding: 12px 20px;
margin: 5px;
cursor: pointer;
transition: .3s;
}
section ul li.active,
section ul li:hover{
color: #fff;
background: #D2B48C;
}
.menu{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
section .menu .item{
position: relative;
width: 200px;
height: 200px;
margin: 5px;
display: block;
}
section .menu .item.hide{
display: none;
}
section .menu .item img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

BIN
100_projects/52-filter-image-gallery/img/appetizer.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
100_projects/52-filter-image-gallery/img/appetizer1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 618 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
100_projects/52-filter-image-gallery/img/breakfast6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
100_projects/52-filter-image-gallery/img/candies.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 283 KiB

BIN
100_projects/52-filter-image-gallery/img/candies1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 KiB

BIN
100_projects/52-filter-image-gallery/img/candies2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
100_projects/52-filter-image-gallery/img/dinner.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 KiB

BIN
100_projects/52-filter-image-gallery/img/dinner1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 KiB

BIN
100_projects/52-filter-image-gallery/img/dinner2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
100_projects/52-filter-image-gallery/img/juice.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

BIN
100_projects/52-filter-image-gallery/img/juice1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 296 KiB

BIN
100_projects/52-filter-image-gallery/img/juice2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
100_projects/52-filter-image-gallery/img/lunch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
100_projects/52-filter-image-gallery/img/lunch1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
100_projects/52-filter-image-gallery/img/lunch2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
100_projects/52-filter-image-gallery/img/lunch3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 186 KiB

48
100_projects/52-filter-image-gallery/index.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<section>
<ul>
<li class="list active" data-filter="all">All</li>
<li class="list" data-filter="breakfast">BreakFast</li>
<li class="list" data-filter="lunch">Lunch</li>
<li class="list" data-filter="dinner">dinner</li>
<li class="list" data-filter="appetizer">Appetizer</li>
<li class="list" data-filter="candies">Candies</li>
<li class="list" data-filter="juices">Juices</li>
</ul>
<div class="menu">
<div class="item" data-item="breakfast"><img src="img/breakfast.jpg" ></div>
<div class="item" data-item="lunch"><img src="img/lunch.jpg" ></div>
<div class="item" data-item="dinner"><img src="img/dinner.jpg" ></div>
<div class="item" data-item="dinner"><img src="img/dinner1.jpg" ></div>
<div class="item" data-item="dinner"><img src="img/dinner2.jpg" ></div>
<div class="item" data-item="candies"><img src="img/candies2.jpg" ></div>
<div class="item" data-item="juices"><img src="img/juice.jpg" ></div>
<div class="item" data-item="juices"><img src="img/juice1.jpg" ></div>
<div class="item" data-item="breakfast"><img src="img/breakfast2.jpg" ></div>
<div class="item" data-item="breakfast"><img src="img/breakfast3.jpg" ></div>
<div class="item" data-item="breakfast"><img src="img/breakfast4.jpg" ></div>
<div class="item" data-item="breakfast"><img src="img/breakfast5.jpg" ></div>
<div class="item" data-item="breakfast"><img src="img/breakfast6.jpg" ></div>
<div class="item" data-item="lunch"><img src="img/lunch1.jpg" ></div>
<div class="item" data-item="lunch"><img src="img/lunch2.jpg" ></div>
<div class="item" data-item="lunch"><img src="img/lunch3.jpg" ></div>
<div class="item" data-item="appetizer"><img src="img/appetizer.jpg" ></div>
<div class="item" data-item="appetizer"><img src="img/appetizer1.jpg" ></div>
<div class="item" data-item="candies"><img src="img/candies.jpg" ></div>
<div class="item" data-item="candies"><img src="img/candies1.jpg" ></div>
<div class="item" data-item="juices"><img src="img/juice2.jpg" ></div>
</div>
</section>
<script src="js/main.js">
</script>
</body>
</html>

25
100_projects/52-filter-image-gallery/js/main.js Normal file
View File

@ -0,0 +1,25 @@
let list = document.querySelectorAll('.list');
let item = document.querySelectorAll('.item');
for(let i = 0; i < list.length; i++){
list[i].addEventListener('click', function(){
for(let j = 0; j < list.length; j++){
list[j].classList.remove('active');
}
this.classList.add('active');
let dataFilter = this.getAttribute('data-filter');
for(let k = 0; k < item.length; k++){
item[k].classList.remove('active');
item[k].classList.add('hide');
if(item[k].getAttribute('data-item') == dataFilter ||
dataFilter == "all"){
item[k].classList.remove('hide');
item[k].classList.add('active');
}
}
})
}