Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 394 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Sidebar</title>
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link
        href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
        rel="stylesheet"
      >
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <div class="sidebar-top">
              <a href="#" class="logo__wrapper">
                <img src="assets/logo.png" alt="Logo" class="logo">
                <img src="assets/logo-small.png" alt="Logo" class="logo-small">
              </a>
            </div>
            <div class="sidebar-links">
                <ul>
                  <li>
                    <a href="#home" title="Home" class="tooltip">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
                        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
                        <path d="M10 12h4v4h-4z"></path>
                      </svg>
                      <span class="link hide">Home</span>
                      <span class="tooltip__content">Home</span>
                    </a>
                  </li>
                  <li>
                    <a href="#portfolio" title="Portfolio" class="tooltip">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-layout-dashboard" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M4 4h6v8h-6z"></path>
                        <path d="M4 16h6v4h-6z"></path>
                        <path d="M14 12h6v8h-6z"></path>
                        <path d="M14 4h6v4h-6z"></path>
                      </svg>
                      <span class="link hide">Portfolio</span>
                      <span class="tooltip__content">Portfolio</span>
                    </a>
                  </li>
                  <li>
                    <a href="#watchlist" title="Watchlist" class="tooltip">

                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
                      </svg>
                      <span class="link hide">Watchlist</span>
                      <span class="tooltip__content">Watchlist</span>
                    </a>
                  </li>
                  <li>
                    <a href="#explore" title="Explore" class="tooltip">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M8 16l2 -6l6 -2l-2 6l-6 2"></path>
                        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                      </svg>
                      <span class="link hide">Explore</span>
                      <span class="tooltip__content">Explore</span>
                    </a>
                  </li>
                  <li>
                    <a href="#analytics" title="Analytics" class="tooltip">
                      <div style="position: relative;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-graph" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                          <path d="M4 18v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                          <path d="M7 14l3 -3l2 2l3 -3l2 2"></path>
                        </svg>
                        <div class="notification"></div>
                      </div>
                      <span class="link hide">Analytics</span>
                      <span class="tooltip__content">Analytics</span>
                    </a>
                  </li>
                  <li>
                    <a href="#reports" title="Reports" class="tooltip">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-description" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                        <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                        <path d="M9 17h6"></path>
                        <path d="M9 13h6"></path>
                      </svg>
                      <span class="link hide">Reports</span>
                      <span class="tooltip__content">Reports</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="sidebar-bottom hide">
                <img src="assets/diamond.png" alt="Diamond">
                <p>
                  Welcome to Laplace Diamond club!
                </p>
                <button>
                  Explore Benefits
                </button>
              </div>
              <div class="expand-btn">
                <img
                  src="assets/right-collapse.svg"
                  alt="Left Collapse"
                >
                <span class="hide">
                  Collapse
                </span>
              </div>
          </nav>
          <script src="script.js"></script>
    </body>
</html>

Share this file: