individuelles HTML

<h2>für die Coder</h2>
<p>Manchmal kann es sinnvoll sein bei speziellen Anforderungen aufs Hard-Coding zurückzugreifen.
</p><br>
<div class="pricing-box" style="max-width:600px;margin:auto;border:2px solid #333;border-radius:10px;padding:20px;font-family:sans-serif;">
  <h2 style="text-align:center;">Überblick</h2>
  <div style="display:flex;justify-content:space-around;gap:10px;">
    <div class="plan" style="flex:1;background:#e8f5e9;padding:15px;border-radius:8px;transition:transform 0.3s;">
      <h3><b>Was du hier kannst:</b></h3>
      <ul style="list-style:none;padding:0;">
        <li>✔ HTML</li>
        <li>✔ CSS</li>
        <li>✔ JavaScript</li>
      </ul>
      <button style="background:#4caf50;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer;">Yay</button>
    </div>
    <div class="plan" style="flex:1;background:#f9f9f9;padding:15px;border-radius:8px;transition:transform 0.3s;">


      <h3><b>Was du nicht kannst:</b></h3>
      <ul style="list-style:none;padding:0;">
        <li>✖ komplexe JavaScript-Frameworks</li>
        <li>✖ PHP-Code</li>
        <li>✖ externe Ressourcen via HTML einbetten</li>
      </ul>
      <button style="background:#333;color:#fff;padding:10px;border:none;border-radius:5px;cursor:pointer;">Schade</button>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('.plan').forEach(plan => {
    plan.addEventListener('mouseenter', () => plan.style.transform = 'scale(1.05)');
    plan.addEventListener('mouseleave', () => plan.style.transform = 'scale(1)');
  });
</script>

für die Coder

Manchmal kann es sinnvoll sein bei speziellen Anforderungen aufs Hard-Coding zurückzugreifen.