Forum - Eine Idee für den Präsentationskalender

<style>
  .code-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    max-width: 950px; /* Passen Sie die Breite nach Bedarf an */
  }
 
  .code-header {
    background-color: #f5f5f5;
    padding: 5px 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
 
  .code-name {
    font-weight: bold;
    font-size: 16px;
    color: #333;
  }
 
  .Kopieren-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
  }
 
  .Kopieren-button:hover {
    background-color: #0056b3;
  }
  .code-box {
    padding: 10px;
    overflow-x: auto;
      background-color: rgb(240 241 245);
  background-image: linear-gradient(rgb(210 213 219) 1px, transparent 1px), linear-gradient(to right, rgb(210 213 219) 1px, rgb(240 241 245) 1px);
  background-size: 10px 10px;
  }
 
  .code-box pre {
    margin: 0;
  }
 
  .code-box code {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #333;
  }
</style>
 
<div class="code-container">
  <div class="code-header">
    <span class="code-name">Css - Code</span>
    <button class="Kopieren-button" onclick="copyCodeToClipboard()">Kopieren</button>
  </div>
  <div class="code-box">
    <pre>
      <code>
/* Anfang - Spezial - Forenspende für die Iconbar */
 
.donationinfo {
  padding-left: 115px;
  background: url(//files.homepagemodules.de/b920350/a_27_57b8aa1e.png) 20px center no-repeat;
    background-size: auto;
  margin-bottom: 10px;
  background-size: contain;
}
 
/* Ende - Spezial - Forenspende für die Iconbar */
      </code>
    </pre>
  </div>
</div>
 

 
<div class="code-container">
  <div class="code-header">
    <span class="code-name">HTML - Code</span>
    <button class="Kopieren-button" onclick="copyCodeToClipboard()">Kopieren</button>
  </div>
  <div class="code-box">
    <pre>
      <code>
<div class="donationbox"> <div class="donationinfo"> <strong class="donation_head">Jede Spende hilft!</strong>
<br>
<span class="donation_text">  Dir gefällt was du siehst? Beteilige dich mit einer kleinen Spende und sorge dafür,
dass das Forum auch in Zukunft werbefrei bleibt.</span><br></div><div class="donation_goal">
Spendenziel: <span class="donation_goal_target">85 € </span></div><div class="donation_progress">
<span class="peuro donation_goal_percent_current">0%</span><div class="ppercent" style="width:0%">&nbsp;</div></div>
<center><input type="button" class="button button1 submitbutton" href="javascript:void(0)" onclick="doDonation(10);" value="Jetzt Spenden">
</center></div>
      </code>
    </pre>
  </div>
</div>
 
<script>
function copyCodeToClipboard() {
  const codeElement = document.querySelector('.code-box code');
  const textArea = document.createElement('textarea');
  textArea.value = codeElement.textContent;
  document.body.appendChild(textArea);
  textArea.select();
  document.execCommand('Kopieren');
  document.body.removeChild(textArea);
  alert('Code ist in die Zwischenablage kopiert!');
}
</script>