vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 18:49:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update header

Browse source
This commit is contained in:
Luke 2022-06-27 12:13:33 +02:00
parent f5cdd2f74c
commit 198655f3a3
1 changed files with 68 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
spn/index.html
View file

@ -11,39 +11,75 @@ layout: page
from current speeds and features from current speeds and features
</span> </span>
</a> </a>
<header class="header-one-container-reverse mb-64 mt-36"> <header class="header-two-container mb-64 mt-20">
<div class="header-one-left pl-12"> <div class="header-two-top">
<h1 class="header-one-left-title lg:max-w-md"> <div class="alert max-w-md bg-transparent mx-auto">
Safing Privacy Network <i class="icon-add text-xl" style="color: rgba(46, 98, 255, 1);"></i>
</h1> <span style="color: rgba(0, 0, 0, 0.6);" class="text-md">Portmaster Add-on</span>
<p class="header-one-left-desc"> </div>
With the SPN you protect all your connections from mass <h1 class="header-two-top-title" style="margin-top: 0.3rem;">
surveillance. Prevent all Internet Service Providers It's Time to <span class="text-safing-blue-600">Ditch VPN's</span>
from collecting and selling your private activities. </h1>
</p> <p class="header-two-top-desc" style="max-width: 650px;">
<div class="col-container w-full text-center lg:w-max lg:text-left"> Stop paying for out-dated technology that was never intended to protect your privacy.
<a class="btn-primary" href="#pricing">Get started</a> Get peace of mind with the SPN. Built from scratch and designed to truly protect your privacy
<a class="btn-tertiary" href="{{ site.portmaster_url }}">Built into the Portmaster</a> from mass surveillance.
</div> </p>
</div> </div>
<div class="header-one-right"> <div class="header-two-bottom" style="margin-top: 3.5rem;">
<span style="font-size: 12rem; font-weight: 800; margin-top: -5rem; margin-left: 6rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125"> <div class="element-x-center max-w-sm md:max-w-4xl">
<img src="{{ site.img_url }}shapes/circle-md.png" alt=""> <div class="package-billing">
</span> <div class="package-billing-line-left"></div>
<div class="card"> <span class="package-billing-center">Billing: <span class="text-safing-blue-600">One-Time Payment</span></span>
<div class="rounded-2xl overflow-hidden"> <div class="package-billing-line-right"></div>
<video class="max-w-2xl" preload="auto" </div>
src="{{ site.assets_server_url }}spn/feature-tour.mp4" <div class="grid md:grid-cols-2 space-y-3 space-x-3 mt-12 justify-center justify-items-center">
poster="{{ site.assets_server_url }}spn/feature-tour-poster.png" <div>
controls> <div class="card-package most-popular card-shadow">
</video> <div class="card-package-most-popular">
</div> <span>Most Popular</span>
<div class="card-package most-popular card-shadow"> </div>
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Per Month</span>
<span tooltip="Comparaed to Beta Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 39%</span>
</div>
<span class="card-package-top-amount">
9.90€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Month </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="https://account.safing.io/plans/1/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
<div>
<div class="card-package">
<div class="card-package-top">
<div class="flex">
<span class="card-package-top-title">Per Year</span>
<span tooltip="Comparaed to Beta Prices" class="ml-auto bg-safing-gray-100 text-center rounded-full px-5 py-1 inline-flex text-sm">Save 63%</span>
</div>
<span class="card-package-top-amount">
99.00€
</span>
</div>
<div class="card-package-middle space-y-4">
<span class="card-package-middle-includes-feature"> Use SPN for 1-Year </span>
</div>
<div class="card-package-bottom">
<a class="btn-secondary w-full justify-center" href="https://account.safing.io/plans/1/subscribe">Buy Package</a>
</div>
</div>
<span class="element-x-center-max mt-4 text-sm">Billing does <strong>NOT</strong> auto-renew</span>
</div>
</div>
</div>
</div> </div>
<span style="font-size: 12rem; font-weight: 800; margin-top: -4.5rem; margin-left: -3rem; z-index: -1;" class="absolute transform scale-50 lg:scale-125">
<img src="{{ site.img_url }}shapes/circle-sm.png" alt="">
</span>
</div>
</header> </header>
<section class="general-layout"> <section class="general-layout">
<div class="intro-container mt-32"> <div class="intro-container mt-32">