index: Align everything to the left

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/index.html b/src/templates/index.html
index 547a6e6e04b1a1778b7d6a3f778951810ac23654..8cb6eb0887f07c4c5bea2227a4b4385101e3fa12 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -27,9 +27,23 @@
 
                <section id="features">
                        <div class="container">
-                               <h1 class="text-center">{{ _("Secure up your network with IPFire") }}</h1>
+                               <div class="row mb-5">
+                                       <div class="col col-md-6">
+                                               <h1 class="mb-0">{{ _("Secure up your network with IPFire") }}</h1>
 
-                               <div class="row mb-lg-6 mb-md-5">
+                                               <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 class="btn-toolbar">
+                                                       <a class="btn btn-primary mr-2" href="/get-started">{{ _("Get Started") }}</a>
+                                                       <a class="btn btn-secondary ml-2" href="/features">{{ _("Learn more") }}</a>
+                                               </div>
+                                       </div>
+                               </div>
+
+                               <div class="row mt-5 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>
@@ -112,11 +126,6 @@
                                                </div>
                                        </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>