Timot05.github.io/stack.html at master · Timot05/Timot05.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
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stack - SARK</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body class="bg-gray-50 font-sans">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-6">
                <a href="index.html" class="hover:opacity-80 transition-opacity"><img src="logo.svg" alt="SARK" class="h-12"></a>

            </div>
        </div>
    </header>

    <!-- Content -->
    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="bg-white rounded-lg shadow-md p-8">
            <h1 class="text-4xl md:text-5xl font-light text-gray-900 mb-8">Stack - Modular Shelving System</h1>
            <div class="prose prose-lg max-w-none">
                <img src="static/images/Stack/stack_general_hero.jpeg" alt="Stack System" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    Stack is a shelving system that consists of a combination of slotted boards of wood and threaded rods.
                </p>
                <img src="static/images/Stack/STACK_2mx12_5.jpeg" alt="Picture of photon" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    By selecting the board dimensions, the number of boards, the number of supporting rods and the threaded rod height, the user can design a shelf specific to his needs.
                </p>
                <img src="static/images/Stack/stack_built.jpeg" alt="Picture of photon" class="w-full rounded-lg mb-8">
                <p class="text-lg text-gray-700 mb-8">
                    For lower shelves, the slots can be replaced with holes. This makes the assembly process more tedious as the nuts have to be threaded all the way. But it does provide a cleaner look.
                </p>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-8 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <p>&copy; 2025 SARK. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>