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
Download Patch File Download Diff File Expand all files Collapse all files

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>