diff --git a/public/games.html b/public/games.html new file mode 100644 index 0000000..6e91f88 --- /dev/null +++ b/public/games.html @@ -0,0 +1,32 @@ + + + + + + The land of the penguin + + + + + + +
+ + The land of the penguin + +
+
+
+
+ Penguin on the web +

Tetris on the web.

+

The best Tetris you've ever seen.

+
+
+
+ + + \ No newline at end of file diff --git a/public/imgs/games.png b/public/imgs/games.png new file mode 100644 index 0000000..e9763fd Binary files /dev/null and b/public/imgs/games.png differ diff --git a/public/imgs/tetris.png b/public/imgs/tetris.png new file mode 100644 index 0000000..52d4b7b Binary files /dev/null and b/public/imgs/tetris.png differ diff --git a/public/index.html b/public/index.html index 0f1e983..5932527 100644 --- a/public/index.html +++ b/public/index.html @@ -11,29 +11,27 @@
- The land of the penguin + + The land of the penguin +
- Penguin on the web + Penguin on the web

The penguin on the web

My Virtual private server ( vps )

-
-

Card 2

-

This is the second card.

-
-
-

Card 3

-

This is the third card.

+
+ The wonderful games +

Games

+

My wonderful games.

\ No newline at end of file diff --git a/public/scripts/games.js b/public/scripts/games.js new file mode 100644 index 0000000..03a30dc --- /dev/null +++ b/public/scripts/games.js @@ -0,0 +1,5 @@ +const tetrisCard = document.getElementById('tetris-card'); + +tetrisCard.addEventListener('click', () => { + window.location.href = 'https://games.penggames.systems'; +}); \ No newline at end of file diff --git a/public/scripts/index.js b/public/scripts/index.js index 96981ba..4f41f49 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -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"; + } ); \ No newline at end of file diff --git a/public/styles/common.css b/public/styles/common.css index 0a09391..5324c81 100644 --- a/public/styles/common.css +++ b/public/styles/common.css @@ -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; diff --git a/public/styles/games.css b/public/styles/games.css new file mode 100644 index 0000000..e69de29