From 7aad644f6db88d2ecf22f0395c2ef3a355cc143c Mon Sep 17 00:00:00 2001
From: Alexandre AGOSTINHO <tuksiranium@gmail.com>
Date: Thu, 6 Oct 2022 12:05:54 +0200
Subject: [PATCH] minchg3

---
 index.html         | 18 ++++++++--------
 pages/galerie.html | 51 ++++++++++++++++++++++++++++++++++++++++++++++
 styles/galerie.css | 20 ++++++++++++++++++
 styles/main.css    |  7 ++++---
 4 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 pages/galerie.html
 create mode 100644 styles/galerie.css
diff --git a/index.html b/index.html
index e50ba2b..6ae740e 100644
--- a/index.html
+++ b/index.html
@@ -98,17 +98,17 @@
           </article>
         </div>
       </section>
+    </div>
 
-      <aside class="links">
-        <h3>Quelques liens externes..</h3>
+    <aside class="links">
+      <h3>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>
+      <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>
 
     <footer>
       <p>Auteur: Alexandre Agostinho (TP1)</p>
diff --git a/pages/galerie.html b/pages/galerie.html
new file mode 100644
index 0000000..0c3cdd3
--- /dev/null
+++ b/pages/galerie.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <meta charset="utf-8" \>
+    <title>Galerie</title>
+    <link href="../styles/main.css" rel="stylesheet" type="text/css" />
+    <link href="../styles/galerie.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+
+    <div class="header">
+      <div class="title">
+        <h1>LangProg - Galerie</h1>
+        <img src="../img/ProgrammingLanguage1-1.jpg" alt="ImgTitle" />
+      </div>
+
+      <nav>
+        <a href="../index.html">Menu Principal</a>
+        <a href="galerie.html">Galerie</a>
+        <a href="donnees.html">Données</a>
+      </nav>
+    </div>
+
+    <div class="main-content">
+
+      <div id="gal-photos">
+
+        <img src="../img/The_C_Programming_Language_logo.svg.png" alt="img1" />
+        <img src="../img/ISO_C++_Logo.svg.png" alt="img2" />
+        <img src="../img/1024px-C_Sharp_wordmark.svg.png" alt="img3" />
+
+      </div>
+
+      <div id="gal-videos">
+
+        <iframe width="1280" height="720" src="https://www.youtube.com/embed/Rub-JsjMhWY" title="C++ Programming" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+      </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/galerie.css b/styles/galerie.css
new file mode 100644
index 0000000..cc9a18b
--- /dev/null
+++ b/styles/galerie.css
@@ -0,0 +1,20 @@
+#gal-photos {
+  margin: 30px;
+  border: 10px solid darkgrey;
+  border-radius: 0 20px;
+  background-color: cadetblue;
+}
+
+#gal-photos img {
+  width: 200px;
+  display: inline-block;
+  margin: 35px;
+}
+
+#gal-videos {
+  margin: 30px;
+  border: 10px solid cadetblue;
+  border-radius: 0 20px;
+  background-color: darkgrey;
+}
+
diff --git a/styles/main.css b/styles/main.css
index 572bb83..c14231e 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -18,7 +18,7 @@ a:active { color: darkgrey; }
 
 .header {
     border-left: 10px solid cadetblue;
-    background-color: #ebebeb;
+    background-image: linear-gradient(to right, #ebebeb, cadetblue);
     position: sticky;
     top: 0px;
 }
@@ -122,11 +122,12 @@ a:active { color: darkgrey; }
     padding-top: 1%;
     border: 6px solid cadetblue;
     border-radius: 0 14px;
-    display: block;
     position: fixed;
     top: 113px;
-    right: 16px;
+    right: 1%;
+    left: 80%;
     height: 400px;
+    margin-left: 1%;
 }
 
 .links h3, ul {
