-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (159 loc) · 7.54 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
<!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" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-161501541-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-161501541-1');
</script>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./images/MainLogo.png"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/scss/style.css" />
<link rel="apple-touch-icon" href="/custom-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Zellan Creative and Cultural Center</title>
</head>
<body>
<section class="menu">
<div class="hamburger">
<div class="hamburger__line"></div>
<div class="hamburger__line hamburgerSecondLine"></div>
<div class="hamburger__line"></div>
</div>
<nav class="nav">
<ul class="nav-links">
<li><a href="./index.html" class="nav-select"><span>Home</span><span>Home</span></a></li>
<li><a href="./thespace.html" class="nav-select"><span>The space</span><span>The space</span></a></li>
<li><a href="./blog.html" class="nav-select"><span>Blog</span><span>Blog</span></a></li>
<li><a href="https://www.amazon.com/s?i=digital-text&rh=p_27%3AZellan+Creative+and+Cultural+Centre&s=relevancerank&text=Zellan+Creative+and+Cultural+Centre&ref=dp_byline_sr_ebooks_2" target="_blank" class="nav-select"><span>Ebooks</span><span>Ebooks</span></a></li>
<li><a href="https://www.instagram.com/zellancreatives/channel/" target="_blank" class="nav-select"><span>Podcasts/Videos</span><span>Podcast/Videos</span></a></li>
</ul>
<img src="images/Canopy Chick.png" alt="" class="imgCanopy" />
</nav>
</section>
<section class="logo">
<img src="images/MainLogo.png" alt="" class="logo__image" />
</section>
<section class="container_zellan_text">
<div class="zellan_logo_text">
<h1>Zellan</h1>
<h3>Creative and<br />Cultural Center</h3>
<h4>A Grassroot Ethiopian Initiative</h4>
</div>
</section>
<section class="meaning">
<div class="meaning__left">
<img
class="left"
src="images/leftpattern copy.png"
alt="Zellan Patterns Left"
/>
</div>
<div class="meaning__right">
<img
class="right"
src="images/rightpattern.png"
alt="Zellan Patterns Right"
/>
</div>
<div class="meaning__title">
<h1>Zellan</h1>
<h3>Means<br />NOMAD.</h3>
</div>
<p>
As a centre designed to be a home for creatives, Zellan embraced the
contradiction in its name and stands as the embodiment of the term
“Living Tradition” : Standing strong with our past, eye to eye with our
present and preparing a surpassing future.
</p>
</section>
<section>
<div class="trigger1"></div>
<div class="camelLadyContainer">
<img
src="images/CamelLady.svg"
alt="Camel Lady"
class="camelLadyImage"
/>
</section>
<section>
<div class="camelLadyTxt">
<h1><span>OUR </span><span><span>JOURNEY</span></h1>
<p>
To build a fair and viable Ethiopian creative ecosystem that can uplift the cultural and creative economy.<br/><br/>The project was born out of the need for a professional and sustainable ecosystem that will prevent impassioned people from losing their momentum because of a lack of recognition.
</p>
</div>
</div>
</section>
<section>
<div class="trigger2"></div>
<div class="oasisContainer">
<img
src="images/TheOasis.png"
alt="Oasis: City in Hands"
class="oasisImage"
/>
</section>
<section>
<div class="oasisTxt">
<h1><span>THE </span><span><span>OASIS</span></h1>
<p>
Located at the heart of Addis, the immersive Creative and Cultural Centre was the home of collaboration, discussion, progression and creation.<br/><br/>Zellan was dedicated to investing resources towards the creative industry and drive inclusive conversations of contemporary Ethiopian identity and arts.<br/><br/>Zellan was a safe space to gather and support a community of pioneers, talents, artists and creatives.
</p>
</div>
</div>
</section>
<section class="expect">
<div class="expect__whatTo"><h1>WE</br><span>HOSTED</span></h1></div>
<div class="expect__txt"><img class="expect__Art" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Unsubdued and audacious art exhibitions.</p></div>
<div class="expect__txt"><img class="expect__Content" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Production of original content to address the issues of contemporary Ethiopia.</p></div>
<div class="expect__txt"><img class="expect__Event" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Curated events by creatives in Ethiopia that challenge, disrupt and entertain.</p></div>
<div class="expect__txt"><img class="expect__Workshop" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Workshops to steamroll your own definition of limitation.</p></div>
<div class="expect__txt"><img class="expect__Artisan" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Highlighting trailblazing artisans.<p></div>
<div class="expect__txt"><img class="expect__Film" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Unhearthing the Ethiopian unexplored film industry and other independents.</p></div>
<div class="expect__txt"><img class="expect__Hub" src="images/expectPattern.png" alt="Ethiopian aesthetics inspired pattern">
<p>Creative Hub hosting entrepreneurs working on impactfull projects rooted in art and culture. </p></div>
</section>
<footer>
<div class="footer">
<div>Artworks by Izzat Amanuel</div>
<div>© Zellan Creative and Cultural Center. All Rights Reserved. 2021.</div>
</div>
</footer>
<!-- For Parallax Scrolling -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="js/hamburger.js"></script>
<script src="js/meaning.js"></script>
<script src="js/parallax.js"></script>
<script src="js/expect.js"></script>
</body>
</html>