26/05/2023-1

2023-05-26 10:17:23 +02:00
commit 72ef74c7be
9 changed files with 207 additions and 0 deletions
@@ -0,0 +1,114 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-image: url('../img/background.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50%;
+}
+
+body #a {
+    text-decoration: none;
+    color: rgb(100, 100, 100);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 15px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    z-index: 5;
+    cursor: default;
+    margin: 0;
+    padding: 0;
+}
+
+main {
+    position: absolute;
+    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    filter: blur(10px);
+    
+    transition: opacity 2s ease-in-out, filter 2s ease-in-out;
+}
+
+header {
+    width: 100%;
+    min-height: 35%;
+    padding-top: 10%;
+    padding-bottom: 10%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+header img {
+    width: 125px;
+    border: 2px solid white;
+    border-radius: 50%;
+}
+
+header h2 {
+    background-color: rgb(30, 30, 30);
+    border: 1px solid white;
+    border-radius: 30px;
+    padding: 5px;
+    padding-right: 10px;
+    padding-left: 10px;
+    color: white;
+    font-size: 1.25rem;
+    font-family: 'Times New Roman', Times, serif;
+}
+
+.links-container {
+    width: 100%;
+    min-height: 65%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.links-container a {
+    display: flex;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    width: 90%;
+    margin-top: 20px;
+    padding: 5px;
+    border-radius: 30px;
+    text-decoration: none;
+    color: black;
+    font-size: 1.15rem;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.links-container a img {
+    width: 50px;
+    margin-left: 20px;
+}
+
+.links-container a p {
+    margin-left: 10%;
+}
+
+#vanta {
+    position: absolute;
+    z-index: 2;
+    width: 100vw;
+    height: 100vh;
+}
+
+@media screen and (width > 425px) {
+    .links-container a {
+        width: 60%;
+    }
+}