mirror of
https://github.com/safing/web
synced 2025-04-25 13:19:08 +00:00
Update project to newest tailwind html/css of Luke
This commit is contained in:
davegson
parent
aee7de1696
commit
6c10ea53b4
7 changed files with 129 additions and 143 deletions
|
|
@ -9,6 +9,18 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-md flex">
|
||||
<input type="checkbox">
|
||||
<div class="ml-3">
|
||||
<label class="consent opacity-50 text-white">
|
||||
I agree that Safing &
|
||||
<a class="text-blue-400" href="https://rapidmail.de" target="_blank">
|
||||
rapidmail.de
|
||||
</a>
|
||||
may proccess and use the email for newsletter purposes.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center lg:text-left container mx-auto px-8">
|
||||
<div class="w-full flex flex-col md:flex-row py-6 ">
|
||||
|
|
|
|||
31
_includes/header.html
Normal file
31
_includes/header.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<header class="h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url({{ site.img_url }}header.png">
|
||||
<img class="-z-0 pt-16 absolute hidden md:block" style="z-index: -1;" src="" alt="">
|
||||
<div class="flex items-center h-full">
|
||||
<div class="container mx-auto sm:px-8 sm:px-0">
|
||||
<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="inline-block text-center md:text-left lg:mr-12 lg:mt-20">
|
||||
<h2 class="py-10 text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl leading-none md:text-6xl md:mx-auto">
|
||||
<span style="color: #6188ff;">Fight surveillance</span> because you <span style="color: #6188ff;">love freedom</span>.
|
||||
</h2>
|
||||
<p style="max-width: 440px;" class="text-md opacity-50 max-w-4xl mx-auto md:mx-0">
|
||||
Without privacy there is no free press, no free speech,
|
||||
not even freedom of thought. Take back your freedom.
|
||||
</p>
|
||||
<div class="py-10 sm:py-10 md:flex text-center">
|
||||
<button type="button" class="bg-black mb-5 md:mb-0 transform hover:scale-95 inline-flex items-center px-5 px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">
|
||||
<a href="#tools">
|
||||
discover our tools
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lg:pb-0 m0-0 lg:ml-0 self-center">
|
||||
<!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md max-w-full max-h-auto transform lg:scale-125" playsinline="" preload="auto" src="../videos/spn/interim.mp4" controls autoplay muted loop></video> -->
|
||||
<img class="transform lg:scale-150 lg:ml-16 max-w-auto" src="{{ site.img_url }}freedom.gif" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -19,47 +19,47 @@
|
|||
</svg>
|
||||
</label>
|
||||
<input class="hidden" type="checkbox" id="menu-toggle" />
|
||||
<div class="hidden w-full text-center lg:flex lg:items-center lg:w-auto " id="menu">
|
||||
<div class="hidden w-full text-center lg:flex lg:items-center lg:w-auto" id="menu">
|
||||
<nav>
|
||||
<ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0">
|
||||
<ul class="lg:flex items-center justify-between text-base text-gray-700 pt-4 lg:pt-0 text-center ">
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="{{ site.spn_url }}" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<a href="{{ site.spn_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
SPN
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="{{ site.portmaster_url }}" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<a href="{{ site.portmaster_url }}" class="ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Portmaster
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="{{ site.spn_url }}#pricing" class="ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<a href="{{ site.spn_url }}#pricing" class="ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="{{ site.about_url }}" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<a href="{{ site.about_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li class="p-3 lg:p-0 text-white text-lg lg:text-sm">
|
||||
<a href="{{ site.help_url }}" class=" ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
<a href="{{ site.help_url }}" class=" ml-0 lg:ml-4 px-3 py-2 font-semibold leading-5 hover:opacity-50 transition duration-150 ease-in-out opacity-100">
|
||||
Get Help
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="block p-5 lg:flex lg:p-0 items-center">
|
||||
<span class="hidden sm:block ml-3 rounded-md">
|
||||
<button type="button" class="hidden lg:block px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
<span class="hidden sm:block ml-3 mr-2 rounded-md">
|
||||
<button type="button" class="hidden lg:block px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-in-out">
|
||||
Sign In
|
||||
</button>
|
||||
</span>
|
||||
<span class="sm:ml-3 rounded-md">
|
||||
<span class="sl-3 rounded-md ml-auto mr-auto">
|
||||
<button type="button" style="background-color: #6188ff;" class="w-full transform hover:scale-105 lg:inline-flex px-10 py-2 border border-transparent text-lg lg: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">
|
||||
Sign Up
|
||||
</button>
|
||||
</span>
|
||||
<span class="hidden sm:block ml-3 rounded-md">
|
||||
<span class="ml-3 rounded-md">
|
||||
<button type="button" class="mr-auto ml-auto block lg:hidden px-4 py-2 border border-black text-lg lg:text-xs leading-5 font-semibold rounded-md text-white opacity-50 bg-black hover:opacity-100 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50 active:text-gray-800 transition duration-150 ease-in-out">
|
||||
Sign In
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
<body class="antialiased font-semibold">
|
||||
<body class="antialiased font-medium">
|
||||
{% include nav.html %}
|
||||
{{ content }}
|
||||
{% include footer.html %}
|
||||
|
|
|
|||
BIN
assets/img/freedom.gif
Normal file
BIN
assets/img/freedom.gif
Normal file
Binary file not shown.
|
After 
(image error) Size: 9.5 MiB |
Binary file not shown.
|
Before 
(image error) Size: 116 KiB After 
(image error) Size: 62 KiB
|
205
index.html
205
index.html
|
|
@ -3,45 +3,8 @@ layout: page
|
|||
title: Safing
|
||||
---
|
||||
|
||||
<header class="h-screen bg-local bg-no-repeat bg-cover bg-center" style="background-image: url({{ site.img_url }}header.png)">
|
||||
<div class="flex items-center h-full">
|
||||
<div class="container mx-auto px-8 sm:px-0">
|
||||
<div class="text-center">
|
||||
<h2 class="text-5xl tracking-tight font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl md:mx-auto md:w-2/3">
|
||||
We <span style="color: #6188ff;">fight surveillance</span> because we <span style="color: #6188ff;">love freedom</span>.
|
||||
</h2>
|
||||
<p class="pt-10 sm:pt-5 text-base text-black opacity-50 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-8 md:text-xl">
|
||||
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>
|
||||
<div class="pt-12 sm:mt-8 sm:flex sm:justify-center sm:pt-5">
|
||||
<div class="shake-horizontal">
|
||||
<a href="#tools" class="transform hover:scale-95 w-full flex justify-center px-8 py-4 border border-transparent leading-5 rounded-full text-white bg-black transition duration-150 ease-in-out md:text-sm md:px-10 uppercase">
|
||||
discover our tools
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-end pt-16 max-w-3xl mx-auto">
|
||||
<span class="opacity-25">Supported by</span>
|
||||
<div class="flex grid grid-flow-col justify-between my-3 opacity-75 items-center">
|
||||
<a href="">
|
||||
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/esa_dark.png" alt="">
|
||||
</a>
|
||||
<a href="">
|
||||
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/excellence_dark.png" alt="">
|
||||
</a>
|
||||
<a href="">
|
||||
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/ffg_dark.png" alt="">
|
||||
</a>
|
||||
<a href="">
|
||||
<img class="scale-75 md:scale-100 transform hover:scale-95 hover:opacity-50 transition duration-150 ease-in-out" src="{{ site.img_url }}external/logos/netidee_small_dark.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% 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">
|
||||
|
|
@ -294,123 +257,103 @@ title: Safing
|
|||
</section>
|
||||
|
||||
<style>
|
||||
.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
|
||||
*{
|
||||
font-family: "Roboto";
|
||||
}
|
||||
|
||||
@-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)
|
||||
}
|
||||
body{
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@keyframes shake-horizontal {
|
||||
.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
|
||||
}
|
||||
|
||||
0%,
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0)
|
||||
}
|
||||
@-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)
|
||||
}
|
||||
}
|
||||
|
||||
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: 5000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
animation-name: spin;
|
||||
animation-duration: 21000ms;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
from {
|
||||
transform:rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.heart {
|
||||
animation: 1.8s infinite beatHeart;
|
||||
animation: .8s infinite beatHeart;
|
||||
}
|
||||
|
||||
@keyframes beatHeart {
|
||||
0% {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
25% {
|
||||
}
|
||||
25% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
40% {
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
60% {
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
100% {
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu-toggle:checked+#menu {
|
||||
#menu-toggle:checked + #menu {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue