]> git.ipfire.org Git - ipfire.org.git/commitdiff
features: Use card
authorMichael Tremer <michael.tremer@ipfire.org>
Sun, 15 Jul 2018 11:10:46 +0000 (12:10 +0100)
committerMichael Tremer <michael.tremer@ipfire.org>
Sun, 15 Jul 2018 11:10:46 +0000 (12:10 +0100)
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
src/scss/_variables.scss
src/scss/style.scss
src/templates/base.html
src/templates/index.html
src/templates/static/features.html

index 0ec4308e20d3a6f21026756d5f4fa70cfed2982b..820fb9a248d98603a610b75515683f97d2ed9504 100644 (file)
@@ -1,5 +1,11 @@
 // Global Settings
 $enable-shadows:                       true;
+$shadow-1:                                     0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+$shadow-2:                                     0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
+$shadow-3:                                     0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23);
+$shadow-4:                                     0 10px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 6px 0 rgba(0, 0, 0, 0.26);
+$shadow-5:                                     0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26);
+$shadow-6:                                     0 19px 38px 0 rgba(0, 0, 0, 0.3), 0 15px 12px 0 rgba(0, 0, 0, 0.22);
 
 /*
        Colours
@@ -34,6 +40,9 @@ $dark:                                                $blue-grey-900;
 $yiq-text-dark:                                $primary;
 $yiq-text-light:                       $secondary;
 
+$body-bg:                                      $blue-grey-50;
+$body-color:                           $blue-grey-900;
+
 // Breakpoints
 $grid-breakpoints: (
        xs: 0,
@@ -85,13 +94,12 @@ $navbar-padding-y:                  1.1rem;
 $input-btn-padding-x:          1rem;
 $input-btn-padding-y:          .5rem;
 
-$input-btn-focus-box-shadow:
-                                                       0 3px 6px 0 rgba(black, .16), 0 3px 6px 0 rgba(black, .23);
+$input-btn-focus-box-shadow:   $shadow-3;
 
 // Shadows
-$box-shadow:                           0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .2);
+$box-shadow:                           $shadow-1;
 $box-shadow-sm:                                $box-shadow;
-$box-shadow-lg:                                0 19px 38px 0 rgba(0, 0, 0, .3), 0 15px 12px 0 rgba(0, 0, 0, .22);
+$box-shadow-lg:                                $shadow-6;
 
 // Buttons
 $btn-border-width:                     2px;
index db3dbe85c8a1d62230b260ff56920e881bd811e0..bd2712f20e11ee7515f167dfcb30f3880cbfac34 100644 (file)
 // Custom stuff
 @import '_icons';
 
+body {
+       min-height: 75rem;
+       padding-top: 6rem;
+}
+
 // Buttons
 .btn {
        text-transform: uppercase;
@@ -71,6 +76,10 @@ h6 {
        line-height: 1.75rem;
 }
 
+.card {
+       box-shadow: $shadow-1;
+}
+
 footer {
        .btn-toolbar .icon {
                height: 2.25rem;
@@ -88,90 +97,92 @@ footer {
 
 // Sections
 
-section {
-       padding: 3rem 0;
+.main {
+       section {
+               padding: 3rem 0;
 
-       @include media-breakpoint-up(sm) {
-               padding: 72px 0;
-       }
+               @include media-breakpoint-up(sm) {
+                       padding: 72px 0;
+               }
 
-       h1 {
-               margin-bottom: 64px;
+               h1 {
+                       margin-bottom: 64px;
+               }
        }
-}
 
-section.intro {
-       min-height: 100vh;
-       background-image: url('img/header-background.jpg');
-       background-size: cover;
-       background-attachment: fixed;
-       background-position: center top;
-       position: relative;
+       section.intro {
+               min-height: 100vh;
+               background-image: url('img/header-background.jpg');
+               background-size: cover;
+               background-attachment: fixed;
+               background-position: center top;
+               position: relative;
 
-       .branding {
-               margin-bottom: 64px;
-               text-align: center;
+               .branding {
+                       margin-bottom: 64px;
+                       text-align: center;
 
-               padding-top: 6rem;
+                       padding-top: 6rem;
 
-               @include media-breakpoint-up(sm) {
-                       padding-top: 192px;
-               }
+                       @include media-breakpoint-up(sm) {
+                               padding-top: 192px;
+                       }
 
-               h1 {
-                       margin-bottom: 0;
+                       h1 {
+                               margin-bottom: 0;
 
-                       @include media-breakpoint-down(xs) {
-                               font-size: 72px;
-                               line-height: 88px;
-                       }
+                               @include media-breakpoint-down(xs) {
+                                       font-size: 72px;
+                                       line-height: 88px;
+                               }
 
-                       strong {
-                               font-weight: 700 !important;
+                               strong {
+                                       font-weight: 700 !important;
+                               }
                        }
-               }
 
-               h1:before {
-                       content: "";
-                       height: 60px;
-                       width: 76px;
-                       background-image: url('img/ipfire-tux.png');
-                       background-repeat: no-repeat;
-                       background-position: center center;
-                       background-size: contain;
-                       display: inline-block;
-                       position: relative;
-                       top: 4px;
+                       h1:before {
+                               content: "";
+                               height: 60px;
+                               width: 76px;
+                               background-image: url('img/ipfire-tux.png');
+                               background-repeat: no-repeat;
+                               background-position: center center;
+                               background-size: contain;
+                               display: inline-block;
+                               position: relative;
+                               top: 4px;
+
+                               @include media-breakpoint-up(sm) {
+                                       height: 120px;
+                                       width: 93px;
+                                       margin-right: 32px;
+                                       top: 8px;
+                               }
+                       }
 
-                       @include media-breakpoint-up(sm) {
-                               height: 120px;
-                               width: 93px;
-                               margin-right: 32px;
-                               top: 8px;
+                       h5 {
+                               color: $blue-grey-600;
                        }
-               }
 
-               h5 {
-                       color: $blue-grey-600;
                }
-
        }
-}
 
-section#news, section#support, footer {
-       background-color: rgba($blue-grey-900, .06);
-}
+       section#news, section#support, footer {
+               background-color: rgba($blue-grey-900, .06);
+       }
 
-section#news {
-       color: rgba($blue-grey-900, .6);
-}
+       section#news {
+               color: rgba($blue-grey-900, .6);
+       }
 
-section#fireinfo {
-       border-bottom: 1px solid rgba($blue-grey-900, .2);
-}
+       section#fireinfo {
+               border-bottom: 1px solid rgba($blue-grey-900, .2);
+       }
 
-section#appliances {
-       padding-bottom: 48px;
+       section#appliances {
+               padding-bottom: 48px;
+       }
 }
 
 .page-scroll {
index 0c4489a456e78b2a1b820a756b792ff67fd2501a..223d72998620429362e9c672c00c5232eaa818a1 100644 (file)
@@ -25,7 +25,7 @@
        </head>
 
        <body id="page-top">
-               <nav class="navbar navbar-expand-lg fixed-top bg-white">
+               <nav class="navbar navbar-expand-lg fixed-top">
                        <div class="container">
                                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                                                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
index 57194e070c720b96f018924293729167340ee717..f37280e09c40397014011f76311bbc38409da2db 100644 (file)
 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
 {% block container %}
-       <section class="intro">
-               <div class="container">
-                       <div class="branding">
-                               <h1 class="display-1">IP<strong>Fire</strong></h1>
-                               <h5>The Open Source Firewall Distribution</h5>
+       <div class="main">
+               <section class="intro">
+                       <div class="container">
+                               <div class="branding">
+                                       <h1 class="display-1">IP<strong>Fire</strong></h1>
+                                       <h5>The Open Source Firewall Distribution</h5>
+                               </div>
+
+                               <div class="row justify-content-center">
+                                       <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
+                                       <a class="btn btn-outline-dark btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+                               </div>
                        </div>
 
-                       <div class="row justify-content-center">
-                               <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
-                               <a class="btn btn-outline-dark btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+                       <div class="page-scroll">
+                               <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
+                                       <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
+                               </a>
                        </div>
-               </div>
+               </section>
 
-               <div class="page-scroll">
-                       <a href="#features" class="btn btn-outline-primary rounded-circle scroll">
-                               <svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
-                       </a>
-               </div>
-       </section>
+               <section id="features">
+                       <div class="container">
+                               <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
 
-       <section id="features">
-               <div class="container">
-                       <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
-       
-                       <div class="row mb-lg-6 mb-md-5">
-                               <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
-                                       </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Firewall") }}</h5>
-                                               <p>
-                                                       IPFire comes with a versatile and state of the art
-                                                       firewall engine that makes even the most complex
-                                                       setups easy to administer.
-                                               </p>
-                                       </div>
-                               </div>
-                               
-                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
+                               <div class="row mb-lg-6 mb-md-5">
+                                       <div class="col-md-6 col-lg-4 mb-6 pb-lg-5 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_shield"><use xlink:href="#shield"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Firewall") }}</h5>
+                                                       <p>
+                                                               IPFire comes with a versatile and state of the art
+                                                               firewall engine that makes even the most complex
+                                                               setups easy to administer.
+                                                       </p>
+                                               </div>
                                        </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Performance") }}</h5>
-                                               <p>
-                                                       IPFire is ready for high performance networks
-                                                       and running evenly well on embedded hardware.
-                                               </p>
-                                       </div>  
-                               </div>
-                               
-                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
+                                       
+                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_speed"><use xlink:href="#speed"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Performance") }}</h5>
+                                                       <p>
+                                                               IPFire is ready for high performance networks
+                                                               and running evenly well on embedded hardware.
+                                                       </p>
+                                               </div>  
                                        </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Easy to use") }}</h5>
-                                               <p class="mb-1">
-                                                       IPFire is set up easily in 15 to 20 minutes
-                                                       but also comes with expert features that
-                                                       are needed in professional networks.
-                                               </p>
+                                       
+                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_couch"><use xlink:href="#couch"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Easy to use") }}</h5>
+                                                       <p class="mb-1">
+                                                               IPFire is set up easily in 15 to 20 minutes
+                                                               but also comes with expert features that
+                                                               are needed in professional networks.
+                                                       </p>
+                                               </div>
                                        </div>
-                               </div>
 
-                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
-                                       </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Network Security") }}</h5>
-                                               <p>
-                                                       IPFire is designed for high security.
-                                                       It is hardened to protect itself from attacks
-                                                       from the network.
-                                               </p>
+                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_security"><use xlink:href="#security"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Network Security") }}</h5>
+                                                       <p>
+                                                               IPFire is designed for high security.
+                                                               It is hardened to protect itself from attacks
+                                                               from the network.
+                                                       </p>
+                                               </div>
                                        </div>
-                               </div>
-                               
-                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
+                                       
+                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_github"><use xlink:href="#github"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Open Source") }}</h5>
+                                                       <p>
+                                                               IPFire is free software and developed by an open community,
+                                                               that improves it every single day.
+                                                       </p>
+                                               </div>
                                        </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Open Source") }}</h5>
-                                               <p>
-                                                       IPFire is free software and developed by an open community,
-                                                       that improves it every single day.
-                                               </p>
+                                       
+                                       <div class="col-md-6 col-lg-4 mb-6 d-flex">
+                                               <div class="feature_icons align-self-stretch">
+                                                       <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
+                                               </div>
+                                               <div class="flex-column">
+                                                       <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
+                                                       <p>
+                                                               IPFire is developed in Europe and used all over the world
+                                                               <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
+                                                               by hundreds of thousands of users every day.
+                                                       </p>
+                                               </div>
                                        </div>
                                </div>
                                
-                               <div class="col-md-6 col-lg-4 mb-6 d-flex">
-                                       <div class="feature_icons align-self-stretch">
-                                               <svg class="icon i_lg i_heart"><use xlink:href="#heart"/></svg>
-                                       </div>
-                                       <div class="flex-column">
-                                               <h5 class="pb-3">{{ _("Trusted by thousands") }}</h5>
-                                               <p>
-                                                       IPFire is developed in Europe and used all over the world
-                                                       <a href="https://fireinfo.ipfire.org/statistics/geo-locations">in hundreds of countries</a>
-                                                       by hundreds of thousands of users every day.
-                                               </p>
-                                       </div>
+                               <div class="btn-toolbar justify-content-center pt-0 pt-md-4">
+                                       <a class="btn btn-primary btn-lg mr-4 px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
+                                       <a class="btn btn-secondary btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
                                </div>
                        </div>
-                       
-                       <div class="btn-toolbar justify-content-center pt-0 pt-md-4">
-                               <a class="btn btn-primary btn-lg mr-4 px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
-                               <a class="btn btn-secondary btn-lg px-4 px-md-6" href="/features">{{ _("Learn more") }}</a>
-                       </div>
-               </div>
-       </section>
-
-       <section id="news">
-               <div class="container">
-                       <div class="row">
-                               <div class="col-12 col-md-6 col-lg-5 mb-5">
-                                       <h1>Latest Release</h1>
-
-                                       <p class="mb-0">
-                                               <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
-                                       </p>
+               </section>
 
-                                       <h3 class="mb-5">
-                                               <a href="/news/{{ latest_release.news.slug }}">
-                                                       {{ _("%s has been released!") % latest_release.name }}
-                                               </a>
-                                       </h3>
+               <section id="news">
+                       <div class="container">
+                               <div class="row">
+                                       <div class="col-12 col-md-6 col-lg-5 mb-5">
+                                               <h1>Latest Release</h1>
 
-                                       <div class="btn-toolbar mb-5">
-                                               <a class="btn btn-primary mr-3" href="/download">
-                                                       <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
-                                                       {{ _("Download") }}
-                                               </a>
+                                               <p class="mb-0">
+                                                       <small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
+                                               </p>
 
-                                               <a class="btn btn-secondary ml-3" href="/donate">
-                                                       <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
-                                                       {{ _("Donate") }}
-                                               </a>
-                                       </div>
+                                               <h3 class="mb-5">
+                                                       <a href="/news/{{ latest_release.news.slug }}">
+                                                               {{ _("%s has been released!") % latest_release.name }}
+                                                       </a>
+                                               </h3>
 
-                                       <p>
-                                               A complete history of IPFire releases is available at our <a href="/news">News</a> page.
-                                       </p>
-                               </div>
-                               
-                               <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
-                                       <h1>What&rsquo;s going on?</h1>
+                                               <div class="btn-toolbar mb-5">
+                                                       <a class="btn btn-primary mr-3" href="/download">
+                                                               <svg class="icon i_sm i_download"><use xlink:href="#download"/></svg>
+                                                               {{ _("Download") }}
+                                                       </a>
 
-                                       <dl class="dl-horizontal">
-                                               {% for type, item in latest_news %}
-                                                       <dt>
-                                                               <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
-                                                       </dt>
+                                                       <a class="btn btn-secondary ml-3" href="/donate">
+                                                               <svg class="icon i_sm i_heart"><use xlink:href="#heart"/></svg>
+                                                               {{ _("Donate") }}
+                                                       </a>
+                                               </div>
 
-                                                       <dd class="text-overflow mb-4">
-                                                               {% if type == "news" %}
-                                                                       <a href="/news/{{ item.slug }}">
-                                                                               <strong>{{ item.title }}</strong>
-                                                                       </a>
-                                                               {% elif type == "planet" %}
-                                                                       <a href="https://planet.ipfire.org/post/{{ item.slug }}">
-                                                                               {{ item.title }}
-                                                                       </a>
-                                                               {% end %}
-                                                       </dd>
-                                               {% end %}
-                                       </dl>
+                                               <p>
+                                                       A complete history of IPFire releases is available at our <a href="/news">News</a> page.
+                                               </p>
+                                       </div>
                                        
-                                       <a class="btn btn-secondary" href="/news">{{ _("Read More") }}</a>
-                               </div>
-                       </div>
-               </div>
-       </section>
+                                       <div class="col-12 col-md-6 col-lg-5 offset-lg-2">
+                                               <h1>What&rsquo;s going on?</h1>
+
+                                               <dl class="dl-horizontal">
+                                                       {% for type, item in latest_news %}
+                                                               <dt>
+                                                                       <small>{{ locale.format_date(item.published, relative=True, shorter=True) }} &nbsp;</small>
+                                                               </dt>
 
-       <section id="fireinfo">
-               <div class="container">
-                       <h1 class="text-center">Fire<strong>Info</strong> Statistics</h1>
-                       
-                       <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
-                               <div class="col-6 col-md-3 mb-6 text-center">
-                                       <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
-                                       <h6 class="pb-5 fireinfo">{{ latest_release.name }}</h6>
-                                       <div class="r_circle circle mt-5">
-                                               <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
+                                                               <dd class="text-overflow mb-4">
+                                                                       {% if type == "news" %}
+                                                                               <a href="/news/{{ item.slug }}">
+                                                                                       <strong>{{ item.title }}</strong>
+                                                                               </a>
+                                                                       {% elif type == "planet" %}
+                                                                               <a href="https://planet.ipfire.org/post/{{ item.slug }}">
+                                                                                       {{ item.title }}
+                                                                               </a>
+                                                                       {% end %}
+                                                               </dd>
+                                                       {% end %}
+                                               </dl>
+                                               
+                                               <a class="btn btn-secondary" href="/news">{{ _("Read More") }}</a>
                                        </div>
-                                       <script>
-                                               $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
-                                       </script>
                                </div>
+                       </div>
+               </section>
 
-                               {% if fireinfo_country %}
-                                       <div class="col-6 col-md-3 text-center">
-                                               <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
-                                                       {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
-                                               </p>
-                                               <h6 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h6>
-                                               <div class="v_circle circle mt-5">
-                                                       <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</p>
+               <section id="fireinfo">
+                       <div class="container">
+                               <h1 class="text-center">Fire<strong>Info</strong> Statistics</h1>
+                               
+                               <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6 justify-content-center">
+                                       <div class="col-6 col-md-3 mb-6 text-center">
+                                               <p class="mb-0 mb-sm-3 fireinfo_cat">Latest Release</p>
+                                               <h6 class="pb-5 fireinfo">{{ latest_release.name }}</h6>
+                                               <div class="r_circle circle mt-5">
+                                                       <p class="fireinfo_per">{{ "%.0f%%" % (latest_release.penetration * 100) }}</p>
                                                </div>
                                                <script>
-                                                       $('.v_circle').circleProgress({ value: {{ fireinfo_country.percentage }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
+                                                       $('.r_circle').circleProgress({ value: {{ latest_release.penetration }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#1976d2"] } });
                                                </script>
                                        </div>
-                               {% end %}
-                       </div>
-                       
-                       <div class="row justify-content-center">
-                               <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
-                       </div>
-               </div>
-       </section>
 
-       <section id="appliances">
-               <div class="container">
-                       <h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
-                       
-                       <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
-                               <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
-                                       <p class="lead">
-                                               <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
-                                               IPFire hardware appliances for enterprises, large businesses and SOHO.
-                                               Deploying one of these on your network will provide you with the
-                                               greatest reliability, stability and performance.
-                                       </p>
+                                       {% if fireinfo_country %}
+                                               <div class="col-6 col-md-3 text-center">
+                                                       <p class="mb-0 mb-sm-3 fireinfo_cat truncate">
+                                                               {{ _("%.0f%% of all IPFire systems are running in") % (fireinfo_country.percentage * 100) }}
+                                                       </p>
+                                                       <h6 class="pb-5 fireinfo">{{ fireinfo_country.country.name }}</h6>
+                                                       <div class="v_circle circle mt-5">
+                                                               <p class="fireinfo_per">{{ "%.0f%%" % (fireinfo_country.percentage * 100) }}</p>
+                                                       </div>
+                                                       <script>
+                                                               $('.v_circle').circleProgress({ value: {{ fireinfo_country.percentage }}, size: 128, thickness: 4, animation: false, startAngle: -Math.PI / 2, fill: { color: ["#ff8f00"] } });
+                                                       </script>
+                                               </div>
+                                       {% end %}
                                </div>
-                               <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
-                                       <a class="btn btn-dark btn-lg btn-block px-md-0 mb-4" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
-                                       <a class="btn btn-dark btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
+                               
+                               <div class="row justify-content-center">
+                                       <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
                                </div>
                        </div>
-                       <div class="text-center">
-                               <picture>
-                                       <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
-                                       <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
-                                       <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
-                                       <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
-                                       <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
-                               </picture>
+               </section>
+
+               <section id="appliances">
+                       <div class="container">
+                               <h1 class="text-center">{{ _("Professional Appliances & Services") }}</h1>
+                               
+                               <div class="row mb-lg-6 mb-md-4 pb-6 pb-lg-4">
+                                       <div class="col-md-12 col-lg-7 mb-5 mb-md-6 mb-lg-0">
+                                               <p class="lead">
+                                                       <a href="https://www.lightningwirelabs.com" target="_blank">Lightning Wire Labs</a> offer
+                                                       IPFire hardware appliances for enterprises, large businesses and SOHO.
+                                                       Deploying one of these on your network will provide you with the
+                                                       greatest reliability, stability and performance.
+                                               </p>
+                                       </div>
+                                       <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-1">
+                                               <a class="btn btn-dark btn-lg btn-block px-md-0 mb-4" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+                                               <a class="btn btn-dark btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
+                                       </div>
+                               </div>
+                               <div class="text-center">
+                                       <picture>
+                                               <source media="(max-width: 575px" srcset="{{ static_url("img/appliance-pro_xs.png") }}">
+                                               <source media="(max-width: 767px" srcset="{{ static_url("img/appliance-pro_sm.png") }}">
+                                               <source media="(max-width: 991px" srcset="{{ static_url("img/appliance-pro_md.png") }}">
+                                               <source media="(min-width: 992px" srcset="{{ static_url("img/appliance-pro.png") }}">
+                                               <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}" alt="Appliance">
+                                       </picture>
+                               </div>
                        </div>
-               </div>
-       </section>
+               </section>
+       </div>
 <script>
 $(document).ready(function () {
        $('.scroll').on('click', function(event) {
index a52acf948a57e06c4753489aea9d0545af0a0b7c..648241fc981061948364e934c4ab5063ad03b992 100644 (file)
@@ -3,7 +3,7 @@
 {% block title %}{{ _("About IPFire") }}{% end block %}
 
 {% block container %}
-       <div class="container features-content">
+       <div class="container">
                <div class="row">
                        <nav id="sidebar" class="col-12 col-md-3" role="dropdown">
                                <input type="checkbox" id="menu">
                                </ul>
                        </nav>
                
-               <section class="content col-12 col-md-9">       
-                       <section id="about">
-                               <h3 class="headline">About IP<strong>Fire</strong></h3>
-                               <h5 class="subheadline">The Open Source Firewall Distribution</h5>
-
-                               <p class="copy">
-                                       IP<strong>Fire</strong> was designed with both modularity and a high-level of
-                                       flexibility in mind. You can easily deploy many variations of it, such as a firewall,
-                                       a proxy server or a VPN gateway.
-                                       The modular design ensures that it runs exactly what you've configured it for and
-                                       nothing more. Everything is simple to manage and update through the package manager,
-                                       making maintenance a breeze.
-                               </p>
-                               <p class="copy">
-                                       The IP<strong>Fire</strong> development team understands that security means different things to
-                                       different people and certainly can change over time.
-                                       The fact that IPFire is modular and flexible make it perfect for integrating
-                                       into any existing security architecture.
-                                       Don't forget that ease-of-use is a key principle.
-                                       If all this sounds a little too much for you, IPFire comes with great default
-                                       settings out-of-the-box, meaning it's a snap to get going quickly!
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="security">
-                               <h3 class="headline">{{ _("Security") }}</h3>
-       
-                               <p class="copy">
-                                       The primary objective of IPFire is security.
-                                       As there is of course no one, single way to achieve network security, it is important
-                                       for a network administrator to understand their environment and what the term
-                                       <em>security</em> means in the context of their own network.
-                                       IPFire forms the base of a secure network.
-                                       It has the power to segment networks based on their respective security levels
-                                       and makes it easy to create custom policies that manage each segment
-                                       (see the Firewall page for more information).
-                               </p>
-                               <p class="copy">
-                                       Security of the modular components is a top priority.
-                                       Updates are digitally signed and encrypted, as well as can be automatically installed
-                                       by Pakfire (<a href="#updates">the IPFire package management system</a>).
-                                       Since IPFire is typically directly connected to the Internet, it is going to be a
-                                       primary target for hackers and other threats.
-                                       The simple Pakfire package manager helps administrators feel confident that
-                                       they are running the latest security updates and bug fixes for all of the
-                                       components they utilize.
-                               </p>
-                               <p class="copy">
-                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
-                                       <a href="//planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Since IPFire 2.15</a>,
-                                       the IPFire Linux kernel is patched with the
-                                       <a href="//grsecurity.net">grsecurity</a> patchset, which
-                                       pro-actively hardens the kernel against various forms of attacks.
-                                       Most importantly, it protects from zero-day exploits by
-                                       eliminating entire bug classes and exploit vectors.
-                                       It makes stack buffer overflows almost impossible to exploit
-                                       and comes with strict access controls, that make it
-                                       harder for attackers to cause harm to the system.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="firewall">
-                               <h3 class="headline">{{ _("Firewall") }}</h3>
-
-                                       <p class="copy">
-                                               IPFire employs a Stateful Packet Inspection (SPI) firewall,
-                                               which is built on top of netfilter (the Linux packet filtering framework).
-                                       </p>
-                                       <p class="copy">
-                                               During the installation of IPFire, the network is configured into different,
-                                               separate segments.
-                                               This segmented security scheme means that there is a perfect place for each
-                                               machine in the network.
-                                               These different segments may be enabled separately, depending on your requirements.
-                                               Each segment represents a group of computers who share a common security level:
-                                       </p>
+                       <section class="content col-12 col-md-9 features">
+                               <div class="card">
+                                       <div class="card-body">
+                                               <section id="about">
+                                                       <h3 class="text-center mb-0">About IP<strong>Fire</strong></h3>
+                                                       <p class="text-center text-muted">The Open Source Firewall Distribution</p>
+
+                                                       <p class="copy">
+                                                               IP<strong>Fire</strong> was designed with both modularity and a high-level of
+                                                               flexibility in mind. You can easily deploy many variations of it, such as a firewall,
+                                                               a proxy server or a VPN gateway.
+                                                               The modular design ensures that it runs exactly what you've configured it for and
+                                                               nothing more. Everything is simple to manage and update through the package manager,
+                                                               making maintenance a breeze.
+                                                       </p>
+                                                       <p class="copy">
+                                                               The IP<strong>Fire</strong> development team understands that security means different things to
+                                                               different people and certainly can change over time.
+                                                               The fact that IPFire is modular and flexible make it perfect for integrating
+                                                               into any existing security architecture.
+                                                               Don't forget that ease-of-use is a key principle.
+                                                               If all this sounds a little too much for you, IPFire comes with great default
+                                                               settings out-of-the-box, meaning it's a snap to get going quickly!
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
                                        
-                                       <div class="row d-flex align-items-center mb-6 mb-md-5">
-                                               <div class="green-600 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
-                                                       <svg class="icon i_features i_verified"><use xlink:href="#verified"/></svg>
-                                               </div>
-                                               <p class="copy green-600 col-12 col-md-10 m-0">
-                                                       Green represents a "safe" area.
-                                                       This is where all regular clients will reside.
-                                                       It is usually comprised of a wired, local network.
-                                                       Clients on Green can access all other network
-                                                       segments without restriction.
-                                               </p>
-                                       </div>
+                                               <section id="security">
+                                                       <h3 class="headline">{{ _("Security") }}</h3>
+                               
+                                                       <p class="copy">
+                                                               The primary objective of IPFire is security.
+                                                               As there is of course no one, single way to achieve network security, it is important
+                                                               for a network administrator to understand their environment and what the term
+                                                               <em>security</em> means in the context of their own network.
+                                                               IPFire forms the base of a secure network.
+                                                               It has the power to segment networks based on their respective security levels
+                                                               and makes it easy to create custom policies that manage each segment
+                                                               (see the Firewall page for more information).
+                                                       </p>
+                                                       <p class="copy">
+                                                               Security of the modular components is a top priority.
+                                                               Updates are digitally signed and encrypted, as well as can be automatically installed
+                                                               by Pakfire (<a href="#updates">the IPFire package management system</a>).
+                                                               Since IPFire is typically directly connected to the Internet, it is going to be a
+                                                               primary target for hackers and other threats.
+                                                               The simple Pakfire package manager helps administrators feel confident that
+                                                               they are running the latest security updates and bug fixes for all of the
+                                                               components they utilize.
+                                                       </p>
+                                                       <p class="copy">
+                                                               <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
+                                                               <a href="//planet.ipfire.org/post/feature-highlights-ipfire-2-15-1-hardening-the-system">Since IPFire 2.15</a>,
+                                                               the IPFire Linux kernel is patched with the
+                                                               <a href="//grsecurity.net">grsecurity</a> patchset, which
+                                                               pro-actively hardens the kernel against various forms of attacks.
+                                                               Most importantly, it protects from zero-day exploits by
+                                                               eliminating entire bug classes and exploit vectors.
+                                                               It makes stack buffer overflows almost impossible to exploit
+                                                               and comes with strict access controls, that make it
+                                                               harder for attackers to cause harm to the system.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
                                        
-                                       <div class="row d-flex align-items-center mb-6 mb-md-5">
-                                               <div class="red-900 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
-                                                       <svg class="icon i_features i_warning"><use xlink:href="#warning"/></svg>
-                                               </div>
-                                               <p class="copy red-900 col-12 col-md-10 m-0">
-                                                       Red indicates "danger" or the connection to the Internet.
-                                                       Nothing from Red is permitted to pass through the
-                                                       firewall unless specifically configured by the
-                                                       administrator.
-                                               </p>
-                                       </div>
+                                               <section id="firewall">
+                                                       <h3 class="headline">{{ _("Firewall") }}</h3>
+
+                                                               <p class="copy">
+                                                                       IPFire employs a Stateful Packet Inspection (SPI) firewall,
+                                                                       which is built on top of netfilter (the Linux packet filtering framework).
+                                                               </p>
+                                                               <p class="copy">
+                                                                       During the installation of IPFire, the network is configured into different,
+                                                                       separate segments.
+                                                                       This segmented security scheme means that there is a perfect place for each
+                                                                       machine in the network.
+                                                                       These different segments may be enabled separately, depending on your requirements.
+                                                                       Each segment represents a group of computers who share a common security level:
+                                                               </p>
+                                                               
+                                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                                       <div class="green-600 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                                               <svg class="icon i_features i_verified"><use xlink:href="#verified"/></svg>
+                                                                       </div>
+                                                                       <p class="copy green-600 col-12 col-md-10 m-0">
+                                                                               Green represents a "safe" area.
+                                                                               This is where all regular clients will reside.
+                                                                               It is usually comprised of a wired, local network.
+                                                                               Clients on Green can access all other network
+                                                                               segments without restriction.
+                                                                       </p>
+                                                               </div>
+                                                               
+                                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                                       <div class="red-900 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                                               <svg class="icon i_features i_warning"><use xlink:href="#warning"/></svg>
+                                                                       </div>
+                                                                       <p class="copy red-900 col-12 col-md-10 m-0">
+                                                                               Red indicates "danger" or the connection to the Internet.
+                                                                               Nothing from Red is permitted to pass through the
+                                                                               firewall unless specifically configured by the
+                                                                               administrator.
+                                                                       </p>
+                                                               </div>
+                                                               
+                                                               <div class="row d-flex align-items-center mb-6 mb-md-5">
+                                                                       <div class="blue-700 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                                               <svg class="icon i_features i_wifi"><use xlink:href="#wifi"/></svg>
+                                                                       </div>
+                                                                       <p class="copy blue-700 col-12 col-md-10 m-0">
+                                                                               Blue represents the "wireless" part of the local
+                                                                               network (chosen because it's the color of the sky).
+                                                                               Since the wireless network has the potential for abuse,
+                                                                               it is uniquely identified and specific rules govern
+                                                                               clients on it.
+                                                                               Clients on this network segment must be explicitly
+                                                                               allowed before they may access the network.
+                                                                       </p>
+                                                               </div>
+                                                               
+                                                               <div class="row d-flex align-items-center mb-5">
+                                                                       <div class="amber-800 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
+                                                                               <svg class="icon i_features i_server"><use xlink:href="#server"/></svg>
+                                                                       </div>
+                                                                       <p class="copy amber-800 col-12 col-md-10 m-0">
+                                                                               Orange is referred to as the "demilitarized zone" (DMZ).
+                                                                               Any servers which are publicly accessible are separated
+                                                                               from the rest of the network here to limit security
+                                                                               breaches.
+                                                                       </p>
+                                                               </div>
+                               
+                                                               <p class="copy">
+                                                                       <span class="label label-success">IPFire 2.15 - Core Update 77</span>
+                                                                       With IPFire 2.15, the graphical user interface has been completely rewritten
+                                                                       and massively extended with new functionality.
+                                                                       It is now possible to manage groups of hosts or services. That makes it simpler
+                                                                       to create many similar rules for a great number of hosts, networks or services.
+                                                               </p>
+                               
+                                                               <h4 class="secondHeadline">Managing firewall rules has never been easier before.</h4>
+                               
+                                                               <p class="copy">
+                                                                       Because even with a big number of rules, the configuration remains
+                                                                       easily manageable and that makes it possible to build more restrictive
+                                                                       configurations without losing control.
+                                                               </p>
+                               
+                                                               <p class="copy">
+                                                                       Additionally, the firewall can be used to control outbound Internet
+                                                                       access from any segment.
+                                                                       This feature gives the network administrator complete control
+                                                                       over how their network is configured and secured. 
+                                                               </p>
+                               
+                                                               <p class="copy">
+                                                                       <a href="//wiki.ipfire.org/en/configuration/firewall/start">
+                                                                               Firewall Documentation
+                                                                       </a>
+                                                               </p>
                                        
-                                       <div class="row d-flex align-items-center mb-6 mb-md-5">
-                                               <div class="blue-700 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
-                                                       <svg class="icon i_features i_wifi"><use xlink:href="#wifi"/></svg>
-                                               </div>
-                                               <p class="copy blue-700 col-12 col-md-10 m-0">
-                                                       Blue represents the "wireless" part of the local
-                                                       network (chosen because it's the color of the sky).
-                                                       Since the wireless network has the potential for abuse,
-                                                       it is uniquely identified and specific rules govern
-                                                       clients on it.
-                                                       Clients on this network segment must be explicitly
-                                                       allowed before they may access the network.
-                                               </p>
-                                       </div>
+                                                               <h4 class="secondHeadline">Web User-Interface screenshots</h4>
                                        
-                                       <div class="row d-flex align-items-center mb-5">
-                                               <div class="amber-800 outline_i rounded-circle mb-3 mb-md-0 mr-md-4 ml-md-0 mx-auto">
-                                                       <svg class="icon i_features i_server"><use xlink:href="#server"/></svg>
-                                               </div>
-                                               <p class="copy amber-800 col-12 col-md-10 m-0">
-                                                       Orange is referred to as the "demilitarized zone" (DMZ).
-                                                       Any servers which are publicly accessible are separated
-                                                       from the rest of the network here to limit security
-                                                       breaches.
-                                               </p>
-                                       </div>
-       
-                                       <p class="copy">
-                                               <span class="label label-success">IPFire 2.15 - Core Update 77</span>
-                                               With IPFire 2.15, the graphical user interface has been completely rewritten
-                                               and massively extended with new functionality.
-                                               It is now possible to manage groups of hosts or services. That makes it simpler
-                                               to create many similar rules for a great number of hosts, networks or services.
-                                       </p>
-       
-                                       <h4 class="secondHeadline">Managing firewall rules has never been easier before.</h4>
-       
-                                       <p class="copy">
-                                               Because even with a big number of rules, the configuration remains
-                                               easily manageable and that makes it possible to build more restrictive
-                                               configurations without losing control.
-                                       </p>
-       
-                                       <p class="copy">
-                                               Additionally, the firewall can be used to control outbound Internet
-                                               access from any segment.
-                                               This feature gives the network administrator complete control
-                                               over how their network is configured and secured. 
-                                       </p>
-       
-                                       <p class="copy">
-                                               <a href="//wiki.ipfire.org/en/configuration/firewall/start">
-                                                       Firewall Documentation
-                                               </a>
-                                       </p>
-               
-                                       <h4 class="secondHeadline">Web User-Interface screenshots</h4>
-               
-                                       <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
-                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/rules.png") }}" itemprop="contentUrl" data-size="999x589">
-                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/rules.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                                       </a>
-                                               </figure>
+                                                               <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
+                                                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/rules.png") }}" itemprop="contentUrl" data-size="999x589">
+                                                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/rules.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                               </a>
+                                                                       </figure>
+                                                                       
+                                                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" itemprop="contentUrl" data-size="1033x1077">
+                                                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                               </a>
+                                                                       </figure>
+                                       
+                                                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" itemprop="contentUrl" data-size="977x825">
+                                                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                               </a>
+                                                                       </figure>
+                                                               </div>
+                                       
+                                                               <div class="row my-gallery">
+                                                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" itemprop="contentUrl" data-size="1029x675">
+                                                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                               </a>
+                                                                       </figure>
+                                       
+                                                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" itemprop="contentUrl" data-size="776x686">
+                                                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                               </a>
+                                                                       </figure>
+                                                               </div>
+                                               </section>
                                                
-                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" itemprop="contentUrl" data-size="1033x1077">
-                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/new-rule.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                                       </a>
-                                               </figure>
-               
-                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" itemprop="contentUrl" data-size="977x825">
-                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/service-groups.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                                       </a>
-                                               </figure>
-                                       </div>
-               
-                                       <div class="row my-gallery">
-                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" itemprop="contentUrl" data-size="1029x675">
-                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/host-groups.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                                       </a>
-                                               </figure>
-               
-                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" itemprop="contentUrl" data-size="776x686">
-                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/firewall/connections-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                                       </a>
-                                               </figure>
+                                               <div class="divider"></div>
+                                       
+                                               <section id="pakfire">
+                                                       <h3 class="headline">Pakfire</h3>
+                                                       <h5 class="subheadline">{{ _("The IPFire package management system") }}</h5>
+
+                                                       <p class="copy">
+                                                               From a technical point of view, IPFire is a minimalistic, hardened firewall system
+                                                               which comes with an integrated package manager called Pakfire.
+                                                               The primary task of Pakfire is to update the system with only a single click.
+                                                               It is very easy to install <a href="/features/updates">security patches,
+                                                               bugfixes and feature enhancements</a>, which make IPFire safer and faster
+                                                               - or simply: better.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Another task of Pakfire is to install additional software that adds new
+                                                               functionality to the IPFire system.
+
+                                                               Some useful of them are:
+                                                       
+                                                               <ul>
+                                                                       <li>File sharing services such as Samba and vsftpd</li>
+                                                                       <li>Communications server using Asterisk</li>
+                                                                       <li>
+                                                                               Various command-line tools as <em>tcpdump</em>,
+                                                                               <em>nmap</em>, <em>traceroute</em> and many more.
+                                                                       </li>
+                                                               </ul>
+                                                       </p>
+                                       
+                                                       <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
+                                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" itemprop="contentUrl" data-size="770x508">
+                                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                       </a>
+                                                               </figure>
+                               
+                                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" itemprop="contentUrl" data-size="698x284">
+                                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                       </a>
+                                                               </figure>
+                                                       </div>
+
+                                                       <h4 class="secondHeadline">Pakfire as a build system</h4>
+                                                       <p class="copy">
+                                                               The next major release of IPFire will also ship a new generation
+                                                               of the Pakfire packagement system.
+                                                               This new generation has been made faster, more secure, more
+                                                               easy to handle and adds a whole bunch of new features.
+                                                       </p>
+                                                       <p class="copy">
+                                                               One of this features is that pakfire is now the
+                                                               buildsystem as well. Having a customized build system for
+                                                               the needs of IPFire and the IPFire developers improved
+                                                               the development process very much. Building new packages
+                                                               became a lot more easy and less time-consuming.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Quality assurance became more social right now. Check it
+                                                               out at <a href="//pakfire.ipfire.org/">pakfire.ipfire.org</a>.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="updates">
+                                                       <h3 class="headline">{{ _("Updates") }}</h3>
+
+                                                       <p class="copy">
+                                                               IPFire is based on Linux, which is the best Open Source kernel around.
+                                                               Additionally, IPFire is <strong>not</strong> based on any other
+                                                               distribution like Knoppix is on Debian. It is compiled from the sources
+                                                               of every single package. This consumes a lot of work, but finally
+                                                               gives the opportunity to not rely on the update cycles of others.
+                                                               The advantages we gain is that we are able to select very stable
+                                                               versions of software and build the distribution from them. For example
+                                                               is the most part of the distribution quite well tested and long maintained
+                                                               - in contrast to the kernel which is very recent and regularly updated
+                                                               with patches to support as much hardware as possible and more importantly
+                                                               fix security errors.
+                                                       </p>
+                                                       <p class="copy">
+                                                               This is what makes IPFire a very strong and hardened system.
+                                                       </p>
+                                                       <p class="copy">
+                                                               To keep up that strength and be prepared for new
+                                                               <a href="/features/hardware">hardware</a>, we give
+                                                               out the so called <strong>Core Updates</strong> which are issued in
+                                                               about every four weeks and updating collected fixes. If there is a
+                                                               security emergency,     we provide updates in less than a day to overcome
+                                                               zero-day holes in the system.
+                                                       </p>
+                                                       <p class="copy">
+                                                               All of the updates can be installed by the
+                                                               <a href="/features/pakfire">package management system</a>
+                                                               and users are notified by mail. So in all cases, the update is just
+                                                               a simple click and your system is running safe again.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="dialup">
+                                                       <h3 class="headline">{{ _("Dialup") }}</h3>
+
+                                                       <p class="copy">
+                                                               IPFire as an Internet Gateway is able to dialup through various techniques
+                                                               to connect to the Internet.
+                                                       </p>
+                                                       <p class="copy">
+                                                               It supports all popular types of broadband access, as well as mobile access:
+                                                       </p>
+                                                       
+                                                       <ul>
+                                                               <li>
+                                                                       <strong>VDSL</strong><br>
+                                                                       VDSL is short for <em>Very High Data Rate Digital Subscriber Line</em> and
+                                                                       it currently offers bandwidth up to 50 Mbit/s downstream and 10 Mbit/s upstream.
+                                                                       VDSL brings the possibility of using new technologies such as IPTV. With IPFire, a conventional
+                                                                       router can be replaced by a full-fledged system that brings the IPTV stream into your own home network.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>ADSL / SDSL</strong><br>
+                                                                       Conventional DSL is also supported, although it is technically
+                                                                       called also PPPoE or PPPoA. In some countries, the PPTP protocol is also widely used and it is also fully
+                                                                       supported by IPFire.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Ethernet</strong><br>
+                                                                       Over Ethernet, IPFire can also be connected to the Internet and obtain
+                                                                       an IP address either via DHCP or static configuration.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>4G / 3G</strong><br>
+                                                                       Mobile broadband connections over USB modems, which are also known by the names
+                                                                       UMTS, 3G, CDMA, HSDPA or LTE are also supported by IPFire.
+                                                               </li>
+                                                       </ul>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="proxy">
+                                                       <h3 class="headline">{{ _("Web proxy") }}</h3>
+
+                                                       <p class="copy">
+                                                               IPFire includes a full-fledged web proxy, which is the well-known, open-source software Squid. It is used by ISPs, universities, schools and large companies use because of its diversity, stability and mature development. Even for small home networks, it
+                                                               is a useful feature. In addition to the stateful paket inspection (SPI) filtering by the firewall on
+                                                               the TCP/IP layer, the web content which is transmitted over HTTP, HTTPS or FTP can be analysed
+                                                               and filtered as well.
+                                                       </p>
+                                                       <ul>
+                                                               <li>
+                                                                       <strong>Security:</strong> The client does not query web servers directly, it queries the proxy first.
+                                                                       The server response goes back to the proxy and not to the client, which actually does not technically even appear on the
+                                                                       Internet. A related attack would therefore primarily reach the proxy and not the client. There are also
+                                                                       functions available for data privacy, which is an significant advantage in comparison to a pure NAT router.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Authentication:</strong> Using the access lists, the web proxy can also be configured to allow
+                                                                       access only after a user has been authenticated. At this point you have the choice between LDAP, identd,
+                                                                       Windows, Radius or local authentication methods. The web proxy can connect, for example to a
+                                                                       Microsoft Windows domain controller and only the users of that Windows domain can be granted access to the Internet.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Authorization:</strong> If the Internet access needs to  be limited to specific time of a day,
+                                                                       or if it should be even completely disabled for any clients, is this easily configured by the
+                                                                       “network-based access control”, which can also be found on the IPFire web interface. A useful application for this feature can be for example, a school classroom.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Logging:</strong> Since each access can be logged over the proxy, possibilities for the
+                                                                       examination of the accessed content can be very useful, as well as statistics and bills can be issued afterwards.
+                                                                       Through the use of a logfile analyzer named Calamaris, log files can be charted by varying criteria
+                                                                       on the IPFire web interface.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Bandwidth management:</strong> The download management function allows for control of the bandwidth
+                                                                       to specified zones. Thus, content-based throttling (for example for binary files, CD images or
+                                                                       multimedia content) is configurable with bandwidth limitations for individual zones or for each host
+                                                                       in a particular zone.
+                                                               </li>
+                                                       </ul>
+                                       
+                                                       <h4 class="secondHeadline">{{ _("Content filter") }}</h4>
+
+                                                       <p class="copy">
+                                                               SquidGuard is a URL filter add-on which is connected via the redirector mechanism of the proxy.
+                                                               The heart of SquidGuard is something called a "blacklist." This is a content control list created by the official site. These lists contain a number of categorically-classified websites and can be kept up-to-date automatically. There are different, independent
+                                                               sources for pre-built blacklists available, which allow among other classes filtering for adult
+                                                               content, shopping, warez, social networking, or sites containing violent/abusive content.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Individual extensions for particular domains or URLs can be set up on the IPFire web interface for
+                                                               blacklists and whitelists as well. IPFire also offers a black list editor, that makes the editing
+                                                               and creating your own blacklists quite easy.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Possible areas of application for the SquidGuard on IPFire are:
+                                                       </p>
+                                                       <ul>
+                                                               <li>
+                                                                       Block or restrict Internet content conditionally by time, user and/or computers.
+                                                               </li>
+                                                               <li>
+                                                                       Preventing access to certain (eg. youth-endangering) pages and content categories.
+                                                               </li>
+                                                               <li>
+                                                                       Hiding advertising.
+                                                               </li>
+                                                       </ul>
+                                       
+                                       
+                                                       <h4 class="secondHeadline">{{ _("Update accelerator") }}</h4>
+
+                                                       <p class="copy">
+                                                               The Update Accelerator is a feature that can greatly accelerate deploying updates for operating systems.
+                                                               All downloaded updates are cached and if requested another time, are delivered from the cache.
+                                                       </p>
+                                                       <p class="copy">
+                                                               For example, Service Packs for Microsoft Windows (which often are several hundred megabytes) are cached for future retrieval, as well as virus scanner definition updates and other product updates which the system automatically identifies. This saves a massive amount of time when updating large amounts of computers (such as corporate networks). 
+                                                       </p>
+                                                               
+                                                       <h4 class="secondHeadline">{{ _("Transparent virus scanner") }}</h4>
+                                       
+                                                       <p class="copy">
+                                                               The package manager Pakfire offers the addon SquidClamAV - a virus scanner for the web proxy. This checks in real-time all web traffic for viruses, utilizing the ClamAV virus definitions and scanning engine.
+                                                       </p>
+                                                       <p class="copy">
+                                                               The additional protection to a conventional virus scanner lies in the fact that the files are transparently checked before ever making it to the client machine before the client machine's virus scan can be performed. So potentially-malicious files are blocked by
+                                                               SquidClamAV before the client's actual download.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="crypto">
+                                                       <h3 class="headline">{{ _("Cryptography") }}</h3>
+
+                                                       <p class="copy">
+                                                               Cryptography is one of the foundations for various services
+                                                               like <a href="#vpn">VPNs</a> and secure communication on the Internet.
+                                                               Therefore, IPFire is putting an emphasis on this topic.
+                                                       </p>
+                                       
+                                                       <h4 class="secondHeadline">{{ _("Hardware Acceleration") }}</h4>
+                                       
+                                                       <p class="copy">
+                                                               <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
+                                                               IPFire can use various crypto processors like those to be found
+                                                               in AMD Geode CPUs, the VIA Padlock or CPU extensions like AES-NI
+                                                               of recent Intel and AMD CPUs.
+                                                               These help us to achieve much better throughput where ever
+                                                               data is sent through an encrypted tunnel.
+                                                       </p>
+
+                                                       <ul>
+                                                               <li>
+                                                                       <a href="//wiki.ipfire.org/en/cryptography/hardware">
+                                                                               List of supported crypto hardware
+                                                                       </a>
+                                                               </li>
+                                                       </ul>
+                                       
+                                                       <h4 class="secondHeadline">{{ _("Random Number Generators") }}</h4>
+
+                                                       <p class="copy">
+                                                               <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
+                                                               IPFire is also able to use various random hardware number generators
+                                                               to seed the kernel's entropy pool. That entropy is needed to generate
+                                                               secure keys and speeds up cryptographic operations as well.
+                                                       </p>
+
+                                                       <ul>
+                                                               <li>
+                                                                       <a href="//wiki.ipfire.org/en/cryptography/entropy">
+                                                                               List of supported hardware random number generators
+                                                                       </a>
+                                                               </li>
+                                                       </ul>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="vpn">
+                                                       <h3 class="headline">{{ _("VPN") }}</h3>
+                                                       <h5 class="subheadline">{{ _("Virtual Private Networks") }}</h5>
+
+                                                       <p class="copy">
+                                                               IPFire also includes functionality to create virtual private networks (VPN).
+                                                               A VPN is a gateway which connects remote networks to the local one using an
+                                                               encrypted link.
+                                                               Uses for a VPN include business connections to branch offices or datacenters,
+                                                               as well as providing traveling staff with a secure portal to the corporate network.
+                                                       </p>
+                                                       <p class="copy">
+                                                               For maximum flexibility, IPFire uses both IPsec and OpenVPN protocols,
+                                                               giving administrators maximum flexibility when configuring their VPN.
+                                                               Use of these protocols allows IPFire to connect to a variety of VPN endpoint
+                                                               devices by manufacturers such as Cisco, Juniper, Checkpoint, etc. 
+                                                       </p>
+                                                       
+                                                       <h4 class="secondHeadline">{{ _("IPsec") }}</h4>
+                                       
+                                                       <p class="copy">
+                                                               IPsec is a widely-deployed VPN solution that was originally developed to be used in conjunction with IPv6. Because it was so secure and IPv6 was so slowly deployed, it was backported to secure IPv4 traffic as well.
+                                                       </p>
+
+                                                       <p class="copy">
+                                                               In contrast to SSL-VPNs, IPsec is hard to set-up. In IPFire, we
+                                                               thought about how to make this technology easy-to-use and as a result, there
+                                                               is a web user interface that handles all settings and takes care of the rest
+                                                               of the configuration for you. It also keeps the tunnels alive and
+                                                               re-establishes them automatically after a remote site has lost the connection. A secure connection to a branch office, a
+                                                               business partner, or a home office is done within a couple of minutes
+                                                               and compatible with all other implementations.
+                                                       </p>
+
+                                                       <p class="copy">
+                                                               This high-level of compatibility is achieved by using the free
+                                                               implementation called
+                                                               <a href="//www.strongswan.org" target="_blank">strongSwan</a>. It is maintained by Andreas Steffen, who is a professor for security in communications and head of the Institute for Internet Technologies
+                                                               and Applications at the University of Applied Sciences Rapperswil, in
+                                                               Switzerland. StrongSwan also works with all current, major operating systems, such as Microsoft
+                                                               Windows 7, Microsoft Windows Vista and macOS.
+                                                       </p>
+
+                                                       <h4 class="secondHeadline">{{ _("OpenVPN") }}</h4>
+                                       
+                                                       <p class="copy">
+                                                               OpenVPN is a frequently-encountered and most popular representative
+                                                               of the class of Open Source SSL VPNs.
+                                                               Its relative ease of configuration has again, been made easier
+                                                               by the IPFire web interface. The firewall settings are controlled
+                                                               by IPFire automatically, as well as the required certificates will be
+                                                               generated with a few mouse clicks and can be downloaded and distributed
+                                                               as a very compact client package.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Due to its high compatibility to all sorts of operating systems,
+                                                               such as Microsoft Windows, macOS, Linux, Android and many more,
+                                                               it is perfectly useful for roadwarrior connections.
+                                                               With those, it is easy to connect your laptop, phone, tablet or
+                                                               other devices to your company network, which makes it easy to
+                                                               work from anywhere in the world.
+                                                       </p>
+                                                       <p class="copy">
+                                                               But besides connecting portable devices, OpenVPN can also be used
+                                                               to securely connect branches to the headquater.
+                                                               This makes it easy to access resources on other networks
+                                                               remotely without any complicated configuration on each client
+                                                               on your local network.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="ids">
+                                                       <h3 class="headline">{{ _("Intrusion detection system") }}</h3>
+                                       
+                                                       <p class="copy">
+                                                               An Intrusion Dection System (or IDS), is a piece of software designed to detect attacks against computer systems
+                                                               and networks. Thereby the IDS will analyze the network traffic and search for attack samples. If someone
+                                                               scans the ports of the IPFire-System to see which services are available, the IDS will immediately notice it.
+                                                       </p>
+                                                       <p class="copy">
+                                                               An Intrusion Prevention System (or IPS), in addition to the detection system, will perform actions.
+                                                               The IPS gets the information from the IDS and reacts accordingly. That means, recalling the example above with
+                                                               the portscan, the system would automatically block the attacker immediately in order to prevent further inquiries.
+                                                       </p>
+                                                       <p class="copy">
+                                                               It is possible to use IDS and IPS on the IPFire system. We call this system "Intrusion Detection
+                                                               and Prevention System" (or IDPS). A very important deputy of this system is Snort, the free Network Intrusion Dection System
+                                                               (NIDS). It analyzes the network traffic and if something abnormal happens, it will log the event. IPFire gives you
+                                                               the possibility to see it very explicitly in the web interface.
+                                                       </p>
+                                                       <p class="copy">
+                                                               For automatic prevention, IPFire has an add-on called Guardian which can be installed optionally.
+                                                       </p>
+                                                       <p class="copy">
+                                                               An IDPS is a wise addition to the normal packet filter. It makes intelligent decisions about
+                                                               incoming and outgoing network traffic and how to deal with it.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="qos">
+                                                       <h3 class="headline">{{ _("Quality of Service") }}</h3>
+                                       
+                                                       <p class="copy">
+                                                               Quality of Service (QoS) is able to save the quality of a service on one internet connection. This
+                                                               means that on a highly-utilized internet connection, a service (for example VoIP) gets a stable size of bandwidth,
+                                                               to transfer the information without delay and without loss. This is at the expense of the other
+                                                               data flows on the line, which is tolerated, albeit transmitted more slowly (such as a file upload to an FTP server).
+                                                       </p>
+                                                       <p class="copy">
+                                                               QoS does not only increase the functionality of real-time services, but also offers a little bit of overall improvement. For example:
+                                                       </p>
+                                                       <ul>
+                                                               <li>
+                                                                       <strong>Connections establish much faster.</strong>
+                                                                       This is works very well on busy links.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Connections are much more stable.</strong>
+                                                                       Every service gets a minimum, guaranteed amount of bandwidth.
+                                                               </li>
+                                                       </ul>
+                                                       <p class="copy">
+                                                               For the classification of the packets, a Level-7-Filter is used. It also analyses the content, as well as the source-ports/IPs, and destination-ports/IPs of the packets. With that analysis, it will decide if it's a long download or a real-time
+                                                               protocol and then subsequently determines the optimal use of the connection.
+                                                       </p>
+                                                       <p class="copy">
+                                                               To put all in a nutshell, QoS reduces the latency and packet loss of an
+                                                               internet connection. This is certainly a function that you don't want to miss where bandwidth is limited.
+                                                       </p>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="hardware">
+                                                       <h3 class="headline">{{ _("Hardware") }}</h3>
+                                       
+                                                       <p class="copy">
+                                                               Since IPFire is based on a recent version of the Linux kernel, it supports most
+                                                               of the latest hardware such as 10Gbit network cards and a variety of wireless
+                                                               hardware out of the box.
+                                                               The IPFire developers are very concerned with the ability to run IPFire as many
+                                                               system variations as possible.
+                                                               This helps IPFire to run on older or cheap hardware, as well as high-performance systems.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Minimum system requirements are an Intel Pentium I (i586),
+                                                               512MB RAM and 2GB hard drive space.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Some add-ons have extra requirements to perform smoothly.
+                                                               On a system that fits the hardware requirements, IPFire
+                                                               is able to serve hundreds of clients simultaneously.
+                                                       </p>
+
+                                                       <h4 class="secondHeadline">Heads up: More architectures in development!</h4>
+                                                       <p class="copy">
+                                                               The IPFire project is always interested in creating systems
+                                                               which save the environment. The ARM architecture consumes
+                                                               much less power and certainly has a lot of potential.
+                                                       </p>
+                                                       <!-- <p class="copy">
+                                                               More about this may be found on the
+                                                               <a href="/features/ports/arm">ARM project page</a>.
+                                                       </p> -->
+
+                                                       <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
+                                                               <figure class="col-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/hardware/hwtemp-1.png") }}" itemprop="contentUrl" data-size="756x432">
+                                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/hardware/hwtemp-1_thumb.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                       </a>
+                                                               </figure>
+                                                       </div>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="virtualization">
+                                                       <h3 class="headline">{{ _("Virtualization") }}</h3>
+
+                                                       <p class="copy">
+                                                               IPFire brings many front-end drivers for high-performance virtualization
+                                                               and can be run as virtual guest operating system on the following
+                                                               virtualization platforms.
+                                                               It has also been optimized to some of the mostly distributed ones to bring
+                                                               the best possible performance without impacting the hardware very much.
+                                                       </p>
+
+                                                       <h4 class="secondHeadline">Supported hypervisors</h4>
+                                                       <ul>
+                                                               <li>
+                                                                       <strong>KVM</strong><br>
+                                                                       <a href="//www.linux-kvm.org">KVM</a> is short for
+                                                                       Kernel-based Virtual Machine and is developed by
+                                                                       <a href="//www.redhat.com">Red Hat Inc.</a>.
+                                                                       It is becoming the most advanced hypervisor and succeeding Xen, which
+                                                                       has been used so far.<br>
+                                                                       IPFire is coming with the <em>virtio</em> kernel modules, that have best
+                                                                       performance due to very less virtualization overhead.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>VMware</strong><br>
+                                                                       IPFire runs on different VMware products like <em>vSphere</em>,
+                                                                       <em>ESXi</em> and <em>VMware workstation</em>. The additional package
+                                                                       <em>open-vm-tools</em> offers tools for a better integration.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Xen</strong>
+                                                                       Xen has recently been the de-facto Open Source hypervisor but is now
+                                                                       succeeded by KVM.<br>
+                                                                       IPFire can optionally be run with a paravirtualized kernel, which has very
+                                                                       less virtualization overhead as well. To make the installation very easy,
+                                                                       a pregenerated Xen image can be downloaded from the download page.
+                                                               </li>
+                                                               <li>
+                                                                       <strong>Others</strong>
+                                                                       IPFire is not limited to the hypervisors described above. It runs perfectly on
+                                                                       <em>Qemu</em>, <em>Microsoft Hyper-V</em> or <em>Oracle VirtualBox</em>, too.
+                                                               </li>
+                                                       </ul>
+
+                                                       <h4 class="secondHeadline">A note on virtualization</h4>
+                                                       <p class="copy">
+                                                               Virtualization does have advantages, but it is not without disadavantages.
+                                                               There is always the possibility that the VM container security can be
+                                                               bypassed in some way and a hacker can gain access beyond the VM.
+                                                               Because of this, it is not suggested to use IPFire as a virtual machine
+                                                               in a production-level environment.
+                                                       </p>
+
+                                                       <div class="row my-gallery">
+                                                               <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
+                                                                       <a class="thumbnail" href="{{ static_url("images/screenshots/en/virtualization/virt-manager-1.png") }}" itemprop="contentUrl" data-size="605x375">
+                                                                               <img class="img-fluid" src="{{ static_url("images/screenshots/en/virtualization/virt-manager-1_thumb.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
+                                                                       </a>
+                                                               </figure>
+                                                       </div>
+                                               </section>
+                                               
+                                               <div class="divider"></div>
+                                       
+                                               <section id="wlanap">
+                                                       <h3 class="headline">{{ _("Wireless Access Point") }}</h3>
+
+                                                       <p class="copy">
+                                                               IPFire offers several options for the integration of wireless clients. First, an access point can
+                                                               be connected via a LAN card. In this scenario, IPFire offers MAC/IP address filtering to allow only authorized
+                                                               clients. The clients are allowed by default to access the Internet, but they are not allowed access the local LAN.
+                                                               The second option is to install a wireless LAN (WLAN) card in the IPFire machine that takes the functionality of the access
+                                                               point over, using the add-on "hostapd". This add-on supports both unencrypted and WPA/WPA2-encrypted connections. Also
+                                                               the use of 5 GHz (802.11a standard) is possible if the wireless card supports it.
+                                                       </p>
+                                                       <p class="copy">
+                                                               Wireless card support in IPFire is excellent. The drivers in the stable kernel are very up-to-date
+                                                               and IPFire therefore supports a significant amount of WLAN cards.
+                                                       </p>
+                                               </section>              
                                        </div>
+                               </div>
                        </section>
+               </div>
+       </div>
+       <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
+       <script>
+               $(document).ready(function () {
+                       $('body').scrollspy({ target: '#sidebar', offset: 148 })
                        
-                       <div class="divider"></div>
-               
-                       <section id="pakfire">
-                               <h3 class="headline">Pakfire</h3>
-                               <h5 class="subheadline">{{ _("The IPFire package management system") }}</h5>
-
-                               <p class="copy">
-                                       From a technical point of view, IPFire is a minimalistic, hardened firewall system
-                                       which comes with an integrated package manager called Pakfire.
-                                       The primary task of Pakfire is to update the system with only a single click.
-                                       It is very easy to install <a href="/features/updates">security patches,
-                                       bugfixes and feature enhancements</a>, which make IPFire safer and faster
-                                       - or simply: better.
-                               </p>
-                               <p class="copy">
-                                       Another task of Pakfire is to install additional software that adds new
-                                       functionality to the IPFire system.
-
-                                       Some useful of them are:
-                               
-                                       <ul>
-                                               <li>File sharing services such as Samba and vsftpd</li>
-                                               <li>Communications server using Asterisk</li>
-                                               <li>
-                                                       Various command-line tools as <em>tcpdump</em>,
-                                                       <em>nmap</em>, <em>traceroute</em> and many more.
-                                               </li>
-                                       </ul>
-                               </p>
-               
-                               <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
-                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" itemprop="contentUrl" data-size="770x508">
-                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/pakfire-overview-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                               </a>
-                                       </figure>
-       
-                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" itemprop="contentUrl" data-size="698x284">
-                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/pakfire/addon-services-1.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                               </a>
-                                       </figure>
+                       $('a[href^="#"]').on('click', function(event) {
+                               var target = $(this.getAttribute('href'));
+                               if( target.length ) {
+                                       event.preventDefault();
+                                       $('html, body').stop().animate({
+                                               scrollTop: target.offset().top -147
+                                       }, 750);
+                               }
+                       });
+               });
+       </script>
+
+       <!-- Gallery Lightbox -->
+       <!-- Root element of PhotoSwipe. Must have class pswp. -->
+       <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+               <!-- Background of PhotoSwipe. 
+                       It's a separate element, as animating opacity is faster than rgba(). -->
+               <div class="pswp__bg"></div>
+
+               <!-- Slides wrapper with overflow:hidden. -->
+               <div class="pswp__scroll-wrap">
+
+                       <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
+                       <!-- don't modify these 3 pswp__item elements, data is added later on. -->
+                       <div class="pswp__container">
+                               <div class="pswp__item"></div>
+                               <div class="pswp__item"></div>
+                               <div class="pswp__item"></div>
+                       </div>
+
+                       <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+                       <div class="pswp__ui pswp__ui--hidden">
+                               <div class="pswp__top-bar">
+
+                                       <!--  Controls are self-explanatory. Order can be changed. -->
+                                       <div class="pswp__counter"></div>
+                                       <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+                                       <button class="pswp__button pswp__button--share" title="Share"></button>
+                                       <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+                                       <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                                       <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
+                                       <!-- element will get class pswp__preloader--active when preloader is running -->
+                                       <div class="pswp__preloader">
+                                               <div class="pswp__preloader__icn">
+                                               <div class="pswp__preloader__cut">
+                                                       <div class="pswp__preloader__donut"></div>
+                                               </div>
+                                               </div>
+                                       </div>
                                </div>
 
-                               <h4 class="secondHeadline">Pakfire as a build system</h4>
-                               <p class="copy">
-                                       The next major release of IPFire will also ship a new generation
-                                       of the Pakfire packagement system.
-                                       This new generation has been made faster, more secure, more
-                                       easy to handle and adds a whole bunch of new features.
-                               </p>
-                               <p class="copy">
-                                       One of this features is that pakfire is now the
-                                       buildsystem as well. Having a customized build system for
-                                       the needs of IPFire and the IPFire developers improved
-                                       the development process very much. Building new packages
-                                       became a lot more easy and less time-consuming.
-                               </p>
-                               <p class="copy">
-                                       Quality assurance became more social right now. Check it
-                                       out at <a href="//pakfire.ipfire.org/">pakfire.ipfire.org</a>.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="updates">
-                               <h3 class="headline">{{ _("Updates") }}</h3>
-
-                               <p class="copy">
-                                       IPFire is based on Linux, which is the best Open Source kernel around.
-                                       Additionally, IPFire is <strong>not</strong> based on any other
-                                       distribution like Knoppix is on Debian. It is compiled from the sources
-                                       of every single package. This consumes a lot of work, but finally
-                                       gives the opportunity to not rely on the update cycles of others.
-                                       The advantages we gain is that we are able to select very stable
-                                       versions of software and build the distribution from them. For example
-                                       is the most part of the distribution quite well tested and long maintained
-                                       - in contrast to the kernel which is very recent and regularly updated
-                                       with patches to support as much hardware as possible and more importantly
-                                       fix security errors.
-                               </p>
-                               <p class="copy">
-                                       This is what makes IPFire a very strong and hardened system.
-                               </p>
-                               <p class="copy">
-                                       To keep up that strength and be prepared for new
-                                       <a href="/features/hardware">hardware</a>, we give
-                                       out the so called <strong>Core Updates</strong> which are issued in
-                                       about every four weeks and updating collected fixes. If there is a
-                                       security emergency,     we provide updates in less than a day to overcome
-                                       zero-day holes in the system.
-                               </p>
-                               <p class="copy">
-                                       All of the updates can be installed by the
-                                       <a href="/features/pakfire">package management system</a>
-                                       and users are notified by mail. So in all cases, the update is just
-                                       a simple click and your system is running safe again.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="dialup">
-                               <h3 class="headline">{{ _("Dialup") }}</h3>
-
-                               <p class="copy">
-                                       IPFire as an Internet Gateway is able to dialup through various techniques
-                                       to connect to the Internet.
-                               </p>
-                               <p class="copy">
-                                       It supports all popular types of broadband access, as well as mobile access:
-                               </p>
-                               
-                               <ul>
-                                       <li>
-                                               <strong>VDSL</strong><br>
-                                               VDSL is short for <em>Very High Data Rate Digital Subscriber Line</em> and
-                                               it currently offers bandwidth up to 50 Mbit/s downstream and 10 Mbit/s upstream.
-                                               VDSL brings the possibility of using new technologies such as IPTV. With IPFire, a conventional
-                                               router can be replaced by a full-fledged system that brings the IPTV stream into your own home network.
-                                       </li>
-                                       <li>
-                                               <strong>ADSL / SDSL</strong><br>
-                                               Conventional DSL is also supported, although it is technically
-                                               called also PPPoE or PPPoA. In some countries, the PPTP protocol is also widely used and it is also fully
-                                               supported by IPFire.
-                                       </li>
-                                       <li>
-                                               <strong>Ethernet</strong><br>
-                                               Over Ethernet, IPFire can also be connected to the Internet and obtain
-                                               an IP address either via DHCP or static configuration.
-                                       </li>
-                                       <li>
-                                               <strong>4G / 3G</strong><br>
-                                               Mobile broadband connections over USB modems, which are also known by the names
-                                               UMTS, 3G, CDMA, HSDPA or LTE are also supported by IPFire.
-                                       </li>
-                               </ul>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="proxy">
-                               <h3 class="headline">{{ _("Web proxy") }}</h3>
-
-                               <p class="copy">
-                                       IPFire includes a full-fledged web proxy, which is the well-known, open-source software Squid. It is used by ISPs, universities, schools and large companies use because of its diversity, stability and mature development. Even for small home networks, it
-                                       is a useful feature. In addition to the stateful paket inspection (SPI) filtering by the firewall on
-                                       the TCP/IP layer, the web content which is transmitted over HTTP, HTTPS or FTP can be analysed
-                                       and filtered as well.
-                               </p>
-                               <ul>
-                                       <li>
-                                               <strong>Security:</strong> The client does not query web servers directly, it queries the proxy first.
-                                               The server response goes back to the proxy and not to the client, which actually does not technically even appear on the
-                                               Internet. A related attack would therefore primarily reach the proxy and not the client. There are also
-                                               functions available for data privacy, which is an significant advantage in comparison to a pure NAT router.
-                                       </li>
-                                       <li>
-                                               <strong>Authentication:</strong> Using the access lists, the web proxy can also be configured to allow
-                                               access only after a user has been authenticated. At this point you have the choice between LDAP, identd,
-                                               Windows, Radius or local authentication methods. The web proxy can connect, for example to a
-                                               Microsoft Windows domain controller and only the users of that Windows domain can be granted access to the Internet.
-                                       </li>
-                                       <li>
-                                               <strong>Authorization:</strong> If the Internet access needs to  be limited to specific time of a day,
-                                               or if it should be even completely disabled for any clients, is this easily configured by the
-                                               “network-based access control”, which can also be found on the IPFire web interface. A useful application for this feature can be for example, a school classroom.
-                                       </li>
-                                       <li>
-                                               <strong>Logging:</strong> Since each access can be logged over the proxy, possibilities for the
-                                               examination of the accessed content can be very useful, as well as statistics and bills can be issued afterwards.
-                                               Through the use of a logfile analyzer named Calamaris, log files can be charted by varying criteria
-                                               on the IPFire web interface.
-                                       </li>
-                                       <li>
-                                               <strong>Bandwidth management:</strong> The download management function allows for control of the bandwidth
-                                               to specified zones. Thus, content-based throttling (for example for binary files, CD images or
-                                               multimedia content) is configurable with bandwidth limitations for individual zones or for each host
-                                               in a particular zone.
-                                       </li>
-                               </ul>
-               
-                               <h4 class="secondHeadline">{{ _("Content filter") }}</h4>
-
-                               <p class="copy">
-                                       SquidGuard is a URL filter add-on which is connected via the redirector mechanism of the proxy.
-                                       The heart of SquidGuard is something called a "blacklist." This is a content control list created by the official site. These lists contain a number of categorically-classified websites and can be kept up-to-date automatically. There are different, independent
-                                       sources for pre-built blacklists available, which allow among other classes filtering for adult
-                                       content, shopping, warez, social networking, or sites containing violent/abusive content.
-                               </p>
-                               <p class="copy">
-                                       Individual extensions for particular domains or URLs can be set up on the IPFire web interface for
-                                       blacklists and whitelists as well. IPFire also offers a black list editor, that makes the editing
-                                       and creating your own blacklists quite easy.
-                               </p>
-                               <p class="copy">
-                                       Possible areas of application for the SquidGuard on IPFire are:
-                               </p>
-                               <ul>
-                                       <li>
-                                               Block or restrict Internet content conditionally by time, user and/or computers.
-                                       </li>
-                                       <li>
-                                               Preventing access to certain (eg. youth-endangering) pages and content categories.
-                                       </li>
-                                       <li>
-                                               Hiding advertising.
-                                       </li>
-                               </ul>
-               
-               
-                               <h4 class="secondHeadline">{{ _("Update accelerator") }}</h4>
-
-                               <p class="copy">
-                                       The Update Accelerator is a feature that can greatly accelerate deploying updates for operating systems.
-                                       All downloaded updates are cached and if requested another time, are delivered from the cache.
-                               </p>
-                               <p class="copy">
-                                       For example, Service Packs for Microsoft Windows (which often are several hundred megabytes) are cached for future retrieval, as well as virus scanner definition updates and other product updates which the system automatically identifies. This saves a massive amount of time when updating large amounts of computers (such as corporate networks). 
-                               </p>
-                                       
-                               <h4 class="secondHeadline">{{ _("Transparent virus scanner") }}</h4>
-               
-                               <p class="copy">
-                                       The package manager Pakfire offers the addon SquidClamAV - a virus scanner for the web proxy. This checks in real-time all web traffic for viruses, utilizing the ClamAV virus definitions and scanning engine.
-                               </p>
-                               <p class="copy">
-                                       The additional protection to a conventional virus scanner lies in the fact that the files are transparently checked before ever making it to the client machine before the client machine's virus scan can be performed. So potentially-malicious files are blocked by
-                                       SquidClamAV before the client's actual download.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="crypto">
-                               <h3 class="headline">{{ _("Cryptography") }}</h3>
-
-                               <p class="copy">
-                                       Cryptography is one of the foundations for various services
-                                       like <a href="#vpn">VPNs</a> and secure communication on the Internet.
-                                       Therefore, IPFire is putting an emphasis on this topic.
-                               </p>
-               
-                               <h4 class="secondHeadline">{{ _("Hardware Acceleration") }}</h4>
-               
-                               <p class="copy">
-                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
-                                       IPFire can use various crypto processors like those to be found
-                                       in AMD Geode CPUs, the VIA Padlock or CPU extensions like AES-NI
-                                       of recent Intel and AMD CPUs.
-                                       These help us to achieve much better throughput where ever
-                                       data is sent through an encrypted tunnel.
-                               </p>
-
-                               <ul>
-                                       <li>
-                                               <a href="//wiki.ipfire.org/en/cryptography/hardware">
-                                                       List of supported crypto hardware
-                                               </a>
-                                       </li>
-                               </ul>
-               
-                               <h4 class="secondHeadline">{{ _("Random Number Generators") }}</h4>
-
-                               <p class="copy">
-                                       <span class="badge badge-success">IPFire 2.15 - Core Update 77</span>
-                                       IPFire is also able to use various random hardware number generators
-                                       to seed the kernel's entropy pool. That entropy is needed to generate
-                                       secure keys and speeds up cryptographic operations as well.
-                               </p>
-
-                               <ul>
-                                       <li>
-                                               <a href="//wiki.ipfire.org/en/cryptography/entropy">
-                                                       List of supported hardware random number generators
-                                               </a>
-                                       </li>
-                               </ul>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="vpn">
-                               <h3 class="headline">{{ _("VPN") }}</h3>
-                               <h5 class="subheadline">{{ _("Virtual Private Networks") }}</h5>
-
-                               <p class="copy">
-                                       IPFire also includes functionality to create virtual private networks (VPN).
-                                       A VPN is a gateway which connects remote networks to the local one using an
-                                       encrypted link.
-                                       Uses for a VPN include business connections to branch offices or datacenters,
-                                       as well as providing traveling staff with a secure portal to the corporate network.
-                               </p>
-                               <p class="copy">
-                                       For maximum flexibility, IPFire uses both IPsec and OpenVPN protocols,
-                                       giving administrators maximum flexibility when configuring their VPN.
-                                       Use of these protocols allows IPFire to connect to a variety of VPN endpoint
-                                       devices by manufacturers such as Cisco, Juniper, Checkpoint, etc. 
-                               </p>
-                               
-                               <h4 class="secondHeadline">{{ _("IPsec") }}</h4>
-               
-                               <p class="copy">
-                                       IPsec is a widely-deployed VPN solution that was originally developed to be used in conjunction with IPv6. Because it was so secure and IPv6 was so slowly deployed, it was backported to secure IPv4 traffic as well.
-                               </p>
-
-                               <p class="copy">
-                                       In contrast to SSL-VPNs, IPsec is hard to set-up. In IPFire, we
-                                       thought about how to make this technology easy-to-use and as a result, there
-                                       is a web user interface that handles all settings and takes care of the rest
-                                       of the configuration for you. It also keeps the tunnels alive and
-                                       re-establishes them automatically after a remote site has lost the connection. A secure connection to a branch office, a
-                                       business partner, or a home office is done within a couple of minutes
-                                       and compatible with all other implementations.
-                               </p>
-
-                               <p class="copy">
-                                       This high-level of compatibility is achieved by using the free
-                                       implementation called
-                                       <a href="//www.strongswan.org" target="_blank">strongSwan</a>. It is maintained by Andreas Steffen, who is a professor for security in communications and head of the Institute for Internet Technologies
-                                       and Applications at the University of Applied Sciences Rapperswil, in
-                                       Switzerland. StrongSwan also works with all current, major operating systems, such as Microsoft
-                                       Windows 7, Microsoft Windows Vista and macOS.
-                               </p>
-
-                               <h4 class="secondHeadline">{{ _("OpenVPN") }}</h4>
-               
-                               <p class="copy">
-                                       OpenVPN is a frequently-encountered and most popular representative
-                                       of the class of Open Source SSL VPNs.
-                                       Its relative ease of configuration has again, been made easier
-                                       by the IPFire web interface. The firewall settings are controlled
-                                       by IPFire automatically, as well as the required certificates will be
-                                       generated with a few mouse clicks and can be downloaded and distributed
-                                       as a very compact client package.
-                               </p>
-                               <p class="copy">
-                                       Due to its high compatibility to all sorts of operating systems,
-                                       such as Microsoft Windows, macOS, Linux, Android and many more,
-                                       it is perfectly useful for roadwarrior connections.
-                                       With those, it is easy to connect your laptop, phone, tablet or
-                                       other devices to your company network, which makes it easy to
-                                       work from anywhere in the world.
-                               </p>
-                               <p class="copy">
-                                       But besides connecting portable devices, OpenVPN can also be used
-                                       to securely connect branches to the headquater.
-                                       This makes it easy to access resources on other networks
-                                       remotely without any complicated configuration on each client
-                                       on your local network.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="ids">
-                               <h3 class="headline">{{ _("Intrusion detection system") }}</h3>
-               
-                               <p class="copy">
-                                       An Intrusion Dection System (or IDS), is a piece of software designed to detect attacks against computer systems
-                                       and networks. Thereby the IDS will analyze the network traffic and search for attack samples. If someone
-                                       scans the ports of the IPFire-System to see which services are available, the IDS will immediately notice it.
-                               </p>
-                               <p class="copy">
-                                       An Intrusion Prevention System (or IPS), in addition to the detection system, will perform actions.
-                                       The IPS gets the information from the IDS and reacts accordingly. That means, recalling the example above with
-                                       the portscan, the system would automatically block the attacker immediately in order to prevent further inquiries.
-                               </p>
-                               <p class="copy">
-                                       It is possible to use IDS and IPS on the IPFire system. We call this system "Intrusion Detection
-                                       and Prevention System" (or IDPS). A very important deputy of this system is Snort, the free Network Intrusion Dection System
-                                       (NIDS). It analyzes the network traffic and if something abnormal happens, it will log the event. IPFire gives you
-                                       the possibility to see it very explicitly in the web interface.
-                               </p>
-                               <p class="copy">
-                                       For automatic prevention, IPFire has an add-on called Guardian which can be installed optionally.
-                               </p>
-                               <p class="copy">
-                                       An IDPS is a wise addition to the normal packet filter. It makes intelligent decisions about
-                                       incoming and outgoing network traffic and how to deal with it.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="qos">
-                               <h3 class="headline">{{ _("Quality of Service") }}</h3>
-               
-                               <p class="copy">
-                                       Quality of Service (QoS) is able to save the quality of a service on one internet connection. This
-                                       means that on a highly-utilized internet connection, a service (for example VoIP) gets a stable size of bandwidth,
-                                       to transfer the information without delay and without loss. This is at the expense of the other
-                                       data flows on the line, which is tolerated, albeit transmitted more slowly (such as a file upload to an FTP server).
-                               </p>
-                               <p class="copy">
-                                       QoS does not only increase the functionality of real-time services, but also offers a little bit of overall improvement. For example:
-                               </p>
-                               <ul>
-                                       <li>
-                                               <strong>Connections establish much faster.</strong>
-                                               This is works very well on busy links.
-                                       </li>
-                                       <li>
-                                               <strong>Connections are much more stable.</strong>
-                                               Every service gets a minimum, guaranteed amount of bandwidth.
-                                       </li>
-                               </ul>
-                               <p class="copy">
-                                       For the classification of the packets, a Level-7-Filter is used. It also analyses the content, as well as the source-ports/IPs, and destination-ports/IPs of the packets. With that analysis, it will decide if it's a long download or a real-time
-                                       protocol and then subsequently determines the optimal use of the connection.
-                               </p>
-                               <p class="copy">
-                                       To put all in a nutshell, QoS reduces the latency and packet loss of an
-                                       internet connection. This is certainly a function that you don't want to miss where bandwidth is limited.
-                               </p>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="hardware">
-                               <h3 class="headline">{{ _("Hardware") }}</h3>
-               
-                               <p class="copy">
-                                       Since IPFire is based on a recent version of the Linux kernel, it supports most
-                                       of the latest hardware such as 10Gbit network cards and a variety of wireless
-                                       hardware out of the box.
-                                       The IPFire developers are very concerned with the ability to run IPFire as many
-                                       system variations as possible.
-                                       This helps IPFire to run on older or cheap hardware, as well as high-performance systems.
-                               </p>
-                               <p class="copy">
-                                       Minimum system requirements are an Intel Pentium I (i586),
-                                       512MB RAM and 2GB hard drive space.
-                               </p>
-                               <p class="copy">
-                                       Some add-ons have extra requirements to perform smoothly.
-                                       On a system that fits the hardware requirements, IPFire
-                                       is able to serve hundreds of clients simultaneously.
-                               </p>
-
-                               <h4 class="secondHeadline">Heads up: More architectures in development!</h4>
-                               <p class="copy">
-                                       The IPFire project is always interested in creating systems
-                                       which save the environment. The ARM architecture consumes
-                                       much less power and certainly has a lot of potential.
-                               </p>
-                               <!-- <p class="copy">
-                                       More about this may be found on the
-                                       <a href="/features/ports/arm">ARM project page</a>.
-                               </p> -->
-
-                               <div class="row my-gallery" itemscope itemtype="https://schema.org/ImageGallery">
-                                       <figure class="col-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/hardware/hwtemp-1.png") }}" itemprop="contentUrl" data-size="756x432">
-                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/hardware/hwtemp-1_thumb.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                               </a>
-                                       </figure>
+                               <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                                       <div class="pswp__share-tooltip"></div> 
                                </div>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="virtualization">
-                               <h3 class="headline">{{ _("Virtualization") }}</h3>
-
-                               <p class="copy">
-                                       IPFire brings many front-end drivers for high-performance virtualization
-                                       and can be run as virtual guest operating system on the following
-                                       virtualization platforms.
-                                       It has also been optimized to some of the mostly distributed ones to bring
-                                       the best possible performance without impacting the hardware very much.
-                               </p>
-
-                               <h4 class="secondHeadline">Supported hypervisors</h4>
-                               <ul>
-                                       <li>
-                                               <strong>KVM</strong><br>
-                                               <a href="//www.linux-kvm.org">KVM</a> is short for
-                                               Kernel-based Virtual Machine and is developed by
-                                               <a href="//www.redhat.com">Red Hat Inc.</a>.
-                                               It is becoming the most advanced hypervisor and succeeding Xen, which
-                                               has been used so far.<br>
-                                               IPFire is coming with the <em>virtio</em> kernel modules, that have best
-                                               performance due to very less virtualization overhead.
-                                       </li>
-                                       <li>
-                                               <strong>VMware</strong><br>
-                                               IPFire runs on different VMware products like <em>vSphere</em>,
-                                               <em>ESXi</em> and <em>VMware workstation</em>. The additional package
-                                               <em>open-vm-tools</em> offers tools for a better integration.
-                                       </li>
-                                       <li>
-                                               <strong>Xen</strong>
-                                               Xen has recently been the de-facto Open Source hypervisor but is now
-                                               succeeded by KVM.<br>
-                                               IPFire can optionally be run with a paravirtualized kernel, which has very
-                                               less virtualization overhead as well. To make the installation very easy,
-                                               a pregenerated Xen image can be downloaded from the download page.
-                                       </li>
-                                       <li>
-                                               <strong>Others</strong>
-                                               IPFire is not limited to the hypervisors described above. It runs perfectly on
-                                               <em>Qemu</em>, <em>Microsoft Hyper-V</em> or <em>Oracle VirtualBox</em>, too.
-                                       </li>
-                               </ul>
 
-                               <h4 class="secondHeadline">A note on virtualization</h4>
-                               <p class="copy">
-                                       Virtualization does have advantages, but it is not without disadavantages.
-                                       There is always the possibility that the VM container security can be
-                                       bypassed in some way and a hacker can gain access beyond the VM.
-                                       Because of this, it is not suggested to use IPFire as a virtual machine
-                                       in a production-level environment.
-                               </p>
-
-                               <div class="row my-gallery">
-                                       <figure class="col-sm-12 col-md-3" itemprop="associatedMedia" itemscope itemtype="https://schema.org/ImageObject">
-                                               <a class="thumbnail" href="{{ static_url("images/screenshots/en/virtualization/virt-manager-1.png") }}" itemprop="contentUrl" data-size="605x375">
-                                                       <img class="img-fluid" src="{{ static_url("images/screenshots/en/virtualization/virt-manager-1_thumb.png") }}" itemprop="thumbnail" alt="{{ _("Screenshot") }}">
-                                               </a>
-                                       </figure>
+                               <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+                               <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
+
+                               <div class="pswp__caption">
+                                       <div class="pswp__caption__center"></div>
                                </div>
-                       </section>
-                       
-                       <div class="divider"></div>
-               
-                       <section id="wlanap">
-                               <h3 class="headline">{{ _("Wireless Access Point") }}</h3>
-
-                               <p class="copy">
-                                       IPFire offers several options for the integration of wireless clients. First, an access point can
-                                       be connected via a LAN card. In this scenario, IPFire offers MAC/IP address filtering to allow only authorized
-                                       clients. The clients are allowed by default to access the Internet, but they are not allowed access the local LAN.
-                                       The second option is to install a wireless LAN (WLAN) card in the IPFire machine that takes the functionality of the access
-                                       point over, using the add-on "hostapd". This add-on supports both unencrypted and WPA/WPA2-encrypted connections. Also
-                                       the use of 5 GHz (802.11a standard) is possible if the wireless card supports it.
-                               </p>
-                               <p class="copy">
-                                       Wireless card support in IPFire is excellent. The drivers in the stable kernel are very up-to-date
-                                       and IPFire therefore supports a significant amount of WLAN cards.
-                               </p>
-                       </section>
+                       </div>
                </div>
        </div>
-</div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
-<script>
-       $(document).ready(function () {
-               $('body').scrollspy({ target: '#sidebar', offset: 148 })
-               
-               $('a[href^="#"]').on('click', function(event) {
-                       var target = $(this.getAttribute('href'));
-                       if( target.length ) {
-                               event.preventDefault();
-                               $('html, body').stop().animate({
-                                       scrollTop: target.offset().top -147
-                               }, 750);
-                       }
-               });
-       });
-</script>
-
-<!-- Gallery Lightbox -->
-<!-- Root element of PhotoSwipe. Must have class pswp. -->
-<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
-
-    <!-- Background of PhotoSwipe. 
-         It's a separate element, as animating opacity is faster than rgba(). -->
-    <div class="pswp__bg"></div>
-
-    <!-- Slides wrapper with overflow:hidden. -->
-    <div class="pswp__scroll-wrap">
-
-        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
-        <!-- don't modify these 3 pswp__item elements, data is added later on. -->
-        <div class="pswp__container">
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-            <div class="pswp__item"></div>
-        </div>
-
-        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
-        <div class="pswp__ui pswp__ui--hidden">
-            <div class="pswp__top-bar">
-
-                <!--  Controls are self-explanatory. Order can be changed. -->
-                <div class="pswp__counter"></div>
-                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
-                <button class="pswp__button pswp__button--share" title="Share"></button>
-                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
-                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
-
-                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
-                <!-- element will get class pswp__preloader--active when preloader is running -->
-                <div class="pswp__preloader">
-                    <div class="pswp__preloader__icn">
-                      <div class="pswp__preloader__cut">
-                        <div class="pswp__preloader__donut"></div>
-                      </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-                <div class="pswp__share-tooltip"></div> 
-            </div>
-
-            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
-            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
-
-            <div class="pswp__caption">
-                <div class="pswp__caption__center"></div>
-            </div>
-        </div>
-    </div>
-</div>
-<script src="{{ static_url("js/photoswipe.min.js") }}"></script>
-<script src="{{ static_url("js/photoswipe-ui-default.min.js") }}"></script>
-<script src="{{ static_url("js/photoswipe-index.js") }}"></script>
-
-<!-- Icons -->
-<svg aria-hidden="true" style="display: none">
-       <symbol id="verified" viewBox="0 0 24 24">
-               <path d="M12 0L3 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4l-9-4zm-2 16l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/>
-       </symbol>
-       <symbol id="warning" viewBox="0 0 24 24">
-               <path d="M1 20h22L12 1 1 20zm12-3h-2v-2h2v2zm0-4h-2V9h2v4z"/>
-       </symbol>
-       <symbol id="wifi" viewBox="0 0 24 24">
-                <path d="M1 8l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 1.93 7.08 1.93 1 8zm8 8l3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4l2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 8.14 8.87 8.14 5 12z"/>
-       </symbol>
-       <symbol id="server" viewBox="0 0 24 24">
-               <<path d="M13 18h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1H2v-2h7a1 1 0 0 1 1-1h1v-2H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-7v2zM4 2h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm5 4h1V4H9v2zm0 8h1v-2H9v2zM5 4v2h2V4H5zm0 8v2h2v-2H5z"/>
-       </symbol>
-</svg>
+       <script src="{{ static_url("js/photoswipe.min.js") }}"></script>
+       <script src="{{ static_url("js/photoswipe-ui-default.min.js") }}"></script>
+       <script src="{{ static_url("js/photoswipe-index.js") }}"></script>
+
+       <!-- Icons -->
+       <svg aria-hidden="true" style="display: none">
+               <symbol id="verified" viewBox="0 0 24 24">
+                       <path d="M12 0L3 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4l-9-4zm-2 16l-4-4 1.41-1.41L10 13.17l6.59-6.59L18 8l-8 8z"/>
+               </symbol>
+               <symbol id="warning" viewBox="0 0 24 24">
+                       <path d="M1 20h22L12 1 1 20zm12-3h-2v-2h2v2zm0-4h-2V9h2v4z"/>
+               </symbol>
+               <symbol id="wifi" viewBox="0 0 24 24">
+                       <path d="M1 8l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 1.93 7.08 1.93 1 8zm8 8l3 3 3-3a4.237 4.237 0 0 0-6 0zm-4-4l2 2a7.074 7.074 0 0 1 10 0l2-2C15.14 8.14 8.87 8.14 5 12z"/>
+               </symbol>
+               <symbol id="server" viewBox="0 0 24 24">
+                       <<path d="M13 18h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1H2v-2h7a1 1 0 0 1 1-1h1v-2H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-7v2zM4 2h16a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm5 4h1V4H9v2zm0 8h1v-2H9v2zM5 4v2h2V4H5zm0 8v2h2v-2H5z"/>
+               </symbol>
+       </svg>
 {% end block %}