add card, header, footer
This commit is contained in:
flo
parent
1237d76d6a
commit
14a5ea1d41
11
index.js
11
index.js
@ -1 +1,12 @@
|
|||||||
import express from 'express';
|
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}`);
|
||||||
|
}
|
||||||
|
);
|
||||||
BIN
public/imgs/penguin.png
Normal file
BIN
public/imgs/penguin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
39
public/index.html
Normal file
39
public/index.html
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<!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/index.css">
|
||||||
|
<script src="scripts/common.js" defer></script>
|
||||||
|
<script src="scripts/index.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body id="body" class="body">
|
||||||
|
<header class="blur">
|
||||||
|
The land of the penguin
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="blur">
|
||||||
|
<p>All rights reserved.</p>
|
||||||
|
<p>© 2025 The land of the penguin</p>
|
||||||
|
<p>Contact us at</p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
public/scripts/common.js
Normal file
1
public/scripts/common.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
|
||||||
20
public/scripts/index.js
Normal file
20
public/scripts/index.js
Normal file
@ -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', () =>
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
);
|
||||||
128
public/styles/common.css
Normal file
128
public/styles/common.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
0
public/styles/index.css
Normal file
0
public/styles/index.css
Normal file
Loading…
x
Reference in New Issue
Block a user