Basic redesign

2024-11-23 11:56:29 +01:00
parent 9f23b1be19
commit 89278a6013
5 changed files with 200 additions and 189 deletions
--- a/style.css
+++ b/style.css
@@ -0,0 +1,153 @@
+:root {
+    --height: 300px;
+    --width: 550px;
+}
+
+body {
+    font-family: "Roboto";
+
+    background-image: url("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;
+}
+
+.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("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 .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: 10px;
+    text-align: center;
+}
+
+.card .back .interests {
+    font-size: 1.5em;
+    letter-spacing: 0.3em;
+    line-height: 1.6em;
+    text-align: center;
+}
+
+.card .flip-button {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0 20px 10px 0;
+
+    font-size: 1.5em;
+    color: gray;
+}
+
+.mobile-visible {
+    visibility: visible;
+}
+
+a {
+    font-style: normal;
+    text-decoration: none;
+    color: black;
+}
+
+@media (hover: hover) {
+    .mobile-visible {
+        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);
+    }    
+}