link_hub/index.html at main · jsurp2001/link_hub · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Link Hub</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header id="sticky_header">
    <div class="header_inner">
      <div class="left_group">
        <span class="title_text"><i class="bi bi-lightbulb"></i> Link Hub</span>
      </div>
      <div class="center_group">
        <form id="search_form" action="https://duckduckgo.com/" method="GET" autocomplete="off" target="_self">
          <i class="bi bi-search"></i>
          <input id="search_input" name="q" type="text" placeholder="Search the web…" aria-label="Search the web" />
          <input type="hidden" name="kl" value="us-en" />
        </form>
      </div>
      <div class="right_group">
        <div id="clock">--:-- --</div>
        <a class="weatherwidget-io" href="https://forecast7.com/en/33d63n112d37/surprise/?unit=us" data-mode="Current" data-theme="dark" data-basecolor="rgba(22,22,24,0.72)" data-textcolor="#ffffff">Surprise, AZ</a>
      </div>
    </div>
  </header>

  <main id="content">
    <section class="link_section">
      <h2><i class="bi bi-briefcase"></i> Productivity</h2>
      <div class="link_grid">
        <a class="link_card" href="https://mail.google.com"><i class="bi bi-envelope-fill"></i><span>Gmail</span></a>
        <a class="link_card" href="https://drive.google.com"><i class="bi bi-cloud-arrow-up-fill"></i><span>Google Drive</span></a>
        <a class="link_card" href="https://todoist.com"><i class="bi bi-check2-square"></i><span>Todoist</span></a>
        <a class="link_card" href="https://trello.com"><i class="bi bi-kanban"></i><span>Trello</span></a>
      </div>
    </section>

    <section class="link_section">
      <h2><i class="bi bi-code-slash"></i> Dev</h2>
      <div class="link_grid">
        <a class="link_card" href="https://codeigniter.com/user_guide/"><i class="bi bi-file-code"></i><span>CodeIgniter Docs</span></a>
        <a class="link_card" href="https://www.php.net/"><i class="bi bi-terminal"></i><span>PHP.net</span></a>
        <a class="link_card" href="https://developer.mozilla.org/"><i class="bi bi-browser-chrome"></i><span>MDN</span></a>
        <a class="link_card" href="https://www.w3schools.com/"><i class="bi bi-book"></i><span>W3Schools</span></a>
        <a class="link_card" href="https://stackblitz.com/"><i class="bi bi-lightning"></i><span>StackBlitz</span></a>
      </div>
    </section>

    <section class="link_section">
      <h2><i class="bi bi-people-fill"></i> Social</h2>
      <div class="link_grid">
        <a class="link_card" href="https://reddit.com"><i class="bi bi-reddit"></i><span>Reddit</span></a>
        <a class="link_card" href="https://youtube.com"><i class="bi bi-youtube"></i><span>YouTube</span></a>
        <a class="link_card" href="https://twitter.com"><i class="bi bi-twitter-x"></i><span>X (Twitter)</span></a>
        <a class="link_card" href="https://instagram.com"><i class="bi bi-instagram"></i><span>Instagram</span></a>
      </div>
    </section>

    <section class="link_section">
      <h2><i class="bi bi-controller"></i> Entertainment</h2>
      <div class="link_grid">
        <a class="link_card" href="https://netflix.com"><i class="bi bi-tv"></i><span>Netflix</span></a>
        <a class="link_card" href="https://open.spotify.com"><i class="bi bi-music-note-beamed"></i><span>Spotify</span></a>
        <a class="link_card" href="https://plex.tv"><i class="bi bi-collection-play"></i><span>Plex</span></a>
        <a class="link_card" href="https://twitch.tv"><i class="bi bi-twitch"></i><span>Twitch</span></a>
      </div>
    </section>

    <section class="link_section">
      <h2><i class="bi bi-tools"></i> Tools</h2>
      <div class="link_grid">
        <a class="link_card" href="https://github.com"><i class="bi bi-github"></i><span>GitHub</span></a>
        <a class="link_card" href="https://stackoverflow.com"><i class="bi bi-stack-overflow"></i><span>Stack Overflow</span></a>
        <a class="link_card" href="https://codepen.io"><i class="bi bi-code-square"></i><span>CodePen</span></a>
        <a class="link_card" href="https://console.firebase.google.com"><i class="bi bi-fire"></i><span>Firebase</span></a>
      </div>
    </section>

    <section class="link_section">
      <h2><i class="bi bi-journal-text"></i> Reference</h2>
      <div class="link_grid">
        <a class="link_card" href="https://wikipedia.org"><i class="bi bi-book"></i><span>Wikipedia</span></a>
        <a class="link_card" href="https://wolframalpha.com"><i class="bi bi-bezier"></i><span>WolframAlpha</span></a>
        <a class="link_card" href="https://dictionary.com"><i class="bi bi-spellcheck"></i><span>Dictionary</span></a>
        <a class="link_card" href="https://duckduckgo.com"><i class="bi bi-duck"></i><span>DuckDuckGo</span></a>
      </div>
    </section>
  </main>

  <script src="scripts.js"></script>
  <script>
  !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
  if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';
  fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
  </script>
</body>
</html>