Update showcase-container layout

This commit is contained in:
Luke 2022-01-25 03:39:41 +01:00
parent 4b5759f4c9
commit b0ba306673

View file

@ -43,135 +43,138 @@ redirect_from:
</div>
</header>
<section class="space-y-80 mt-60">
<div class="showcase-container">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container-reverse">
<div class="showcase-left" style="max-width: 1050px;">
<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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 350px;">
<h2 class="showcase-right-title" style="max-width: 350px;">
Monitor All Network Activity
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
Discover everything that is happening on your computer. Expose every
connection your applications make and detect evil ones. Finally get
the power to act accordingly.
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</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-reverse">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 350px;">
<h2 class="showcase-right-title" style="max-width: 350px;">
Block Unwanted Connections
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
Many programs connect to the Internet without your knowledge. When you
find unwanted connections, you can now simply block them.
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/manually-allow-ord-block-connections.png" alt="">
</div>
</div>
<div class="showcase-container">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container-reverse">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}/page-specific/portmaster/block-trackers-system-wide.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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 450px;">
<h2 class="showcase-right-title" style="max-width: 450px;">
Auto-Block via Selected Filter Lists
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
Automatically block ads, trackers and malware hosts via trusted domain-lists,
which are also used by Ad-Blockers, etc. Easily change the defaults to fit
your needs.
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</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">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 350px;">
<h2 class="showcase-right-title" style="max-width: 350px;">
Enforce Secure DNS
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
Even with invasive connections gone, you do not want to share your dns requests
out in the open. With the Portmaster, you can easily re-route all your dns
queries to a DNS-over-TLS provider of your choice.
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/enforce-dns-over-tls.png" alt="">
</div>
</div>
<div class="showcase-container">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container-reverse">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 350px;">
<h2 class="showcase-right-title" style="max-width: 350px;">
Explore the Docs and Source Code
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
In the age of Mass Surveillance, what good is a service when you cannot see what
it is really doing? We believe in open source. We also document everything
as good as we can.
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/explore-the-docs-and-source-code.png" alt="">
</div>
</div>
<div class="showcase-container-reverse">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<div class="showcase-container">
<div class="showcase-left" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/configure-settings-for-different-networks.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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 550px;">
<h2 class="showcase-right-title" style="max-width: 550px;">
Configure Settings for Different Networks
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
The Wi-Fi in your local coffee shop is riskier than yours at home. Set up your
settings for different networks and then simply press a button when changing
location. All settings will adjust immediately
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</div>
<div class="showcase-right" style="max-width: 850px;">
<img src="{{ site.img_url }}page-specific/portmaster/configure-settings-for-different-networks.png" alt="">
</div>
</div>
<div class="showcase-container ">
<div class="showcase-left">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;">
<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 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>
<span>Alpha Software: Portmaster is in active development</span>
</div>
<h2 class="showcase-left-title" style="max-width: 350px;">
<h2 class="showcase-right-title" style="max-width: 350px;">
Set Global & perApp Settings
</h2>
<p class="showcase-left-desc">
<p class="showcase-right-desc">
Make your own rules. Completely cut off applications from the
Internet. Or block all p2p connections except for certain apps.
Or never connect to specific countries. The Portmaster has you
@ -179,9 +182,6 @@ redirect_from:
</p>
<a class="btn-secondary" href="#">Discover the portmaster</a>
</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 class="download-container">
<h2 class="download-container-title">