Enhance IT services section: Updated index.php to include new CSS classes for the IT services section, improving layout and responsiveness. Added styles for a 3x2 grid layout in custom.css, ensuring better presentation across different screen sizes.

This commit is contained in:
TheOnlyMace
2026-04-09 21:31:32 +02:00
parent d3da589a1d
commit ec8686761c
2 changed files with 26 additions and 2 deletions

View File

@@ -16,6 +16,30 @@
margin-top: 2rem; margin-top: 2rem;
} }
/* IT-Dienstleistungen auf Startseite: ausgewogenes 3x2-Grid */
.it-services-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.it-services-grid .feature-item {
height: 100%;
}
@media (max-width: 1024px) {
.it-services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.it-services-grid {
grid-template-columns: 1fr;
}
}
/* Animierter Farbverlauf für "Beliebt"-Badge */ /* Animierter Farbverlauf für "Beliebt"-Badge */
.featured-badge { .featured-badge {
background: linear-gradient(135deg, #ff51f9 0%, #a348ff 50%, #3978ff 100%); background: linear-gradient(135deg, #ff51f9 0%, #a348ff 50%, #3978ff 100%);

View File

@@ -156,7 +156,7 @@ includeHeader($page_title, $page_description, $current_page);
</section> </section>
<!-- IT Services Section --> <!-- IT Services Section -->
<section class="features"> <section class="features it-services-section">
<div class="container"> <div class="container">
<div class="section-header"> <div class="section-header">
<h2 class="section-title">IT-Dienstleistungen für Privat und ergänzend Gewerblich</h2> <h2 class="section-title">IT-Dienstleistungen für Privat und ergänzend Gewerblich</h2>
@@ -164,7 +164,7 @@ includeHeader($page_title, $page_description, $current_page);
Ergänzend zu unseren Hosting-Angeboten unterstützen wir Sie mit persönlicher IT-Betreuung. Ergänzend zu unseren Hosting-Angeboten unterstützen wir Sie mit persönlicher IT-Betreuung.
</p> </p>
</div> </div>
<div class="features-grid"> <div class="features-grid it-services-grid">
<div class="feature-item glass-card"> <div class="feature-item glass-card">
<h3>IT-Beratung</h3> <h3>IT-Beratung</h3>
<p>Individuelle Beratung für sinnvolle und wirtschaftliche IT-Entscheidungen.</p> <p>Individuelle Beratung für sinnvolle und wirtschaftliche IT-Entscheidungen.</p>