Hatmos/site_internet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: lewoapws.html: creation du chapitre 1 et mise en place du style de la page + tests en parallele pour un menu de navigation sur le cote de la page

Browse Source
This commit is contained in:
Thomas LETELLIER
2026-09-16 20:38:25 +02:00
parent b58ea7c0b4
commit 8d7ba3ccb9
5 changed files with 145 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -21,22 +21,22 @@
</nav>
</header>
<main>
<a href="about.html"><div id="myself">
<a href="about.html"><div id="myself" class="clickable">
<h1>A propos</h1>
<p>Principalement mon CV et des informations sur moi. Si jamais ca vous interesse.</p>
<img src=""/>
</div></a>
<a href="projects.html"><div id="projects">
<a href="projects.html"><div id="projects" class="clickable">
<h1>Projets</h1>
<p>Une liste des projets que j'ai termine, ceci touchent a l'electronique et l'informatique.</p>
<img src=""/>
</div></a>
<a href="pictures.html"><div id="pictures">
<a href="pictures.html"><div id="pictures" class="clickable">
<h1>Photos</h1>
<p>Une galerie des mes photos preferes, ce sont uniquement des photos prises par moi-meme.</p>
<img src=""/>
</div></a>
<a href="garden.html"><div id="garden">
<a href="garden.html"><div id="garden" class ="clickable">
<h1>Jardin</h1>
<p>Un suivis de mon parcours dans le jardinage, parce que les plantes ca sent bon et c'est joli.</p>
<img src=""/>

30
projects/lewoapws.html
View File

@@ -18,9 +18,35 @@
<p>Ceci est un projet qui fais office de cours progressif sur l'electronique.</p>
<p>Le but de ce projet est de realiser un arroseur de plante autonome.</p>
<p>D'abord a activation manuelle, l'appareil va progressivement etre rendu automatique, intelligent et autonome.</p>
<p>L'idee est de partir de problemes concrets et de les resoudre avec des utilisations ingenieuses des composants qui seront vu dans les differents chapitres.</p>
<p>Les notions de lecture de datasheet, conception de schemas electroniques puis de circuits imprimes seront evoques puis approfondis au fur et a mesure des chapitres</p>
<p>L'idee est de partir de problemes concrets lies a l'objectif d'arroser une plante et de les resoudre avec des utilisations ingenieuses des composants.</p>
<p>Les notions de lecture de datasheet, conception de schemas electroniques puis des carte de circuits imprimes seront evoques puis approfondis au fur et a mesure des chapitres.</p>
</div>
<section>
<h2>Chapitre 1</h2>
<h3>1.1 - Un montage simple</h3>
<p> Tout commence par des fils, une source d'energie et un appareil.<br>
Le circuit le plus simple se constitue d'une pile et d'une resistance.
</p>
<img src="" alt="une photo du montage entre une pile AAA de 1,5V et une resistance de 15 Ohms"/><br>
<p>
Ce circuit n'a pas de veritable utilite en dehors de nous apprendre le premier concept physique de ce cours : La loi d'Ohm<br>
La loi d'Ohm indique, grossierement, que la tension mesuree entre l'entre et la sortie d'un composant est decrit par la relation :
</p>
<div class="math-snipet">
U = R * I
</div>
<p>
Ou U est la tension mesuree, I est le courant consomme par le composant et R la valeur de resistance du composant.
</p>
<p>
Comme je viens de le dire, ce circuit est simple. Pour preuve, il ne fais rien de special a part consommer l'energie de la pile.
Pour remedier a ce probleme, nous allons travailler avec un nouveau composant : La Diode Electroluminescente
</p>
<h3>1.2 - Adapter une source de tension a un composant</h3>
<p>
</p>
<section>
<figure>
<img id="work_in_progress" src="https://media1.tenor.com/m/FPsODnFH-dEAAAAC/typing-fast.gif"/>
<figcaption>Work In Progress</figcaption>

15
styles/style.css
View File

@@ -13,12 +13,12 @@ header {
background-color: #ffffff;
}
div {
.clickable {
background-color: white;
transition: box-shadow 0.3s ease;
}
div:hover{
.clickable:hover{
background-color: white;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.3);
}
@@ -27,3 +27,14 @@ footer {
background-color: #333333;
color: #eeeeee;
}
.math-snipet{
background-color: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 6px;
padding: 16px;
margin: 16px 0;
font-family: 'Cambria Math', 'STIX Two Math', serif;
font-size: 1.1em;
overflow-x: auto;
}

61
test.css Normal file
View File

@@ -0,0 +1,61 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
/* Le conteneur principal */
.layout {
display: flex;
min-height: 100vh;
}
/* Menu */
.sidebar {
width: 240px;
background: #222;
color: white;
padding: 30px 20px;
/* Le menu reste visible */
position: sticky;
top: 0;
height: 100vh;
}
.sidebar h2 {
margin-bottom: 30px;
}
.sidebar nav {
display: flex;
flex-direction: column;
gap: 10px;
}
.sidebar a {
color: #ccc;
text-decoration: none;
padding: 12px;
border-radius: 5px;
}
.sidebar a:hover {
background: #444;
color: white;
}
/* Contenu */
.content {
flex: 1;
padding: 40px;
}
section {
min-height: 100vh;
padding-top: 20px;
}

39
test.html Normal file
View File

@@ -0,0 +1,39 @@
<head>
<link rel="stylesheet" href="test.css">
</head>
<div class="layout">
<aside class="sidebar">
<h2>Mon site</h2>
<nav>
<a href="#accueil">Accueil</a>
<a href="#profil">Profil</a>
<a href="#projets">Projets</a>
<a href="#contact">Contact</a>
</nav>
</aside>
<main class="content">
<section id="accueil">
<h1>Accueil</h1>
<p>Bienvenue sur mon site.</p>
</section>
<section id="profil">
<h1>Profil</h1>
<p>Ma présentation...</p>
</section>
<section id="projets">
<h1>Projets</h1>
<p>Mes projets...</p>
</section>
<section id="contact">
<h1>Contact</h1>
<p>Mes coordonnées...</p>
</section>
</main>
</div>