Added "Find me on"

src/index.html

@@ -28,27 +28,14 @@
         </div>
     </div>
 
+    <div class="content-holder">
+
     <!-- Links -->
-    <div id="links-div">
+    <div id="links-div" style="grid-column: 1;">
         <a href="/projects" style="grid-column: 1;">
             <img src="/assets/material-symbols--list-alt-outline.svg" class="link-image"/>
             <p class="link-text">Projects</p>
         </a>
-        
-        <a href="https://github.com/vhaudiquet/" style="grid-column: 2;">
-            <img src="/assets/github-mark.png" class="link-image"/>
-            <p class="link-text">GitHub</p>
-        </a>
-
-        <a href="https://git.vhaudiquet.fr/vhaudiquet/" style="grid-column: 3;">
-            <img src="/assets/logo_black.svg" class="link-image"/>
-            <p class="link-text">Gitea</p>
-        </a>
-
-        <a href="mailto:valentin.haudiquet@ens-rennes.fr">
-            <img src="/assets/arobase.svg" class="link-image"/>
-            <p class="link-text">Mail</p>
-        </a>
 
         <a href="/cv/">
             <img src="/assets/icon-park-solid_people.svg" class="link-image"/>
@@ -59,6 +46,33 @@
             <img src="/assets/mdi_about.svg" class="link-image"/>
             <p class="link-text">About</p>
         </a>
+    </div>
+
+    <div class="content-separator"></div>
+
+    <div id="contact-div" style="margin-top: 50px;">
+        <h4 style="text-align: left; padding-bottom: 15px;">Find me on...</h4>
+
+        <a href="https://github.com/vhaudiquet" class="contact-link">
+            <img src="/assets/github-mark.png" class="contact-image"/>
+            <p class="contact-text">GitHub</p>
+        </a>
+
+        <a href="https://git.vhaudiquet.fr/vhaudiquet/" class="contact-link">
+            <img src="/assets/logo_black.svg" class="contact-image"/>
+            <p class="contact-text">Gitea (personal)</p>
+        </a>
+
+        <a href="https://launchpad.net/~vhaudiquet" class="contact-link">
+            <img src="/assets/launchpad-white-black.png" class="contact-image"/>
+            <p class="contact-text">Launchpad</p>
+        </a>
+
+        <a href="mailto:valentin.haudiquet@ens-rennes.fr" class="contact-link">
+            <img src="/assets/arobase.svg" class="contact-image"/>
+            <p class="contact-text">Mail</p>
+        </a>
+    </div>
 
     </div>
 </body>

src/stylesheets/style.css

@@ -97,6 +97,17 @@ a:active {
     color: grey;
 }
 
+.content-holder {
+    display: grid; 
+    width: fit-content; 
+    margin: auto;
+    grid-auto-flow: column;
+}
+.content-separator {
+    width: 350px;
+    grid-column: 2;
+}
+
 .link-image {
     width: 150px; 
     height: 150px;
@@ -105,6 +116,19 @@ a:active {
     text-align: center;
 }
 
+.contact-link {
+    display: flex;
+}
+.contact-image {
+    width: 48px;
+    height: 48px;
+}
+.contact-text {
+    text-align: right;
+    padding-left: 10px;
+    font-size: 28px;
+}
+
 strong {
     font-family: 'Inter', sans-serif;
     font-style: normal;
@@ -225,7 +249,7 @@ strong {
         display: grid;
         column-gap: 40px;
         row-gap: 40px;
-        grid-auto-flow: row;
+        /* grid-auto-flow: row; */
         width: fit-content; 
         margin: auto;
         margin-top: 100px;
@@ -236,6 +260,13 @@ strong {
         row-gap: 40px;
         grid-template-columns: repeat(2, 270px);
     }
+
+    .content-holder {
+        grid-auto-flow: row;
+    }
+    .content-separator {
+        width: 0px;
+    }
 }
 
 @media only screen and (max-width: 650px) {