back to the custom page push

3 years ago · c68d3d52da
commit c68d3d52da
2 changed files with 99 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,15 @@
 # CUSTOM-ERROR-PAGE
 Page custom pour les 40X et 50x pour la stack du garage numérique.
 ## PROCESSUS
 ### CONFIGURATION NGINX (à insérer dans le block HTTPS):
 ```bash
 error_page 400 404 500 502 503 504 /custom-error-page.html;
    location = /custom-error-page.html {
            root /usr/share/nginx/html;
            internal;
  }
 ```
 ## ET VOILA !
--- a/custom-error-page.html
+++ b/custom-error-page.html
@ -0,0 +1,84 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
  <title>page introuvable</title>
  <meta charset="utf-8">
  <meta name="description" content="error page custom"/>
  <meta name="author" content="Max"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> 
 </head>
 <body>
  <div class="logo">
    <img src="https://www.legaragenumerique.fr/wp-content/uploads/2019/10/logo-web-garage_numerique.png" alt="logo du garage numérique"></img>
  </div>
 <hr class="ligne">
    <div class="text">
      <h1>Cette page est actuellement en maintenance...</h1>
      <h2>laissez-vous guider <a href="https://www.legaragenumerique.fr/">BACK</a></h2> 
    </div>
    <div class="error">
    <img src="https://www.legaragenumerique.fr/wp-content/uploads/2019/10/Transformer-150x150-1-150x61.png" alt="Transformer logo"></img>
    </div>
 <!--CSS------------------------------------------------------------------------------------------>
 <style>
  body{
    height: 95vh;
    background: white;
    text-align: center;
    color: black;
    font-family: 'Fira Mono', monospace;
 }
 h1{
    font-size: 2.5rem;
    font-family: 'Lobster', cursive;
 }
 .logo{
    width: 5em 5em 5em ;
    height: 5em;
    margin: auto;
 }
 .error{
    width: 5em 5em 5em ;
    height: 5em;
    margin-top: 5em;
 }
 hr{
    width: 70%;
    size: 2%;
 }
 .text{
    margin-top: 4.5rem;
 }
 a{
    color: orange;
    text-decoration: none;
 }
 /* ........................................................................ */
 /*MEDIA*/
@media screen and (min-width: 980px){
 h1{
    width: auto;
 }
 .text{
    width: auto;
    display: block;
 }
 .logo{
    width: auto;
 }
 .error{
    width: auto;
 }
 a{
    width: auto;
 }
 }
 </style>
 </body>
 </html>