diff --git a/index.js b/index.js index 1b30bac..81c9ef9 100644 --- a/index.js +++ b/index.js @@ -1 +1,12 @@ -import express from 'express'; \ No newline at end of file +import express from 'express'; + +const app = express(); +const port = 4000; + +app.use(express.static('public')); +app.use(express.json()); + +app.listen(port, () => { + console.log(`Server is running at http://localhost:${port}`); + } +); \ No newline at end of file diff --git a/public/imgs/penguin.png b/public/imgs/penguin.png new file mode 100644 index 0000000..282166b Binary files /dev/null and b/public/imgs/penguin.png differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..0f1e983 --- /dev/null +++ b/public/index.html @@ -0,0 +1,39 @@ + + + + + + The land of the penguin + + + + + + +
+ The land of the penguin +
+
+
+
+ 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.

+
+
+
+ + + \ No newline at end of file diff --git a/public/scripts/common.js b/public/scripts/common.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/public/scripts/common.js @@ -0,0 +1 @@ + diff --git a/public/scripts/index.js b/public/scripts/index.js new file mode 100644 index 0000000..96981ba --- /dev/null +++ b/public/scripts/index.js @@ -0,0 +1,20 @@ +const body = document.querySelector("body"); +const vpsCard = document.getElementById("vps-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"); + } + } +); + +vpsCard.addEventListener('click', () => + { + + } +); \ No newline at end of file diff --git a/public/styles/common.css b/public/styles/common.css new file mode 100644 index 0000000..0a09391 --- /dev/null +++ b/public/styles/common.css @@ -0,0 +1,128 @@ +html, body { + height: 100%; /* Fait en sorte que html et body prennent toute la hauteur */ + margin: 0; +} + +.body { + background: repeating-conic-gradient( + from 45deg, + #a37fb1 0% 25%, + #604566 0% 50% + ); + background-size: max(10vw, 10svh) max(10vw, 10svh); + + display: flex; /* Transforme le body en conteneur flex */ + flex-direction: column; /* Affichage en colonne */ + min-height: 100vh; /* S'assure que le body prend au minimum toute la hauteur de la vue */ + + animation: background 0.5s ease-in-out; /* Animation de transition pour le fond */ +} + + +header { + font-size: 20px; + height: 90px; + + color: rgb(201, 156, 207); + + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + flex-direction: row; + background: #433147d8; +} + +.blur::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); /* Pour Safari */ + z-index: -1; /* Assure que le fond est derrière le contenu */ +} + +.blur { + position: relative; /* Nécessaire pour le positionnement du pseudo-élément */ +} + +footer { + font-size: 20px; + height: 90px; + + color: rgb(201, 156, 207); + + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + flex-direction: row; + + background: #433147d8; +} + +main { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex-grow: 1; + height: 100%; + width: 100%; +} + +.card-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + gap: 20px; /* Espace entre les cartes */ +} + +.card { + border-radius: 10px; + padding: 20px; + width: 300px; + height: 400px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + border-radius: 10px; + + text-decoration: none; + color: rgb(201, 156, 207); + + background: #433147d8; + + transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out; + + cursor: pointer; +} + +.card:hover { + transform: scale(1.05); + transition: background 0.3s ease-in-out, transform 0.3s ease-in-out, margin 0.3s ease-in-out; + + margin: 7px; +} + +.card::before { + border-radius: 10px; +} + + + +.card-image { + height: 200px; + width: 200px; + + border-radius: 10px; +} \ No newline at end of file diff --git a/public/styles/index.css b/public/styles/index.css new file mode 100644 index 0000000..e69de29