add: style.css : transformation de l'image d'arriere plan en generation par le client + debut de stylisation des differentes categories de balises et elements

This commit is contained in:
2026-09-15 19:51:38 +02:00
parent 4339d4ec53
commit f6722b4fa3
5 changed files with 96 additions and 16 deletions

View File

@@ -8,16 +8,18 @@
<title>Hatmos</title> <title>Hatmos</title>
</head> </head>
<body> <body>
<h1><a href="index.html">Hatmos</a></h1> <header id="page-top">
<h2>Your favorite wannabe technician</h2> <h1><a href="index.html">Hatmos</a></h1>
<nav> <h2>Your favorite wannabe technician</h2>
<ul> <nav id="top-nav">
<li><a href="#myself">A propos</a></li> <ul>
<li><a href="#projects">Projets</a></li> <li><a href="#myself">A propos</a></li>
<li><a href="#pictures">Photos</a></li> <li><a href="#projects">Projets</a></li>
<li><a href="#garden">Jardin</a></li> <li><a href="#pictures">Photos</a></li>
</ul> <li><a href="#garden">Jardin</a></li>
</nav> </ul>
</nav>
</header>
<main> <main>
<a href="about.html"><div id="myself"> <a href="about.html"><div id="myself">
<h1>A propos</h1> <h1>A propos</h1>

View File

@@ -1,9 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr-FR">
<head> <head>
<meta chartset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<link rel="icon" href="">
<title>Hatmos</title>
</head> </head>
<body> <body>
<h1><a href="index.html">Hatmos</a></h1>
<h2>Your favorite wannabe technician<h2>
<nav>
<ul>
<li><a href="lewoapws.html">Apprendre l'Electronique en faisant un Arroseur de Plante Autonome</a></li>
<li><a href="projects/self_hosted_debian_server.html">Serveur Debian Auto-heberge</a></li>
</ul>
</nav>
</body> </body>
</html> </html>

21
projects/lewoapws.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta chartset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/style.css">
<link rel="icon" href="">
<title>Hatmos</title>
</head>
<body>
<h1><a href="../index.html">Hatmos</a></h1>
<h2>Your favorite wannabe technician<h2>
<main>
<h1>Apprendre l'Electronique avec un Arroseur de Plante Automatique</h1>
<figure>
<img id="work_in_progress" src="https://media1.tenor.com/m/FPsODnFH-dEAAAAC/typing-fast.gif"/>
<figcaption>Work In Progress</figcaption>
</figure>
</main>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta chartset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../styles/style.css">
<link rel="icon" href="">
<title>Hatmos</title>
</head>
<body>
<h1><a href="../index.html">Hatmos</a></h1>
<h2>Your favorite wannabe technician<h2>
<main>
<h1>Serveur Debian Auto-heberge</h1>
<figure>
<img id="work_in_progress" src="https://media1.tenor.com/m/FPsODnFH-dEAAAAC/typing-fast.gif"/>
<figcaption>Work In Progress</figcaption>
</figure>
</main>
</body>
</html>

View File

@@ -1,5 +1,29 @@
body { body {
background-image: url('../images/fond_minimaliste.png'); background-color: #ffffff;
background-size: cover; background-image: radial-gradient(circle, #d0d0d5 1.5px, transparent 1px);
background-repeat: repeat-y; background-size: 50px 50px;
background-repeat: repeat;
}
header {
background-color: #ffffff;
}
#top-nav {
background-color: #ffffff;
}
div {
background-color: white;
transition: box-shadow 0.3s ease;
}
div:hover{
background-color: white;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.3);
}
footer {
background-color: #333333;
color: #eeeeee;
} }