Skip to content

Commit 3891e6d

Browse files
ProjectRavelProjectRavel
committed
Menambahkan Project Terakhir
1 parent 1a624ac commit 3891e6d

9 files changed

Lines changed: 110 additions & 0 deletions

File tree

‎9. Project Terakhir/img/1.jpeg‎

36.9 KB
Loading

‎9. Project Terakhir/img/2.jpeg‎

7 KB
Loading

‎9. Project Terakhir/img/3.jpeg‎

13.1 KB
Loading

‎9. Project Terakhir/img/4.jpeg‎

5.95 KB
Loading

‎9. Project Terakhir/img/5.jpeg‎

4.34 KB
Loading

‎9. Project Terakhir/img/6.jpeg‎

9.39 KB
Loading

‎9. Project Terakhir/index.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Photo Gallery</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background-color: #f4f4f4;
13+
}
14+
.container {
15+
text-align: center;
16+
padding: 20px;
17+
}
18+
.container img {
19+
width: 100%;
20+
max-width: 600px;
21+
height: auto;
22+
border-radius: 10px;
23+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
24+
}
25+
.thumbnail {
26+
display: flex;
27+
flex-wrap: wrap;
28+
justify-content: center;
29+
padding: 20px;
30+
}
31+
.thumb {
32+
margin: 10px;
33+
width: 100px;
34+
height: 100px;
35+
overflow: hidden;
36+
border-radius: 5px;
37+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
38+
transition: transform 0.2s;
39+
cursor: pointer;
40+
}
41+
.thumb img {
42+
width: 100%;
43+
height: 100%;
44+
object-fit: cover;
45+
transition: transform 0.2s;
46+
}
47+
.thumb:hover {
48+
transform: scale(1.1);
49+
}
50+
@media (max-width: 600px) {
51+
.thumb {
52+
width: 80px;
53+
height: 80px;
54+
}
55+
}
56+
.active {
57+
opacity: 0.6;
58+
}
59+
60+
@keyframes fadeIn {
61+
to{
62+
opacity: 1 ;
63+
}
64+
}
65+
66+
.fade{
67+
opacity: 0;
68+
animation: fadeIn 0.5s forwards;
69+
}
70+
</style>
71+
</head>
72+
<body>
73+
<div class="container">
74+
<img src="img/1.jpeg" alt="Main Image" id="jumbo">
75+
</div>
76+
<div class="thumbnail">
77+
<img src="img/1.jpeg" alt="Thumbnail 1" class="thumb active">
78+
<img src="img/2.jpeg" alt="Thumbnail 2" class="thumb">
79+
<img src="img/3.jpeg" alt="Thumbnail 3" class="thumb">
80+
<img src="img/4.jpeg" alt="Thumbnail 4" class="thumb">
81+
<img src="img/5.jpeg" alt="Thumbnail 5" class="thumb">
82+
<img src="img/6.jpeg" alt="Thumbnail 6" class="thumb">
83+
</div>
84+
<script src="script.js"></script>
85+
</body>
86+
</html>

‎9. Project Terakhir/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const thumbnail = document.querySelector(".thumbnail");
2+
const jumbo = document.querySelector("#jumbo");
3+
const test = document.querySelector("div.thumb img");
4+
const thumb = document.querySelectorAll(".thumb");
5+
6+
7+
thumbnail.addEventListener("click", (e) => {
8+
9+
if (
10+
e.target.classList.contains("thumb") &&
11+
!e.target.classList.contains("active")
12+
) {
13+
thumb.forEach((e) => {
14+
e.classList.remove("active");
15+
return;
16+
});
17+
jumbo.setAttribute("src", e.target.getAttribute("src"));
18+
jumbo.classList.add("fade");
19+
e.target.classList.add("active");
20+
setTimeout(() => {
21+
jumbo.classList.remove("fade");
22+
}, 500);
23+
}
24+
});

‎9. Project Terakhir/style.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)