Main Page: Difference between revisions
From PlayM2M Wiki
More actions
No edit summary |
|||
| Line 5: | Line 5: | ||
<div class="banner-wrapper" style="position: relative; overflow: hidden; border-radius: 25px; margin: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);"> | <div class="banner-wrapper" style="position: relative; overflow: hidden; border-radius: 25px; margin: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);"> | ||
<div style="position: relative;"> | <div style="position: relative;"> | ||
[[File:PlayM2M-Main-Banner.jpg|center|776x776px|class="main-banner" style="width: 100%; height: auto; display: block;"]] | [[File:PlayM2M-Main-Banner.jpg|center|776x776px|class="main-banner" style="width: 100%; height: auto; display: block;"]] | ||
<div style="position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);"></div> | <div style="position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);"></div> | ||
<div class="glow-effect-1" style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(66,134,244,0.15) 0%, transparent 60%); pointer-events: none; animation: rotateGlow 20s infinite linear;"></div> | <div class="glow-effect-1" style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(66,134,244,0.15) 0%, transparent 60%); pointer-events: none; animation: rotateGlow 20s infinite linear;"></div> | ||
<div class="glow-effect-2" style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(239,68,68,0.1) 0%, transparent 60%); pointer-events: none; animation: rotateGlow 15s infinite linear reverse;"></div> | <div class="glow-effect-2" style="position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(239,68,68,0.1) 0%, transparent 60%); pointer-events: none; animation: rotateGlow 15s infinite linear reverse;"></div> | ||
<div style="position: absolute; inset: 0; padding: 1px; border-radius: 25px; background: linear-gradient(45deg, rgba(66,134,244,0.3), rgba(239,68,68,0.3), rgba(34,197,94,0.3)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor;"></div> | <div style="position: absolute; inset: 0; padding: 1px; border-radius: 25px; background: linear-gradient(45deg, rgba(66,134,244,0.3), rgba(239,68,68,0.3), rgba(34,197,94,0.3)); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor;"></div> | ||
<div class="welcome-container" style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; z-index: 10;"> | <div class="welcome-container" style="position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; z-index: 10;"> | ||
<div style="background: linear-gradient(180deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.9) 100%); backdrop-filter: blur(10px); padding: 30px; display: inline-block; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);"> | <div style="background: linear-gradient(180deg, rgba(17,24,39,0.8) 0%, rgba(17,24,39,0.9) 100%); backdrop-filter: blur(10px); padding: 30px; display: inline-block; border-radius: 20px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);"> | ||
| Line 26: | Line 21: | ||
<div class="subtitle-text" style="font-size: 1.2em; color: #E5E7EB; text-transform: uppercase; letter-spacing: 2px;">Begin Your Legendary Journey</div> | <div class="subtitle-text" style="font-size: 1.2em; color: #E5E7EB; text-transform: uppercase; letter-spacing: 2px;">Begin Your Legendary Journey</div> | ||
<div style="width: 150px; height: 3px; background: linear-gradient(90deg, #60A5FA, #F87171); margin: 15px auto; border-radius: 2px;"></div> | <div style="width: 150px; height: 3px; background: linear-gradient(90deg, #60A5FA, #F87171); margin: 15px auto; border-radius: 2px;"></div> | ||
</div> | </div> | ||
| Line 151: | Line 145: | ||
|} | |} | ||
{| class="rwd" style="width: 100%; border-collapse: collapse; margin-bottom: 30px; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | {| class="rwd" style="width: 100%; border-collapse: collapse; margin-bottom: 30px; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | ||
|- | |- | ||
| Line 189: | Line 182: | ||
|} | |} | ||
{| class="rwd" style="width: 100%; border-collapse: collapse; margin-bottom: 30px; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | {| class="rwd" style="width: 100%; border-collapse: collapse; margin-bottom: 30px; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | ||
|- | |- | ||
| Line 226: | Line 218: | ||
|} | |} | ||
{| class="rwd" style="width: 100%; border-collapse: collapse; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | {| class="rwd" style="width: 100%; border-collapse: collapse; background: #181818; border-radius: 24px; overflow: hidden; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5);" | ||
|- | |- | ||
Latest revision as of 02:59, 14 October 2025
NewsClassess, Equipments and Descriptions |
