added pin

added imprint footer
added favicon
added local font and icons
restructured project

assets/css/style.css

@@ -3,11 +3,16 @@
     --width: 550px;
 }
 
-body {
+@font-face {
     font-family: "Roboto";
+    src: local("Roboto"), url("font/roboto.ttf") format("truetype");
     font-display: swap;
+}
 
-    background-image: url("background.svg");
+body {
+    font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+
+    background-image: url("../img/background.svg");
     background-color: black;
     background-repeat: no-repeat;
     background-position: center;
@@ -26,6 +31,19 @@ body {
     min-width: var(--width);
 }
 
+.footer-container {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+
+    font-size: 0.9em;
+
+    padding: 3px 10px;
+    opacity: 0.8;
+    background-color: darkgray;
+    box-shadow: -1px -1px 5px darkgray;
+}
+
 .card-container {
     width: var(--width);
     height: var(--height);
@@ -45,7 +63,7 @@ body {
 }
 
 .card .front, .card .back {
-    background-image: url("noise.png");
+    background-image: url("../img/noise.png");
     background-repeat: repeat;
 
     position: absolute;
@@ -146,16 +164,24 @@ body {
     position: absolute;
     right: 0;
     bottom: 0;
-    padding: 0 20px 10px 0;
+    padding: 0 25px 15px 0;
 
-    font-size: 1.5em;
-    color: #404040;
+    font-size: 1em;
+    color: #808080;
 }
 
-.mobile-visible {
+.cap-visibleWhenCanHover {
     visibility: visible;
 }
 
+.cap-visibleWhenPinned {
+    visibility: hidden;
+}
+
+.cap-visibleWhenUnPinned {
+    visibility: hidden;
+}
+
 a {
     font-style: normal;
     text-decoration: none;
@@ -176,9 +202,26 @@ li .spacer {
 }
 
 @media (hover: hover) {
-    .mobile-visible {
+    .cap-visibleWhenCanHover {
         visibility: hidden;
     }
+
+    .cap-visibleWhenPinned {
+        visibility: hidden;
+    }
+    
+    .cap-visibleWhenUnPinned {
+        visibility: visible;
+    }
+    
+    #flip:target .cap-visibleWhenPinned {
+        visibility: visible;
+    }
+    
+    #flip:target .cap-visibleWhenUnPinned {
+        visibility: hidden;
+    }
+    
 }
 
 @media only screen and (max-width: 600px) {

index.html

@@ -4,11 +4,11 @@
         <meta charset="utf-8">
         <title>Elias Müller</title>
 
-        <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap" rel="stylesheet">
-        <link rel="stylesheet" href="style.css">
-                
-        <script src="https://kit.fontawesome.com/7c86d20fb1.js" crossorigin="anonymous"></script>
-        <script src="script.js" defer></script>
+        <link rel="stylesheet" href="assets/css/style.css">
+        <link rel="stylesheet" href="assets/fa/css/all.min.css" >
+        <link rel="icon" type="image/x-icon" href="assets/img/favicon.png">        
+
+        <script src="assets/js/script.js" defer></script>
    
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
@@ -18,7 +18,7 @@
         <div class="card-container">
             <div class="card" id="flip">
                 <div class="front">
-                    <img src="tux.webp" alt="tux penguin profile image">
+                    <img src="assets/img/tux.webp" alt="'Tux' penguin profile image">
                     <hr>
                     <div class="name">
                         <h1>Elias Müller</h1>
@@ -27,7 +27,7 @@
                             <li>Systemadministrator</li>
                         </ul>
                     </div>
-                    <a class="mobile-visible flip-button" href="#flip"><i class="fa-solid fa-right-long"></i></a>
+                    <a class="cap-visibleWhenCanHover flip-button" href="#flip"><i class="fa-solid fa-angles-right"></i></a>
                 </div>
                 <div class="back">
                     <ul>
@@ -46,7 +46,7 @@
                     
                     <div class="interests">
                         <h2>Erfahrungen mit</h2>
-                        <i class="fa-brands fa-osi" title="Open Source!"></i>
+                        <i class="fa-brands fa-osi" title="Open Source Initiative"></i>
                         <br>
                         <i class="fa-brands fa-flutter" title="Flutter"></i>
                         <i class="fa-brands fa-react" title="React"></i>
@@ -69,9 +69,16 @@
                         <i class="fa-brands fa-google-play" title="Google Play Store"></i>
                         <i class="fa-brands fa-app-store-ios" title="Apple App Store"></i>
                     </div>
-                    <a class="mobile-visible flip-button" href="#"><i class="fa-solid fa-left-long"></i></a>
+                    <a class="cap-visibleWhenCanHover flip-button" href="#unflip"><i class="fa-solid fa-angles-left"></i></a>
+                    <a class="cap-visibleWhenUnPinned flip-button" href="#flip"><i class="fa-solid fa-thumbtack"></i></a>
+                    <a class="cap-visibleWhenPinned flip-button" href="#unflip"><i class="fa-solid fa-thumbtack-slash"></i></a>
                 </div>
             </div>
         </div>
+        <div class="footer-container">
+            <a href="https://mhsl.eu/id.html">Impressum</a>
+            |
+            <a href="https://mhsl.eu/datenschutz.html">Datenschutz</a>
+        </div>
     </body>
 </html>