hellcore/minigames.html at main · StoicWord/hellcore · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Hellcore | Minigames</title>
    <style>
        /* --- LOGO ANIMATION --- */
        .logo {
            display: block;
            margin: 0 auto;
            max-width: 200px;
            padding: 20px 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            filter: drop-shadow(0 0 0px transparent);
        }

        .logo:hover {
            transform: scale(1.1) rotate(2deg);
            filter: drop-shadow(0 0 20px rgba(255, 78, 0, 0.6));
        }

        /* --- NAVIGATION TAB ANIMATIONS --- */
        nav {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        nav a {
            text-decoration: none;
            color: #fff;
            padding: 10px 18px;
            border-radius: 5px;
            position: relative;
            transition: all 0.3s ease;
            overflow: hidden;
            font-weight: 500;
        }

        /* Active Tab State */
        nav a.active {
            background: rgba(255, 78, 0, 0.2);
            color: #ff4e00;
            border: 1px solid rgba(255, 78, 0, 0.3);
        }

        nav a:hover {
            transform: translateY(-3px);
            background: rgba(255, 255, 255, 0.1);
            color: #ff4e00;
            box-shadow: 0 5px 15px rgba(255, 78, 0, 0.3);
        }

        nav a::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: #ff4e00;
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

        nav a:hover::before {
            width: 80%;
        }

        /* --- THE SHINE SWEEP EFFECT --- */
        nav a::after, .card::after {
            content: "";
            position: absolute;
            top: 0; left: -150%;
            width: 50%; height: 100%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
            transform: skewX(-25deg);
            transition: 0.6s;
        }

        nav a:hover::after, .card:hover::after {
            left: 150%;
        }

        /* --- MINIGAME CARD ANIMATIONS --- */
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .card {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
        }

        .card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.05);
        }

        /* Color Glows for Minigames */
        .survival:hover { border-color: #55ff55; box-shadow: 0 10px 30px rgba(85, 255, 85, 0.3); }
        .lifesteal:hover { border-color: #ff0000; box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); }
        .bedwars:hover { border-color: #ff00ff; box-shadow: 0 10px 30px rgba(255, 0, 255, 0.3); }
        .practice:hover { border-color: #00aaff; box-shadow: 0 10px 30px rgba(0, 170, 255, 0.3); }
        .skywars:hover { border-color: #ffffff; box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2); }

        h2 { margin-bottom: 15px; color: white; }
        p { color: #ccc; line-height: 1.6; }
    </style>
</head>
<body>
    <div class="overlay">
        <header>
            <a href="home.html">
                <img src="logo.webp" class="logo" alt="Hellcore Logo">
            </a>
        </header>
        <nav>
            <a href="home.html">Home</a>
            <a href="players.html">Players</a>
            <a href="minigames.html" class="active">Minigames</a>
            <a href="forums.html">Forums</a>
            <a href="store.html">Store</a>
            <a href="rules.html">Rules</a>
        </nav>

        <div class="container">
            <h1 style="text-align: center; color: white; font-size: 2.5rem; margin-top: 20px;">Our Game Modes</h1>

            <div class="grid">
                <div class="card survival">
                    <h2>🌲 Classic Survival</h2>
                    <p>Build, explore, and survive. A vanilla+ experience with a custom economy and land claims to protect your base from the flames.</p>
                </div>

                <div class="card lifesteal">
                    <h2>💔 Lifesteal SMP</h2>
                    <p>The ultimate high-stakes survival. Kill players to gain hearts; lose yours and you're out. Trust no one in the inferno.</p>
                </div>

                <div class="card bedwars">
                    <h2>🛌 Bedwars</h2>
                    <p>Protect your core at all costs. Fast-paced island combat with custom shop items and hellish map rotations.</p>
                </div>

                <div class="card practice">
                    <h2>⚔️ PvP Practice</h2>
                    <p>Sharpen your skills with ranked and unranked duels. Crystal PvP, Pot, and Nethertite kits available 24/7.</p>
                </div>

                <div class="card skywars">
                    <h2>☁️ Skywars</h2>
                    <p>Loot chests, build fast, and knock your enemies into the void. Quick games with insane loot drops.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>