more fancy list items

cleanup in about.css

css/about.css

@@ -5,6 +5,7 @@
  * Copyright (c) 2020 Lukas Heiligenbrunner
  */
 
+/* ID selectors */
 #section2 {
     background-color: #deebff;
 }
@@ -13,17 +14,6 @@
     width: 100%;
 }
 
-.aboutcontainer {
-    width: 40%;
-    float: left;
-}
-
-.aboutPicContainer {
-    width: 60%;
-    height: 300px;
-    float: left;
-}
-
 #aboutPic {
     float: right;
     margin-top: 10%;
@@ -32,10 +22,6 @@
     height: 100%;
 }
 
-.aboutcontainer a {
-    text-decoration: none;
-}
-
 #downloadcvbtn {
     margin-top: 15%;
 
@@ -52,8 +38,40 @@
     transition: background-color 500ms;
 }
 
+/* CLASS selectors */
+.aboutcontainer {
+    width: 40%;
+    float: left;
+}
+
+.aboutPicContainer {
+    width: 60%;
+    height: 300px;
+    float: left;
+}
+
+.aboutcontainer a {
+    text-decoration: none;
+}
+
+.arrowicon {
+    margin: 0;
+    padding: 7px 0 7px 20px;
+    list-style: none;
+    background-image: url("../rsc/arrow.svg");
+    background-repeat: no-repeat;
+    background-position: left center;
+    background-size: 20px;
+}
+
+/* HOVER selectors */
+.arrowicon:hover {
+    background-color: #7a96c2;
+    border-radius: 3mm;
+    margin-left: 3mm;
+}
+
 #downloadcvbtn:hover {
-    /*background-color: #facf4d;*/
     color: white;
     background-color: #194378;
     transition: all 500ms;

index.html

@@ -100,12 +100,12 @@
                 </p>
 
                 <ul>
-                    <li>C++</li>
-                    <li>Java</li>
-                    <li>Kotlin</li>
-                    <li>HTML/CSS/JS</li>
-                    <li>Latex</li>
-                    <li>OpenSCAD</li>
+                    <li class="arrowicon">C++</li>
+                    <li class="arrowicon">Java</li>
+                    <li class="arrowicon">Kotlin</li>
+                    <li class="arrowicon">HTML/CSS/JS</li>
+                    <li class="arrowicon">Latex</li>
+                    <li class="arrowicon">OpenSCAD</li>
                 </ul>
                 <a href="rsc/curriculumvitaee.pdf" target="_blank">
                     <div id="downloadcvbtn">

rsc/arrow.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="451.846px" height="451.847px" viewBox="0 0 451.846 451.847" style="enable-background:new 0 0 451.846 451.847;"
+	 xml:space="preserve">
+<g>
+	<path d="M345.441,248.292L151.154,442.573c-12.359,12.365-32.397,12.365-44.75,0c-12.354-12.354-12.354-32.391,0-44.744
+		L278.318,225.92L106.409,54.017c-12.354-12.359-12.354-32.394,0-44.748c12.354-12.359,32.391-12.359,44.75,0l194.287,194.284
+		c6.177,6.18,9.262,14.271,9.262,22.366C354.708,234.018,351.617,242.115,345.441,248.292z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>