tp2

9 months ago · e1f691cac7
parent b7e8fe136f
commit e1f691cac7
4 changed files with 91 additions and 17 deletions
--- a/article.html
+++ b/article.html
@ -4,6 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="le_super_css.css">
    <title>le super article de la mort</title>
 </head>

--- a/edt.html
+++ b/edt.html
@ -3,13 +3,15 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="le_super_css.css">
    <title>le super emploi du temps</title>
 </head>
 <body>
    <h1>
        Emploi du temps pour l'année 2024 à 2025!
    </h1>
-    <table>
+    <table class="Planning">
+      <caption>Emploi du temps</caption>
        <tr>
          <th>lundi</th>
          <th>mardi</th>
--- a/index.html
+++ b/index.html
@ -5,29 +5,42 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
+    <link rel="stylesheet" href="le_super_css.css">
 </head>

 <body>
    <Header>
-        <h1>
+        <h1 class="titre_prenom">
            ABADIE
            <br>
            Julien
        </h1>
    </Header>
+    <div >
+        <img id="photo_Julien" src="images/photo_Julien.jpg" alt="photo de julien ABADIE">
+    </div>
    
-    <img src="images/photo_Julien.jpg" alt="photo de julien ABADIE" width="300vw" height="auto">
    <section>
-        <h2>
+        <h2 id="">
            Bonjour, binvenue sur mon site !
        </h2>
    </section>
    <br>
+    
    <a href="https://www.google.com">When you have a problem, you just need Google! (lol)</a>
    
+    
    <h3>Some random articles</h3>
    <div>
-        <article>
+        <aside class="container_aside">
+            <p>mes supers liens de qualité!</p>
+            <br>
+            <a href="discord">discord2</a>
+            <br>
+            <a href="">steam</a>
+        </aside>
+        <br>
+        <article class="clear_right">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt pariatur fuga reprehenderit rerum optio,
            eaque fugit distinctio error iste dolor est veritatis itaque suscipit veniam porro hic officiis dolore
            nesciunt natus voluptate minima accusantium placeat. Animi odit modi assumenda consequatur adipisci natus
@ -38,6 +51,8 @@
            veniam assumenda...
        </article>
        <a href="article.html">voir plus</a>
+        <br><br>
+        <div class="double_article">
            <h3>Article n°2</h3>
            <article>
                <p>
@ -47,8 +62,19 @@
                </p>
            </article>
            <a href="edt.html">voir plus</a>
-    </div>

+            <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>
+    <br><br>
    <footer>
        sike regardez ce super dsrgfresgfreshrvrfjksdvfedshfwklfbkesfsjkebfvlesbfkbdskjfvb
    </footer>
--- a/le_super_css.css
+++ b/le_super_css.css
@ -0,0 +1,45 @@
+html {
+    background: linear-gradient(rgb(0, 59, 101), rgb(75, 0, 145));   
+    color: white;
+    font-family: montserrat,sans-serif;
+    font-size: 150%;
+    padding: 5vw;
+
+}
+.titre_prenom{
+    position: fixed;
+    margin-top: -4vw;
+    z-index: 1;
+}
+
+a{
+    color: #00e1ff;
+}
+
+#photo_Julien{
+    margin-top: 6vw;
+    width: 20vw;
+    height: auto;
+    border-radius: 1.5vw ;
+    border: 100px white;
+}
+.container_aside{
+    float: right;
+    border: solid 0.01vw;
+    border-radius: 1.5vw;
+    padding: 1vw;
+    margin-left: 10vw;
+}
+.clear_right{
+    clear: left;
+}
+.double_article{
+    display:flex;
+    flex-wrap: nowrap;
+    border: solid 0.01vw wheat;
+    padding: 1vw;
+}
+.Planning{
+    border: solid #00e1ff;
+    border-collapse: collapse;
+}