Glassmorphism Sidebar/Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Glassmorphism Sidebar</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" href="p.ico" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
    />
  </head>
  <body>
    <aside class="sidebar">
      <div class="logo">
        <img src="p.ico" alt="logo" class="logo" />
        <h2>Parv gugnani</h2>
      </div>
      <ul class="links">
        <h4>Main menu</h4>
        <li>
          <span class="mat-symbol-outlined">Dashboard</span>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">Show Chart</span>
          <a href="#">Revenue</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">Flag</span>
          <a href="#">Reports</a>
        </li>
        <hr />
        <h4>Advanced</h4>
        <li>
          <span class="mat-symbol-outlined">Peaples</span>
          <a href="#">Designer</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">group</span>
          <a href="#">Developer</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">ambient_screen</span>
          <a href="#">Magic Build</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">pacemaker</span>
          <a href="#">Theme Maker</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">monitoring</span>
          <a href="#">Analytic</a>
        </li>
        <hr />
        <h4>Account</h4>
        <li>
          <span class="mat-symbol-outlined">Chart</span>
          <a href="#">Overview</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">Inbox</span>
          <a href="#">Message</a>
        </li>
        <li>
          <span class="mat-symbol-outlined">settings</span>
          <a href="#">Balance</a>
        </li>
        <li class="logout-link">
          <span class="mat-symbol-outlined">logout</span>
          <a href="#">Logout</a>
        </li>
      </ul>
    </aside>
  </body>
</html>