<div id="scrollto" class="page-scroll">
<a href="#features" class="btn btn-outline-primary rounded-circle">
- <svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><g><path d="M1.41.02L6 4.694 10.59.02 12 1.46 6 7.581 0 1.459z"/></g></svg>
+ <svg class="icon i_arrow_down"><use xlink:href="{{ static_url("img/icons.svg#arrow_down") }}"></use></svg>
</a>
</div>
</section>
- <!--
- <section id="about" class="dark-background text-center">
- <div class="about-section">
- <div class="container">
- <p class="lead">
- {% if lang == "de" %}
- Willkommen! <strong>IPFire</strong> ist eine professionelle
- und gehärtete Firewalldistribution, die sicher und einfach zu
- benutzen ist. Mit vielen Funktionen ausgestattet, ist IPFire
- ideal für den Einsatz in Unternehmen, Behörden, und überall sonst.
- {% else %}
- Welcome to <strong>IPFire</strong>, the professional and hardened
- Linux firewall distribution that is secure, easy to operate
- and coming with great functionality so that it is ready
- for enterprises, authorities, and anybody else.
- {% end %}
- </p>
-
- <a class="btn btn-default btn-lg" href="/about">{{ _("Learn More") }}</a>
- </div>
- </div>
- </section>
- -->
-
<section id="features" class="content-section">
<div class="container">
<h3 class="display-2 text-center">{{ _("Secure up your network with IPFire") }}</h2>
<div class="row mb-lg-6 mb-md-5">
<div class="col-md-6 col-lg-4 mb-6 pb-lg-5">
<div class="feature_icons">
- <svg width="18" height="22" viewBox="0 0 18 22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h24v24H-3z"/><path d="M9 0L0 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V4L9 0zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V11H2V5.3l7-3.11v8.8z" fill="#b71c1c"/></g></svg>
+ <svg class="icon i_lg i_shield"><use xlink:href="{{ static_url("img/icons.svg#shield") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Firewall") }}</h4>
<p>
<div class="col-md-6 col-lg-4 mb-6">
<div class="feature_icons">
- <svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 13a3 3 0 0 1-3-3c0-1.12.61-2.1 1.5-2.61l9.71-5.62-5.53 9.58c-.5.98-1.51 1.65-2.68 1.65zm0-13c1.81 0 3.5.5 4.97 1.32l-2.1 1.21C12 2.19 11 2 10 2a8 8 0 0 0-8 8c0 2.21.89 4.21 2.34 5.65h.01c.39.39.39 1.02 0 1.41-.39.39-1.03.39-1.42.01A9.969 9.969 0 0 1 0 10C0 4.477 4.477 0 10 0zm10 10c0 2.76-1.12 5.26-2.93 7.07-.39.38-1.02.38-1.41-.01a.996.996 0 0 1 0-1.41A7.95 7.95 0 0 0 18 10c0-1-.19-2-.54-2.9L18.67 5C19.5 6.5 20 8.18 20 10z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+ <svg class="icon i_lg i_speed"><use xlink:href="{{ static_url("img/icons.svg#speed") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Performance") }}</h4>
<p>
<div class="col-md-6 col-lg-4 mb-6">
<div class="feature_icons">
- <svg width="22" height="14" viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h24v24H0z"/></defs><g transform="translate(-1 -5)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path d="M21 10c-1.1 0-2 .9-2 2v3H5v-3c0-1.1-.9-2-2-2s-2 .9-2 2v5c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2v-5c0-1.1-.9-2-2-2zm-3-5H6c-1.1 0-2 .9-2 2v2.15c1.16.41 2 1.51 2 2.82V14h12v-2.03c0-1.3.84-2.4 2-2.82V7c0-1.1-.9-2-2-2z" fill="#b71c1c" mask="url(#b)"/></g></svg>
+ <svg class="icon i_lg i_couch"><use xlink:href="{{ static_url("img/icons.svg#couch") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Easy to use") }}</h4>
<p class="mb-1">
<div class="col-md-6 col-lg-4 mb-6">
<div class="feature_icons">
- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M11 16h1a1 1 0 0 1 1 1h7v2h-7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1H0v-2h7a1 1 0 0 1 1-1h1v-1.66C6.07 13.13 4 10 4 6.67v-4L10 0l6 2.67v4c0 3.33-2.07 6.46-5 7.67V16zM10 2L6 3.69V7h4V2zm0 5v6c1.91-.47 4-2.94 4-5V7h-4z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+ <svg class="icon i_lg i_security"><use xlink:href="{{ static_url("img/icons.svg#security") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Network Security") }}</h4>
<p>
<div class="col-md-6 col-lg-4 mb-6">
<div class="feature_icons">
- <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-2h24v24H-2z"/><path d="M10 0C4.477 0 0 4.477 0 10c0 4.42 2.87 8.17 6.84 9.5.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34-.46-1.16-1.11-1.47-1.11-1.47-.91-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.87 1.52 2.34 1.07 2.91.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.92 0-1.11.38-2 1.03-2.71-.1-.25-.45-1.29.1-2.64 0 0 .84-.27 2.75 1.02.79-.22 1.65-.33 2.5-.33.85 0 1.71.11 2.5.33 1.91-1.29 2.75-1.02 2.75-1.02.55 1.35.2 2.39.1 2.64.65.71 1.03 1.6 1.03 2.71 0 3.82-2.34 4.66-4.57 4.91.36.31.69.92.69 1.85V19c0 .27.16.59.67.5C17.14 18.16 20 14.42 20 10A10 10 0 0 0 10 0z" fill="#b71c1c" fill-rule="nonzero"/></g></svg>
+ <svg class="icon i_lg i_github"><use xlink:href="{{ static_url("img/icons.svg#github") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Open Source") }}</h4>
<p>
<div class="col-md-6 col-lg-4 mb-6">
<div class="feature_icons">
- <svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>
+ <svg class="icon i_lg i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
</div>
<h4 class="pb-3">{{ _("Trusted by thousands") }}</h4>
<p>
</div>
</div>
- <div class="row justify-content-center pt-4">
+ <div class="row justify-content-center pt-0 pt-md-4">
<a class="btn btn-primary btn-lg px-4 px-md-6" href="/get-started">{{ _("Get Started") }}</a>
<a class="btn btn-white btn-lg px-4 px-md-6" href="/learn-more">{{ _("Learn more") }}</a>
</div>
<section id="news" class="content-section">
<div class="container">
<div class="row">
- <div class="col col-md-5 mb-6">
+ <div class="col col-md-6 col-lg-5 mb-6">
<h2 class="display-2 mb-6">Latest Release</h2>
<p class="mb-3"><small>{{ locale.format_date(latest_release.date, shorter=True) }}</small></p>
<h3 class="display-3 mb-5 pb-5"><a href="/news/{{ latest_release.news.slug }}">
</a>
</h3>
<div class="btn-toolbar mb-6">
- <a class="btn btn-primary mr-3" href="/download"><svg width="14" height="17" viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-5-3h24v24H-5z"/><path d="M14 6h-4V0H4v6H0l7 7 7-7zM0 15v2h14v-2H0z" fill="#fff"/></g></svg>{{ _("Download") }}</a>
- <a class="btn btn-white ml-3" href="/donate"><svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-2-3h24v24H-2z"/><path d="M10 18.35l-1.45-1.32C3.4 12.36 0 9.28 0 5.5 0 2.42 2.42 0 5.5 0 7.24 0 8.91.81 10 2.09 11.09.81 12.76 0 14.5 0 17.58 0 20 2.42 20 5.5c0 3.78-3.4 6.86-8.55 11.54L10 18.35z" fill="#b71c1c"/></g></svg>{{ _("Donate") }}</a>
+ <a class="btn btn-primary mr-3" href="/download">
+ <svg class="icon i_sm i_download"><use xlink:href="{{ static_url("img/icons.svg#download") }}"></use></svg>
+ {{ _("Download") }}
+ </a>
+ <a class="btn btn-white ml-3" href="/donate">
+ <svg class="icon i_sm i_heart"><use xlink:href="{{ static_url("img/icons.svg#heart") }}"></use></svg>
+ {{ _("Donate") }}
+ </a>
</div>
<p>A complete history of IPFire releases is available at our <a href="/news">News</a> page.</p>
</div>
- <div class="col col-md-5 offset-md-2">
+ <div class="col col-md-6 col-lg-5 offset-lg-2">
<h2 class="display-2 mb-6">What’s going on?</h2>
<dl class="dl-horizontal">
{% for type, item in latest_news %}
<div class="container">
<h2 class="display-2 text-center">Fire<strong>Info</strong> Statistics</h2>
- <div class="row pb-5 mb-6">
+ <div class="row mb-6 mb-md-5 pb-lg-5 mb-lg-6">
<div class="col-6 col-md-3 mb-6 text-center">
<p class="mb-3"><small>Latest Release</small></p>
<h4 class="pb-5">2.19 Core 109</h4>
</div>
<div class="col-6 col-md-3 text-center">
- <p class="mb-3"><small>Favorite Virtualisation</small></p>
+ <p class="mb-3 truncate"><small>Favorite Virtualisation</small></p>
<h4 class="pb-5">VMWare</h4>
<div class="v_circle circle mt-5">
<p class="lead">46%</p>
</div>
<div class="row justify-content-center">
- <a class="btn btn-primary btn-lg" href="/stats">More Stats</a>
+ <a class="btn btn-lg btn-primary" href="/stats">More Stats</a>
</div>
</div>
</section>
</p>
</div>
<div class="col-md-6 offset-md-3 col-lg-4 offset-lg-1">
- <a class="btn btn-bluegrey900 btn-lg btn-block" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
- <a class="btn btn-bluegrey900 btn-lg btn-block" href="/hardware">{{ _("Hardware Appliances") }}</a>
+ <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/get-support#professional">{{ _("Get Professional Support") }}</a>
+ <a class="btn btn-bluegrey900 btn-lg btn-block px-md-0" href="/hardware">{{ _("Hardware Appliances") }}</a>
</div>
</div>
- <div class="row justify-content-center">
- <img class="img-fluid" src="{{ static_url("img/appliance-pro.png") }}">
+ <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>
</section>
projects / people / shoehn / ipfire.org.git / blobdiff