1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-12 15:09:08 +00:00
safing-web/index.html
2019-07-11 14:48:10 +02:00

217 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Safing
home: true
---
<!DOCTYPE html>
<html lang={{ site.lang }}>
<head>
{% include head.html %}
</head>
<body>
{% include header.html home=true %}
{% include floating_button.html heightref="portmaster" download=true %}
<div class='content' style=''>
<div style='position: absolute; top: 0; width: 100%;'>
<div id="banner-background" style='width: 100%; background-image: url("/assets/img/landscape.png"); background-size: cover; background-repeat: no-repeat; background-position: center bottom; height: 100vh;'>
<!-- learnmore icon -->
<a id="learnmore-icon" class="ui bottom mobile-hidden" href="#portmaster" style='position: absolute; bottom: 50%; right: 2%; z-index:100;'>
<i class='angle double down icon' style='color: #f39200; font-size: 3rem;'></i>
</a>
<!-- <div class="ui grid mobile-hidden" style='position: absolute; bottom: 50%; left: 0%;'>
<div class="four wide column">
<img src='{{ site.assets_url }}img/icons/community_logo.svg' style="height: 4rem;">
</div>
<div class="twelve wide column" style="padding: 38px 0 0 10px; z-index: 100;">
<a class="ui bottom" href="/community-hub">
<button class='ui safing-primary button' >
Join our community
</button>
</a>
</div>
</div> -->
</div>
<div id="banner-transition" style='width: 100%; height: 100vh; background-image: url("/assets/img/landscape_footer.png"); background-size: contain; background-repeat: no-repeat; background-position: center top -4px;'></div>
</div>
<div id="banner-content" class='ui grid' style="height: 110vh;">
<div class='computer only sixteen wide column' style='height: 10rem;'></div>
<div class='tablet only sixteen wide column' style='height: 8rem;'></div>
<div class='mobile only sixteen wide column' style='height: 5rem;'></div> -->
<div class='computer tablet only two wide column'></div>
<div class='ten wide column' style="height: 80%; z-index: 100;">
<h1 class='ui inverted header' style="margin: 10px;">
Take Back Control of Your Data!
</h1>
<a href="/download">
<button class='ui safing-primary large button' style="margin: 5px 0px 5px 10px;">
Download
</button>
</a>
<a href="#portmaster">
<button id="learnmore-button" class='ui safing-secondary large button' style="margin: 5px 0px 5px 10px;">
Learn more
</button>
</a>
</div>
</div>
<!-- Widescreen lighthouse -->
<div class="or-lower-hidden" style='position: absolute; bottom: 15.5rem; width: 100%;'>
<div style='background-image: url("/assets/img/lighthouse.png");background-repeat: no-repeat; background-position: right bottom; height: 200rem; background-size: 45%;'>
</div>
</div>
<!-- lighthouse -->
<div class="mobile-hidden tablet-hidden widescreen-hidden" style='position: absolute; bottom: 15.5rem; width: 100%;'>
<div style='background-image: url("/assets/img/lighthouse.png");background-repeat: no-repeat; background-position: right bottom; height: 200rem; background-size: 45%;'>
</div>
</div>
<!-- Tablet lighthouse -->
<div class="mobile-hidden computer-hidden large-screen-hidden widescreen-hidden" style='position: absolute; bottom: 13rem; width: 100%;'>
<div style='background-image: url("/assets/img/lighthouse_mobile.png");background-repeat: no-repeat; background-position: right bottom; height: 40rem; background-size: 45%;'>
</div>
</div>
<!-- Mobile lighthouse -->
<div class="computer-hidden tablet-hidden large-screen-hidden widescreen-hidden" style='position: absolute; bottom: 19.5rem; width: 100%;'>
<div style='background-image: url("/assets/img/lighthouse_mobile.png");background-repeat: no-repeat; background-position: right bottom; height: 40rem; background-size: 45%;'>
</div>
</div>
<div class='ui container'>
<div class='ui basic segment' id="portmaster">
<div class='ui middle aligned centered grid'>
<div class='mobile tablet only column' style='width: 9rem;'>
<img class='ui fluid medium right floated image' src='{{ site.assets_url }}img/portmasterhandy.png'>
</div>
<div class='ten wide computer sixteen wide mobile column'>
<h2>
Portmaster - Application Firewall
</h2>
<p>
The Portmaster enables you to protect your data on your device. You are back in charge of your outgoing connections: you choose what data you share and what data stays private.
</p>
<a href="/technology#portmaster">
<button class='ui safing-secondary button'>
Technical Details
</button>
</a>
<a href="/portmaster">
<button class='ui safing-secondary button'>
Feature Tour
</button>
</a>
<a href='/download'>
<button class='ui safing-primary button'>
Download
</button>
</a>
</div>
<div class='computer only six wide column' style='width: 15rem;'>
<img class='ui fluid medium right floated image' src='{{ site.assets_url }}img/portmasterbig.png'>
</div>
</div>
</div>
<div class='ui basic segment'>
<div class='ui middle aligned centered grid'>
<div class='computer only six wide column' style='width: 15rem;'>
<img class='ui fluid medium image' src='{{ site.assets_url }}img/gate17.png'>
</div>
<div class='mobile tablet only column' style='width: 9rem;'>
<img class='ui fluid medium image' src='{{ site.assets_url }}img/gate17.png'>
</div>
<div class='ten wide computer sixteen wide mobile right aligned column'>
<h2>
Gate17 is your secure network
</h2>
<p>
Stay private while surfing the Web with Gate17. Now you are in charge of where your traffic is going: you can handle connections separately, choosing where each shall leave the network.
<br/>
<br/>
It gives you the power to appear at multiple places on the web at once!
</p>
<a href="/technology#gate17">
<button class='ui safing-secondary right floated button'>
Technical Details
</button>
</a>
<a href="/files/whitepaper/Gate17.pdf" target="_blank">
<button class='ui safing-secondary right floated button'>
Whitepaper
</button>
</a>
</div>
</div>
</div>
<div class='ui basic padded segment'>
<div class='ui middle aligned centered grid'>
<div class='mobile tablet only column' style='width: 13rem;'>
<img class='ui fluid image' src='{{ site.assets_url }}img/box.png'>
</div>
<div class='ten wide computer sixteen wide mobile column'>
<h2>
Privacy First
</h2>
<p>
For us, privacy isn't just a feature it's the foundation we build our products on. We make sacrifices on all other fronts to protect your privacy and push the limits of technology to do so.
</p>
<a href="/our-values#privacy-first">
<button class='ui safing-secondary button'>
Learn more
</button>
</a>
</div>
<div class='computer only six wide column' style='width: 20rem; padding: 0;'>
<img class='ui fluid image' src='{{ site.assets_url }}img/box.png'>
</div>
</div>
</div>
<div class='ui basic padded segment'>
<div class='ui middle aligned centered grid'>
<div class='computer only six wide column' style='width: 20rem; padding: 0;'>
<img class='ui fluid image' src='{{ site.assets_url }}img/message_in_a_bottle.png'>
</div>
<div class='mobile tablet only column' style='width: 13rem;'>
<img class='ui fluid image' src='{{ site.assets_url }}img/message_in_a_bottle.png'>
</div>
<div class='ten wide computer sixteen wide mobile right aligned column'>
<h2>
Open Source & Ethical Funding
</h2>
<p>
Transparency is a key value for us, therefore we release our code open source. To truly be a privacy first company, we also believe that we must be open about all our financial influences & partnerships.
</p>
<a href="/our-values#open-source">
<button class='ui safing-secondary right floated button'>
Learn more
</button>
</a>
</div>
</div>
</div>
<div class='ui basic segment' style='padding-bottom: 5rem;'>
<div class='ui middle aligned grid'>
<div class='eight wide computer sixteen wide mobile column'>
<h2>
Community
</h2>
<p>
Privacy isn't a "one shoe fits all" kind of thing. And we do not claim to have an all-encompassing solution. You will need more than what we provide to get the best privacy possible. So, we create spaces where you can talk about all things privacy.
</p>
<a href="/community-hub">
<button class='ui safing-primary button'>
Join our community
</button>
</a>
</div>
</div>
</div>
</div>
{% include community_snippet.html %}
{% include footer.html %}
</div>
</body>
<foot>
{% include foot.html %}
</foot>
</html>