add card, header, footer
This commit is contained in:
flo
parent
1237d76d6a
commit
14a5ea1d41
13
index.js
13
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