Repository-Samples/shared-footer.html at main · Vamp415/Repository-Samples · 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
<!-- Shared Footer for All Portfolio Pages -->
<footer style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2rem 0; margin-top: 3rem;">
    <div style="max-width: 1200px; margin: 0 auto; padding: 0 20px;">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem;">
            <div>
                <h3 style="margin: 0 0 0.5rem 0; font-size: 1.5rem;">Hardik Saxena</h3>
                <p style="margin: 0; opacity: 0.9;">Think Pixel - Creative Digital Solutions</p>
            </div>
            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                <a href="https://hardik.thinkpixel.org/" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="Visit main portfolio">
                    🌐
                </a>
                <a href="https://www.linkedin.com/in/hardik-saxena-77b354271" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="LinkedIn">
                    💼
                </a>
                <a href="https://github.com/Vamp415" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="GitHub">
                    🐙
                </a>
                <a href="https://discord.gg/NKj5jRrTjP" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="Discord">
                    💬
                </a>
                <a href="https://x.com/hardiks57184721?s=21" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="X (Twitter)">
                    🕊️
                </a>
                <a href="https://www.instagram.com/og.vamp" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="Instagram">
                    📷
                </a>
                <a href="https://buymeacoffee.com/vamp415" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="Buy Me a Coffee">
                    ☕
                </a>
                <a href="https://topmate.io/hardik_saxena_001" target="_blank" rel="noopener noreferrer"
                   style="color: white; text-decoration: none; padding: 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.3s ease;"
                   aria-label="Topmate">
                    🔗
                </a>
            </div>
        </div>
        <div style="text-align: center; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.2);">
            <p style="margin: 0; opacity: 0.8;">&copy; 2024 Hardik Saxena. All rights reserved.</p>
            <p style="margin: 0.5rem 0 0 0; opacity: 0.8;">Made by Hardik Saxena @ Think Pixel</p>
        </div>
    </div>
</footer>

<style>
/* Hover effects for footer links */
footer a:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    footer > div > div:first-child {
        flex-direction: column;
        text-align: center;
    }

    footer > div > div:last-child {
        justify-content: center;
    }
}
</style>