PPBe/parley_landing_page
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Made the landing page

Browse Source 
* Unneeded demo files where removed
* Content was added
* I changed things to make the site work without javascript
    * It still uses javascript, but disabeling javascript made it that text wasn't shown, this isn't the case any more
        * I just removed the class from the body element
        * When opening the site it has a weird "jump" effect instead of comming up. This could be better, but is good enough for now
        * I only removed the class in the html, not from the css or javascript
            * This should also be done, but feels like too much work for now
    * Images didn't properly fit any more when javascript was disabled. This has been fixed with css and there is no distinction anymore between js and non-js
        * This probably means that there is javascript or something that should be removed. I didn't do that
* The "Our Services" section had three shades for the children, but then fell back on the first shade for other sections. It now uses two shades, one for odd children and one for even children
* Changed the README file for the Parley landing page and changed to markdown
This commit is contained in:
Ilja 2020-07-17 21:29:05 +02:00
parent fb0d4fa41d
commit cf4ed30ea8
13 changed files with 4002 additions and 4460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md Normal file
View File

@ -0,0 +1,26 @@
# What's this
This is the landing page for [Parley](https://parley.be/).
# How to use
This repo only contains static content. Put the files where you want to host them and point your server software (nginx, apache...) to it.
# How to update
This depends on how you installed it on the server. If you used `git clone <url>`, you can simply do `git pull` and your done. Otherwise optionally remove the current content and overwrite it with the new content.
# License
The website and theme are both licensed under a [Creative Commons Attribution 3.0 Unported license](https://creativecommons.org/licenses/by/3.0/)
# Credits
* Theme:
* [Hyperspace](https://html5up.net/hyperspace) by [aj@lkn.io](mailto:aj@lkn.io) | [@ajlkn](https://aj.lkn.io/)
* Icons:
* [Font Awesome](https://fontawesome.io)
* Other:
* [jQuery](https://jquery.com)
* [Scrollex](https://github.com/ajlkn/jquery.scrollex)
* [Responsive Tools](https://github.com/ajlkn/responsive-tools)

33
README.txt
View File

@ -1,33 +0,0 @@
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
So I've had the wireframe for this particular design kicking around for some time, but with all
the other interesting (and in some cases, semi-secret) projects I've been working on it took me
a little while to get to actually designing and coding it. Fortunately, things have eased up
enough for me to finaly get around to it, so I'm happy to introduce Hyperspace: a fun, blocky,
one-page design with a lot of color, a bit of animation, and an additional "generic" page template
(because hey, even one-page sites usually need an interior page or two). Hope you dig it :)
Demo images* courtesy of Unsplash, a radtastic collection of CC0 (public domain) images
you can use for pretty much whatever.
(* = not included)
AJ
aj@lkn.io | @ajlkn
Credits:
Demo Images:
Unsplash (unsplash.com)
Icons:
Font Awesome (fontawesome.io)
Other:
jQuery (jquery.com)
Scrollex (github.com/ajlkn/jquery.scrollex)
Responsive Tools (github.com/ajlkn/responsive-tools)

7813
assets/css/main.css
View File

File diff suppressed because it is too large Load Diff

2
assets/js/main.js
View File

@ -187,4 +187,4 @@
}
});
})(jQuery);
})(jQuery);

363
elements.html
View File

@ -1,363 +0,0 @@
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Elements - Hyperspace by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<a href="index.html" class="title">Hyperspace</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="generic.html">Generic</a></li>
<li><a href="elements.html" class="active">Elements</a></li>
</ul>
</nav>
</header>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<h1 class="major">Elements</h1>
<!-- Text -->
<section>
<h2>Text</h2>
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
<hr />
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
<hr />
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<hr />
<h3>Blockquote</h3>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
<h3>Preformatted</h3>
<pre><code>i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
</section>
<!-- Lists -->
<section>
<h2>Lists</h2>
<div class="row">
<div class="col-6 col-12-medium">
<h3>Unordered</h3>
<ul>
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
<h3>Alternate</h3>
<ul class="alt">
<li>Dolor pulvinar etiam.</li>
<li>Sagittis adipiscing.</li>
<li>Felis enim feugiat.</li>
</ul>
</div>
<div class="col-6 col-12-medium">
<h3>Ordered</h3>
<ol>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis viverra.</li>
<li>Felis enim feugiat.</li>
<li>Dolor pulvinar etiam.</li>
<li>Etiam vel felis lorem.</li>
<li>Felis enim et feugiat.</li>
</ol>
<h3>Icons</h3>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">Github</span></a></li>
</ul>
</div>
</div>
<h2>Actions</h2>
<div class="row">
<div class="col-6 col-12-medium">
<ul class="actions">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions small">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary">Default</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary small">Small</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<ul class="actions stacked">
<li><a href="#" class="button primary fit">Default</a></li>
<li><a href="#" class="button fit">Default</a></li>
</ul>
<ul class="actions stacked">
<li><a href="#" class="button primary small fit">Small</a></li>
<li><a href="#" class="button small fit">Small</a></li>
</ul>
</div>
</div>
</section>
<!-- Table -->
<section>
<h2>Table</h2>
<h3>Default</h3>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
<h3>Alternate</h3>
<div class="table-wrapper">
<table class="alt">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item One</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Two</td>
<td>Vis ac commodo adipiscing arcu aliquet.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Three</td>
<td> Morbi faucibus arcu accumsan lorem.</td>
<td>29.99</td>
</tr>
<tr>
<td>Item Four</td>
<td>Vitae integer tempus condimentum.</td>
<td>19.99</td>
</tr>
<tr>
<td>Item Five</td>
<td>Ante turpis integer aliquet porttitor.</td>
<td>29.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<!-- Buttons -->
<section>
<h3>Buttons</h3>
<ul class="actions">
<li><a href="#" class="button primary">Primary</a></li>
<li><a href="#" class="button">Default</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button large">Large</a></li>
<li><a href="#" class="button">Default</a></li>
<li><a href="#" class="button small">Small</a></li>
</ul>
<ul class="actions fit">
<li><a href="#" class="button primary fit">Fit</a></li>
<li><a href="#" class="button fit">Fit</a></li>
<li><a href="#" class="button fit">Fit</a></li>
</ul>
<ul class="actions fit small">
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
<li><a href="#" class="button fit small">Fit + Small</a></li>
<li><a href="#" class="button fit small">Fit + Small</a></li>
</ul>
<ul class="actions">
<li><a href="#" class="button primary icon solid fa-download">Icon</a></li>
<li><a href="#" class="button icon solid fa-upload">Icon</a></li>
<li><a href="#" class="button icon solid fa-save">Icon</a></li>
</ul>
<ul class="actions">
<li><span class="button primary disabled">Disabled</span></li>
<li><span class="button disabled">Disabled</span></li>
</ul>
</section>
<!-- Form -->
<section>
<h2>Form</h2>
<form method="post" action="#">
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
</div>
<div class="col-12">
<select name="demo-category" id="demo-category">
<option value="">- Category -</option>
<option value="1">Manufacturing</option>
<option value="1">Shipping</option>
<option value="1">Administration</option>
<option value="1">Human Resources</option>
</select>
</div>
<div class="col-4 col-12-small">
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
<label for="demo-priority-low">Low</label>
</div>
<div class="col-4 col-12-small">
<input type="radio" id="demo-priority-normal" name="demo-priority">
<label for="demo-priority-normal">Normal</label>
</div>
<div class="col-4 col-12-small">
<input type="radio" id="demo-priority-high" name="demo-priority">
<label for="demo-priority-high">High</label>
</div>
<div class="col-6 col-12-small">
<input type="checkbox" id="demo-copy" name="demo-copy">
<label for="demo-copy">Email me a copy</label>
</div>
<div class="col-6 col-12-small">
<input type="checkbox" id="demo-human" name="demo-human" checked>
<label for="demo-human">Not a robot</label>
</div>
<div class="col-12">
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
</div>
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
</div>
</div>
</form>
</section>
<!-- Image -->
<section>
<h2>Image</h2>
<h3>Fit</h3>
<div class="box alt">
<div class="row gtr-uniform">
<div class="col-12"><span class="image fit"><img src="images/pic04.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic02.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic03.jpg" alt="" /></span></div>
<div class="col-4"><span class="image fit"><img src="images/pic01.jpg" alt="" /></span></div>
</div>
</div>
<h3>Left &amp; Right</h3>
<p><span class="image left"><img src="images/pic05.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
<p><span class="image right"><img src="images/pic06.jpg" alt="" /></span>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
</section>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper alt">
<div class="inner">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

63
generic.html
View File

@ -1,63 +0,0 @@
<!DOCTYPE HTML>
<!--
Hyperspace by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Generic - Hyperspace by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<a href="index.html" class="title">Hyperspace</a>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="generic.html" class="active">Generic</a></li>
<li><a href="elements.html">Elements</a></li>
</ul>
</nav>
</header>
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<section id="main" class="wrapper">
<div class="inner">
<h1 class="major">A Generic Page</h1>
<span class="image fit"><img src="images/pic04.jpg" alt="" /></span>
<p>Donec eget ex magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fergiat. Pellentesque in mi eu massa lacinia malesuada et a elit. Donec urna ex, lacinia in purus ac, pretium pulvinar mauris. Curabitur sapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque venenatis dolor imperdiet dolor mattis sagittis. Praesent rutrum sem diam, vitae egestas enim auctor sit amet. Pellentesque leo mauris, consectetur id ipsum sit amet, fersapien risus, commodo eget turpis at, elementum convallis elit. Pellentesque enim turpis, hendrerit tristique lorem ipsum dolor.</p>
</div>
</section>
</div>
<!-- Footer -->
<footer id="footer" class="wrapper alt">
<div class="inner">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

BIN
images/pic01.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
images/pic02.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/pic03.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB

BIN
images/pic04.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
images/pic05.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
images/pic06.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

162
index.html
View File

@ -6,22 +6,22 @@
-->
<html>
<head>
<title>Hyperspace by HTML5 UP</title>
<title>Welcome to Parley!</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<body>
<!-- Sidebar -->
<section id="sidebar">
<div class="inner">
<nav>
<ul>
<li><a href="#intro">Welcome</a></li>
<li><a href="#one">Who we are</a></li>
<li><a href="#two">What we do</a></li>
<li><a href="#intro">Welcome to Parley!</a></li>
<li><a href="#one">Our services</a></li>
<li><a href="#two">Other services</a></li>
<li><a href="#three">Get in touch</a></li>
</ul>
</nav>
@ -34,11 +34,11 @@
<!-- Intro -->
<section id="intro" class="wrapper style1 fullscreen fade-up">
<div class="inner">
<h1>Hyperspace</h1>
<p>Just another fine responsive site template designed by <a href="http://html5up.net">HTML5 UP</a><br />
and released for free under the <a href="http://html5up.net/license">Creative Commons</a>.</p>
<h1>Welcome to Parley!</h1>
<h3>Free and privacy respecting services, open to all</h3>
<p>Parley provides online services without gathering personal data. It is meant as a more humane and more ethical alternative to the tools often proposed by big data companies. Parley grew out of the Belgian Pirateparty ITSquad, but is meant to be politically neutral. At the moment none of the parley-tools require a login. All of the tools are <a href="https://www.gnu.org/philosophy/free-sw.en.html" target="_blank">free software</a>.</p>
<ul class="actions">
<li><a href="#one" class="button scrolly">Learn more</a></li>
<li><a href="#one" class="button scrolly">Services <span style="display: inline-block; transform: rotate(90deg); -webkit-transform: rotate(90deg);">></span></a></li>
</ul>
</div>
</section>
@ -46,37 +46,61 @@
<!-- One -->
<section id="one" class="wrapper style2 spotlights">
<section>
<a href="#" class="image"><img src="images/pic01.jpg" alt="" data-position="center center" /></a>
<a href="https://poll.parley.be" target="_blank" class="image"><img src="images/pic-poll.png" alt="" data-position="top center" /></a>
<div class="content">
<div class="inner">
<h2>Sed ipsum dolor</h2>
<p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
<h2>Polls</h2>
<p>Polls can be used to create simple polls. There are two types of polls availale, a datetime picker and a simple poll.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn more</a></li>
<li><a href="https://poll.parley.be" target="_blank" class="button">Go to Poll ></a></li>
</ul>
</div>
</div>
</section>
<section>
<a href="#" class="image"><img src="images/pic02.jpg" alt="" data-position="top center" /></a>
<a href="https://share.parley.be" target="_blank" class="image"><img src="images/pic-share.png" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Feugiat consequat</h2>
<p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
<h2>Share</h2>
<p>Share can be used to share files. Simply drag and drop a file and choose how long the file should be available. The file will then be uploaded and you'll be given a link to the file that you can then freely share.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn more</a></li>
<li><a href="https://share.parley.be" target="_blank" class="button">Go to Share ></a></li>
</ul>
</div>
</div>
</section>
<section>
<a href="#" class="image"><img src="images/pic03.jpg" alt="" data-position="25% 25%" /></a>
<a href="https://pad.parley.be" target="_blank" class="image"><img src="images/pic-pad.png" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Ultricies aliquam</h2>
<p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
<h2>Pads</h2>
<p>Pads are a simple word-processor and a good tool for online collaboration. Type the name of the pad you want, if a pad with this name doesn't exist yet a new one will be created, otherwise you go to the existing pad of that name.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn more</a></li>
<li><a href="https://pad.parley.be" target="_blank" class="button">Go to Pad ></a></li>
</ul>
</div>
</div>
</section>
<section>
<a href="https://talk.parley.be" target="_blank" class="image"><img src="images/pic-talk.png" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Talk</h2>
<p>Talk is used for audio conferences and runs in the web browser. To connect you can give any username you wish. There are a fixed number of rooms where you can meet up with people and talk. If you want you can also connect using any mumble client using address: mumble.parley.be and port: 64738.</p>
<ul class="actions">
<li><a href="https://talk.parley.be" target="_blank" class="button">Go to Talk ></a></li>
</ul>
</div>
</div>
</section>
<section>
<a href="https://hextris.parley.be" target="_blank" class="image"><img src="images/pic-hextris.jpg" alt="" data-position="25% 25%" /></a>
<div class="content">
<div class="inner">
<h2>Hextris</h2>
<p>Hextris is a fast paced puzzle game. Because a bit of procrastination every now and then is healthy.</p>
<ul class="actions">
<li><a href="https://hextris.parley.be" target="_blank" class="button">Go to Hextris ></a></li>
</ul>
</div>
</div>
@ -86,43 +110,30 @@
<!-- Two -->
<section id="two" class="wrapper style3 fade-up">
<div class="inner">
<h2>What we do</h2>
<p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
<h2>Other services</h2>
<p>There are other tools freely available from other organisations who also oppose the big-data business model and use and promote free software. Naming them all would be impossible, but we'd like to give a short list of alternatives that may also be interesting.</p>
<div class="features">
<section>
<span class="icon solid major fa-code"></span>
<h3>Lorem ipsum amet</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
</section>
<section>
<span class="icon solid major fa-lock"></span>
<h3>Aliquam sed nullam</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
</section>
<section>
<span class="icon solid major fa-cog"></span>
<h3>Sed erat ullam corper</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
</section>
<section>
<span class="icon solid major fa-desktop"></span>
<h3>Veroeros quis lorem</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
<h3>Video Conference</h3>
<h4>Jitsi</h4>
<p><a href="https://meet.jit.si/" target="_blank">Meet.jit.si</a> is an online video and audio conference platform. You can easily create a room and invite people. There is the option to use video, audio, chat or share your screen or a window. For desktop and laptop you can do all this from the browser, for mobile you'll be redirected to the app store. Meet.jit.si is the server provided by the project and open to use. The French Pirate party has their own instance at <a href="https://jitsi.partipirate.org/" target="_blank">jitsi.partipirate.org</a> and is also open to use.</p>
</section>
<section>
<span class="icon solid major fa-link"></span>
<h3>Urna quis bibendum</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
<span class="icon solid major fa-users"></span>
<h3>Social Networking</h3>
<h4>PPBE Mastodon</h4>
<p><a href="https://mastodon.pirateparty.be/" target="_blank">Mastodon.pirateparty.be</a> is a federated microblogging social network hosted by the Belgian PirateParty, but open to everyone who feels they share the pirate-values and ideas. Because of the nature of federation you are connected through this platform with thousands of other people who can be on their own separate platform. This whole network is called the fediverse. If you don't know where to set up your account on the fediverse, or you don't know where to send people to, mastodon.pirateparty.be is as good a place as any to start.</p>
</section>
<section>
<span class="icon solid major fa-search"></span>
<h3>Internet Search</h3>
<h4>Searx</h4>
<p><a href="https://searx.be/" target="_blank">Searx.be</a> is a metasearch engine, aggregating the results of other search engines while not storing information about its users. When you enter a search query and press enter, it will send the query to several search-engines. It will however strip away as much personal data as possible without compromising results. You can see and change the search-enginges being used in the preferences.</p>
</section>
<section>
<span class="icon major fa-gem"></span>
<h3>Aliquam urna dapibus</h3>
<p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
</section>
</div>
<ul class="actions">
<li><a href="generic.html" class="button">Learn more</a></li>
</ul>
</div>
</section>
@ -130,53 +141,14 @@
<section id="three" class="wrapper style1 fade-up">
<div class="inner">
<h2>Get in touch</h2>
<p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
<div class="split style1">
<section>
<form method="post" action="#">
<div class="fields">
<div class="field half">
<label for="name">Name</label>
<input type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">Message</label>
<textarea name="message" id="message" rows="5"></textarea>
</div>
</div>
<ul class="actions">
<li><a href="" class="button submit">Send Message</a></li>
</ul>
</form>
</section>
<p>Feel free to get in touch to help us out, or because you see problems on the site or with our services, or maybe just to tell us how awesome you think this is! Any feedback, bug reports, and comments are not only welcome, but strongly encouraged ;)</p>
<div class="style1">
<section>
<ul class="contact">
<li>
<h3>Address</h3>
<span>12345 Somewhere Road #654<br />
Nashville, TN 00000-0000<br />
USA</span>
</li>
<li>
<h3>Email</h3>
<a href="#">user@untitled.tld</a>
</li>
<li>
<h3>Phone</h3>
<span>(000) 000-0000</span>
</li>
<li>
<h3>Social</h3>
<h3>Contact</h3>
<ul class="icons">
<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon brands fa-github"><span class="label">GitHub</span></a></li>
<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon brands fa-linkedin-in"><span class="label">LinkedIn</span></a></li>
<li><a href="mailto:ahoy@parley.be" class="icon solid fa-envelope"><span class=""> ahoy@parley.be</span></a></li>
</ul>
</li>
</ul>
@ -191,7 +163,7 @@
<footer id="footer" class="wrapper style1-alt">
<div class="inner">
<ul class="menu">
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
<li><a rel="license" href="http://creativecommons.org/licenses/by/3.0/" target="_blank"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/" target="_blank">Creative Commons Attribution 3.0 Unported License</a>.</li><li>Design: <a href="https://html5up.net/hyperspace" target="_blank">Hyperspace</a> on <a href="http://html5up.net" target="_blank">HTML5 UP</a></li>
</ul>
</div>
</footer>
@ -206,4 +178,4 @@
<script src="assets/js/main.js"></script>
</body>
</html>
</html>