Add ham menu
This commit is contained in:
235
css/style.css
235
css/style.css
@ -2,10 +2,11 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('https://my-mc.link/font/minecraft_font.ttf') format('truetype');
|
||||
src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #0b0f2b, #1a2249);
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
@ -16,34 +17,63 @@ body {
|
||||
min-height: 100vh;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.minecraft-font {
|
||||
font-family: 'Minecraft', sans-serif;
|
||||
letter-spacing: 0.8px;
|
||||
text-shadow: 0 0 12px rgba(20, 184, 166, 0.7);
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.section-bg {
|
||||
background: rgba(10, 17, 40, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
transition: transform 0.4s ease, box-shadow 0.4s ease;
|
||||
transition: box-shadow 0.4s ease;
|
||||
animation: floatSection 4s ease-in-out infinite;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.section-bg h1,
|
||||
.section-bg h2,
|
||||
.section-bg h3,
|
||||
.section-bg h4 {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.section-bg p,
|
||||
.section-bg a:not(.btn-minecraft) {
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.section-bg:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
@keyframes floatSection {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-4px); }
|
||||
0%, 100% {
|
||||
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-minecraft {
|
||||
background: linear-gradient(45deg, #14b8a6, #3b82f6);
|
||||
background-size: 300% 300%;
|
||||
border: none;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 14px;
|
||||
padding: 14px 30px;
|
||||
font-weight: 700;
|
||||
@ -52,6 +82,7 @@ body {
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
animation: gradientShift 5s ease infinite;
|
||||
}
|
||||
|
||||
.btn-minecraft::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -62,13 +93,16 @@ body {
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-minecraft:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-minecraft:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 30px rgba(20, 184, 166, 0.7);
|
||||
}
|
||||
|
||||
.btn-minecraft::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -81,16 +115,25 @@ body {
|
||||
transition: width 0.3s, height 0.3s, opacity 0.3s;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.btn-minecraft:hover::after {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -99,8 +142,10 @@ body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 24px;
|
||||
will-change: transform;
|
||||
background: rgba(10, 17, 40, 0.75);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-bg iframe {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -113,9 +158,9 @@ body {
|
||||
z-index: 1;
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.hero-bg img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -126,6 +171,7 @@ body {
|
||||
z-index: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -136,6 +182,7 @@ body {
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
@ -143,16 +190,44 @@ body {
|
||||
padding: 4rem;
|
||||
animation: scaleIn 1.2s ease-out;
|
||||
}
|
||||
|
||||
.hero-content h2 {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
animation: scaleIn 1s ease-out;
|
||||
}
|
||||
@keyframes scaleIn {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
|
||||
.header-content h1 {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.header-content p {
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(15, 23, 50, 0.85);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 18px;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
@ -161,10 +236,12 @@ body {
|
||||
overflow: hidden;
|
||||
animation: floatSection 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-12px) scale(1.03);
|
||||
box-shadow: 0 12px 35px rgba(20, 184, 166, 0.5);
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -176,9 +253,22 @@ body {
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-card h3,
|
||||
.feature-card h4 {
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-family: 'Roboto', 'Verdana', sans-serif;
|
||||
color: #e0e7ff;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
@ -186,33 +276,123 @@ body {
|
||||
background: linear-gradient(45deg, #14b8a6, #60a5fa);
|
||||
border-radius: 50%;
|
||||
animation: float 12s infinite ease-in-out;
|
||||
z-index: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 0 15px rgba(20, 184, 166, 0.9);
|
||||
}
|
||||
|
||||
.particle.large {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
animation-duration: 14s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) translateX(0); opacity: 0.2; }
|
||||
50% { transform: translateY(-60px) translateX(25px); opacity: 0.8; }
|
||||
0%, 100% {
|
||||
transform: translateY(0) translateX(0);
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-60px) translateX(25px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
footer {
|
||||
z-index: 2;
|
||||
background: rgba(10, 17, 40, 0.75);
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #2dd4bf;
|
||||
transition: color 0.3s, text-shadow 0.3s;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #60a5fa;
|
||||
text-shadow: 0 0 12px rgba(96, 165, 250, 0.7);
|
||||
text-shadow: 0 0 8px rgba(96, 165, 250, 0.7);
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(to right, #14b8a6, #3b82f6);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Hamburger Menu Styles */
|
||||
.hamburger {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 20001;
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg);
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger.active .bar:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.mobile-nav-container {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 20000;
|
||||
padding: 4rem 2rem;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.mobile-nav-container.active {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mobile-nav-container ul li a {
|
||||
display: block;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s ease;
|
||||
font-size: 1.25rem;
|
||||
text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.mobile-nav-container ul li a:hover {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-bg {
|
||||
min-height: 500px;
|
||||
@ -236,7 +416,14 @@ footer a:hover {
|
||||
.feature-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
.hamburger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-bg {
|
||||
min-height: 400px;
|
||||
@ -253,4 +440,8 @@ footer a:hover {
|
||||
.minecraft-font.text-3xl {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
.mobile-nav-container ul li a {
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user