This merge request solves following issues with the current layout: - **h1 header not instantly visible on the first screen on mobile:** changed the order so it appears before the screenshot gallery - **alternation of text and images looking weird in vertical mobile layout:** removed the alternation on mobile - **services and advantages being spread too wide on desktop:** added space on the sides - **advantages having repetitive layout, supporters repeating the look of services:** added variety with sliding effect and alternating background color, removed card-like background Reviewed-on: #102 Reviewed-by: Inex Code <inex.code@selfprivacy.org> Co-authored-by: nevfy <yaver4.0.0.0@gmail.com> Co-committed-by: nevfy <yaver4.0.0.0@gmail.com>pull/123/head^2
parent
19a0b0f0ca
commit
f5b80082ed
|
|
@ -23,7 +23,6 @@
|
|||
.sp-footer span i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.rounded-img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
|
@ -91,28 +90,18 @@
|
|||
margin-top: 6rem;
|
||||
}
|
||||
|
||||
.sp-supperted-by-img {
|
||||
max-height: 5rem;
|
||||
.sp-supported-by-img {
|
||||
max-width: 15rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.sp-supported-by-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
column-gap: 5vw;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sp-supported-by-card {
|
||||
background: white;
|
||||
box-shadow: $shadow;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
a.nav-link.sp-coming-soon {
|
||||
|
|
@ -129,3 +118,43 @@ a.nav-link.sp-coming-soon {
|
|||
border-radius: .1rem;
|
||||
}
|
||||
}
|
||||
|
||||
html, body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
.sp-advantages {
|
||||
row-gap: 0px;
|
||||
}
|
||||
|
||||
.sp-advantages-header {
|
||||
position: sticky;
|
||||
top: 10vh;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.sp-feature {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sp-feature-green {
|
||||
background-color: #e9f1da !important;
|
||||
}
|
||||
.sp-feature-blue {
|
||||
background-color: #e1eaea !important;
|
||||
}
|
||||
.sp-feature-purple {
|
||||
background-color: #ebe0e8 !important;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
.td-navbar {
|
||||
background: $dark;
|
||||
min-height: 5rem;
|
||||
z-index: 15;
|
||||
.navbar-brand__name {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -192,4 +193,8 @@ li:has(input[type="checkbox"]) {
|
|||
.td-sidebar-toc {
|
||||
padding-top: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next, .carousel-control-prev {
|
||||
background-image: none;
|
||||
}
|
||||
|
|
@ -5,19 +5,10 @@ linkTitle = "SelfPrivacy"
|
|||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section" >}}
|
||||
<div class="row">
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/1-en.png" alt="First slide">
|
||||
|
|
@ -41,6 +32,15 @@ linkTitle = "SelfPrivacy"
|
|||
<img class="d-block w-100" src="/images/screenshots/7-en.png" alt="Seventh slide">
|
||||
</div>
|
||||
</div>
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
|
||||
</ol>
|
||||
<a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
|
|
@ -52,7 +52,7 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 my-auto">
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
<div class="container my-4">
|
||||
<h1>
|
||||
SelfPrivacy app allows you to set up self-hosted services and manage them
|
||||
|
|
@ -65,12 +65,12 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
{{< /blocks/section >}}
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row w-100">
|
||||
<section class="container">
|
||||
<div class="w-100">
|
||||
<h2 class="mx-auto text-center font-weight-bolder">Your personal services</h2>
|
||||
</div>
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">For serious business</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">For entertainment and communication</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -118,8 +118,7 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">For a good life</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -139,47 +138,47 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row w-100">
|
||||
<section class="container-fluid d-flex flex-column sp-advantages">
|
||||
<div class="w-100 sp-advantages-header">
|
||||
<h2 class="mx-auto text-center">Advantages</h2>
|
||||
</div>
|
||||
|
||||
{{< landing-feature privacy "Privacy" >}}
|
||||
{{< landing-feature privacy "Privacy" "-green" >}}
|
||||
<p class="card-text">No registration, cookies or telemetry.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature zerotrust "Zero trust" "right">}}
|
||||
{{< landing-feature zerotrust "Zero trust" "-blue" "right" >}}
|
||||
<p class="card-text">SelfPrivacy is developed on the «zero trust» principle, even in relation to SelfPrivacy developers. That means you're the sole owner of your data.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature security "Security">}}
|
||||
{{< landing-feature security "Security" "-purple" >}}
|
||||
<p class="card-text">Open source. The $2,000 reward for RCE vulnerability significantly increases security compared to conventional self-hosted solutions.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature simplicity "Simplicity" "right">}}
|
||||
{{< landing-feature simplicity "Simplicity" "-green" "right">}}
|
||||
<p class="card-text">It is simple. Without console, complicated instructions, monitoring and involvement of specialists.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature arrow "No license agreements">}}
|
||||
{{< landing-feature arrow "No license agreements" "-blue" >}}
|
||||
<p class="card-text">What is written in the license agreements that you accept without reading? It says that you allow companies to do anything with your data. SelfPrivacy has no license agreements.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature coolhack3r "Save your time and money" "right">}}
|
||||
{{< landing-feature coolhack3r "Save your time and money" "-purple" "right">}}
|
||||
<p class="card-text">How to save $500 or two weeks of your life? Will it take the same time and money for a specialist to set everything up from scratch?</p>
|
||||
<p class="card-text">SelfPrivacy team works continuously to speed up and simplify this process to a few clicks.</p>
|
||||
<p class="card-text">Now anyone will be capable to set up their own data center.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature thisisfine "Functionality">}}
|
||||
{{< landing-feature thisisfine "Functionality" "-green">}}
|
||||
<p class="card-text">Your data will not be lost thanks to regular automatic backups to a separate data center. </p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature smartphonecomparison "Independence" "right">}}
|
||||
{{< landing-feature smartphonecomparison "Independence" "-blue" "right">}}
|
||||
<p class="card-text">Your communications on the internet no longer depend on Google, Facebook, Amazon and others E-Corps.</p>
|
||||
<p class="card-text">Your services, your rules! You will not be blocked or disabled, accidentally or for any other reason. Your infrastructure and data will always remain with you.</p>
|
||||
{{< /landing-feature >}}
|
||||
|
||||
{{< landing-feature datactrl "Data control">}}
|
||||
{{< landing-feature datactrl "Data control" "-purple" >}}
|
||||
<p class="card-text">Why do corporations need your data? To make you buy more and vote as they want. With SelfPrivacy, only you have your data.</p>
|
||||
{{< /landing-feature >}}
|
||||
</section>
|
||||
|
|
@ -190,13 +189,13 @@ linkTitle = "SelfPrivacy"
|
|||
<h2 class="mx-auto text-center">Supported by</h2>
|
||||
</div>
|
||||
|
||||
<div class="card sp-supported-by-card h-100">
|
||||
<div class="card-body sp-supported-by-list">
|
||||
<div class="container-fluid">
|
||||
<div class="sp-supported-by-list">
|
||||
<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
|
||||
<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
|
||||
<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
|
||||
</a>
|
||||
<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
|
||||
<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
|
||||
<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,19 +5,10 @@ linkTitle = "SelfPrivacy"
|
|||
+++
|
||||
|
||||
{{< blocks/section color="dark" type="section">}}
|
||||
<div class="row">
|
||||
<div class="flex-md-row flex-column-reverse d-flex justify-content-center align-content-center">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="container rounded">
|
||||
<div id="screenshotsCarouselControls" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner rounded">
|
||||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/1-ru.png" alt="Первый слайд">
|
||||
|
|
@ -40,8 +31,16 @@ linkTitle = "SelfPrivacy"
|
|||
<div class="carousel-item">
|
||||
<img class="d-block w-100" src="/images/screenshots/7-ru.png" alt="Седьмой слайд">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="1"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="2"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="3"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="4"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="5"></li>
|
||||
<li data-target="#screenshotsCarouselControls" data-slide-to="6"></li>
|
||||
</ol>
|
||||
<a class="carousel-control-prev" href="#screenshotsCarouselControls" role="button"
|
||||
data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
|
|
@ -55,13 +54,13 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-8 my-auto">
|
||||
<div class="col-xs-12 col-md-8 col-lg-6 my-auto">
|
||||
<div class="container my-4">
|
||||
<h1>
|
||||
Приложение SelfPrivacy поможет настроить селфхост-сервисы и управлять ими
|
||||
</h1>
|
||||
<a class="btn btn-lg btn-primary mb-4 mt-4 btn-block sp-button-shadow sp-button-big-padding"
|
||||
href="{{< relref "/download">}}">
|
||||
href="{{< relref "/download" >}}">
|
||||
Скачать
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -69,12 +68,12 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
{{< /blocks/section>}}
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row w-100">
|
||||
<h2 class="mx-auto text-center">Ваши личные сервисы</h2>
|
||||
<section class="container">
|
||||
<div class="w-100">
|
||||
<h2 class="mx-auto text-center font-weight-bolder">Ваши личные сервисы</h2>
|
||||
</div>
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">Для серьезных дел</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -99,7 +98,7 @@ linkTitle = "SelfPrivacy"
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">Для развлечений и общения</h3>
|
||||
</div>
|
||||
|
||||
|
|
@ -107,38 +106,36 @@ linkTitle = "SelfPrivacy"
|
|||
<div class="col-md-4 col-xs-12 sp-services-row">
|
||||
{{< landing-service "/images/services/deltachat.svg" "Мессенджер" >}}
|
||||
<p class="card-text">Самый приватный мессенджер — это тот, у которого серверная часть находится
|
||||
под вашим контролем. Это делает DeltaChat
|
||||
приватнее Telegram и Signal.</p>
|
||||
{{< /landing-service>}}
|
||||
под вашим контролем. Это делает DeltaChat
|
||||
приватнее Telegram и Signal.</p>
|
||||
{{< /landing-service>}}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-xs-12 sp-services-row">
|
||||
{{< landing-service "/images/services/pleroma.svg" "Децентрализованная социальная сеть" >}}
|
||||
<p class="card-text">Pleroma — социальная сеть в которой вы решаете, кого заблокировать и что
|
||||
публиковать. Никакой больше рекламы и слежки.</p>
|
||||
{{< /landing-service>}}
|
||||
публиковать. Никакой больше рекламы и слежки.</p>
|
||||
{{< /landing-service>}}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-xs-12 sp-services-row">
|
||||
{{< landing-service "/images/services/jitsi.svg" "Видеоконференция">}}
|
||||
<p class="card-text">Zoom и Google-meet больше не нужны, когда есть Jitsi-meet. Очень простое и
|
||||
удобное решение для видеоконференций.</p>
|
||||
{{< /landing-service>}}
|
||||
удобное решение для видеоконференций.</p>
|
||||
{{< /landing-service>}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row w-100 mt-5 mb-3">
|
||||
<div class="w-100 mt-5 mb-3">
|
||||
<h3 class="mx-auto text-center">Для хорошей жизни</h3>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-md-4 col-xs-12 sp-services-row">
|
||||
{{< landing-service "/images/services/openconnect.svg" "VPN для друзей и близких" >}}
|
||||
<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере.
|
||||
OpenConnect — подключайте
|
||||
неограниченное количество устройств.</p>
|
||||
{{< /landing-service>}}
|
||||
<p class=" card-text">Ни один публичный VPN не может быть приватным, если только он не расположен на вашем сервере. OpenConnect — подключайте неограниченное количество устройств.</p>
|
||||
{{< /landing-service>}}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-xs-12 sp-services-row">
|
||||
|
|
@ -146,69 +143,69 @@ linkTitle = "SelfPrivacy"
|
|||
<p class="card-text">Пароли больше не нужно запоминать, копировать между устройствами,
|
||||
придумывать или вводить вручную.</p>
|
||||
<p class="card-text">Bitwarden — надежный менеджер паролей для всех устройств.</p>
|
||||
{{< /landing-service>}}
|
||||
{{< /landing-service>}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row w-100">
|
||||
<div class="w-100">
|
||||
<h2 class="mx-auto text-center">Преимущества</h2>
|
||||
</div>
|
||||
|
||||
{{< landing-feature privacy "Приватность">}}
|
||||
{{< landing-feature privacy "Приватность" "-green">}}
|
||||
<p class="card-text">Без регистрации, куков, телеметрии, логов, гугл аналитики и облаков.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature zerotrust "Нулевое доверие" "right">}}
|
||||
{{< landing-feature zerotrust "Нулевое доверие" "-blue" "right">}}
|
||||
<p class="card-text">SelfPrivacy разработан по принципу "нулевого доверия", даже к самим разработчикам SelfPrivacy. Это значит, что вы — единственный владелец своих данных.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature security "Безопасность">}}
|
||||
{{< landing-feature security "Безопасность" "-purple" >}}
|
||||
<p class="card-text">Открытый код. Вознаграждение $2000 за RCE-уязвимость значительно повышает безопасность в сравнении с обычными self-hosted решениями.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature simplicity "Простота" "right">}}
|
||||
{{< landing-feature simplicity "Простота" "-green" "right">}}
|
||||
<p class="card-text">Это работает просто. Без консоли, сложных инструкций, мониторинга и привлечения специалистов.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature arrow "Без лицензионных соглашений">}}
|
||||
{{< landing-feature arrow "Без лицензионных соглашений" "-blue" >}}
|
||||
<p class="card-text">Что написано в лицензионных соглашениях, которые вы принимаете, не читая? Там написано, что с вашими данными можно делать что угодно. В SelfPrivacy нет лицензионных соглашений.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature coolhack3r "Экономия времени, денег и сил" "right">}}
|
||||
{{< landing-feature coolhack3r "Экономия времени, денег и сил" "-purple" "right">}}
|
||||
<p class="card-text">Как сэкономить $500 или две недели жизни? Столько понадобится времени и денег специалисту, чтобы настроить все самому с нуля?</p>
|
||||
<p class="card-text">Команда SelfPrivacy непрерывно работает, чтобы ускорить и упростить этот процесс до нескольких кликов.</p>
|
||||
<p class="card-text">Теперь создание личного дата-центра под силу любому желающему.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature thisisfine "Функционал">}}
|
||||
{{< landing-feature thisisfine "Функционал" "-green">}}
|
||||
<p class="card-text">Ваши данные никуда не пропадут благодаря регулярному автоматическому резервному копированию в отдельный дата-центр.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature smartphonecomparison "Независимость" "right" >}}
|
||||
{{< landing-feature smartphonecomparison "Независимость" "-blue" "right" >}}
|
||||
<p class="card-text">Ваши коммуникации в интернете не зависят от Google, Facebook, Amazon и прочих мегакорпораций.</p>
|
||||
<p class="card-text">Ваши сервисы — ваши правила! Вас не заблокируют, не отключат, случайно или по какой-либо другой причине. Ваша инфраструктура и данные всегда останутся с вами.</p>
|
||||
{{< /landing-feature>}}
|
||||
|
||||
{{< landing-feature datactrl "Контроль данных">}}
|
||||
{{< landing-feature datactrl "Контроль данных" "-purple" >}}
|
||||
<p class="card-text">Почему корпорациям так нужны ваши данные? Чтобы больше покупали, чтобы Вы голосовали, как им нужно. В SelfPrivacy ваши данные остаются только у вас.</p>
|
||||
{{< /landing-feature>}}
|
||||
</section>
|
||||
|
||||
|
||||
<section class="container-fluid">
|
||||
<div class="row w-100">
|
||||
<div class="w-100">
|
||||
<h2 class="mx-auto text-center">Нас поддерживают</h2>
|
||||
</div>
|
||||
|
||||
<div class="card sp-supported-by-card h-100">
|
||||
<div class="card-body sp-supported-by-list">
|
||||
<div class="container-fluid">
|
||||
<div class="sp-supported-by-list">
|
||||
<a href="https://nlnet.nl/project/SelfPrivacy/" target="_blank" rel="noopener noreferrer">
|
||||
<img class="sp-supperted-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
|
||||
<img class="sp-supported-by-img" src="/images/logos/nlnet.svg" alt="NLnet foundation">
|
||||
</a>
|
||||
<a href="https://privacyaccelerator.org" target="_blank" rel="noopener noreferrer">
|
||||
<img class="sp-supperted-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
|
||||
<img class="sp-supported-by-img" src="/images/logos/PrivacyAcceleratorLogo.svg" alt="Privacy Accelerator">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,28 @@
|
|||
{{ $illustration := .Page.Resources.GetMatch (printf "**%s*" (.Get 0)) }}
|
||||
{{ $title := .Get 1 }}
|
||||
{{ $side := .Get 2 }}
|
||||
<div class="row justify-content-md-center my-2 align-items-center w-100">
|
||||
{{ if eq $side "right" }}
|
||||
<div class="col-md-8 col-xs-12 my-auto px-5">
|
||||
{{ $bg := .Get 2 }}
|
||||
{{ $side := .Get 3 }}
|
||||
{{ if eq $side "right" }}
|
||||
<div class="d-flex flex-column flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }} my-auto">
|
||||
<div class="flex-none col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
|
||||
{{ if $title }}
|
||||
<h2 class="sp-feature-title">{{ $title }}</h2>
|
||||
{{ end }}
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{ if $illustration }}
|
||||
<div class="col-md-4 col-xs-12 my-auto">
|
||||
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
|
||||
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
|
||||
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<div class="d-flex flex-column-reverse flex-lg-row flex-xl-row justify-content-center align-items-center sp-feature sp-feature{{ $bg }}">
|
||||
{{ if $illustration }}
|
||||
<div class="col-md-4 col-xs-12 my-auto">
|
||||
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}" alt="">
|
||||
<div class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
|
||||
<img class="card-img-top rounded-img" src="{{ $illustration.RelPermalink }}">
|
||||
</div>
|
||||
{{ end }}
|
||||
<div class="col-md-8 col-xs-12 my-auto px-5">
|
||||
<div class="col-xl-4 col-lg-6 col-md-8 col-xs-12 px-5">
|
||||
{{ if $title }}
|
||||
<h2 class="sp-feature-title">{{ $title }}</h2>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@
|
|||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.0",
|
||||
"postcss": "^8.3.7",
|
||||
"postcss-cli": "^9.0.2"
|
||||
"postcss-cli": "^9.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue