Center Content each page

404.php

@@ -8,10 +8,12 @@
 <?php include("./incl/menu.php");?>
 
 <!-- Page Content -->
+<div class="jumbotron d-flex align-items-center">
   <div class="container">
     <h1>Erreur <span class="important">404</span></h1>
     <p class="pt-3 text-center">Cette page n'existe pas! <a href="/index.php" class="important">Revenir à la page d'accueil ?</a></p>
   </div>
+</div>
 
 <!-- Footer -->
 <?php include("./incl/footer.php");?>

css/style.css

@@ -38,9 +38,6 @@ p {
 }
 
 /* HEADER */
-header {
-    margin-bottom: 4%;
-}
 #header-container {
     padding-bottom: 0;
 }
@@ -52,8 +49,11 @@ header {
 }
 
 /* CONTENT */
-.container {
+@media (min-width: 576px) {
-    padding-bottom: 25px;
+    .jumbotron {padding: 6.17rem 2rem;}
+}
+.jumbotron {
+    background-color: var(--background-color) !important;
 }
 .table {
     color: white;

incl/footer.php

@@ -1,3 +1,4 @@
+</div>
       <footer class="text-center">
             <a href="#" class="important"><i class="fas fa-arrow-up"></i></a>
             <div class="realDateTime">Affichage de l'heure en temps réel : <span class="important" id="realDateTime"></span></div>

incl/menu.php

@@ -16,3 +16,5 @@
         </div>
     </nav>
 </header>
+
+<div class="jumbotron d-flex align-items-center">

index.php

@@ -25,6 +25,7 @@
 </header> 
 
 <!-- Page Content -->
+<div class="jumbotron d-flex align-items-center">
     <div class="container">
         <h1>Bienvenue sur <span class="important">FunctionProject</span>! 🎉</h1>
         <p class="mt-5">FunctionProject est un projet créé par <a href="https://divlo.fr/" target="_blank">Divlo</a> qui a pour but de rassembler plein de mini-programme (fonctions JavaScript) permettant de faire plusieurs choses comme <b>savoir la météo</b>, générer un <b>nombre aléatoire</b>, etc. 
@@ -39,6 +40,7 @@
         Vous pouvez m'envoyer vos avis, suggestion d'ajouts, éventuel bug/problème grâce à ce <a href="https://docs.google.com/forms/d/1NliUWi3lntHDM42Td0C47J0cZKgnYilxT_0UcdmVaog/" target="_blank">Feedback Formulaire</a> 📝.
         </p></div>
     </div>
+</div>
 
 <!-- Footer -->
 <?php include("./incl/footer.php");?>

views/error404.php

@@ -8,6 +8,7 @@
 <?php include("../incl/menu.php");?>
 
 <!-- Page Content -->
+<div class="jumbotron d-flex align-items-center">
     <div class="container">
     <h1><span class="important">La météo</span> :</h1>
     <p class="pt-3 text-center">Affiche la météo et l'heure local selon la ville.</p>
@@ -24,6 +25,8 @@
             <p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
         </div>
     </div>
+</div>
+
 <script>
     $(function () {
         $("#cityName").click(function() {

views/function-list.php

@@ -25,6 +25,7 @@
 </header>
 
 <!-- Page Content -->
+<div class="jumbotron d-flex align-items-center">
     <div class="container">
         <div class="row">
             <h1>La liste des <span class="important">Fonctions</span> :</h1>
@@ -60,6 +61,7 @@
                 </table>
         </div>
     </div>
+</div>
 
 <!-- Footer -->
 <?php include("../incl/footer.php");?>