theta-tools.github.io/index.html at Main · theta-tools/theta-tools.github.io · 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
<head>
    <title id="title">Theta Tools</title>
    <link rel="stylesheet" href="https://resources.izmichael.xyz/assets/tailwind.css">
    <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>
    <script src="/assets/js/main.js"></script>
    <link rel="stylesheet" href="/assets/tailwind.css">
    <link rel="stylesheet" href="/assets/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/assets/img/logo-h2.png">
</head>

<body pagetitle="Home" onload="pageName()" id="body">
    <div class="flex flex-col h-full">
        <div class="absolute sticky top-0 flex flex-row h-20 px-5 bg-gray-300 border-b-2 border-black">
            <div class="flex flex-row items-center justify-start flex-1">
                <img src="/assets/img/logo-h2.png" class="h-16">
                <h1 class="ml-4 text-3xl">Theta Tools -</h1>
                <h2 class="ml-2 text-3xl" id="pageHeaderName"></h2>
            </div>
            <div class="flex flex-row items-center justify-end text-center divide-x-2 divide-black">
                <a href="/" class="flex items-center justify-end px-4 text-xl">Home</a>
                <a href="/main#introduction" class="flex items-center justify-end px-4 text-xl">Main Docs</a>
                <a href="/gamma#introduction" class="flex items-center justify-end px-4 text-xl">Gamma Docs</a>
                <a href="/delta#introduction" class="flex items-center justify-end px-4 text-xl">Delta Docs</a>
                <a href="/epsilon#introduction" class="flex items-center justify-end px-4 text-xl">Epsilon Docs</a>
            </div>
        </div>
        <div class="flex flex-col items-center justify-center w-screen bg-gray-300 h-half">
            <h1 class="text-5xl">Theta Tools</h1>
            <h3 class="text-2xl">'Theta Tools' are a group of useful tools, components, and templates that can be used
                in any project.</h3>
            <div class="flex flex-row gap-10">
                <button class="p-3 px-10 mt-4 text-2xl text-white bg-blue-500 rounded-lg" style="outline: none;"
                    onclick="goToPage('main')">Get Started</button>
            </div>
        </div>
        <div class="w-screen p-16 bg-gray-500 h-half" id="sets">
            <div class="grid w-full h-full grid-cols-3 grid-rows-1 gap-10 text-center">
                <a href="/gamma"
                    class="flex flex-col items-center justify-center w-full h-full p-5 transition duration-500 ease-in-out transform bg-gray-200 rounded-lg hover:-translate-y-3 hover:translate-x-3">
                    <h4 class="text-3xl">Gamma Set</h4>
                    <p class="text-xl">Theta Tools: Gamma Set is a set of HTML based components, built with Tailwind CSS</p>
                </a>
                <a href="/delta"
                    class="flex flex-col items-center justify-center w-full h-full p-5 transition duration-500 ease-in-out transform bg-gray-200 rounded-lg hover:-translate-y-3 hover:translate-x-3">
                    <h4 class="text-3xl">Delta Set</h4>
                    <p class="text-xl">Theta Tools: Delta Set is a set of HTML based website templates</p>
                </a>
                <a href="/epsilon"
                    class="flex flex-col items-center justify-center w-full h-full p-5 transition duration-500 ease-in-out transform bg-gray-200 rounded-lg hover:-translate-y-3 hover:translate-x-3">
                    <h4 class="text-3xl">Epsilon Set</h4>
                    <p class="text-xl">Theta Tools: Epsilon Set is a set of CSS based components, based on HTML</p>
                </a>
            </div>
        </div>
    </div>
</body>