added pin

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

assets/css/style.css

@@ -0,0 +1,254 @@
+:root {
+    --height: 300px;
+    --width: 550px;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: local("Roboto"), url("font/roboto.ttf") format("truetype");
+    font-display: swap;
+}
+
+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;
+    background-size: cover;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0;
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+
+    min-height: var(--height);
+    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);
+    perspective: 1000px;
+}
+
+.card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition: transform 1s;
+    transform-style: preserve-3d;
+}
+
+.card-container:hover .card, #flip:target {
+    transform: rotateX(180deg);
+}
+
+.card .front, .card .back {
+    background-image: url("../img/noise.png");
+    background-repeat: repeat;
+
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+
+    border-radius: 10px;
+    background-color: white;
+}
+
+.card .front {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.card .front img {
+    border-radius: 50%;
+    max-height: 200px;
+}
+
+.card .front hr {
+    height: calc(var(--height) / 2);
+    width: 0px;
+
+    border-radius: 10px;
+    border: 2px dashed lightgray;
+
+    margin: 0 10px;
+}
+
+.card .front .name {
+    margin-left: 30px;
+}
+
+.card .front .name h1 {
+    text-align: left;
+    margin: 0 0 10px 0;
+    padding: 0;
+}
+
+.card .front .name ul {
+    padding: 0 0 0 20px;
+    margin: 0;
+    list-style: square;
+}
+
+.card .back {
+    transform: rotateX(180deg);
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.card .back ul {
+    list-style: none;
+    text-align: left;
+    padding: 0;
+    margin: 0;
+}
+
+.card .back ul li {
+    margin: 5px 0;
+}
+
+.card .back ul li i {
+    width: 20px;
+    margin-right: 7px;
+    text-align: center;
+    color: #404040;
+    font-size: 0.9em;
+    line-height: 1em;
+}
+
+.card .back .interests {
+    font-size: 1.4em;
+    letter-spacing: 0.3em;
+    line-height: 1.6em;
+    text-align: center;
+}
+
+.card .back .interests h2 {
+    font-size: 0.7em;
+    letter-spacing: 0;
+    line-height: 1em;
+    text-align: center;
+    padding: 0;
+    margin: 0;
+    margin-bottom: 5px;
+    color: #404040;
+}
+
+.card .flip-button {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0 25px 15px 0;
+
+    font-size: 1em;
+    color: #808080;
+}
+
+.cap-visibleWhenCanHover {
+    visibility: visible;
+}
+
+.cap-visibleWhenPinned {
+    visibility: hidden;
+}
+
+.cap-visibleWhenUnPinned {
+    visibility: hidden;
+}
+
+a {
+    font-style: normal;
+    text-decoration: none;
+    color: black;
+    cursor: pointer;
+}
+
+li .spacer {
+    height: 1rem;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
+.requires-js {
+    display: none;
+}
+
+@media (hover: hover) {
+    .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) {
+    :root {
+        --height: 550px;
+        --width: 300px;
+    }
+    .card .front, .card .back {
+        flex-direction: column;
+    }
+    .card-container:hover .card, #flip:target {
+        transform: rotateY(180deg);
+    }
+    .card .back {
+        transform: rotateY(180deg);
+    }
+    .card .front hr {
+        width: calc(var(--width) / 2);
+        height: 0px;
+    
+        border-radius: 10px;
+        border: 2px dashed lightgray;
+    
+        margin: 0 10px;
+    }
+    .card .front .name {
+        margin-top: 30px;
+        margin-left: 0;
+    }
+}