[Add more gifs]

css/main.css

@@ -28,13 +28,24 @@ header {
 	border-top-right-radius: 100px;
 }
 
-header > img {
+footer {
+	background-color: var(--yellow);
+	padding: 20px 0 0 0;
+	border-bottom-left-radius: 100px;
+	border-bottom-right-radius: 100px;
+}
+
+header > img, footer > img {
 	width: 512px;
 	height: auto;
 	display: block;
 	margin: auto;
 }
 
+footer > img {
+	width: 128px;
+}
+
 @media only screen and (max-width: 512px) {
 	header > img {
 		width: 90vw;
@@ -48,15 +59,21 @@ main {
   padding: 42px;
   font-family: 'Courier New', monospace;
 	background-color: black;
-	border-bottom-left-radius: 100px;
-	border-bottom-right-radius: 100px;
 }
 
-header, main {
+header, main, footer {
   max-width: 1024px;
   margin: auto;
 }
 
+main table th {
+	text-align: left;
+}
+
+main table th[colspan="2"] {
+	text-align: center;
+}
+
 main a, main a:visited {
   color: var(--green);
   text-decoration: none;
@@ -71,7 +88,18 @@ main address {
 	justify-content: space-around;
 }
 
-main section#wil ul {
+main section div.section-row {
+	display: flex;
+	justify-content: space-between;
+}
+
+main section div.section-row img.section-icon {
+	width: 128px;
+	height: 128px;
+	margin: auto 0 auto 0;
+}
+
+main section ul {
   list-style-type: '';
 }
 
@@ -83,10 +111,6 @@ main section#wil ul li:nth-child(even)::before {
 	content: '💛 ';
 }
 
-main section#games ul {
-	list-style-type: '';
-}
-
 main section#games ul li::before {
 	content: '🟧 ';
 }

index.html

@@ -14,27 +14,37 @@
 		<main>
 			<section id="socials">
 				<h2>Socials</h2>
-                <a href="https://chaos.social/@xoy" target="_blank" rel="noopener noreferrer me"><i class="icon mastodon"></i>@xoy@chaos.social</a><br>
+				<div class="section-row">
-                <a href="https://matrix.to/#/@iamxoy:matrix.org" target="_blank" rel="noopener noreferrer"><i class="icon matrix"></i>@iamxoy:matrix.org</a>
+					<table>
+						<tr>
+							<td><a href="https://chaos.social/@xoy" target="_blank" rel="noopener noreferrer me"><i class="icon mastodon"></i>@xoy@chaos.social</a></td>
+						</tr>
+						<tr>
+							<td><a href="https://matrix.to/#/@iamxoy:matrix.org" target="_blank" rel="noopener noreferrer"><i class="icon matrix"></i>@iamxoy:matrix.org</a></td>
+						</tr>
+					</table>
+					<img class="section-icon" src="media/social.gif" width="64" height="64">
+				</div>
 			</section>
 			<hr>
 			<section id="identity">
 				<h2>Identity</h2>
+				<div class="section-row">
 					<table>
 						<tr>
-                        <td>Name</td>
+							<th>Name</th>
 							<td>xoy</td>
 						</tr>
 						<tr>
-                        <td>Age</td>
+							<th>Age</th>
 							<td>23</td>
 						</tr>
 						<tr>
-                        <td>Gender</td>
+							<th>Gender</th>
 							<td>non-binary</td>
 						</tr>
 						<tr>
-                        <td>Sexuality</td>
+							<th>Sexuality</th>
 							<td>pansexual</td>
 						</tr>
 						<tr>
@@ -49,16 +59,21 @@
 							<td>dey/denen</td>
 						</tr>
 					</table>
+					<img class="section-icon" src="media/identity.gif" width="64" height="64">
+				</div>
 			</section>
 			<hr>
 			<section id="wil">
 				<h2>What I like</h2>
+				<div class="section-row">
 					<ul>
 						<li>Software development</li>
 						<li>Linux</li>
 						<li>Gaming</li>
 						<li>Bouldern</li>
 					</ul>
+					<img class="section-icon" src="media/hearts.gif" width="64" height="64">
+				</div>
 			</section>
 			<hr>
 			<section id="games">
@@ -85,5 +100,8 @@
 				</ul>
 			</section>
 		</main>
+		<footer>
+			<img src="media/xoy.gif" width="64" height="64">
+		</footer>
 	</body>
 </html>

not_found.html

@@ -15,5 +15,8 @@
 			<p>The requested page was not found.</p>
 			<a href="index.html">Go to index</a>
 		</main>
+		<footer>
+			<img src="media/xoy.gif" width="64" height="64">
+		</footer>
 	</body>
 </html>