Code Box || Responsive Code box || Simple Design

Code Box

Table of Contents

1. Information
2. Features
3.  DONATE without paying 
4. Here is the HTML code
5. Here is the CSS code
6. Here is the JS code
7. OUTPUT

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