commit 38d566cc84569f7f52f4ab3264b8d3f21e97cbd4
Author: TolaMironcenko <mironcenkotola@gmail.com>
Date:   Mon May 27 20:03:32 2024 +0700

    initial commit

diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..0c65221
--- /dev/null
+++ b/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;
+}
diff --git a/css/icons.css b/css/icons.css
new file mode 100644
index 0000000..5699c7f
--- /dev/null
+++ b/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%;
+}
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..6ee88fa
--- /dev/null
+++ b/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;
+}
diff --git a/img/gitea-icon.png b/img/gitea-icon.png
new file mode 100644
index 0000000..6894e0b
Binary files /dev/null and b/img/gitea-icon.png differ
diff --git a/img/google-icon.png b/img/google-icon.png
new file mode 100644
index 0000000..9ef64ea
Binary files /dev/null and b/img/google-icon.png differ
diff --git a/img/navidrome-icon.png b/img/navidrome-icon.png
new file mode 100644
index 0000000..523a490
Binary files /dev/null and b/img/navidrome-icon.png differ
diff --git a/img/telegram-icon.jpeg b/img/telegram-icon.jpeg
new file mode 100644
index 0000000..89a95be
Binary files /dev/null and b/img/telegram-icon.jpeg differ
diff --git a/img/user-icon.jpg b/img/user-icon.jpg
new file mode 100644
index 0000000..5611250
Binary files /dev/null and b/img/user-icon.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..76ea8d6
--- /dev/null
+++ b/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>
\ No newline at end of file