add button action and game page
This commit is contained in:
florian
parent
14a5ea1d41
commit
a703706e02
32
public/games.html
Normal file
32
public/games.html
Normal 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>© 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
BIN
public/imgs/games.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/imgs/tetris.png
Normal file
BIN
public/imgs/tetris.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -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>© 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
5
public/scripts/games.js
Normal file
@ -0,0 +1,5 @@
|
||||
const tetrisCard = document.getElementById('tetris-card');
|
||||
|
||||
tetrisCard.addEventListener('click', () => {
|
||||
window.location.href = 'https://games.penggames.systems';
|
||||
});
|
||||
@ -1,5 +1,6 @@
|
||||
const body = document.querySelector("body");
|
||||
const vpsCard = document.getElementById("vps-card");
|
||||
const gamesCard = document.getElementById("games-card");
|
||||
|
||||
body.addEventListener('scroll', () =>
|
||||
{
|
||||
@ -18,3 +19,9 @@ vpsCard.addEventListener('click', () =>
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
gamesCard.addEventListener('click', () =>
|
||||
{
|
||||
window.location.href = "/games.html";
|
||||
}
|
||||
);
|
||||
@ -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
0
public/styles/games.css
Normal file
Loading…
x
Reference in New Issue
Block a user