Code Box || Responsive Code box || Simple Design

Code Box

Information

This code box made by coding vama with the help of HTML, CSS and JS.

Features

The features points about the code box:

• The code box is an HTML element styled with CSS.

• It displays code within a <pre> tag with a monospace font to preserve formatting.

• The code box has a border, padding, and background color to make it stand out.

• The box includes a copy button that allows users to copy the code to the clipboard.

• The button uses JavaScript to copy the content of the code box and changes its text to "Copied!" briefly to indicate success.

• The code box is responsive and adjusts its layout for smaller screens.

• The code box is designed to be reusable and can be used for any code snippet.

 DONATE without paying 

This is the 1 page shortener link.

If  you like service, so please click the button :- Donate

Here is the HTML code

.html
<div class="code-box">
  <pre><text class="vama-text001">.html</text><code class="vama-code-copyied001">
// Your code here
</code>
 </pre>
  <button class="copy-btn">Copy</button>
</div>

 

Here is the CSS code

.css
<style>
    /* Code Box */

.code-box {
  position: relative;
  margin: 15px 25px 35px;
}
  code.vama-code-copyied001 {
    border-radius: 0px !important;
    padding: 2px !important;
}
  text.vama-text001 {
    margin-bottom: 5px;
    font-size: 15px;
    font-family: system-ui;
    display: block;
}

.code-box pre {
    margin: 0;
    padding: 20px;
    padding-bottom: 0px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;
}

/* Copy Button */
.code-box .copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.code-box .copy-btn:hover {
  background-color: #85a9f0;
  color: whitesmoke;
}
  .code-box .copy-btn:hover:active{
    
  }

/* Responsive Styles */
@media (max-width: 768px) {
  .code-box {
    display: block;
  }

  .code-box .copy-btn {
    position: static;
    margin-top: 5px;
  }
}

</style>

 

Here is the JS code

.js
<script>
    document.querySelectorAll('.copy-btn').forEach(function(btn) {
  btn.addEventListener('click', function() {
    var code = this.parentNode.querySelector('code').innerText;
    var temp = document.createElement('textarea');
    document.body.appendChild(temp);
    temp.value = code;
    temp.select();
    document.execCommand('copy');
    document.body.removeChild(temp);
    this.classList.add('copied');
    this.innerText = 'Copied!';
    setTimeout(() => {
      this.classList.remove('copied');
      this.innerText = 'Copy';
    }, 2000);
  });
});
  

</script>

 

---

OUTPUT

 

.html
// Your code here

and Thanks for visiting our site -  Coding Vama