safing-web/safing.html
2018-09-14 16:10:36 +02:00

163 lines
7.1 KiB
HTML

---
title: Safing
---
<!DOCTYPE html>
<html lang={{ site.lang }}>
<head>
{% include head.html %}
</head>
<body>
{% include header.html home=true %}
{% include floating_button.html download=true %}
<div class='content' style='background-image: url("/assets/img/shortlandscape.png"); background-size: 100%;background-repeat: no-repeat;'>
<div class='ui grid'>
<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'>
<h1 class='ui inverted header' style="margin: 10px;">
Balalalalal Mannn
</h1>
<a href="/download">
<button class='ui inverted safing-active large button' style="margin: 5px 0px 5px 10px;">
Download
</button>
</a>
<a href="#one">
<button class='ui safing-secondary inverted large button' style="margin: 5px 0px 5px 10px;">
Learn more
</button>
</a>
</div>
<div class='tablet only sixteen wide center aligned column' style='padding-top: 10rem;'></div>
<div class='computer only sixteen wide center aligned column' style='padding-top: 18rem;'>
<i class='ui chevron down icon' style='color: #f0903f80; font-size: 4rem;'></i>
</div>
</div>
<div style='background-image: url("/assets/img/lighthouse.png"); background-position: bottom right; background-repeat: no-repeat; background-size: 44%;'>
<div class='ui container'>
<div class='ui basic segment' id="one">
<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="/technology">
<button class='ui safing-secondary button'>
Technical Details
</button>
</a>
</div>
<div class='computer only 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 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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="/technology">
<button class='ui safing-secondary right floated button'>
Technical Details
</button>
</a>
</div>
</div>
</div>
<div class='ui basic 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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="/our-values">
<button class='ui safing-secondary button'>
Learn more
</button>
</a>
</div>
<div class='computer only 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 segment'>
<div class='ui middle aligned centered grid'>
<div class='computer only 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 Ehtical Funding
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="/our-values">
<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>
Comunity
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<a href="/community-hub">
<button class='ui safing-secondary button'>
Join
</button>
</a>
</div>
</div>
</div>
</div>
</div>
{% include community_snippet.html %}
{% include footer.html %}
</div>
</body>
<foot>
{% include foot.html home=true %}
<script src='{{ site.assets_url }}js/home.js'></script>
</foot>
</html>