From 1090635a036f388946ec6ba60822dd7b4e64ca5f Mon Sep 17 00:00:00 2001
From: tuks <tuksiranium@gmail.com>
Date: Wed, 5 Oct 2022 09:23:37 +0200
Subject: [PATCH] change to webtps

---
 index.html      | 86 +++++++++++++++++++++++++++++------------------
 styles.css      | 22 ------------
 styles/main.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 143 insertions(+), 54 deletions(-)
 delete mode 100644 styles.css
 create mode 100644 styles/main.css
diff --git a/index.html b/index.html
index 274a668..ea87ce1 100644
--- a/index.html
+++ b/index.html
@@ -1,67 +1,89 @@
 <!DOCTYPE html>
 <html>
+
   <head>
-    <meta charset="utf-8" />
-    <title>Languages de programmation</title>
-    <link href="styles.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+    <title>LangProg</title>
+    <link href="styles/main.css" rel="stylesheet" type="text/css" />
+    <link href="styles/index.css" rel="stylesheet" type="text/css" />
   </head>
+
   <body>
-    <h1>Languages de programmation</h1>
-    <img class="imghead" src="img/ProgrammingLanguage1-1.jpg" alt="Images des nom de programmes" />
-    <div class"main">
-      <article>
+
+    <div class="header">
+
+      <div class="title">
+        <h1>LangProg - Main</h1>
+        <img src="img/ProgrammingLanguage1-1.jpg" alt="ImgTitle" />
+      </div>
+
+      <nav>
+        <a href="./index.html">Menu Principal</a>
+        <a href="pages/galerie.html">Galerie</a>
+        <a href="pages/donnees.html">Données</a>
+      </nav>
+    </div>
+
+    <div class="main-content">
+      <section class="articles">
         <h2>actualités des languages</h2>
-        <section>
+
+        <article>
           <h3>Quelques données...</h3>
           <p>Voici quelques données sur les différants languages de
             programmation.</p>
           <a href="./pages/donnees.html">Voir les données...</a>
-        </section>
-        <section>
+        </article>
+
+        <article>
           <h3>Le C</h3>
           <p>Le C est un language de programmation.</p>
           <a href="./pages/article1.html">Lire la suite...</a>
-        </section>
-        <section>
+        </article>
+
+        <article>
           <h3>Le C++</h3>
           <p>Le C++ est un language de programmation.</p>
           <a href="./pages/article2.html">Lire la suite...</a>
-        </section>
-        <section>
+        </article>
+
+        <article>
           <h3>Le C#</h3>
           <p>Le C# est un language de programmation.</p>
           <a href="./pages/article3.html">Lire la suite...</a>
-        </section>
-      </article>
-    </div>
+        </article>
+      </section>
+
+      <section class="actus">
+        <h2>Actualités du site</h2>
+
+        <article>
+          <h3>Initialisation du site</h3>
+          <p>08/09/2022: Création de la page d'acceuil, des 3 premiers articles,
+          et de la table.</p>
+        </article>
+
+        <article>
+          <h3>Ajouts des stylesheets</h3>
+          <p>15/09/2022: Ajouts de styles.css.</p>
+        </article>
+      </section>
+
       <aside class="links">
         <h3>Quelques liens externes..</h3>
+
         <ul>
           <li><a href="https://fr.wikipedia.org/wiki/C_(langage)">C (Wiki)</a></li>
           <li><a href="https://fr.wikipedia.org/wiki/C%2B%2B">C++ (Wiki)</a></li>
           <li><a href="https://fr.wikipedia.org/wiki/C_sharp">C# (Wiki)</a></li>
         </ul>
       </aside>
-    <div>
-      <article>
-        <h2>Actualités du site</h2>
-        <section>
-          <h3>Initialisation du site</h3>
-          <p>08/09/2022: Création de la page d'acceuil, des 3 premiers articles,
-          et de la table.</p>
-        </section>
-        <section>
-          <h3>Ajouts des stylesheets</h3>
-          <p>15/09/2022: Ajouts de styles.css.</p>
-        </section>
-      </article>
     </div>
-    <div>
 
-    </div>
     <footer>
       <p>Auteur: Alexandre Agostinho (TP1)</p>
       <p><a href="mailto:alexandre.agostinho@etu.uca.fr">alexandre.agostinho@etu.uca.fr</a></p>
     </footer>
+
   </body>
 </html>
diff --git a/styles.css b/styles.css
deleted file mode 100644
index c31e962..0000000
--- a/styles.css
+++ /dev/null
@@ -1,22 +0,0 @@
-body {
-  background-color: #ebebeb;
-  margin-width: 80%;
-}
-
-h1 {
-  background-color: #c9832e;
-  color: white;
-}
-
-
-.imghead {
-  float: right;
-  width: 400px;
-  height: 250px;
-}
-
-.links {
-  height: 400px;
-  float: right;
-  border-width: 20%;
-}
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 0000000..e9d8b3b
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,89 @@
+body {
+  background-color: #ebebeb;
+}
+
+/* HEADER */
+
+.header {
+    border-left: 6px solid cadetblue;
+    background-color: #ebebeb;
+    position: sticky;
+    top: 0px;
+}
+
+.header .title {
+    display: block;
+}
+
+.header h1 {
+    margin-left: 10px;
+    margin-bottom: 4px;
+}
+
+.header img {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 124px;
+}
+
+.header nav {
+    background-color: cadetblue;
+    color: white;
+}
+
+.header nav a {
+    color: white;
+    margin-inline: 10px;
+}
+
+/* MAIN CONTENT */
+
+.main-content {
+    border-left: 6px solid cadetblue;
+}
+
+.main-content section {
+    margin-left: 10px;
+}
+
+.main-content h2,h3 {
+    border-bottom: 6px solid cadetblue;
+    border-left: 6px solid darkgrey;
+    padding-bottom: 4px;
+    padding-left: 10px;
+}
+
+.main-content h2 {
+    background-color: cadetblue;
+}
+
+/* ASIDE */
+
+.links {
+    background-color: #ebebebca;
+    border: 6px solid cadetblue;
+    display: block;
+    float: right;
+    position: fixed;
+    top: 400px;
+    right: 8px;
+    height: 400px;
+}
+
+/* FOOTER */
+
+footer {
+    background-color: darkgray;
+    padding: 0;
+    margin: 0;
+    position: sticky;
+    bottom: 0px;
+}
+
+footer p {
+    display: inline-block;
+    text-align: right;
+    padding: 0;
+    margin: 0;
+}
