mirror of
https://github.com/safing/web
synced 2025-09-01 18:49:06 +00:00
359 lines
18 KiB
HTML
359 lines
18 KiB
HTML
---
|
|
layout: page
|
|
title: Safing
|
|
---
|
|
|
|
{% include header.html %}
|
|
|
|
<section style="margin-top: 4rem;" id="tools">
|
|
<div class="flex items-center h-full">
|
|
<div class="container mx-auto px-8 sm:px-0 flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0">
|
|
<div class="inline-block max-w-3xl text-center md:text-left">
|
|
<h2 class="text-5xl w-1/1 tracking-tight font-extrabold leading-none py-10">What are the tools we make?</h2>
|
|
<p class="text-md opacity-50">
|
|
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators and VPNs from collecting all your personal [meta] data. Secure your whole computer, not only your web-browser.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10 self-center md:ml-0 lg:ml-16">
|
|
<ul class="md:grid md:grid-cols-3 md:col-gap-10 md:row-gap-10 text-center md:text-left">
|
|
<li class="pt-8 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
|
|
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<g fill="none">
|
|
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 11.182c0 4.541-3.413 8.787-8 9.818-4.587-1.031-8-5.277-8-9.818V7.615c0-.812.491-1.544 1.243-1.851l5-2.046c1.126-.461 2.388-.461 3.514 0l5 2.046C19.509 6.072 20 6.803 20 7.615v3.567z" />
|
|
<path stroke="#446eed" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.25 10.125l-3.75 3.75-2.25-2.25" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 ml-4">
|
|
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
|
|
<p class="mt-4 text-base leading-6 opacity-50 max-w-sm m-auto">
|
|
Stay private while surfing the
|
|
Web with you are in charge of
|
|
where.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto ">
|
|
<svg class="h-8 w-8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<g stroke-linecap="round" stroke-width="1.8" stroke="#446eed" fill="none" stroke-linejoin="round">
|
|
<path d="M13.7678 10.9822c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M19.2538 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M18 12.25c1.533 0 3 .533 4 1.333M8.28177 4.98223c.976311.976311.976311 2.55922 0 3.53553-.976311.976311-2.55922.976311-3.53553 0-.976311-.976311-.976311-2.55922 0-3.53553.976311-.976311 2.55922-.976311 3.53553 0M2 13.583c1-.8 2.467-1.333 4-1.333M16.591 19.75c-1.165-.901-2.839-1.5-4.591-1.5-1.752 0-3.426.599-4.591 1.5" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 ml-4">
|
|
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
|
|
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
|
|
Stay private while surfing the
|
|
Web with you are in charge of
|
|
where.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="pt-10 md:pt-0 transform transition hover:scale-105 duration-150 ease-in-out">
|
|
<div class="flex items-center justify-center pl-2 md:pl-0 h-12 md:w-12 w-auto">
|
|
<svg class="heart h-8 w-8" stroke="#446eed" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M12 5.711C12.689 4.905 13.881 4 15.696 4 18.871 4 21 6.98 21 9.755 21 15.556 13.778 20 12 20c-1.778 0-9-4.444-9-10.245C3 6.98 5.129 4 8.304 4c1.815 0 3.007.905 3.696 1.711z" stroke-linecap="round" stroke-width="1.8" fill="none"
|
|
stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div class="mt-4 ml-4">
|
|
<h5 class="text-2xl leading-6 font-bold text-gray-900">Privacy</h5>
|
|
<p class="mt-4 mt-2 text-base leading-6 opacity-50 max-w-sm m-auto">
|
|
Stay private while surfing the
|
|
Web with you are in charge of
|
|
where.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="margin-top: 20rem;">
|
|
<div class="items-center h-full">
|
|
<div class="container mx-auto px-8 sm:px-0 flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
|
|
<div class="pb-48 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
|
|
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
|
|
</div>
|
|
<div class="inline-block max-w-lg">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">01</span>
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2>
|
|
<p class="text-md opacity-50 max-w-lg">
|
|
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
|
|
and VPNs from collecting all your personal [meta] data. Secure
|
|
your whole computer, not only your web-browser.
|
|
</p>
|
|
<div class="py-10 lg:flex text-center sm:text-left inline-block">
|
|
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
|
<a href="/spn.html">Discover the spn</a>
|
|
</button>
|
|
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
|
|
</div>
|
|
</div>
|
|
<div class="hidden pt-16 lg:pt-0 ml-0 lg:ml-32 lg:block self-center">
|
|
<img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="items-center h-full mt-64">
|
|
<div class="container mx-auto px-8 sm:px-0 flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
|
|
<div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
|
|
<img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
|
|
</div>
|
|
<div class="inline-block max-w-lg">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">02</span>
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All Around System Privacy</h2>
|
|
<p class="text-md opacity-50 max-w-lg">
|
|
Stay private while surfing the Web. Stop ISPs, Wi-Fi Operators
|
|
and VPNs from collecting all your personal [meta] data. Secure
|
|
your whole computer, not only your web-browser.
|
|
</p>
|
|
<div class="py-10 md:flex text-center md:text-left inline-block">
|
|
<button type="button" style="background-color: #000;" class="mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
|
<a href="/portmaster.html">Discover the Portmaster</a>
|
|
</button>
|
|
<a class="inline-flex pl-8 transition duration-150 ease-in-out hover:opacity-100 self-center uppercase opacity-50 text-xs font-bold" href="#">Source code</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="margin-top: 17rem;">
|
|
<div class="items-center h-full">
|
|
<div class="container mx-auto px-8 sm:px-0 flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex text-center lg:text-left">
|
|
<div class="lg:w-2/3">
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10">You be the judge</h2>
|
|
</div>
|
|
<div class="self-center">
|
|
<p class="text-md opacity-50 w-auto mx-auto md:w-2/3">
|
|
Review and inspect everything we do and say: every page, every
|
|
podcast, every line of code, every strategic decision. If you do like
|
|
what we do, please consider helping us by contributing to the
|
|
Safing community.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section style="margin-top: 20rem;">
|
|
<div class="items-center h-full">
|
|
<div class="container mx-auto px-8 sm:px-0 flex">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
|
|
<div class="py-12 bg-white">
|
|
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="lg:text-center">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top">Follow Us</span>
|
|
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center">Blogs & Podcasts</h2>
|
|
</div>
|
|
<div class="mt-32">
|
|
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10">
|
|
<li>
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<a href="">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="mt-10 md:mt-0">
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<a href="">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
|
|
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
|
|
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
|
|
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
|
|
</button>
|
|
</span>
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="mt-10 md:mt-0">
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<a href="">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="mt-10 md:mt-0">
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<a href="">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
|
|
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
|
|
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
|
|
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
|
|
</button>
|
|
</span>
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="mt-10 md:mt-0">
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<a href="">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<span style="font-size: 12rem; font-weight: 800; margin-top: -13.8rem; margin-left: -0.8rem;" class=" z-0 absolute bg-top">
|
|
<button type="button" style="background-color: #6188ff;" class="inline-flex items-center px-4 py-4 rounded-md border border-transparent text-xs leading-5 font-extrabold text-white">
|
|
<svg class="h-8 w-auto lg:h-5 fill-current text-white" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9.41 11">
|
|
<path d="M8.43 4.62l-6.34-4A1 1 0 00.5 1.5v8a1 1 0 001.59.88l6.34-4a1 1 0 000-1.76z" stroke-miterlimit="10" /></svg>
|
|
</button>
|
|
</span>
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
<li class="mt-10 md:mt-0">
|
|
<div class="block transform hover:scale-95 duration-150 ease-in-out">
|
|
<img src="{{ site.img_url }}shapes/podcast_blank.png" alt="">
|
|
<div class="pt-6">
|
|
<span class="opacity-25">4 FEB 2020</span>
|
|
<p>The Two Steps it takes</p>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="py-20 text-center">
|
|
<button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
|
<a href="/blogpod.html">Show me more!</a>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
*{
|
|
font-family: "Roboto";
|
|
}
|
|
|
|
body{
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.shake-horizontal{
|
|
-webkit-animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both;
|
|
animation:shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both
|
|
}
|
|
|
|
@-webkit-keyframes shake-horizontal{
|
|
0%,100%{
|
|
-webkit-transform:translateX(0);
|
|
transform:translateX(0)
|
|
}
|
|
10%,30%,50%,70%{
|
|
-webkit-transform:translateX(-10px);
|
|
transform:translateX(-10px)
|
|
}
|
|
20%,40%,60%{
|
|
-webkit-transform:translateX(10px);
|
|
transform:translateX(10px)}80%
|
|
{
|
|
-webkit-transform:translateX(8px);
|
|
transform:translateX(8px)
|
|
}
|
|
90%{
|
|
-webkit-transform:translateX(-8px);
|
|
transform:translateX(-8px)
|
|
}
|
|
}
|
|
|
|
@keyframes shake-horizontal{
|
|
0%,100%{
|
|
-webkit-transform:translateX(0);
|
|
transform:translateX(0)
|
|
}
|
|
10%,30%,50%,70%{
|
|
-webkit-transform:translateX(-10px);
|
|
transform:translateX(-10px)
|
|
}
|
|
20%,40%,60%{
|
|
-webkit-transform:translateX(10px);
|
|
transform:translateX(10px)
|
|
}
|
|
80%{
|
|
-webkit-transform:translateX(8px);
|
|
transform:translateX(8px)
|
|
}
|
|
90%{
|
|
-webkit-transform:translateX(-8px);
|
|
transform:translateX(-8px)
|
|
}
|
|
}
|
|
|
|
.spin {
|
|
animation-name: spin;
|
|
animation-duration: 21000ms;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform:rotate(0deg);
|
|
}
|
|
to {
|
|
transform:rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.heart {
|
|
animation: .8s infinite beatHeart;
|
|
}
|
|
|
|
@keyframes beatHeart {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
25% {
|
|
transform: scale(1.1);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
60% {
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
#menu-toggle:checked + #menu {
|
|
display: block;
|
|
}
|
|
</style>
|