smueller/HexaHost-Web-Prod
1
0
Fork 0
mirror of https://git.hexahost.dev/smueller/HexaHost-Frontend.git synced 2026-06-02 12:18:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Formular-Handling verbessert: CSRF-Token hinzugefügt, AJAX-Formularübermittlung implementiert und neue CSS-Stile für verschiedene Abschnitte hinzugefügt.

Browse Source
This commit is contained in:
Samuel Müller
2025-07-31 15:47:00 +02:00
parent 3df2a0efea
commit 0e49848a78
8 changed files with 944 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
public/assets/css/style.css
View File

@@ -509,6 +509,97 @@ body {
font-size: var(--font-size-sm);
}
/* How it Works Section */
.how-it-works {
padding: var(--spacing-3xl) 0;
background: rgba(255, 255, 255, 0.02);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.step-item {
padding: var(--spacing-xl);
text-align: center;
position: relative;
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color-1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--white);
margin: 0 auto var(--spacing-lg);
box-shadow: 0 8px 32px 0 rgba(255, 81, 249, 0.3);
}
.step-item h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.step-item p {
color: var(--text-secondary);
line-height: 1.6;
font-size: var(--font-size-base);
}
/* Mail Features Section */
.mail-features {
padding: var(--spacing-3xl) 0;
background: rgba(255, 255, 255, 0.03);
}
/* Benefits Section */
.benefits {
padding: var(--spacing-3xl) 0;
background: rgba(255, 255, 255, 0.02);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
margin-top: var(--spacing-2xl);
}
.benefit-item {
padding: var(--spacing-xl);
text-align: center;
}
.benefit-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-lg);
color: var(--primary-color);
}
.benefit-item h3 {
font-size: var(--font-size-lg);
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--text-primary);
}
.benefit-item p {
color: var(--text-secondary);
line-height: 1.6;
font-size: var(--font-size-base);
}
/* CTA Section */
.cta {
padding: var(--spacing-3xl) 0;
@@ -1263,6 +1354,19 @@ body {
transition: all var(--transition-base);
}
/* Spezielle Styling für Select-Elemente */
.form-group select {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.form-group select option {
background: rgba(13, 8, 33, 0.95);
color: var(--text-primary);
padding: var(--spacing-sm);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
@@ -1444,6 +1548,16 @@ body {
grid-template-columns: 1fr;
}
.steps-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.benefits-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.story-content {
grid-template-columns: 1fr;
}