Update index.html

Author: Internetperson-dev

index.html

@@ -15,6 +15,41 @@
     cursor: none;
   }
 
+html,body{height:100%;min-height:500vh;margin:0;font-family:system-ui,sans-serif;overflow-x:hidden}
+.bg{position:absolute;inset:0;z-index:-1}
+.bg img{width:100%;display:block}
+
+.glass{
+  position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);
+  width:20rem;height:20rem;border-radius:50%;
+  background:rgba(255,255,255,.08);border:2px solid transparent;
+  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 16px 32px rgba(0,0,0,.12);
+  backdrop-filter:url(#frosted);-webkit-backdrop-filter:url(#frosted);
+  display:grid;place-items:center;cursor:pointer;outline:0;
+}
+
+.glass::before,
+.glass::after{
+  content:"";position:absolute;width:40%;height:10px;background:#fff;border-radius:10px;
+}
+.glass::after{transform:rotate(90deg)}
+
+.glass::before,
+.glass::after{
+  content:"";
+  position:absolute;
+  width:40%;
+  height:10px;
+  background:#fff;
+  border-radius:10px;
+}
+
+.glass::after{
+  transform:rotate(90deg);
+}
+
+  
+
 
 
 
@@ -119,6 +154,19 @@
 });
 </script>
 
+  <script>
+  const cursor = document.querySelector('.glass');
+
+  document.addEventListener('mousemove', e => {
+    cursor.style.left = e.clientX + 'px';
+    cursor.style.top  = e.clientY + 'px';
+  });
+</script>
+
+
+<div class="glass"></div>
+
+  
 <div class="links">
   <button class="collapsible glass">/etc</button>