Center Content each page

This commit is contained in:
Divlo 2019-08-19 01:21:00 +02:00
parent e53dc3bb91
commit 18fd18fec0
7 changed files with 80 additions and 68 deletions

View File

@ -8,9 +8,11 @@
<?php include("./incl/menu.php");?>
<!-- Page Content -->
<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 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 -->

View File

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

View File

@ -1,4 +1,5 @@
<footer class="text-center">
</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>
<div class="footer-text"><a href="https://divlo.fr/" target="_blank">Divlo</a> | Tous droits réservés</div>

View File

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

View File

@ -25,19 +25,21 @@
</header>
<!-- Page Content -->
<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.
<br> <br>
<div><p class="text-center">
<a href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
<br> <br>
L'intégralité du <a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a> de ce site est disponible sur <a href="https://github.com/Divlo">mon profil GitHub</a> <i class="fab fa-github"></i>.
<br>
Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir <i class="fas fa-code"></i>.
<br> <br>
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 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.
<br> <br>
<div><p class="text-center">
<a href="./views/function-list.php">Cliquez ici pour accéder à la liste des fonctions.</a>
<br> <br>
L'intégralité du <a target="_blank" href="https://github.com/Divlo/FunctionProject">code source</a> de ce site est disponible sur <a href="https://github.com/Divlo">mon profil GitHub</a> <i class="fab fa-github"></i>.
<br>
Je suis débutant en programmation donc si je commets une erreur dans le code, n'hésitez pas à me le faire savoir <i class="fas fa-code"></i>.
<br> <br>
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 -->

View File

@ -8,22 +8,25 @@
<?php include("../incl/menu.php");?>
<!-- Page Content -->
<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>
<div class="form-group">
<label for="cityName">Entrez le nom d'une ville :</label>
<input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
<br>
<div class="form-row text-center">
<div class="col-12">
<button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
<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>
<div class="form-group">
<label for="cityName">Entrez le nom d'une ville :</label>
<input name="cityName" type="text" id="cityName" placeholder="(e.g : Paris)" class="form-control">
<br>
<div class="form-row text-center">
<div class="col-12">
<button type="submit" id="submitWeatherRequest" class="btn btn-dark text-center">Envoyer</button>
</div>
</div>
<br> <br>
<p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
</div>
<br> <br>
<p class="results text-center">La ville que vous avez rentré n'existe pas (dans l'API).</p>
</div>
</div>
<script>
$(function () {
$("#cityName").click(function() {

View File

@ -25,39 +25,41 @@
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
<h1>La liste des <span class="important">Fonctions</span> :</h1>
<table class="table table-bordered mt-5">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./function-views/weatherRequest.php">Météo</a></td>
<td>Affiche la météo et l'heure local selon la ville.</td>
</tr>
<tr>
<td><a href="./function-views/randomNumber.php">Nombre aléatoire</a></td>
<td>Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</td>
</tr>
<tr>
<td><a href="./function-views/calculateAge.php">Quelle âge avez-vous ?</a></td>
<td>Calcule l'âge de quelqu'un selon la date de naissance.</td>
</tr>
<tr>
<td><a href="./function-views/convertTemperature.php">Conversion de Température</a></td>
<td>Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</td>
</tr>
<tr>
<td><a href="./function-views/convertDistance.php">Conversion de Distance</a></td>
<td>Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</td>
</tr>
</tbody>
</table>
<div class="jumbotron d-flex align-items-center">
<div class="container">
<div class="row">
<h1>La liste des <span class="important">Fonctions</span> :</h1>
<table class="table table-bordered mt-5">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="./function-views/weatherRequest.php">Météo</a></td>
<td>Affiche la météo et l'heure local selon la ville.</td>
</tr>
<tr>
<td><a href="./function-views/randomNumber.php">Nombre aléatoire</a></td>
<td>Génère un nombre aléatoire entre un minimum inclus et un maximum inclus.</td>
</tr>
<tr>
<td><a href="./function-views/calculateAge.php">Quelle âge avez-vous ?</a></td>
<td>Calcule l'âge de quelqu'un selon la date de naissance.</td>
</tr>
<tr>
<td><a href="./function-views/convertTemperature.php">Conversion de Température</a></td>
<td>Convertit des Degré Celsius en Degré Fahrenheit et l'inverse aussi.</td>
</tr>
<tr>
<td><a href="./function-views/convertDistance.php">Conversion de Distance</a></td>
<td>Convertit la longueur (distance) avec les unités allant de picomètre au Téramètre.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>