eliate-security.github.io/social-card.html at main · eliate-security/eliate-security.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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Card Generator</title>
    <link href="https://fonts.cdnfonts.com/css/geist-mono" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        mono: ['Geist Mono', 'monospace'],
                        display: ['Geist Mono', 'monospace'],
                    },
                    colors: {
                        black: '#050505',
                        white: '#ffffff',
                        gray: {
                            50: '#fafafa',
                            100: '#f5f5f5',
                            400: '#a3a3a3',
                            500: '#737373',
                            900: '#171717',
                        }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Geist Mono', monospace;
        }
        #card {
            width: 1200px;
            height: 630px;
            background: #ffffff;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

    <!-- Social Card Container (1200x630) -->
    <div id="card" class="flex flex-col p-20 justify-between relative text-black antialiased">

        <!-- Background Grid/Texture (Subtle) -->
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 40px 40px;"></div>

        <!-- Header: Logo -->
        <div class="flex items-center gap-3 z-10">
            <div class="w-10 h-10 bg-black flex items-center justify-center text-white">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter">
                    <path d="M6 10L12 4L18 10" />
                </svg>
            </div>
            <span class="text-3xl font-bold tracking-tight">eliate.</span>
        </div>

        <!-- Main Content -->
        <div class="z-10 mt-10">
            <h1 class="text-8xl font-light tracking-tighter leading-[0.9] mb-8">
                Security as<br>
                <span class="font-medium">Craftsmanship</span><span class="text-black">_</span>
            </h1>
        </div>

        <!-- Footer -->
        <div class="z-10 flex justify-between items-end border-t border-gray-100 pt-10">
            <div class="flex flex-col gap-2">
                <p class="text-2xl text-gray-500 font-medium">Fractional Security Engineering</p>
            </div>

            <div class="text-xl font-bold tracking-wide opacity-40">
                eliate.com
            </div>
        </div>

        <!-- Decorative Accent (Right Side) -->
        <div class="absolute right-0 top-0 bottom-0 w-1/3 bg-gray-50 -skew-x-12 translate-x-20 mix-blend-multiply pointer-events-none"></div>
    </div>

</body>
</html>