added pin

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

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>