Update showcase-container layout

This commit is contained in:
Luke 2022-01-25 03:38:33 +01:00
parent d938e3e52a
commit 85e4a902bd

View file

@ -6,56 +6,59 @@ title: Safing - Love Freedom
{% include header.html %} {% include header.html %}
<section class="space-y-80 mt-40"> <section class="space-y-80 mt-40">
<div class="showcase-container"> <div class="showcase-container-reverse">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 1050px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <img src="{{ site.img_url }}/page-specific/portmaster/monitor-network-activity.png" alt="">
</div>
<div class="showcase-right">
<div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
<i class="icon-info text-md"></i> <i class="icon-info text-md"></i>
<span>Alpha Software: Portmaster is in active development</span> <span>Alpha Software: Portmaster is in active development</span>
</div> </div>
<h2 class="showcase-left-title" style="max-width: 350px;"> <h2 class="showcase-right-title" style="max-width: 350px;">
Monitor All Network Activity Monitor All Network Activity
</h2> </h2>
<p class="showcase-left-desc"> <p class="showcase-right-desc">
Discover everything that is happening on your computer. Expose every Discover everything that is happening on your computer. Expose every
connection your applications make and detect evil ones. Finally get connection your applications make and detect evil ones. Finally get
the power to act accordingly. the power to act accordingly.
</p> </p>
<a class="btn-secondary" href="#">Discover the portmaster</a> <a class="btn-secondary" href="#">Discover the portmaster</a>
</div> </div>
<div class="showcase-right" style="max-width: 1050px;">
<img src="{{ site.img_url }}/page-specific/portmaster/monitor-network-activity.png" alt="">
</div> </div>
<div class="showcase-container">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}/page-specific/portmaster/block-trackers-system-wide.png" alt="">
</div> </div>
<div class="showcase-container-reverse"> <div class="showcase-right">
<div class="showcase-left"> <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<i class="icon-info text-md"></i> <i class="icon-info text-md"></i>
<span>Alpha Software: Portmaster is in active development</span> <span>Alpha Software: Portmaster is in active development</span>
</div> </div>
<h2 class="showcase-left-title" style="max-width: 350px;"> <h2 class="showcase-right-title" style="max-width: 350px;">
Block Trackers System-Wide Block Trackers System-Wide
</h2> </h2>
<p class="showcase-left-desc"> <p class="showcase-right-desc">
Protect your whole computer, not just your browser. Block all Protect your whole computer, not just your browser. Block all
advertisements and trackers for every application. Easily add advertisements and trackers for every application. Easily add
your own rules and block individual domains. your own rules and block individual domains.
</p> </p>
<a class="btn-secondary" href="#">Discover the portmaster</a> <a class="btn-secondary" href="#">Discover the portmaster</a>
</div> </div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}/page-specific/portmaster/block-trackers-system-wide.png" alt="">
</div> </div>
<div class="showcase-container-reverse">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}/page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
</div> </div>
<div class="showcase-container "> <div class="showcase-right">
<div class="showcase-left"> <div class="alert-tiny w-max pr-6 bg-safing-blue-600" style="margin-left: 0;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<i class="icon-info text-md"></i> <i class="icon-info text-md"></i>
<span>Alpha Software: Portmaster is in active development</span> <span>Alpha Software: Portmaster is in active development</span>
</div> </div>
<h2 class="showcase-left-title" style="max-width: 350px;"> <h2 class="showcase-right-title" style="max-width: 350px;">
Set Global & perApp Settings Set Global & perApp Settings
</h2> </h2>
<p class="showcase-left-desc"> <p class="showcase-right-desc">
Make your own rules. Completely cut off applications from the Make your own rules. Completely cut off applications from the
Internet. Or block all p2p connections except for certain apps. Internet. Or block all p2p connections except for certain apps.
Or never connect to specific countries. The Portmaster has you Or never connect to specific countries. The Portmaster has you
@ -63,10 +66,8 @@ title: Safing - Love Freedom
</p> </p>
<a class="btn-secondary" href="#">Discover the portmaster</a> <a class="btn-secondary" href="#">Discover the portmaster</a>
</div> </div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}/page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
</div>
</div> </div>
<div class="blogpod-container"> <div class="blogpod-container">
<div class="blogpod-container-top"> <div class="blogpod-container-top">
<span class="blogpod-container-top-bg-title">Follow Us</span> <span class="blogpod-container-top-bg-title">Follow Us</span>