forked from SpectraGallery/SpectraGallery.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
366 lines (330 loc) · 19.9 KB
/
index.html
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Zhengyuan Cooper Gao" />
<meta name="description" content="Art collection from Spectra Gallery">
<link rel="icon" type="image/png" href="images/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Document title -->
<title>Spectra Gallery | The Multi-Purpose Gallery </title>
<!-- Stylesheets & Fonts -->
<link href="css/plugins.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- Body Inner -->
<div class="body-inner">
<!-- Header -->
<header id="header" data-transparent="true" data-fullwidth="true" class="header-mini dark">
<div class="header-inner">
<div class="container">
<!--Logo-->
<div id="logo"> <a href="index.html"><span class="logo-default">Spectra Gallery</span><span class="logo-dark">Spectra Gallery</span></a> </div>
<!--End: Logo-->
<!-- Search -->
<div id="search"><a id="btn-search-close" class="btn-search-close" aria-label="Close search form"><i class="icon-x"></i></a>
<form class="search-form" action="search-results-page.html" method="get">
<input class="form-control" name="q" type="text" placeholder="Type & Search..." />
<span class="text-muted">Start typing & press "Enter" or "ESC" to close</span>
</form>
</div>
<!-- end: search -->
<!--Header Extras-->
<div class="header-extras">
<ul>
<li>
<a id="btn-search" href="#"> <i class="icon-search"></i></a>
</li>
<li>
<div class="p-dropdown"> <a href="#"><i class="icon-globe"></i><span>EN</span></a>
<ul class="p-dropdown-content">
<li><a href="#">French</a></li>
<li><a href="#">Chinese</a></li>
<li><a href="#">English</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!--end: Header Extras-->
<!--Navigation Resposnive Trigger-->
<div id="mainMenu-trigger"> <a class="lines-button x"><span class="lines"></span></a> </div>
<!--end: Navigation Resposnive Trigger-->
<!--Navigation-->
<div id="mainMenu">
<div class="container">
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About us</a></li>
<li class="dropdown mega-menu-item"><a href="#">Exhibitions</a>
<ul class="dropdown-menu">
<li class="mega-menu-content">
<div class="row">
<div class="col-lg-1-2">
<ul>
<li class="mega-menu-title">2023</li>
<li><a href="exhibition-2023-1.html">A Surprising Dream</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown"><a href="#">Artists</a>
<ul class="dropdown-menu">
<li><a href="cooper.html">Cooper</a></li>
<li><a href="#">Mer</a></li>
</ul>
</li>
<li><a href="https://spectragallery.github.io/blog/index.html">Blog</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!--end: Navigation-->
</div>
</div>
</header>
<!-- end: Header -->
<!-- SECTION IMAGE FULLSCREEN -->
<section class="fullscreen " data-bg-parallax="homepages/photography/images/parallax/1.jpeg">
<div class="container">
<div class="container-fullscreen">
<div class="text-middle text-light text-end">
<h1 data-animate="fadeInUp" data-animate-delay="700" class="text-lg-light m-b-5">Welcome to
<br />Spectra Gallery</h1>
<h3 class="font-nothing-you-could-do">A purpose of arts is in the quest of the forces shaping our future.</h3>
</div>
</div>
</div>
</section>
<!-- end: SECTION IMAGE FULLSCREEN -->
<!-- PARALLAX -->
<section class="p-t-200 p-b-200" data-bg-parallax="homepages/photography/images/parallax/2.jpeg">
<div class="bg-overlay"></div>
<div class="container">
<div class="text-light">
<h1 class="text-medium m-b-5">Latest Exhibition</h1>
<h3 class="font-nothing-you-could-do">A Surprising Dream by Dandi and Olive</h3>
<a href="exhibition-2023-1.html" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- end: PARALLAX -->
<!-- PARALLAX -->
<section class="p-t-200 p-b-200" data-bg-parallax="homepages/photography/images/parallax/3.jpeg">
<div class="bg-overlay"></div>
<div class="container">
<div class="text-light text-end">
<h1 class="text-medium m-b-5">News</h1>
<h3 class="font-nothing-you-could-do">Cooper's artist page is available.</h3>
<a href="cooper.html" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- end: PARALLAX -->
<!-- GALLERY -->
<section class="no-padding">
<!-- Portfolio -->
<div id="portfolio" class="grid-layout portfolio-4-columns" data-margin="0" data-lightbox="gallery">
<!-- portfolio item -->
<div class="portfolio-item img-zoom">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<img src="homepages/photography/images/exhibition/2023-1/D8_s.jpeg" alt="">
</div>
<div class="portfolio-description">
<a href="exhibition-2023-1.html">
<h3>A Surprising Dream</h3>
<span>Dandi / Olive</span>
</a>
</div>
</div>
</div>
<!-- end: portfolio item -->
<!-- portfolio item -->
<div class="portfolio-item img-zoom">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<img src="homepages/photography/images/exhibition/2023-1/M6_s.jpeg" alt="">
</div>
<div class="portfolio-description">
<a href="exhibition-2023-1.html">
<h3>A Surprising Dream</h3>
<span>Dandi / Olive</span>
</a>
</div>
</div>
</div>
<!-- end: portfolio item -->
<!-- portfolio item -->
<div class="portfolio-item img-zoom">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<img src="homepages/photography/images/cooper/parliament_frame_s.jpeg" alt="">
</div>
<div class="portfolio-description">
<a href="cooper.html">
<h3>Infernal Parliament in the East</h3>
<span>Cooper</span>
</a>
</div>
</div>
</div>
<!-- end: portfolio item -->
<!-- portfolio item -->
<div class="portfolio-item img-zoom">
<div class="portfolio-item-wrap">
<div class="portfolio-image">
<img src="homepages/photography/images/cooper/newnetherworld_frame_s.jpeg" alt="">
</div>
<div class="portfolio-description">
<a href="cooper.html">
<h3>Brave New Netherworld</h3>
<span>Cooper</span>
</a>
</div>
</div>
</div>
<!-- end: portfolio item -->
</div>
<!-- end: Portfolio -->
</section>
<!-- end: GALLERY -->
<!-- BLOG -->
<section class="p-b-100 background-dark text-light">
<div class="container">
<div class="text-center m-b-60">
<h1 class="text-lg">Lastest Blog Posts</h1>
</div>
<div id="blog" class="grid-layout post-items-transparent post-3-columns m-b-30" data-item="post-item">
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/cooper/parliament_frame_s.jpeg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>May 8, 2023</span>
<h2>Infernal Parliament</h2>
<p>Fryer:
</p>
<a href="https://spectragallery.github.io/blog/2023-05-08-parliament/" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/cooper/newnetherworld_frame_s.jpeg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>April 28, 2023</span>
<h2>Brave New Netherworld</h2>
<p>Midway in my ascent of the skyscraping staircase, I found myself lost in a labyrinthine story, For the steps had come to a sudden end.</p>
<a href="https://spectragallery.github.io/blog/2023-04-28-New-World/" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/cooper/micromacro_frame_s.jpeg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>April 17, 2023</span>
<h2>On the Micro-Macro Discrepancy</h2>
<p>I finish reading the book 由巫到礼·释礼归仁 (By witch to release ceremony ritual) written by Zehou Li.
</p>
<a href="https://spectragallery.github.io/blog/2023-04-17-micro-macro/" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/gallery/Cooper_2023_0404.jpg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>April 3, 2023</span>
<h2>The Art of Circulation and Spiritual experience</h2>
<p>We experience the moments in a three-dimensional world that we can touch, see, hear, and interact with. However, our experiences are not limited to just the three-dimensional world that we perceive with our senses. We also have memories and imaginations that allow us to recall past experiences and imagine new possibilities. These memories and imaginations can be thought of as mental constructs that exist outside of the physical world.
</p>
<a href="https://spectragallery.github.io/blog/2023-04-02-circulation/" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/gallery/Cooper_2023_0331.jpg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>March 31, 2023</span>
<h2>How to rest a dynamical "soul" in a "ritual"?</h2>
<p>The theatre is a space for self-experimentation, self-reflection, and social critique. It can be a tool for understanding the self and others, and for exploring different social contexts. It creates and shapes characters so that these characters can be interpreted and understood. The origin of theatre is widely believed by scholars around the world to be rooted in improvisational performances within sacrificial rituals. This view appeared in Aristotle’s work "Poetics." He wrote that tragedy originated from the improvisational recitation of the leader of the dithyrambic choir, while comedy originated from the improvisational chants of the leader of the phallic procession, an activity that still exists in many cities.</p>
<a href="https://spectragallery.github.io/blog/2022-03-31-resting-soul" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
<!-- Post item-->
<div class="post-item border">
<div class="post-item-wrap">
<div class="post-image">
<img alt="" src="homepages/photography/images/gallery/Cooper_2023_0330.jpg">
<span class="post-meta-category">Cooper</span>
</div>
<div class="post-item-description">
<span class="post-meta-date"><i class="fa fa-calendar-o"></i>March 29, 2023</span>
<h2>Spiritual Impressionism</h2>
<p>Spiritual arts encompass various practices and traditions aimed at promoting spiritual growth, personal transformation, and connection to the divine. These practices may include forms of mindfulness, movement, and expression. Spiritual impressionism, in particular, focuses on the practice of impressionism and symbolism - an art movement that emerged in France in the late 19th century. This art form is characterised by its emphasis on capturing the fleeting effects of light and colour in nature, and using symbols to represent abstract concepts, including emotions, feelings, and ideas.
</p>
<a href="https://spectragallery.github.io/blog/2023-03-29-spiritual-impressionism/" class="item-link">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- end: Post item-->
</div>
</div>
</section>
<!-- BLOG -->
<!-- FOOTER -->
<footer class="inverted" id="footer">
<div class="copyright-content">
<div class="container">
<div class="row">
<div class="copyright-text text-center"> © 2023 Spectra Gallery - A Multi-Purpose Gallery. All Rights Reserved. </div>
</div>
</div>
</div>
</footer>
<!-- end: FOOTER -->
</div>
<!-- end: Body Inner -->
<!-- Scroll top -->
<a id="scrollTop"><i class="icon-chevron-up"></i><i class="icon-chevron-up"></i></a>
<!--Plugins-->
<script src="js/jquery.js"></script>
<script src="js/plugins.js"></script>
<!--Template functions-->
<script src="js/functions.js"></script>
</body>
</html>