From fd422ef9d67aa55701d94e5a2fdb49dcad20288f Mon Sep 17 00:00:00 2001
From: Prayag <prayagprajapati.17@gmail.com>
Date: Wed, 3 Feb 2021 22:57:07 +0530
Subject: [PATCH] Update about HTML and CSS

---
 src/html/about.html | 24 ++++++++++++------------
 src/html/style.css  | 25 +++++++++++++------------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/html/about.html b/src/html/about.html
index f421796..786f27a 100644
--- a/src/html/about.html
+++ b/src/html/about.html
@@ -30,36 +30,36 @@
           <h3>Contributors</h3>
           <p>The people who have helped in the development of this plugin are listed below</p>
           <div class="cont">
-            <div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
-              <a href="https://github.com/danieladov" class="contributorsLink">
+            <a href="https://github.com/danieladov" class="contributorsLink">
+              <div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
                 <div class="top">
                   <h3>Daniel Álvarez</h3>
                 </div>@danieladov
                 <p class="description">
                   He is the creator of 3 Plugins for Jellyfin, namely- Merge Songs, Theme Music and Skin Manager
                 </p>
-              </a>
-            </div>
-            <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
-              <a href="https://github.com/prayag17" class="contributorsLink">
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
                 <div class="top">
                   <h3>Prayag Prajapati</h3>
                 </div>@prayag17
                 <p class="description">
                   He is the creator of 2 jellyfin Skins, namely- JellySkin and JellyFlix. He has helped in creating the "Custom" option in this plugin.
                 </p>
-              </a>
-            </div>
-            <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
-              <a href="https://github.com/prayag17" class="contributorsLink">
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
                 <div class="top">
                   <h3>Casper Talvio</h3>
                 </div>@CTalvio
                 <p class="description">
                   He is the creator of 2 jellyfin Skins namely- Monochromic and Kaleidochromic.
                 </p>
-              </a>
-            </div>
+              </div>
+            </a>
           </div>
         </fieldset>
       </div>
diff --git a/src/html/style.css b/src/html/style.css
index 4ebe305..6bb0b95 100644
--- a/src/html/style.css
+++ b/src/html/style.css
@@ -60,20 +60,21 @@ a {
   display: flex;
 }
 .contibutorsNames {
-    padding: 1em;
-    border-radius: 15px;
-    width: fit-content;
-    max-width: 10em;
-    min-width: 10em;
-    flex-wrap: wrap;
-    height: fit-content;
-    transition: box-shadow .2s;
-    max-height: 20em;
-    min-height: 15em;
-    background-size: cover !important;
+  padding: 1em;
+  border-radius: 15px;
+  width: fit-content;
+  max-width: 10em;
+  min-width: 10em;
+  flex-wrap: wrap;
+  height: fit-content;
+  transition: all .2s;
+  max-height: 20em;
+  min-height: 15em;
+  background-size: cover !important;
 }
 .contibutorsNames:hover {
-  box-shadow: 0 0 17px -3px black;
+  box-shadow: 0 3px 5px 0px #6e6e6e;
+  transform: translateY(-2px);
 }
 .contributorsLink {
   color: #3a3a3a !important;