From d0586926efdcae078db4ef4cba6a116be1a4aa96 Mon Sep 17 00:00:00 2001 From: florian Date: Thu, 12 Jun 2025 16:30:49 +0200 Subject: [PATCH] add vps page --- public/games.html | 2 +- public/index.html | 2 +- public/styles/common.css | 63 +++++++++++++++++++++++++++++++++++--- public/vps.html | 66 ++++++++++++++++++++++++++++++++++++++-- 4 files changed, 125 insertions(+), 8 deletions(-) diff --git a/public/games.html b/public/games.html index 4b263aa..39c648e 100644 --- a/public/games.html +++ b/public/games.html @@ -26,7 +26,7 @@ \ No newline at end of file diff --git a/public/index.html b/public/index.html index 7723c18..b522edd 100644 --- a/public/index.html +++ b/public/index.html @@ -31,7 +31,7 @@ \ No newline at end of file diff --git a/public/styles/common.css b/public/styles/common.css index 5324c81..d982c8c 100644 --- a/public/styles/common.css +++ b/public/styles/common.css @@ -6,7 +6,9 @@ html, body { display: flex; flex-direction: column; /* Affichage en colonne */ align-items: center; - + justify-content: space-between; /* Centre le contenu verticalement et horizontalement */ + + min-height: 100vh; /* S'assure que le body prend au minimum toute la hauteur de la vue */ a { text-decoration: none; /* Enlève le soulignement des liens */ color: inherit; /* Hérite de la couleur du parent */ @@ -102,7 +104,7 @@ main { align-items: center; justify-content: center; - height: 100%; + height: auto; } .card-container { @@ -111,7 +113,7 @@ main { align-items: center; justify-content: center; width: 100%; - height: 100%; + height: auto; gap: 20px; /* Espace entre les cartes */ } @@ -142,6 +144,8 @@ main { transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out; cursor: pointer; + + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } .card:hover { @@ -162,4 +166,55 @@ main { width: 200px; border-radius: 10px; -} \ No newline at end of file +} + +.presentation { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + height: auto; + width: 1000px; + cursor: default; + + gap: 30px; /* Espace entre les éléments de la carte */ + + h1 { + color: white; + } +} + +.info.card { + width: 500px; + height: auto; + + h2 { + font-size: 20px; + color: rgb(255, 255, 255); + text-align: center; + } + p { + font-size: 16px; + text-align: center; + } + + .card-container { + display: grid; + grid-template-columns: repeat(2, 1fr); /* 2 colonnes de largeur égale */ + gap: 20px; + width: 100%; + + .card { + h3 { + font-size: 18px; + color: rgb(255, 255, 255); + text-align: center; + } + background-color: #FFFFFF00; + width: calc(100% - 40px); /* Les cartes prennent toute la largeur de la colonne */ + height: 200px; /* Hauteur automatique pour s'adapter au contenu */ + } + } +} + diff --git a/public/vps.html b/public/vps.html index b5750e9..6296003 100644 --- a/public/vps.html +++ b/public/vps.html @@ -16,11 +16,73 @@
- +
+

thepenguinontheweb.tech VPS Configuration

+
+

Vps Overview

+
    +
  • Provider: Hostinger
    • +
  • OS: Debian 12
    • +
  • RAM: 4 GB
    • +
  • CPU: 2 vCPU
    • +
  • Location: Paris, FR
    • +
+
+
+

C'est mon serveur personnel pour mon cours de labo réseau applicatif et sécurité.

+

Voici quelques sites de ma création:

+ +

Pour plus d'information, vous pouvez toujours me contactez ici : florian@thepenguinontheweb.tech

+
+
+

Mes services :

+
+
+

SSH

+

Accès sécurisé à distance via SSH.

+
+
+

Web Server

+

Hébergement de sites web avec Nginx.

+
+
+

Prometheus + Grafana

+

Surveillance et visualisation des performances du serveur.

+
+
+

Ufw Firewall

+

Protection du serveur avec un pare-feu configuré.

+
+
+

Fail2Ban

+

Protection contre les attaques par force brute.

+
+
+

Postfix

+

Serveur de messagerie pour l'envoi d'emails.

+
+
+

Postfix Admin

+

Interface web pour la gestion des comptes de messagerie.

+
+
+

Roundcube

+

Client de messagerie web pour accéder aux emails.

+
+
+

Minecraft

+

Serveur de jeu Minecraft pour jouer avec des amis.

+
+
+
+
\ No newline at end of file