-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
208 lines (208 loc) · 13.2 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
<!DOCTYPE html><!-- Last Published: Thu Jun 08 2023 21:08:32 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="60dce7a2c0e40c2184a93f3f" data-wf-site="60dce7a2c0e40c708aa93f3e">
<head>
<meta charset="utf-8">
<title>Community Platform</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/components.css" rel="stylesheet" type="text/css">
<link href="css/community-platform-c2508e.css" rel="stylesheet" type="text/css">
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-JC3MDNR13C"></script>
<script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('set', 'developer_id.dZGVlNj', true);gtag('config', 'G-JC3MDNR13C');</script>
<style>
iframe {
border: 0px;
}
</style>
<style>
/* add custom cursor */
.typed-words::after {
content: "|";
display: inline;
animation: blink 1s infinite;
}
/* custom cursor animation */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body class="body">
<div data-collapse="medium" data-animation="default" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="navbar w-nav">
<div class="container-2 w-container">
<a href="#" class="brand w-nav-brand"><img src="images/logo.png" loading="lazy" srcset="images/logo-p-500.png 500w, images/logo-p-800.png 800w, images/logo.png 999w" sizes="188.89999389648438px" alt="" class="logo"></a>
<nav role="navigation" class="nav-menu-2 w-nav-menu">
<a href="index.html" aria-current="page" class="menu-active w-nav-link w--current">Features</a>
<a href="mission.html" class="menu-active w-nav-link">Mission</a>
<a href="roadmap.html" class="menu-active w-nav-link">Roadmap</a>
<div class="mobile-button w-clearfix">
<a href="https://onearmy.github.io/community-platform/" class="button w-nav-link">Documentation</a>
<a href="build-it.html" class="button w-nav-link">Help Build it</a>
</div>
</nav>
<div class="right-buttons w-clearfix">
<a href="build-it.html" class="button w-nav-link">Help Build it</a>
<a href="https://onearmy.github.io/community-platform/" target="_blank" class="button w-nav-link">Documentation</a>
</div>
<div class="menu-button w-nav-button">
<div class="hamburger w-icon-nav-menu"></div>
</div>
</div>
</div>
<div class="header features hide"><img src="images/header_transperant.png" loading="lazy" srcset="images/header_transperant-p-500.png 500w, images/header_transperant-p-800.png 800w, images/header_transperant-p-1080.png 1080w, images/header_transperant-p-1600.png 1600w, images/header_transperant-p-2000.png 2000w, images/header_transperant-p-2600.png 2600w, images/header_transperant-p-3200.png 3200w, images/header_transperant.png 5000w" sizes="(max-width: 991px) 100vw, 1000px" alt="" class="image-3"></div>
<div class="header-title-text">
<h1 class="feature-title">We make software to glue communities together</h1>
<p class="header-title-p">Specially designed to work on global problems</p>
</div>
<div class="w-container">
<div class="feature">
<div class="feature-left"><img src="images/home_01.png" loading="lazy" srcset="images/home_01-p-500.png 500w, images/home_01-p-800.png 800w, images/home_01.png 1288w" sizes="(max-width: 479px) 92vw, 250px" alt="" class="image-feature"></div>
<div class="feature-right">
<h1 class="h2">The platform</h1>
<h1 class="heading">We glue a community together</h1>
<p class="p-features">Our community platform helps people to grow communities and make it easier to collaborate on environmental projects in one single place. <br><br> </p>
</div>
</div>
<div class="feature">
<div class="feature-left"><img src="images/home_03.png" loading="lazy" srcset="images/home_03-p-800.png 800w, images/home_03.png 927w" sizes="(max-width: 479px) 92vw, 250px" alt="" class="image-feature"></div>
<div class="feature-right">
<h1 class="h2">Our tools</h1>
<h1 class="heading">It's a digital space to join forces</h1>
<p class="p-features">A place where people can meet, help each other, ask and answer questions, share their innovative ways of fixing problems, discover people around them, connect locally, find events and more.</p>
</div>
</div>
<div class="feature">
<div class="feature-left"><img src="images/home_02.png" loading="lazy" srcset="images/home_02-p-500.png 500w, images/home_02-p-800.png 800w, images/home_02.png 927w" sizes="(max-width: 479px) 92vw, 250px" alt="" class="image-feature"></div>
<div class="feature-right">
<h1 class="h2">Earth first</h1>
<h1 class="heading">Made to tackle problems</h1>
<p class="p-features">Communities come in many shapes and forms, we are focussing specifically on those trying to tackle global problems. Bring people together around a problem and start collaborating.</p>
</div>
</div>
<div class="feature">
<div class="feature-left"></div>
<div class="feature-right"></div>
</div>
</div>
<div class="textblock">
<div class="div-block-13">
<h1 class="heading-13">Glue communities that <span class="typed-words">. </span></h1>
</div>
</div>
<div class="header-title-text">
<h1 class="feature-title">Our main features</h1>
<p class="header-title-p">Essential tools to glue a community together</p>
</div>
<div class="container-tab">
<div data-duration-in="300" data-duration-out="100" data-current="Tab 5" data-easing="ease" class="tabs w-tabs">
<div class="tabs-content w-tab-content">
<div data-w-tab="Tab 1" class="tabb w-tab-pane">
<div class="icon-feature tab"><img src="images/research_black.png" loading="lazy" alt="" class="image-32 tab">
<h1 class="tab h1">Research</h1>
</div>
<h1 class="h2 tab">Document learnings</h1>
<p class="p-features tab">This is used for all the countless experiments and prototypes that still need to be done to find solutions for complex problems. Documenting all the good and bad things online helps other members to not make the same mistakes and accelerate the development.</p><img src="images/research.png" loading="lazy" srcset="images/research-p-500.png 500w, images/research-p-800.png 800w, images/research.png 1000w" sizes="(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 54vw, 50vw" alt="" class="image-feature tab">
</div>
<div data-w-tab="Tab 2" class="tabb w-tab-pane">
<div class="icon-feature tab"><img src="images/events_black.png" loading="lazy" alt="" class="image-32 tab">
<h1 class="tab h1">Events</h1>
</div>
<h1 class="h2 tab">Grow locally</h1>
<p class="p-features">Used to bring people together and meet in bigger groups. (Less good in times of COVID). Used for hosting presentations, meet ups and brainstorming sessions. It allows people outside the community to join in.</p><img src="images/events.png" loading="lazy" srcset="images/events-p-500.png 500w, images/events-p-800.png 800w, images/events.png 1000w" sizes="(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 54vw, 50vw" alt="" class="image-feature tab">
<a href="https://community.preciousplastic.com/events" target="_blank" class="link">Example</a>
</div>
<div data-w-tab="Tab 3" class="tabb w-tab-pane">
<div class="icon-feature tab"><img src="images/academy_black.png" loading="lazy" alt="" class="image-32 tab">
<h1 class="tab h1">Academy</h1>
</div>
<h1 class="h2 tab">The backbone</h1>
<p class="p-features">This is the core of the community. The main source of knowledge where the rest is build around. It's like the foundation of the community, information that can be built around. Shared in video/images or text.</p><img src="images/academy.png" loading="lazy" srcset="images/academy-p-500.png 500w, images/academy-p-800.png 800w, images/academy-p-1080.png 1080w, images/academy-p-1600.png 1600w, images/academy-p-2000.png 2000w, images/academy.png 2488w" sizes="(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 54vw, 50vw" alt="" class="image-feature tab">
</div>
<div data-w-tab="Tab 4" class="tabb w-tab-pane">
<div class="icon-feature tab"><img src="images/howto_black.png" loading="lazy" alt="" class="image-32 tab">
<h1 class="tab h1">How-to</h1>
</div>
<h1 class="h2 tab">Teach Others</h1>
<p class="p-features tab">Community generated content that shows others how to do something. Basically how to copy something that works. It's the final result after the process of testing and prototyping. Shared step by step so you can do it yourself.</p><img src="images/how-to_transperant.png" loading="lazy" srcset="images/how-to_transperant-p-500.png 500w, images/how-to_transperant-p-800.png 800w, images/how-to_transperant.png 1000w" sizes="(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 54vw, 50vw" alt="" class="image-feature tab">
</div>
<div data-w-tab="Tab 5" class="tabb w-tab-pane w--tab-active">
<div class="icon-feature tab"><img src="images/map.png" loading="lazy" alt="" class="image-32 tab">
<h1 class="tab h1">Map</h1>
</div>
<h1 class="h2 tab">Connect Locally</h1>
<p class="p-features tab">Maps are used to bring people together in the real world. Map out like minded people around you and meetup up. A powerful way to start collaborations and build a local network.</p><img src="images/map_1.png" loading="lazy" srcset="images/map_1-p-500.png 500w, images/map_1-p-800.png 800w, images/map_1.png 1000w" sizes="(max-width: 479px) 87vw, (max-width: 767px) 92vw, (max-width: 991px) 54vw, 50vw" alt="" class="image-feature tab">
</div>
</div>
<div class="tabs-menu-2 w-tab-menu">
<a data-w-tab="Tab 1" class="sidetab w-inline-block w-tab-link">
<div class="icon-feature"><img src="images/research_black.png" loading="lazy" alt="" class="image-32"></div>
<div class="feature-text">
<h1 class="heading">Research</h1>
</div>
</a>
<a data-w-tab="Tab 2" class="sidetab w-inline-block w-tab-link">
<div class="icon-feature"><img src="images/events_black.png" loading="lazy" alt="" class="image-32"></div>
<div class="feature-text">
<h1 class="heading">Events</h1>
</div>
</a>
<a data-w-tab="Tab 3" class="sidetab w-inline-block w-tab-link">
<div class="icon-feature"><img src="images/academy_black.png" loading="lazy" alt="" class="image-32"></div>
<div class="feature-text">
<h1 class="heading">Academy</h1>
</div>
</a>
<a data-w-tab="Tab 4" class="sidetab w-inline-block w-tab-link">
<div class="icon-feature"><img src="images/howto_black.png" loading="lazy" alt="" class="image-32"></div>
<div class="feature-text">
<h1 class="heading">How-to</h1>
</div>
</a>
<a data-w-tab="Tab 5" class="sidetab w-inline-block w-tab-link w--current">
<div class="icon-feature"><img src="images/map.png" loading="lazy" alt="" class="image-32"></div>
<div class="feature-text">
<h1 class="heading">Map</h1>
</div>
</a>
</div>
</div>
<div class="footer">
<a href="build-it.html" target="_blank" class="button-2 w-button">Help us build it</a>
</div>
</div>
<div class="one-army-footer wf-section">
<a href="https://onearmy.earth/" target="_blank" class="oa-link w-inline-block">
<div class="oa-footer-wrapper"><img src="images/One-Army-Star-Logo.svg" loading="lazy" alt="" class="one-army-logo">
<h5 class="h5-oa">Developed by <span class="text-span-3">One Army</span></h5>
</div>
</a>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=60dce7a2c0e40c708aa93f3e" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/community-platform-c2508e.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
<script>
var typed = new Typed(".typed-words", {
strings: ["fix the fashion industry", "reduce plastic waste", "make komboucha", "develop lowtech", " make solar cookers", " rethink our food supply"],
typeSpeed: 75,
backSpeed: 50,
backDelay: 800,
startDelay: 500,
loop: true,
showCursor: false,
cursorChar: "|",
attr: null,
});
</script>
</body>
</html>