epilogue/eplg-cloud
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: new design

Browse source
This commit is contained in:
obvTiger 2025-04-03 17:43:40 +02:00
parent d3d4f61d19
commit 5e7ccb2835
1 changed files with 53 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

91
index.html
View file

@ -6,14 +6,14 @@
<title>eplg.cloud | Modern Cloud Hosting</title> <title>eplg.cloud | Modern Cloud Hosting</title>
<style> <style>
:root { :root {
--dark-bg: #121212; --dark-bg: #000000;
--dark-surface: #1e1e1e; --dark-surface: #000000;
--dark-border: #2a2a2a; --dark-border: #1a1a1a;
--dark-accent: #3a3a3a; --dark-accent: #1a1a1a;
--text-primary: #ffffff; --text-primary: #ffffff;
--text-secondary: #b3b3b3; --text-secondary: #808080;
--accent-color: #6d5acd; --accent-color: #ffffff;
--accent-light: #8b7ce0; --accent-light: #ffffff;
} }
* { * {
@ -42,7 +42,7 @@
linear-gradient(to right, var(--dark-border) 1px, transparent 1px), linear-gradient(to right, var(--dark-border) 1px, transparent 1px),
linear-gradient(to bottom, var(--dark-border) 1px, transparent 1px); linear-gradient(to bottom, var(--dark-border) 1px, transparent 1px);
background-size: 30px 30px; background-size: 30px 30px;
opacity: 0.2; opacity: 0.1;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
} }
@ -73,7 +73,7 @@
} }
.logo span { .logo span {
color: var(--accent-color); color: var(--text-primary);
} }
.nav-links { .nav-links {
@ -85,7 +85,9 @@
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
font-weight: 500; font-weight: 500;
transition: color 0.2s ease; transition: all 0.3s ease;
transform: translateY(0);
display: inline-block;
} }
.nav-links a:hover { .nav-links a:hover {
@ -103,10 +105,10 @@
font-weight: 800; font-weight: 800;
letter-spacing: -1.5px; letter-spacing: -1.5px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
background: linear-gradient(90deg, var(--text-primary), var(--accent-light)); color: var(--text-primary);
-webkit-background-clip: text; background: none;
background-clip: text; -webkit-background-clip: unset;
color: transparent; background-clip: unset;
} }
.hero p { .hero p {
@ -130,31 +132,41 @@
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border-radius: 8px; border-radius: 0;
transition: all 0.2s ease; transition: background-color 0.3s ease;
} position: relative;
.button-primary {
background-color: var(--accent-color);
color: white;
border: none; border: none;
} }
.button-primary {
background-color: var(--text-primary);
color: var(--dark-bg);
box-shadow: 0 4px 0 rgba(128, 128, 128, 1);
}
.button-primary:hover { .button-primary:hover {
background-color: var(--accent-light); background-color: var(--text-secondary);
transform: translateY(-2px); }
box-shadow: 0 8px 15px rgba(109, 90, 205, 0.2);
.button-primary:active {
background-color: var(--text-secondary);
} }
.button-secondary { .button-secondary {
background-color: transparent; background-color: #333333;
color: var(--text-primary); color: var(--text-primary);
border: 1px solid var(--dark-border); border: none;
box-shadow: 0 4px 0 rgba(128, 128, 128, 0.5);
} }
.button-secondary:hover { .button-secondary:hover {
border-color: var(--text-secondary); background-color: #1a1a1a;
transform: translateY(-2px); color: var(--text-primary);
}
.button-secondary:active {
background-color: #1a1a1a;
color: var(--text-primary);
} }
.features { .features {
@ -179,13 +191,12 @@
.feature-card { .feature-card {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 2rem; padding: 2rem;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
transform: translateY(0);
} }
.feature-card:hover { .feature-card:hover {
transform: translateY(-5px);
border-color: var(--dark-accent); border-color: var(--dark-accent);
} }
@ -231,22 +242,21 @@
.pricing-card { .pricing-card {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 2.5rem; padding: 2.5rem;
text-align: center; text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 600px; min-height: 600px;
transform: translateY(0);
} }
.pricing-card:hover { .pricing-card:hover {
transform: translateY(-5px);
border-color: var(--dark-accent); border-color: var(--dark-accent);
} }
.pricing-card.featured { .pricing-card.featured {
border-color: var(--accent-color); border-color: var(--text-primary);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -256,8 +266,8 @@
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: -2rem; right: -2rem;
background-color: var(--accent-color); background-color: var(--text-primary);
color: white; color: var(--dark-bg);
padding: 0.25rem 2rem; padding: 0.25rem 2rem;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
@ -307,7 +317,7 @@
.pricing-features li::before { .pricing-features li::before {
content: "✓"; content: "✓";
color: var(--accent-color); color: var(--text-primary);
margin-right: 0.5rem; margin-right: 0.5rem;
font-weight: bold; font-weight: bold;
} }
@ -415,15 +425,20 @@
.stat-item { .stat-item {
background-color: var(--dark-surface); background-color: var(--dark-surface);
border: 1px solid var(--dark-border); border: 1px solid var(--dark-border);
border-radius: 12px;
padding: 1.5rem; padding: 1.5rem;
text-align: center; text-align: center;
transition: transform 0.3s ease, border-color 0.3s ease;
transform: translateY(0);
}
.stat-item:hover {
border-color: var(--dark-accent);
} }
.stat-number { .stat-number {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 700; font-weight: 700;
color: var(--accent-color); color: var(--text-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }