Added background + footer

css/main.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;700&display=swap');
+
 html {
   box-sizing: border-box;
   font-family: sans-serif;
@@ -19,15 +21,19 @@ body {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 50%;
 }
 
 .right {
   right: 0;
+  background: url("../images/pic1.png");
+  background-size: cover;
+  background-position: center;
+  width: 60%;
 }
 .left {
   left: 0;
   text-align: right;
+  width: 40%;
 }
 
 .left h1 {
@@ -39,14 +45,40 @@ body {
   margin: 0;
   width: 100%;
 
-  font-family: IBM Plex Serif;
+  font-family: IBM Plex Serif, serif;
 }
 
 .left h1:first-of-type {
   top: calc( 50% - 1em );
-  font-weight: 800;
+  font-weight: 700;
 }
 .left h1:last-of-type {
   bottom: calc( 50% - 1em );
   font-weight: 400;
 }
+
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background: black;
+  color: white;
+  text-align: center;
+}
+footer ul {
+  list-style: none;
+  padding: 1em;
+  margin: 0;
+}
+footer li span {
+  font-weight: 800;
+  margin-right: 1em;
+}
+footer a {
+  color: lightgray;
+  text-decoration: none;
+  transition: color 50ms;
+}
+footer a:hover {
+  color: white;
+}

index.html

@@ -30,6 +30,14 @@
     <div class="left">
       <h1>Edgar P.</h1>
       <h1>Burkhart</h1>
+      <footer>
+        <ul>
+          <li><span>email</span>
+            <a href="mailto:contact@edgarpierre.fr">contact@edgarpierre.fr</a></li>
+          <li><span>git</span>
+            <a href="https://git.edgarpierre.fr/edpibu">git.edgarpierre.fr/edpibu</a></li>
+        </ul>
+      </footer>
     </div>
     <div class="right"></div>
   </body>