safing-web/index.html

---
layout: page
title: Safing - Love Freedom
---

{% include header.html %}

<section id="features" class="my-32 md:mt-16 md:mb-40">
 
  <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col" style="max-width: 2000px;">
    <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
      <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
        <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
          <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
          Alpha Software: Portmaster is in active development
        </div>
        <h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
          Monitor All Network Activity
        </h2>
        <p class="text-md opacity-55 max-w-lg">
          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>
        <div class="py-10 sm:py-10 text-center sm:flex">
          <a href="{{ site.portmaster_url }}">
            <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
              Discover the Portmaster
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="lg:-mr-20 ml-auto row-start-1 self-end md:self-start ">
      <img class="" src="{{ site.img_url }}page-specific/portmaster/monitor-network-activity.png" alt="">
    </div>
  </div>

  <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
    <div class="row-start-2 lg:row-start-1 lg:col-start-2 mx-auto lg:ml-0 lg:mr-auto mt-16 md:my-auto px-4 md:px-0">
      <div class="md:ml-4 inline-block max-w-lg lg:ml-32">
        <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
          <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
          Alpha Software: Portmaster is in active development
        </div>
        <h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10">
          Block Trackers System-Wide
        </h2>
        <p class="text-md opacity-55 max-w-lg" style="max-width: 471px;">
          Protect your whole computer, not just your browser. Block all advertisements and trackers for every application. Easily add your own rules and block individual domains.
        </p>
        <div class="py-10 sm:py-10 text-center sm:flex">
          <a href="{{ site.portmaster_url }}">
            <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
              Discover the Portmaster
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
      <img class="" src="{{ site.img_url }}page-specific/portmaster/block-trackers-system-wide.png" alt="">
    </div>
  </div>

  <div class="mx-auto grid grid-rows-auto grid-cols-1 grid-row-col lg:grid-cols-2 lg:grid-flow-col mt-32 lg:mt-64 lg:pt-20" style="max-width: 1700px;">
    <div class="mx-auto lg:mr-0 lg:ml-auto mt-16 md:my-auto px-4 md:px-0">
      <div class="md:ml-4 inline-block max-w-lg lg:mr-32">
        <div class="pt-1 pb-1 pr-4 pl-2 rounded-full text-white text-xs flex break-words" style="background-color: #5c85ff; width: fit-content; width: -moz-fit-content;">
          <img src="{{ site.img_url }}icons/info.svg" class="h-4 w-4 self-center mr-2">
          Alpha Software: Portmaster is in active development
        </div>
        <h2 style="max-width: 400px; line-height: 60px;" class="text-5xl tracking-tight font-extrabold leading-none pt-8 pb-10 lg:w-auto">
          Set Global &amp; per&#8209;App Settings
        </h2>
        <p class="text-md opacity-55 max-w-lg">
          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 covered.
        </p>
        <div class="py-10 sm:py-10 text-center sm:flex">
          <a href="{{ site.portmaster_url }}">
            <button type="button" style="background-color: #000;" class="transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
              Discover the Portmaster
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="mx-auto md:ml-auto row-start-1 self-end md:self-center">
      <img class="" src="{{ site.img_url }}page-specific/portmaster/Set-global-and-per-app-configureation.png" alt="">
    </div>
  </div>
</section>
<section>
  <div class="items-center h-full pb-8 lg:pb-24 mt-8 md:mt-32 lg:mt-64">
    <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:flex">
        <div class="py-12 bg-white">
          <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:text-center">
              <!-- hide the huge "Follow Us" in mobile & md devices for now, made width problems -->
              <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top hidden lg:block">Follow Us</span>
              <h2 class="text-5xl tracking-tight font-extrabold leading-none md:py-10 text-center" style="position: relative;">
                Blog, Podcast & Videos
              </h2>
            </div>
            <div class="mt-8 lg:mt-32">
              <ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10 max-w-sm mx-auto md:max-w-full">
                {% assign all_publications = site.publications | sort: "date" | reverse %}

                {% for publication in all_publications limit: 6 %}
                  {% if publication.category == "blog" %}
                    {% assign post = publication %}
                    {% include thumbnail_blog.html pre_header="BLOG" %}
                  {% elsif publication.category == "video" %}
                    {% assign video = publication %}
                    {% include thumbnail_video.html pre_header="VIDEO" %}
                  {% elsif publication.category == "podcast" %}
                    {% assign episode = publication %}
                    {% include thumbnail_podcast.html pre_header="PODCAST" %}
                  {% endif %}
                {% endfor %}
              </ul>
              <div class="pt-20 flex w-full">
                <div class="mx-auto grid md:block">
                  <a class="mx-auto" href="{{ site.blog_url }}">
                    <button type="button" style="background-color: #000;" class="scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
                      Blogs
                    </button>
                  </a>
                  <a class="mx-auto" href="{{ site.podcast_url }}">
                    <button type="button" style="background-color: #000;" class="mt-8 mb-8 md:mt-0 md:mb-0 md:ml-4 md:mr-4 scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
                      Podcast
                    </button>
                  </a>
                  <a class="mx-auto" href="{{ site.video_url }}">
                    <button type="button" style="background-color: #000;" class="scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent 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">
                      Videos
                    </button>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>