add vps page
This commit is contained in:
florian
parent
36727a2d54
commit
d0586926ef
@ -26,7 +26,7 @@
|
||||
</main>
|
||||
<footer class="blur">
|
||||
<p>© 2025 The land of the penguin</p>
|
||||
<p>Contact us at: florian@thepenguinontheweb.tech</p>
|
||||
<p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -31,7 +31,7 @@
|
||||
</main>
|
||||
<footer class="blur">
|
||||
<p>© 2025 The land of the penguin</p>
|
||||
<p>Contact us at: florian@thepenguinontheweb.tech</p>
|
||||
<p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -16,11 +16,73 @@
|
||||
</a>
|
||||
</header>
|
||||
<main>
|
||||
|
||||
<div class="presentation">
|
||||
<h1>thepenguinontheweb.tech VPS Configuration</h1>
|
||||
<div class="card info blur">
|
||||
<h2>Vps Overview</h2>
|
||||
<ul>
|
||||
<li><strong>Provider:</strong> Hostinger</li>
|
||||
<li><strong>OS:</strong> Debian 12</li>
|
||||
<li><strong>RAM:</strong> 4 GB</li>
|
||||
<li><strong>CPU:</strong> 2 vCPU</li>
|
||||
<li><strong>Location:</strong> Paris, FR</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card info blur">
|
||||
<h2>C'est mon serveur personnel pour mon cours de labo réseau applicatif et sécurité.</h2>
|
||||
<p>Voici quelques sites de ma création:</p>
|
||||
<ul>
|
||||
<li><a href="https://games.penggames.systems" target="_blank">Tetris</a></li>
|
||||
<li><a href="/index.html" target="_blank">Home</a></li>
|
||||
</ul>
|
||||
<p>Pour plus d'information, vous pouvez toujours me contactez ici : <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
|
||||
</div>
|
||||
<div class="card info blur">
|
||||
<h2>Mes services : </h2>
|
||||
<div class="card-container">
|
||||
<div class="card">
|
||||
<h3>SSH</h3>
|
||||
<p>Accès sécurisé à distance via SSH.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Web Server</h3>
|
||||
<p>Hébergement de sites web avec Nginx.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Prometheus + Grafana</h3>
|
||||
<p>Surveillance et visualisation des performances du serveur.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Ufw Firewall</h3>
|
||||
<p>Protection du serveur avec un pare-feu configuré.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Fail2Ban</h3>
|
||||
<p>Protection contre les attaques par force brute.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Postfix</h3>
|
||||
<p>Serveur de messagerie pour l'envoi d'emails.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Postfix Admin</h3>
|
||||
<p>Interface web pour la gestion des comptes de messagerie.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Roundcube</h3>
|
||||
<p>Client de messagerie web pour accéder aux emails.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Minecraft</h3>
|
||||
<p>Serveur de jeu Minecraft pour jouer avec des amis.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="blur">
|
||||
<p>© 2025 The land of the penguin</p>
|
||||
<p>Contact us at: florian@thepenguinontheweb.tech</p>
|
||||
<p>Contact us at: <a href="mailto:florian@thepenguninontheweb.tech">florian@thepenguinontheweb.tech</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user