initial commit

css/header.css

@@ -0,0 +1,41 @@
+.header {
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-text {
+    /* width: 100%; */
+    text-align: center;
+    text-shadow: white 0 0 30px;
+}
+
+.usericon {
+    width: 60px;
+    height: 60px;
+    overflow: hidden;
+    border-radius: 100%;
+    transition: 0.3s;
+}
+
+.usericon:hover {
+    border-radius: 10px;
+    transform: translateY(-10px);
+    box-shadow: white 0 0 30px;
+}
+
+.usericon>img {
+    width: 100%;
+    height: 100%;
+}
+
+.user {
+    display: flex;
+    align-items: center;
+}
+
+.username {
+    text-shadow: white 0 0 30px;
+    margin: 0 10px;
+}

css/icons.css

@@ -0,0 +1,34 @@
+.icons {
+    width: 50%;
+    height: 20%;
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    align-content: center;
+    justify-items: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.icon {
+    width: 70px;
+    height: 70px;
+    overflow: hidden;
+    border-radius: 100%;
+    transition: 0.3s;
+}
+
+.icon:hover {
+    border-radius: 10px;
+    transform: translateY(-10px);
+    box-shadow: white 0 0 30px;
+}
+
+.icon>a {
+    width: 100%;
+    height: 100%;
+}
+
+.icon>a>img {
+    width: 100%;
+    height: 100%;
+}

css/index.css

@@ -0,0 +1,12 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    padding: 10px;
+    background-color: black;
+}

index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/icons.css">
+    <link rel="stylesheet" href="css/header.css">
+    <title>Dashboard</title>
+</head>
+<body>
+    <div class="header">
+        <h1 class="header-text">Dashboard</h1>
+        <div class="user">
+            <h2 class="username">Tola Mironcenko</h2>
+            <div class="usericon">
+                <img src="img/user-icon.jpg" alt="usericon">
+            </div>
+        </div>
+    </div>
+    <div class="icons">
+        <div class="icon">
+            <a href="https://google.com">
+                <img src="img/google-icon.png" alt="google-icon">
+            </a>
+        </div>
+        <div class="icon">
+            <a href="https://web.telegram.org/k/">
+                <img src="img/telegram-icon.jpeg" alt="telegram-icon">
+            </a>
+        </div>
+        <div class="icon">
+            <a href="http://navidrome.local.com">
+                <img src="img/navidrome-icon.png" alt="navidrome-icon">
+            </a>
+        </div>
+        <div class="icon">
+            <a href="http://gitea.local.com">
+                <img src="img/gitea-icon.png" alt="gitea-icon">
+            </a>
+        </div>
+    </div>
+    <!-- <iframe src="https://google.com" frameborder="0"></iframe> -->
+</body>
+</html>