Dashboard Temp Share Shortlinks Frames API

HTMLify

index_socials.html
Views: 426 | 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
<!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=Work+Sans&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="sidebar">
    <div class="sidebar-top-wrapper">
      <div class="sidebar-top">
        <a href="#" class="logo__wrapper">
          <img src="assets/storeify.png" alt="Logo" class="logo-small">
          <span class="hide">
            Storeify
          </span>
        </a>
      </div>
      <div class="expand-btn">
        <!-- svg icon -->
      </div>
    </div>

    <div class="search__wrapper">
      <!-- svg icon -->
      <input type="search" placeholder="Search for anything...">
    </div>
    <div class="sidebar-links">
      <h2>Main</h2>
      <ul>
        <li>
          <a href="#home" title="Home" class="tooltip">
            <!-- svg icon -->
            <span class="link hide">Home</span>
            <span class="tooltip__content">Home</span>
          </a>
        </li>
        <!-- more links -->
      </ul>
    </div>
    <div class="sidebar-links">
      <h2>Communication</h2>
      <ul>
        <li>
          <a href="#communication" title="Communication" class="tooltip">
            <!-- svg icon -->
            <span class="link hide">Communication</span>
            <span class="tooltip__content">Communication</span>
          </a>
        </li>
        <!-- more links -->
      </ul>
    </div>
    <div class="sidebar__action__wrapper">
      <div class="sidebar__action">
        <div class="progress-bar">
          <div class="progress-bar__value">
            60%
          </div>
        </div>
        <h2>Used Capacity</h2>
        <p>
          You are already using 60% of your capacity.
        </p>
        <button>
          Upgrade plan
        </button>
      </div>
    </div>
    <div class="sidebar-links bottom-links">
      <ul>
        <li>
          <a href="#settings" title="Settings" class="tooltip">
            <!-- svg icon -->
            <span class="link hide">Settings</span>
            <span class="tooltip__content">Settings</span>
          </a>
        </li>
        <!-- more links -->
      </ul>
    </div>
    <div class="divider"></div>
    <div class="sidebar__profile">
      <div class="avatar__wrapper">
        <img class="avatar" src="assets/profile.png" alt="Joe Doe Picture">
        <div class="online__status"></div>
      </div>
      <section class="avatar__name hide">
        <div class="user-name">Joe Doe</div>
        <div class="email">joe.doe@atheros.ai</div>
      </section>
      <a href="#logout" class="logout">
        <!-- logout svg -->
      </a>
    </div>
    </div>
  </nav>
  <script src="script.js"></script>
</body>

</html>

Share this file: