safing-web/_layouts/page_container.html

---
layout: page
---

<section id="page-container" class="pb-8 lg:pb-24 pt-16 lg:pt-40 {{ layout.container_class }} {{ page.container_class }}">
  <div class="items-center h-full">
    <div class="container mx-auto sm:px-8 sm:px-0 flex">
      <div class="max-w-screen-lg mx-auto px-4 sm:px-6 lg:flex">
        <div class="py-12 bg-white">
          <div class="max-w-screen-xl mx-auto px-2 sm:px-6 lg:px-8">
            <content>
              {% unless page.heading == null %}
              <h1 class="text-5xl tracking-tight font-extrabold leading-none">
                {{ page.heading }}
              </h1>
              {% endunless %}

              <!-- table example -->
              <div class="table">
                <table>
                  <colgroup>
                    <col>
                    <col class="highlight">
                    <col>
                  </colgroup>
                  <thead>
                    <tr>
                      <th></th>
                      <th>Portmaster</th>
                      <th>Pi-Hole</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Open Source</td>
                      <td class="link">
                        <a href="#">
                          <div>
                            <img src="{{ site.img_url }}icons/tick.svg">
                          </div>
                          <img src="{{ site.img_url }}icons/external-black.svg">
                        </a>
                      </td>
                      <td class="link">
                        <a href="#">
                          <div>
                            <img src="{{ site.img_url }}icons/tick.svg">
                          </div>
                          <img src="{{ site.img_url }}icons/external-black.svg">
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>Setup</td>
                      <td><strong>Easy</strong></td>
                      <td><strong>Advanced</strong></td>
                    </tr>
                    <tr>
                      <td>Protection Type</td>
                      <td><strong>Device</strong></td>
                      <td><strong>Network</strong></td>
                    </tr>
                    <tr>
                      <td>Availabilty</td>
                      <td class="link">
                        <a href="#">
                          <div>
                            <img src="{{ site.img_url }}icons/windows.svg">
                            <img src="{{ site.img_url }}icons/linux.svg">
                          </div>
                          <img src="{{ site.img_url }}icons/external-black.svg">
                        </a>
                      </td>
                      <td class="link">
                        <a href="#">
                          <div>
                            <img src="{{ site.img_url }}icons/linux.svg">
                            <img src="{{ site.img_url }}icons/docker.svg">
                          </div>
                          <img src="{{ site.img_url }}icons/external-black.svg">
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>Secure (DNS DoH/DoT)</td>
                      <td><img src="{{ site.img_url }}icons/tick.svg"></td>
                      <td><img src="{{ site.img_url }}icons/tick.svg"></td>
                    </tr>
                    <tr>
                      <td>Individual Apps Settings</td>
                      <td><img src="{{ site.img_url }}icons/tick.svg"></td>
                      <td><img src="{{ site.img_url }}icons/cross.svg"></td>
                    </tr>
                    <tr>
                      <td>Adaptive Threat Model</td>
                      <td><img src="{{ site.img_url }}icons/tick.svg"></td>
                      <td><img src="{{ site.img_url }}icons/cross.svg"></td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- table example -->


              {{ content }}
            </content>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>