adminflsu/Landing_Page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button action and game page

Browse Source
This commit is contained in:
florian 2025-06-11 19:50:05 +02:00
parent 14a5ea1d41
commit a703706e02
8 changed files with 96 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/games.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The land of the penguin</title>
<link rel="stylesheet" href="styles/common.css">
<link rel="stylesheet" href="styles/games.css">
<script src="scripts/common.js" defer></script>
<script src="scripts/games.js" defer></script>
</head>
<body id="body" class="body">
<header class="blur">
<a href="index.html" class="header-link">
The land of the penguin
</a>
</header>
<main>
<div class="card-container">
<div class="card blur" id="tetris-card">
<img src="imgs/tetris.png" alt="Penguin on the web" class="card-image" draggable="false">
<h2>Tetris on the web.</h2>
<p>The best Tetris you've ever seen.</p>
</div>
</div>
</main>
<footer class="blur">
<p>&copy; 2025 The land of the penguin</p>
<p>Contact us at: florian@thepenguinontheweb.tech</p>
</footer>
</body>
</html>

BIN
public/imgs/games.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/imgs/tetris.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

20
public/index.html
View File

@ -11,29 +11,27 @@
</head>
<body id="body" class="body">
<header class="blur">
The land of the penguin
<a href="index.html" class="header-link">
The land of the penguin
</a>
</header>
<main>
<div class="card-container">
<div class="card blur" id="vps-card">
<img src="imgs/penguin.png" alt="Penguin on the web" class="card-image">
<img src="imgs/penguin.png" alt="Penguin on the web" class="card-image" draggable="false">
<h2>The penguin on the web</h2>
<p>My Virtual private server ( vps )</p>
</div>
<div class="card blur">
<h2>Card 2</h2>
<p>This is the second card.</p>
</div>
<div class="card blur">
<h2>Card 3</h2>
<p>This is the third card.</p>
<div class="card blur" id="games-card">
<img src ="imgs/games.png" alt="The wonderful games" class="card-image" draggable="false">
<h2>Games</h2>
<p>My wonderful games.</p>
</div>
</div>
</main>
<footer class="blur">
<p>All rights reserved.</p>
<p>&copy; 2025 The land of the penguin</p>
<p>Contact us at</p>
<p>Contact us at: florian@thepenguinontheweb.tech</p>
</footer>
</body>
</html>

5
public/scripts/games.js Normal file
View File

@ -0,0 +1,5 @@
const tetrisCard = document.getElementById('tetris-card');
tetrisCard.addEventListener('click', () => {
window.location.href = 'https://games.penggames.systems';
});

9
public/scripts/index.js
View File

@ -1,12 +1,13 @@
const body = document.querySelector("body");
const vpsCard = document.getElementById("vps-card");
const gamesCard = document.getElementById("games-card");
body.addEventListener('scroll', () =>
{
const scrollTop = window.scrollY;
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
if (scrollTop + clientHeight >= scrollHeight) {
console.log("Reached the bottom of the page");
}
@ -17,4 +18,10 @@ vpsCard.addEventListener('click', () =>
{
}
);
gamesCard.addEventListener('click', () =>
{
window.location.href = "/games.html";
}
);

47
public/styles/common.css
View File

@ -1,6 +1,16 @@
html, body {
height: 100%; /* Fait en sorte que html et body prennent toute la hauteur */
height: 100%;
width: 100%; /* Fait en sorte que html et body prennent toute la hauteur */
margin: 0;
padding: 0;
display: flex;
flex-direction: column; /* Affichage en colonne */
align-items: center;
a {
text-decoration: none; /* Enlève le soulignement des liens */
color: inherit; /* Hérite de la couleur du parent */
}
}
.body {
@ -22,15 +32,21 @@ html, body {
header {
font-size: 20px;
height: 90px;
min-height: 90px;
width: calc(100% - 80px);
color: rgb(201, 156, 207);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
flex-direction: row;
background: #433147d8;
margin:20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
}
.blur::before {
@ -52,6 +68,9 @@ header {
footer {
font-size: 20px;
height: 90px;
min-height: 90px;
width: calc(100% - 80px);
color: rgb(201, 156, 207);
@ -62,6 +81,19 @@ footer {
flex-direction: row;
background: #433147d8;
margin:20px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
font-size: 0.875rem;
p {
width: 100%;
text-align: center;
}
}
main {
@ -69,9 +101,8 @@ main {
flex-direction: column;
align-items: center;
justify-content: center;
flex-grow: 1;
height: 100%;
width: 100%;
}
.card-container {
@ -85,6 +116,12 @@ main {
gap: 20px; /* Espace entre les cartes */
}
@media (max-width: 768px) {
.card-container {
flex-direction: column;
}
}
.card {
border-radius: 10px;
padding: 20px;

0
public/styles/games.css Normal file
View File