vikarti.anatra/safing-web
1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-09-01 18:49:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Optimize feature paddings for mobile

Browse source
This commit is contained in:
davegson 2020-05-21 14:02:05 +02:00
parent eda2e8f892
commit 1f8802671b
5 changed files with 41 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
about/index.html
View file

@ -6,9 +6,8 @@ redirect_from:
- /community-hub/ - /community-hub/
--- ---
<header style="padding-top: 12rem;"></header> <header class="pt-16 lg:pt-48"></header>
<section style="margin-top: 3rem;" class="pb-48 "> <section class="pt-12 pb-16 lg:pb-48">
<div class="items-center h-full"> <div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
@ -42,7 +41,7 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="flex grid md:grid-cols-2"> <div class="flex grid md:grid-cols-2">
<div class="mx-auto transform hover:scale-95 duration-150 ease-in-out"> <div class="mx-auto transform hover:scale-95 duration-150 ease-in-out">
@ -68,7 +67,7 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">

22
index.html
View file

@ -5,7 +5,7 @@ title: Safing - Love Freedom
{% include header.html %} {% include header.html %}
<section style="margin-top: 4rem;" id="tools"> <section class="mt-16" id="tools">
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-0 lg:flex">
@ -70,15 +70,15 @@ title: Safing - Love Freedom
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 20rem;"> <section>
<div class="items-center h-full"> <div class="items-center mt-16 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-48 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="pb-48 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">01</span> <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 absolute bg-top md:-ml-12">01</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2> <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">Powerful VPN Alternative</h2>
<p class="text-md opacity-55 max-w-lg"> <p class="text-md opacity-55 max-w-lg">
Free yourself from mass surveillance. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser. Free yourself from mass surveillance. Secure all your meta-data by decoupling yourself from your destination, inspired by Tor. Protect your whole computer, not only your browser.
@ -97,14 +97,14 @@ title: Safing - Love Freedom
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center"> <div class="pb-48 lg:pb-0 m0-0 lg:mr-32 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt=""> <img src="{{ site.img_url }}page-specific/portmaster/monitor.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; margin-left: -3rem; opacity: 0.05;" class=" z-0 absolute bg-top">02</span> <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class=" z-0 absolute bg-top md:-ml-12">02</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Around System Privacy</h2> <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 lg:w-2/3">All-Around System Privacy</h2>
<p class="text-md opacity-55 max-w-lg"> <p class="text-md opacity-55 max-w-lg">
Enforce DNS-over-TLS and block connections on a system wide level. Protect your whole computer, not only your browser. Free to use. Enforce DNS-over-TLS and block connections on a system wide level. Protect your whole computer, not only your browser. Free to use.
@ -122,8 +122,8 @@ title: Safing - Love Freedom
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 20rem; margin-bottom: 10rem;"> <section>
<div class="items-center h-full"> <div class="items-center h-full pb-8 lg:pb-24 mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
<div class="py-12 bg-white"> <div class="py-12 bg-white">
@ -131,11 +131,11 @@ title: Safing - Love Freedom
<div class="lg:text-center"> <div class="lg:text-center">
<!-- hide the huge "Follow Us" in mobile & md devices for now, made width problems --> <!-- hide the huge "Follow Us" in mobile & md devices for now, made width problems -->
<span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top hidden lg:block">Follow Us</span> <span style="font-size: 12rem; font-weight: 800; margin-top: -9rem; opacity: 0.05;" class="z-0 ml-0 w-full left-0 text-center absolute bg-top hidden lg:block">Follow Us</span>
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 text-center" style="position: relative;"> <h2 class="text-5xl tracking-tight font-extrabold leading-none md:py-10 text-center" style="position: relative;">
Blog, Podcast & Videos Blog, Podcast & Videos
</h2> </h2>
</div> </div>
<div class="mt-32 "> <div class="mt-8 lg:mt-32">
<ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10 max-w-sm mx-auto md:max-w-full"> <ul class="md:grid md:grid-cols-2 lg:grid-cols-3 md:col-gap-8 md:row-gap-10 max-w-sm mx-auto md:max-w-full">
<!-- podcast --> <!-- podcast -->
<li class="mt-12 md:mt-0 "> <li class="mt-12 md:mt-0 ">
@ -208,7 +208,7 @@ title: Safing - Love Freedom
</a> </a>
</li> </li>
</ul> </ul>
<div class="py-20 flex w-full"> <div class="pt-20 flex w-full">
<div class="mx-auto grid md:block"> <div class="mx-auto grid md:block">
<a class="mx-auto" href="{{ site.blog_url }}"> <a class="mx-auto" href="{{ site.blog_url }}">
<button type="button" style="background-color: #000;" class="scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase"> <button type="button" style="background-color: #000;" class="scale-110 md:scale-100 transform hover:scale-95 inline-flex items-center px-10 py-3 border border-transparent text-xs leading-5 font-extrabold rounded-full text-white hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 active:bg-indigo-700 transition duration-150 ease-in-out uppercase">

6
ownership/index.html
View file

@ -3,8 +3,8 @@ title: Safing Ownership
layout: page layout: page
--- ---
<header style="padding-top: 12rem;"></header> <header class="pt-16 lg:pt-48"></header>
<section style="margin-top: 3rem;"> <section class="pt-12">
<div class="items-center h-full"> <div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex">
@ -32,7 +32,7 @@ layout: page
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-8 md:mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">

24
portmaster/index.html
View file

@ -27,7 +27,7 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="pt-24 lg:pt-0"> <div class="pt-6 lg:pt-0">
<!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" controls muted></video> --> <!-- <video style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" preload="auto" src="{{ site.assets_url }}video/interim.mp4" controls muted></video> -->
<img style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt=""> <img style="box-shadow: 0 0px 90px 0 rgba(59, 93, 199, 0.3), 0 0px 5px 0 rgba(0, 0, 0, 0.05);" class="z-30 rounded-md lg:max-w-5xl mx-auto transform scale-70 lg:scale-75" height="1220" width="1220" src="{{ site.img_url }}/placeholder.png" alt="">
</div> </div>
@ -37,8 +37,8 @@ redirect_from:
</div> </div>
</div> </div>
</header> </header>
<section style="margin-top: 13rem;" class="lg:pt-56"> <section class="mt-8 md:mt-32 lg:pt-56">
<div class="text-center pb-40 lg:pb-48"> <div class="text-center py-24 lg:pt-0 lg:pb-48">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto"> <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
Privacy Features Privacy Features
</h2> </h2>
@ -46,10 +46,10 @@ redirect_from:
At its core, the Portmaster sits on your kernel and simply intercepts all your network connections. You decide which privacy features you want to enable or disable as you desire. At its core, the Portmaster sits on your kernel and simply intercepts all your network connections. You decide which privacy features you want to enable or disable as you desire.
</p> </p>
</div> </div>
<div class="items-center h-full"> <div class="items-center h-full mt-8 md:mt-16 lg:mt-48">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/monitor.gif" alt=""> <img src="{{ site.img_url }}page-specific/portmaster/monitor.gif" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -76,10 +76,10 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-40 self-center"> <div class="m0-0 lg:mr-40 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/control.png" alt=""> <img src="{{ site.img_url }}page-specific/portmaster/control.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -96,10 +96,10 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="pb-8 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt=""> <img src="{{ site.img_url }}page-specific/portmaster/tls.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -116,10 +116,10 @@ redirect_from:
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center"> <div class="m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt=""> <img src="{{ site.img_url }}page-specific/portmaster/modular.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -144,7 +144,7 @@ redirect_from:
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 13rem;" class="pb-40"> <section class="mt-16 lg:mt-48 pb-20 lg:pb-40">
<div class="items-center h-full"> <div class="items-center h-full">
<div class=""> <div class="">
<div class="max-w-full mx-auto px-4 sm:px-6"> <div class="max-w-full mx-auto px-4 sm:px-6">

22
spn/index.html
View file

@ -3,7 +3,7 @@ title: Safing Privacy Network
layout: page layout: page
--- ---
<header class="h-screen pt-32"> <header class="h-screen pt-64 md:pt-32">
<img class="-z-0 pt-0 absolute hidden lg:block" style="z-index: -1; margin-top: -3rem;" src="{{ site.img_url }}shapes/corner-tl.png" alt=""> <img class="-z-0 pt-0 absolute hidden lg:block" style="z-index: -1; margin-top: -3rem;" src="{{ site.img_url }}shapes/corner-tl.png" alt="">
<div class="flex items-center h-full"> <div class="flex items-center h-full">
<div class="container mx-auto sm:px-8 sm:px-0"> <div class="container mx-auto sm:px-8 sm:px-0">
@ -47,7 +47,7 @@ layout: page
</div> </div>
</header> </header>
<section style="margin-top: 3rem;"> <section style="margin-top: 3rem;">
<div class="text-center pb-48"> <div class="text-center py-24 lg:pt-0 lg:pb-48">
<h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto"> <h2 class="text-5xl tracking-tight font-extrabold leading-none py-10 mr-auto ml-auto">
Protect Your Meta&#8209;Data Protect Your Meta&#8209;Data
</h2> </h2>
@ -58,7 +58,7 @@ layout: page
<div class="items-center h-full"> <div class="items-center h-full">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center"> <div class="lg:pb-0 m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/spn/layers.gif" alt=""> <img src="{{ site.img_url }}page-specific/spn/layers.gif" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -82,10 +82,10 @@ layout: page
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt=""> <img src="{{ site.img_url }}page-specific/spn/metadata.gif" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -102,10 +102,10 @@ layout: page
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex block justify-center m-auto w-auto items-center">
<div class="pb-16 lg:pb-0 ml-0 lg:ml-32 lg:hidden self-center"> <div class="ml-0 lg:ml-32 lg:hidden self-center">
<img src="{{ site.img_url }}page-specific/spn/network.png" alt=""> <img src="{{ site.img_url }}page-specific/spn/network.png" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -132,10 +132,10 @@ layout: page
</div> </div>
</div> </div>
</div> </div>
<div class="items-center h-full mt-64"> <div class="items-center h-full mt-32 lg:mt-64">
<div class="container mx-auto px-8 sm:px-0 flex"> <div class="container mx-auto px-8 sm:px-0 flex">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center"> <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:flex items-center">
<div class="pb-16 lg:pb-0 m0-0 lg:mr-48 self-center"> <div class="lg:pb-0 m0-0 lg:mr-48 self-center">
<img src="{{ site.img_url }}page-specific/spn/switch.gif" alt=""> <img src="{{ site.img_url }}page-specific/spn/switch.gif" alt="">
</div> </div>
<div class="inline-block max-w-lg"> <div class="inline-block max-w-lg">
@ -160,7 +160,7 @@ layout: page
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 13rem;"> <section class="mt-16 lg:mt-48">
<div class="items-center h-full"> <div class="items-center h-full">
<div id="Pricing"> <div id="Pricing">
<div class="max-w-full mx-auto px-4 sm:px-6"> <div class="max-w-full mx-auto px-4 sm:px-6">
@ -230,7 +230,7 @@ layout: page
</div> </div>
</div> </div>
</section> </section>
<section style="margin-top: 6rem;" class="pb-48 "> <section class="mb-16 lg:pb-32">
<div class="bg-white"> <div class="bg-white">
<div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8"> <div class="max-w-screen-xl mx-auto pt-12 pb-16 sm:pt-16 sm:pb-20 px-4 sm:px-6 lg:pt-20 lg:pb-28 lg:px-8">
<div class="text-center pb-12"> <div class="text-center pb-12">