Homepage-Outro bearbeiten

HTML-Inhalt bearbeiten (DE)

HTML-Code für Homepage-Outro:

<br><br>
<div class="row justify-content-center mb-3"><div class="col-lg-7 text-center"><h4 class="text-dark-gray fw-700 ls-minus-1px">Ausgewählte IT Lösungen</h4><p>Domain, Webhosting für Ihren eigene Internetauftritt</p></div></div>

<!-- START: Ausgewählte IT Lösungen – Cards -->
<style>
  .solution-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .solution-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
  .solution-icon {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #2d4566;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .solution-icon i {
    color: #fff;
    font-size: 26px;
    line-height: 1;
  }
  .solution-card h5 {
    margin: 6px 0 8px;
    font-weight: 700;
    color: #1d1d1f;
    font-size: 18px;
  }
  .solution-card p {
    color: #5f6b7a;
    line-height: 1.6;
    margin-bottom: 18px;
    min-height: 64px;
  }
  .solution-meta {
    margin-bottom: 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .solution-meta .badge {
    border: 1px solid #2d4566;
    color: #2d4566;
    background: transparent;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
  }
  .solution-cta .btn { display: none !important; /* HIDDEN - can be re-enabled later */ 
    border-radius: 4px !important;
    padding: 10px 18px !important;
  }
</style>

<div class="container mt-2">
  <div class="row g-3" data-anime='{ "el": "childs", "translateY": [20, 0], "opacity": [0,1], "duration": 700, "delay": 0, "staggervalue": 120, "easing": "easeOutQuad" }'>

    <!-- Hosting -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="solution-card">
        <div class="solution-icon"><i class="feather icon-feather-server"></i></div>
        <h5>Hosting</h5>
        <p>Leistungsstarke, gemanagte Infrastruktur mit Backup, Monitoring und skalierbaren Ressourcen.</p>
        <div class="solution-meta">
          <span class="badge">Managed</span>
          <span class="badge">SLA</span>
          <span class="badge">SSD</span>
        </div>
        <div class="solution-cta mt-auto">
          <a href="http://localhost:8000/de/produktliste/tags/managed/" class="btn btn-dark-gray btn-small btn-round-edge">Ansehen</a>
        </div>
      </div>
    </div>

    <!-- Domain -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="solution-card">
        <div class="solution-icon"><i class="feather icon-feather-globe"></i></div>
        <h5>Domain</h5>
        <p>Domainregistrierung mit DNS-Management, SSL-Bereitstellung und automatischen Verlängerungen.</p>
        <div class="solution-meta">
          <span class="badge">DNS</span>
          <span class="badge">SSL</span>
          <span class="badge">WHOIS</span>
        </div>
        <div class="solution-cta mt-auto">
          <a href="http://localhost:8000/de/produktliste/search/domain/" class="btn btn-dark-gray btn-small btn-round-edge">Ansehen</a>
        </div>
      </div>
    </div>

    <!-- E-Mail -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="solution-card">
        <div class="solution-icon"><i class="feather icon-feather-mail"></i></div>
        <h5>E-Mail</h5>
        <p>Sichere Mailboxen mit Spam-Schutz, Kalender, IMAP/SMTP und optionaler Archivierung.</p>
        <div class="solution-meta">
          <span class="badge">IMAP</span>
          <span class="badge">DKIM</span>
          <span class="badge">Backup</span>
        </div>
        <div class="solution-cta mt-auto">
          <a href="http://localhost:8000/de/produktliste/search/email/" class="btn btn-dark-gray btn-small btn-round-edge">Ansehen</a>
        </div>
      </div>
    </div>

<!-- Server -->
<div class="col-12 col-md-6 col-lg-3">
  <div class="solution-card">
    <div class="solution-icon"><i class="feather icon-feather-cpu"></i></div>
    <h5>Server</h5>
    <p>Dedizierte und virtuelle Server mit KVM, voller Root-Zugriff, Monitoring und regelmäßigen Backups.</p>
    <div class="solution-meta">
      <span class="badge">VPS</span>
      <span class="badge">KVM</span>
      <span class="badge">Root</span>
    </div>
    <div class="solution-cta mt-auto">
      <a href="http://localhost:8000/de/produktliste/tags/vps/" class="btn btn-dark-gray btn-small btn-round-edge">Ansehen</a>
    </div>
  </div>
</div>



  </div>
</div>
<center style="margin-top: 30px;"><b>... ab Januar verfügbar</b> </center>

<!-- END: Ausgewählte IT Lösungen – Cards -->


<br>

<!-- Apps – Logo-Cards -->
<style>
  .app-logos-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
  }
  @media (max-width: 1200px) { .app-logos-grid { grid-template-columns: repeat(4, 1fr);} }
  @media (max-width: 768px)  { .app-logos-grid { grid-template-columns: repeat(2, 1fr);} }

  .app-card {
    background: #fff;
    border-radius: 6px;
    padding: 18px 14px;
    border: 1px solid #eef0f3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .app-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
  .app-card img {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
  }
  .app-name {
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    color: #2d4566;
    font-weight: 600;
    letter-spacing: .2px;
  }
</style>

<div class="container mt-3">
  <div class="row justify-content-center mb-3">
    <div class="col-lg-7 text-center">
      <h4 class="text-dark-gray fw-700 ls-minus-1px">Apps</h4>
      <p class="mb-0">mit einem Klick installiert und sofort einsatzbereit</p>
    </div>
  </div>

  <div class="app-logos-grid">
    <!-- WordPress -->
    <div>
      <a class="app-card" href="https://wordpress.org/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/09/Wordpress-Logo.svg" alt="WordPress Logo">
      </a>
      <div class="app-name">WordPress</div>
    </div>

    <!-- GitLab -->
    <div>
      <a class="app-card" href="https://about.gitlab.com/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/GitLab_logo.svg" alt="GitLab Logo">
      </a>
      <div class="app-name">GitLab</div>
    </div>

    <!-- Joomla -->
    <div>
      <a class="app-card" href="https://www.joomla.org/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e8/Joomla%21-Logo.svg" alt="Joomla Logo">
      </a>
      <div class="app-name">Joomla</div>
    </div>

    <!-- Drupal -->
    <div>
      <a class="app-card" href="https://www.drupal.org/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Drupal_Logo_with_wordmark.svg" alt="Drupal Logo">
      </a>
      <div class="app-name">Drupal</div>
    </div>

    <!-- ownCloud -->
    <div>
      <a class="app-card" href="https://owncloud.com/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/OwnCloud_logo_and_wordmark.svg" alt="ownCloud Logo">
      </a>
      <div class="app-name">ownCloud</div>
    </div>

    <!-- Magento -->
    <div>
      <a class="app-card" href="https://magento.com/" target="_blank" rel="noopener">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/55/Magento_Logo.svg" alt="Magento Logo">
      </a>
      <div class="app-name">Magento</div>
    </div>





  </div>
</div>

<div style="text-align: center; margin-top: 0px; margin-bottom: 20px; padding: 15px; font-size: 13px; color: #666; line-height: 1.6;">
  Alle genannten Marken und Logos sind Eigentum der jeweiligen Rechteinhaber.<br>Die Abbildungen dienen ausschließlich der technischen Referenz. Es bestehen keine Partnerschaften oder Sponsoring-Beziehungen.
</div>

<center style="margin-top: 30px;"><b>... ab Januar verfügbar</b> </center>


<br><br>

<div class="container mt-3">
  <div class="row justify-content-center mb-3">
    <div class="col-lg-7 text-center">
      <h4 class="text-dark-gray fw-700 ls-minus-1px">Beratung und Support</h4>
      <p class="mb-0">per Email, Telefon und Kontakt</p>
    </div>
  </div>



<!-- START: Beratung & Support – Cards -->
<style>
  .support-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .support-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.10); }
  .support-icon {
    width: 56px; height: 56px; border-radius: 8px; background: #2d4566;
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;
  }
  .support-icon img { width: 28px; height: 28px; filter: invert(1); }
  .support-card h5 { margin: 8px 0 6px; font-weight: 700; color: #1d1d1f; font-size: 18px; }
  .support-card p { color: #5f6b7a; margin: 0 0 16px; }
  .support-cta .btn { border-radius: 4px !important; padding: 10px 18px !important; text-transform: none !important; font-size: 14px !important; }
</style>

<div class="container mt-3">
  <div class="row g-3" data-anime='{"el":"childs","translateY":[20,0],"opacity":[0,1],"duration":700,"delay":0,"staggervalue":120,"easing":"easeOutQuad"}'>

    <!-- E-Mail -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="support-card">
        <div class="support-icon">
          <img src="https://unpkg.com/@tabler/icons@latest/icons/outline/mail.svg" alt="E-Mail Icon">
        </div>
        <h5>E-Mail</h5>
        <p>Schnelle Unterstützung per Ticket oder Direktmail.</p>
        <div class="support-cta mt-auto">
          <a href="mailto:support@nextfiles.one" class="btn btn-dark-gray btn-small btn-round-edge">E-Mail senden</a>
        </div>
      </div>
    </div>

    <!-- Telefon -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="support-card">
        <div class="support-icon">
          <img src="https://unpkg.com/@tabler/icons@latest/icons/outline/phone.svg" alt="Telefon Icon">
        </div>
        <h5>Telefon</h5>
        <p>Direkter Draht zu unserem Supportteam.</p>
        <div class="support-cta mt-auto">
          <a href="tel:+49421167605600" class="btn btn-dark-gray btn-small btn-round-edge">Anrufen</a>
        </div>
      </div>
    </div>

    <!-- Kontakt -->
    <div class="col-12 col-md-6 col-lg-3">
      <div class="support-card">
        <div class="support-icon">
          <img src="https://unpkg.com/@tabler/icons@latest/icons/outline/message-circle.svg" alt="Kontakt Icon">
        </div>
        <h5>Kontakt</h5>
        <p>Schreiben Sie uns Ihr Anliegen direkt.</p>
        <div class="support-cta mt-auto">
          <a href="https://test.nextfiles.one/de/kontakt/" class="btn btn-dark-gray btn-small btn-round-edge">Kontaktieren</a>
        </div>
      </div>
    </div>



  </div>
</div>
<!-- END: Beratung & Support – Cards -->

<br><br>

Sie können vollständigen HTML-Code mit CSS-Klassen und Data-Attributen eingeben.

Automatische Übersetzung auslösen
Wenn aktiviert, wird der deutsche Text automatisch in alle aktiven Sprachen übersetzt.

Vorschau ansehen

Beispiel-HTML

1. Call-to-Action mit Container:

<div class="container">
    <div class="row justify-content-center mt-5 mb-3">
        <div class="col-lg-8 text-center">
            <h2 class="text-dark-gray fw-700 ls-minus-1px mb-3">Bereit für Ihre Cloud-Lösung?</h2>
            <p class="lead mb-4">Kontaktieren Sie uns für eine persönliche Beratung</p>
            <a href="/de/kontakt/" class="btn btn-dark-gray btn-round-edge me-2">Kontakt aufnehmen</a>
            <a href="/de/produktliste/" class="btn btn-transparent-dark-gray btn-round-edge">Alle Produkte</a>
        </div>
    </div>
</div>

2. Volle Breite mit Hintergrund:

<div class="bg-dark-gray py-5 mt-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center text-white">
                <h3 class="fw-600 mb-3">Noch Fragen?</h3>
                <p class="mb-4">Unser Support-Team steht Ihnen gerne zur Verfügung</p>
                <a href="/de/kontakt/" class="btn btn-white btn-round-edge">Kontakt</a>
            </div>
        </div>
    </div>
</div>

3. Feature-Liste volle Breite:

<div class="py-5 mt-5" style="background-color: #f8f9fa;">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12 text-center">
                <h3 class="text-dark-gray fw-700">Unsere Vorteile</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 text-center mb-3">
                <i class="bi bi-shield-check fs-1 text-primary mb-2"></i>
                <h5>100% Sicher</h5>
                <p>Deutsche Rechenzentren</p>
            </div>
            <div class="col-md-4 text-center mb-3">
                <i class="bi bi-lightning-charge fs-1 text-primary mb-2"></i>
                <h5>Schnell</h5>
                <p>Optimierte Performance</p>
            </div>
            <div class="col-md-4 text-center mb-3">
                <i class="bi bi-headset fs-1 text-primary mb-2"></i>
                <h5>Support</h5>
                <p>Persönlicher Ansprechpartner</p>
            </div>
        </div>
    </div>
</div>