tp2

edt.html

@@ -13,25 +13,42 @@
     <table class="Planning">
       <caption>Emploi du temps</caption>
         <tr>
-          <th>lundi</th>
-          <th>mardi</th>
-          <th>mercredi</th>
-          <th>jeudi</th>
-          <th>vendredi</th>
+          <th>Temps</th>
+          <th>Lundi</th>
+          <th>Mardi</th>
+          <th>Mercredi</th>
+          <th>Jeudi</th>
+          <th>Vendredi</th>
+          <th>Samedi</th>
         </tr>
         <tr>
+          <th>Matin</th>
           <td>Algo</td>
           <td>Systèmes</td>
           <td>Aglais</td>
           <td rowspan="2">Dormir</td>
-          <td>WEB</td>
+          <td colspan="2">WEB</td>
         </tr>
         <tr>
+          <th>Midi</th>
           <td>Hacker l'iut</td>
-          <td>Francisco Chang</td>
-          <td>Mexico</td>
-
-          <td>Faire les courses</td>
+          <td>Lorem.</td>
+          <td>ipsum</td>
+          <td colspan="2">Faire les courses</td>
+        </tr>
+        <th>Soir</th>
+        <td>MarioKart</td>
+        <td>Lorem.</td>
+        <td>ipsum</td>
+        <td colspan="2">Faire les courses</td>
+        <td rowspan="2"><img src="/images/photo_Julien.jpg" alt="" width="10%"></td>
+        </tr>
+        </tr>
+        <th>Illustrations</th>
+        <td><img src="/images/photo_Julien.jpg" alt="" width="10%"></td>
+        <td><img src="/images/photo_Julien.jpg" alt="" width="10%">.</td>
+        <td><img src="/images/photo_Julien.jpg" alt="" width="10%"></td>
+        <td colspan="2"><img src="/images/photo_Julien.jpg" alt="" width="10%"></td>
         </tr>
     </table> 
 </body>

index.html

@@ -16,28 +16,32 @@
             Julien
         </h1>
     </Header>
-    <div >
-        <img id="photo_Julien" src="images/photo_Julien.jpg" alt="photo de julien ABADIE">
-    </div>
+
+    <img id="photo_Julien" src="images/photo_Julien.jpg" alt="photo de julien ABADIE">
     
-    <section>
-        <h2 id="">
-            Bonjour, binvenue sur mon site !
-        </h2>
-    </section>
+    <h2>
+        Bonjour, binvenue sur mon site !
+    </h2>
+
     <br>
     
     <a href="https://www.google.com">When you have a problem, you just need Google! (lol)</a>
     
     
-    <h3>Some random articles</h3>
-    <div>
+    
+    <section>
+        <h3 class="center" >Some random articles</h3>
         <aside class="container_aside">
             <p>mes supers liens de qualité!</p>
-            <br>
-            <a href="discord">discord2</a>
-            <br>
-            <a href="">steam</a>
+            <ul>
+                <li>
+                <a href="discord">discord2</a>
+                </li>
+                <br>
+                <li>
+                <a href="">steam</a>
+                </li>
+            </ul>
         </aside>
         <br>
         <article class="clear_right">
@@ -52,28 +56,29 @@
         </article>
         <a href="article.html">voir plus</a>
         <br><br>
-        <div class="double_article">
-            <h3>Article n°2</h3>
-            <article>
-                <p>
-                    L'emploi du team de l'année est sorti! 
-                    <br>
-                    cliquez ci dessous pour le voir!
-                </p>
-            </article>
-            <a href="edt.html">voir plus</a>
-
-            <h3>Article n°2</h3>
-            <article>
-                <p>
-                    L'emploi du team de l'année est sorti! 
-                    <br>
-                    cliquez ci dessous pour le voir!
-                </p>
-            </article>
-            <a href="edt.html">voir plus</a>
-        </div>
-    </div>
+        <table class="table_articles">
+            <td>
+                <h3>Article n°2</h3>
+                <article>
+                    <p>
+                        L'emploi du team de l'année est sorti! 
+                        <br>
+                        cliquez ci dessous pour le voir!
+                    </p>
+                </article>
+                <a href="edt.html">voir plus</a>
+            </td>
+            <td>
+                <h3>Article n°3</h3>
+                <article>
+                    <p>
+                        La dernière vidéo du chanteur est sortie, allez la regarder dès maintenant! 
+                    </p>
+                </article>
+                <a href="video.html">voir plus</a>
+            </td>
+        </table>
+    </section>
     <br><br>
     <footer>
         sike regardez ce super dsrgfresgfreshrvrfjksdvfedshfwklfbkesfsjkebfvlesbfkbdskjfvb

le_super_css.css

@@ -6,7 +6,11 @@ html {
     padding: 5vw;
 
 }
+.center{
+    text-align: center;
+}
 .titre_prenom{
+    font-weight: 550;
     position: fixed;
     margin-top: -4vw;
     z-index: 1;
@@ -29,6 +33,7 @@ a{
     border-radius: 1.5vw;
     padding: 1vw;
     margin-left: 10vw;
+    height: 400px;
 }
 .clear_right{
     clear: left;
@@ -36,10 +41,27 @@ a{
 .double_article{
     display:flex;
     flex-wrap: nowrap;
-    border: solid 0.01vw wheat;
+    border: solid 0.01vw white;
     padding: 1vw;
 }
 .Planning{
-    border: solid #00e1ff;
+    border: solid 3px #ffffff;
+    border-collapse: collapse;
+}
+.Planning td, th{
+    border:solid 2px #ffffff;
+    padding: 1vw;
+}
+.table_articles{
+    border:solid #ffffff;
     border-collapse: collapse;
+}
+.table_articles td, th{
+    border:solid #ffffff;
+    border-collapse: collapse;
+    padding: 1vw;
+}
+.video{
+    width: 50vw;
+    height: auto;
 }

video.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vidéos</title>
+    <link rel="stylesheet" href="le_super_css.css">
+</head>
+
+<body>
+    <video controls class="video">
+        <source src="/images/Rick Astley - Never Gonna Give You Up (Official Music Video) [dQw4w9WgXcQ].mp4" type="video/mp4" />
+        <source />
+    </video>
+</body>
+</html>