Uni-Gallery-Project/gallery.html at master · Pupler/Uni-Gallery-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uni-Gallery | Галерея</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Uni-Gallery</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Головна</a></li>
                    <li><a href="gallery.html" class="active">Галерея</a></li>
                    <li><a href="about.html">Про нас</a></li>
                    <li><a href="contact.html">Контакти</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <section class="gallery-intro">
            <div class="container">
                <h2>Галерея робіт</h2>
                <p>Ознайомтеся з творчими роботами наших студентів</p>
            </div>
        </section>

        <section class="gallery-filter">
            <div class="container">
                <button class="filter-btn active" data-filter="all">Всі роботи</button>
                <button class="filter-btn" data-filter="painting">Живопис</button>
                <button class="filter-btn" data-filter="graphic">Графіка</button>
                <button class="filter-btn" data-filter="digital">Цифрове мистецтво</button>
                <button class="filter-btn" data-filter="photo">Фотографія</button>
            </div>
        </section>

        <section class="gallery-grid">
            <div class="container">
                <div class="gallery-items">
                    <div class="gallery-item" data-category="painting">
                        <img src="images/painting1.jpg" alt="Весняний пейзаж">
                        <div class="item-info">
                            <h3>Весняний пейзаж</h3>
                            <p>Автор: Анна Коваленко</p>
                            <p>Факультет: Мистецтв</p>
                        </div>
                    </div>
                    <div class="gallery-item" data-category="graphic">
                        <img src="images/graphic1.jpg" alt="Абстрактна композиція">
                        <div class="item-info">
                            <h3>Абстрактна композиція</h3>
                            <p>Автор: Олексій Петренко</p>
                            <p>Факультет: Дизайну</p>
                        </div>
                    </div>
                    <div class="gallery-item" data-category="digital">
                        <img src="images/digital1.jpg" alt="Кіберпростір">
                        <div class="item-info">
                            <h3>Кіберпростір</h3>
                            <p>Автор: Марія Сидоренко</p>
                            <p>Факультет: Комп'ютерних наук</p>
                        </div>
                    </div>
                    <div class="gallery-item" data-category="photo">
                        <img src="images/photo1.jpg" alt="Міський пейзаж">
                        <div class="item-info">
                            <h3>Міський пейзаж</h3>
                            <p>Автор: Дмитро Іваненко</p>
                            <p>Факультет: Журналістики</p>
                        </div>
                    </div>
                    <div class="gallery-item" data-category="painting">
                        <img src="images/painting2.jpg" alt="Портрет">
                        <div class="item-info">
                            <h3>Портрет</h3>
                            <p>Автор: Софія Лисенко</p>
                            <p>Факультет: Мистецтв</p>
                        </div>
                    </div>
                    <div class="gallery-item" data-category="digital">
                        <img src="images/digital2.jpg" alt="Фантастичний світ">
                        <div class="item-info">
                            <h3>Фантастичний світ</h3>
                            <p>Автор: Андрій Шевченко</p>
                            <p>Факультет: Комп'ютерних наук</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 Uni-Gallery Project. Всі права захищені.</p>
        </div>
    </footer>

    <script>
        // Фільтрація галереї
        document.addEventListener('DOMContentLoaded', function() {
            const filterBtns = document.querySelectorAll('.filter-btn');
            const galleryItems = document.querySelectorAll('.gallery-item');

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    // Видаляємо активний клас з усіх кнопок
                    filterBtns.forEach(b => b.classList.remove('active'));
                    // Додаємо активний клас до поточної кнопки
                    this.classList.add('active');

                    const filter = this.getAttribute('data-filter');

                    galleryItems.forEach(item => {
                        if (filter === 'all' || item.getAttribute('data-category') === filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });
        });
    </script>
</body>
</html>