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> </div>
</header> </header>
<section class="space-y-80 mt-60"> <section class="space-y-80 mt-60">
<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>
<div class="showcase-container-reverse"> <div class="showcase-container">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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 Unwanted Connections Block Unwanted Connections
</h2> </h2>
<p class="showcase-left-desc"> <p class="showcase-right-desc">
Many programs connect to the Internet without your knowledge. When you Many programs connect to the Internet without your knowledge. When you
find unwanted connections, you can now simply block them. find unwanted connections, you can now simply block them.
</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/manually-allow-ord-block-connections.png" alt="">
</div>
</div> </div>
<div class="showcase-container"> <div class="showcase-container-reverse">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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: 450px;"> <h2 class="showcase-right-title" style="max-width: 450px;">
Auto-Block via Selected Filter Lists Auto-Block via Selected Filter Lists
</h2> </h2>
<p class="showcase-left-desc"> <p class="showcase-right-desc">
Automatically block ads, trackers and malware hosts via trusted domain-lists, 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 which are also used by Ad-Blockers, etc. Easily change the defaults to fit
your needs. your needs.
</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>
<div class="showcase-container-reverse"> <div class="showcase-container">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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;">
Enforce Secure DNS Enforce Secure DNS
</h2> </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 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 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. queries to a DNS-over-TLS provider of your choice.
</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/enforce-dns-over-tls.png" alt="">
</div>
</div> </div>
<div class="showcase-container"> <div class="showcase-container-reverse">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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;">
Explore the Docs and Source Code Explore the Docs and Source Code
</h2> </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 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 it is really doing? We believe in open source. We also document everything
as good as we can. as good as we can.
</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/explore-the-docs-and-source-code.png" alt="">
</div>
</div> </div>
<div class="showcase-container-reverse"> <div class="showcase-container">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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: 550px;"> <h2 class="showcase-right-title" style="max-width: 550px;">
Configure Settings for Different Networks Configure Settings for Different Networks
</h2> </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 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 settings for different networks and then simply press a button when changing
location. All settings will adjust immediately location. All settings will adjust immediately
</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/configure-settings-for-different-networks.png" alt="">
</div>
</div> </div>
<div class="showcase-container "> <div class="showcase-container-reverse">
<div class="showcase-left"> <div class="showcase-left" style="max-width: 850px;">
<div class="alert-tiny w-max pr-6 bg-safing-blue-500" style="margin-left: 0;"> <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> <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
@ -179,9 +182,6 @@ redirect_from:
</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="download-container"> <div class="download-container">
<h2 class="download-container-title"> <h2 class="download-container-title">