-{% extends "base.html" %}
+{% extends "../base.html" %}
{% block head %}
<meta name="description" content="{{ _("A powerful location database to find people on the Internet") }}" />
{% block title %}{{ _("Welcome to IPFire Location") }}{% end block %}
{% block container %}
- <div class="header">
- <div class="container">
- <h1>{{ _("Welcome to IPFire Location") }}</h1>
+ <section class="hero is-primary">
+ <div class="hero-body">
+ <div class="container">
+ <nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+ <ul>
+ <li>
+ <a href="/">
+ {{ _("Home") }}
+ </a>
+ </li>
+ <li>
+ <a href="#">
+ {{ _("Projects") }}
+ </a>
+ </li>
+ <li class="is-active">
+ <a href="#" aria-current="page">{{ _("Location") }}</a>
+ </li>
+ </ul>
+ </nav>
+
+ <h1 class="title is-1">{{ _("IPFire Location") }}</h1>
+ <h6 class="subtitle is-6">
+ {{ _("A powerful, free IP address location database") }}
+ </h6>
+ </div>
+ </div>
+ </section>
- <p class="text-muted">
- {% if address.country_code %}
+ {% if address.country_code %}
+ <section class="has-background-light">
+ <div class="container">
+ <p class="has-text-centered px-2 py-1">
{{ _("We have detected you visiting us from %s.") % format_country_name(address.country_code) }}
- {% else %}
- {{ _("Unfortunately we do not know where you are visiting us from.") }}
- {% end %}
+ <a href="/projects/location/lookup/{{ address }}">{{ _("Learn More") }}</a>
+ </p>
+ </div>
+ </section>
+ {% end %}
- <a href="/projects/location/lookup/{{ address }}">{{ _("Learn More") }}</a>
- </p>
- </div>
- </div>
+ <section class="section">
+ <div class="container">
+ <div class="block">
+ <p class="is-size-4">
+ IPFire<span class="has-text-primary">_</span> Location is being used in
+ firewalls or other threat detection software, load-balancers, online shops,
+ websites, analytics & reporting tools and more to detect the
+ originating country by IP address.
+ We are proud that our software is faster than others
+ by maintaining a smaller memory footprint which puts it
+ first in performance.
+ </p>
+ </div>
+
+ <div class="block">
+ <p>
+ Our daily updated database does not only have information
+ about the originating country of all IPv6 and IPv4 addresses.
+ It identifies the Autonomous System (AS) these IP
+ addresses belong to, as well and more...
+ <code>libloc</code> is the C/C++ library that fires our
+ location services and runs on *nix, Mac OS X and more.
+ Integration into existing software is very easy and
+ bindings for languages like Python and Perl are available.
+ </p>
+ </div>
+
+ <div class="buttons">
+ <a class="button is-light" href="/projects/location/how-to-use">
+ {{ _("How To Use") }}
+ </a>
- <div class="container">
- <section>
- <h3>{{ _("What is IPFire Location?") }}</h3>
-
- <p>
- IPFire Location can be used in firewalls or other threat
- detection software, load-balancers, online shops, websites,
- analytics & reporting tools and more to detect the
- originating country by IP address.
- We are proud that our software is faster than others
- by maintaining a smaller memory footprint which puts it
- first in performance.
- </p>
-
- <p>
- Our daily updated database does not only have information
- about the originating country of all IPv6 and IPv4 addresses.
- It identifies the Autonomous System (AS) these IP
- addresses belong to, as well and more...
- </p>
-
- <p>
- <code>libloc</code> is the C/C++ library that fires our
- location services and runs on *nix, Mac OS X and more.
- Integration into existing software is very easy and
- bindings for languages like Python and Perl are available.
- </p>
-
- <div class="btn-toolbar">
- <a class="btn btn-secondary mr-2" href="/projects/location/how-to-use">{{ _("How To Use") }}</a>
- <a class="btn btn-primary" href="/donate">
+ <a class="button is-primary" href="/donate">
{{ _("Donate") }}
</a>
</div>
</section>
</div>
- <section>
- <div class="container">
- <div class="card bg-primary text-white p-5">
- <div class="card-body">
- <div class="row">
- <div class="col-md-12 col-lg-6 mb-3 d-flex">
- <div class="align-self-stretch">
- <span class="fas fa-biohazard fa-2x px-3"></span>
+ <section class="hero is-light">
+ <div class="hero-body">
+ <div class="container">
+ <div class="columns is-multiline">
+ <div class="column is-half">
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-3 has-text-centered">
+ <span class="fas fa-biohazard fa-5x"></span>
</div>
- <div class="flex-column">
- <h5 class="mb-3">{{ _("Threat Detection") }}</h5>
+ <div class="column">
+ <p class="title is-5">{{ _("Threat Detection") }}</p>
<p>
{{ _("Location information is crucial to identify where an attacker is coming from.") }}
</p>
</div>
</div>
+ </div>
- <div class="col-md-12 col-lg-6 mb-3 d-flex">
- <div class="align-self-stretch">
- <span class="fas fa-balance-scale fa-2x px-3"></span>
+ <div class="column is-half">
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-3 has-text-centered">
+ <span class="fas fa-balance-scale fa-5x"></span>
</div>
- <div class="flex-column">
- <h5 class="mb-3">{{ _("Load-Balancing") }}</h5>
+ <div class="column">
+ <p class="title is-5">{{ _("Load-Balancing") }}</p>
<p>
{{ _("Redirect your users to the nearest data center to given them a better user experience with faster websites and faster downloads.") }}
</p>
</div>
</div>
+ </div>
- <div class="col-md-12 col-lg-6 mb-3 d-flex">
- <div class="align-self-stretch">
- <span class="fas fa-route fa-2x px-3"></span>
+ <div class="column is-half">
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-3 has-text-centered">
+ <span class="fas fa-route fa-5x"></span>
</div>
- <div class="flex-column">
- <h5 class="mb-3">{{ _("Online Visitors") }}</h5>
+ <div class="column">
+ <p class="title is-5">{{ _("Online Visitors") }}</p>
<p>
{{ _("Comply with legal requirements and show visitors the correct information depending on the country they are visiting from.") }}
</p>
</div>
</div>
+ </div>
- <div class="col-md-12 col-lg-6 mb-3 d-flex">
- <div class="align-self-stretch">
- <span class="fab fa-osi fa-2x px-3"></span>
+ <div class="column is-half">
+ <div class="columns is-mobile is-vcentered">
+ <div class="column is-3 has-text-centered">
+ <span class="fab fa-osi fa-5x"></span>
</div>
- <div class="flex-column">
- <h5 class="mb-3">{{ _("Open Source") }}</h5>
+ <div class="column">
+ <p class="title is-5">{{ _("Open Source") }}</p>
<p>
{{ _("libloc is free software and relies on support from the community.") }}
</div>
</section>
- <div class="container">
- <section>
- <h3 class="mb-5">{{ _("Who Is Using IPFire Location?") }}</h3>
-
- <div class="row row-cols-2 row-cols-lg-4 justify-content-around align-items-center">
- <div class="col text-center">
- <img src="{{ static_url("img/ipfire-tux.png") }}"
- class="img-fluid mb-3" alt="{{ _("IPFire Logo") }}">
-
- <h6>
- <a href="https://www.ipfire.org/" rel="noopener">IPFire</a>
- </h6>
- </div>
-
- <div class="col text-center">
- <img src="{{ static_url("img/tor.svg") }}"
- class="img-fluid mb-3" alt="{{ _("Tor Project Logo") }}">
+ <section class="hero">
+ <div class="hero-body">
+ <div class="container">
+ <p class="title">{{ _("Who Is Using IPFire Location?") }}</p>
+
+ <div class="level">
+ <div class="level-item">
+ <a href="https://www.ipfire.org/" rel="noopener">
+ <figure class="image is-128x128">
+ <img src="{{ static_url("img/ipfire-tux.png") }}" alt="{{ _("IPFire") }}">
+ </figure>
+ </a>
+ </div>
- <h6>
- The <a href="https://www.torproject.org/" rel="noopener">Tor Project</a>
- </h6>
+ <div class="level-item">
+ <a href="https://www.torproject.org/" rel="noopener">
+ <figure class="image is-128x128">
+ <img src="{{ static_url("img/tor.svg") }}" alt="{{ _("The Tor Project") }}">
+ </figure>
+ </a>
+ </div>
</div>
</div>
- </section>
- </div>
+ </div>
+ </section>
{% end block %}
projects / ipfire.org.git / blobdiff