Add Sponsor DeadlockRank

public/index.html

@@ -175,6 +175,22 @@ <h2>Deadlock Playground Database</h2>
             </p>
         </div>
     </div>
+    <div>
+        <div class="tooltip">
+            <h2>Sponsored by <img src="assets/info.svg" width="20" height="20" alt="Get a Sponsor" class="info-icon">
+            </h2>
+            <span class="tooltip-info">
+                Contact us on
+                <a href="https://discord.gg/XMF9Xrgfqu" title="Discord" target="_blank">discord</a>
+                if you want to become a sponsor.
+            </span>
+        </div>
+
+        <br>
+        <a href="https://deadlockrank.com/" title="Deadlock Rank" target="_blank" class="feature sponsor">
+            <img src="assets/sponsors/deadlockrank.png" alt="https://deadlockrank.com">
+        </a>
+    </div>
 </main>
 <footer>
     <p id="policy">

public/style.css

@@ -78,6 +78,39 @@ main {
             }
         }
     }
+
+    a.sponsor {
+        img {
+            width: 60%;
+            height: auto;
+            margin: 0 auto;
+        }
+    }
+
+    img.info-icon {
+        vertical-align: top;
+        cursor: pointer;
+    }
+
+    div.tooltip .tooltip-info {
+        visibility: hidden;
+        width: 240px;
+        background-color: black;
+        text-align: center;
+        border-radius: 6px;
+        padding: 5px 0;
+        position: absolute;
+        z-index: 1;
+        font-size: 1.2rem;
+
+        a {
+            color: #fa4454;
+        }
+    }
+
+    div.tooltip:hover .tooltip-info {
+        visibility: visible;
+    }
 }
 
 footer {
@@ -158,7 +191,7 @@ a.disabled-link {
     text-overflow: ellipsis;
     max-width: 450px;
 
-    a{
+    a {
         text-decoration: none;
     }
 }