Responsive Code Box with Copy Button
This is a basic HTML structure.
Code Box 1: HTML
<h1>Hello, World!</h1>
<p>This is a responsive code box with a copy button.</p>This is a simple JavaScript console log statement.
Code Box 2: JavaScript
console.log("Hello from Code Box 2!");This prints a message to the console in Python.
Code Box 3: Python
print("Hello from Code Box 3!")This prints a message in Java.
Code Box 4: Java
System.out.println("Hello from Code Box 4!");Total working code.
Copy Box Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Code Box with Copy Button</title>
<style>
/* Scoped Styles: Only affects code box section */
.code-section {
max-width: 700px;
margin: auto;
font-family: Arial, sans-serif;
}
.code-container {
position: relative;
max-width: 100%;
margin: 20px 0;
font-family: monospace;
background: #2d2d2d;
border: 1px solid #555;
border-radius: 5px;
padding: 10px;
text-align: left;
}
.code-heading {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #ffcc00;
}
.code-description {
font-size: 14px;
font-weight: bold;
color: black;
background-color: white;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
margin-bottom: 5px;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
background: #2d2d2d;
color: white;
border-radius: 5px;
padding: 10px;
font-size: 14px;
line-height: 1.5;
overflow-x: auto;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
background: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
.copy-btn.copied {
background: green;
}
/* ✅ Syntax Highlighting for Code */
.language-html { color: #ffa07a; }
.language-javascript { color: #7fffd4; }
.language-python { color: #f08080; }
.language-java { color: #ffdf00; }
</style>
</head>
<body>
<div class="code-section">
<h2>Responsive Code Box with Copy Button</h2>
<!-- 📜 Code Box 1: HTML -->
<p class="code-description">This is a basic HTML structure.</p>
<div class="code-container">
<p class="code-heading">Code Box 1: HTML</p>
<button class="copy-btn" onclick="copyCode('codeSnippet1', this)">Copy</button>
<pre><code id="codeSnippet1" class="language-html"><h1>Hello, World!</h1>
<p>This is a responsive code box with a copy button.</p></code></pre>
</div>
<!-- 📜 Code Box 2: JavaScript -->
<p class="code-description">This is a simple JavaScript console log statement.</p>
<div class="code-container">
<p class="code-heading">Code Box 2: JavaScript</p>
<button class="copy-btn" onclick="copyCode('codeSnippet2', this)">Copy</button>
<pre><code id="codeSnippet2" class="language-javascript">console.log("Hello from Code Box 2!");</code></pre>
</div>
<!-- 📜 Code Box 3: Python -->
<p class="code-description">This prints a message to the console in Python.</p>
<div class="code-container">
<p class="code-heading">Code Box 3: Python</p>
<button class="copy-btn" onclick="copyCode('codeSnippet3', this)">Copy</button>
<pre><code id="codeSnippet3" class="language-python">print("Hello from Code Box 3!")</code></pre>
</div>
<!-- 📜 Code Box 4: Java -->
<p class="code-description">This prints a message in Java.</p>
<div class="code-container">
<p class="code-heading">Code Box 4: Java</p>
<button class="copy-btn" onclick="copyCode('codeSnippet4', this)">Copy</button>
<pre><code id="codeSnippet4" class="language-java">System.out.println("Hello from Code Box 4!");</code></pre>
</div>
</div>
<!-- 🛠 Copy Functionality -->
<script>
function copyCode(codeId, btn) {
let codeText = document.getElementById(codeId).innerText;
navigator.clipboard.writeText(codeText).then(() => {
btn.innerText = "Copied!";
btn.classList.add("copied");
setTimeout(() => {
btn.innerText = "Copy";
btn.classList.remove("copied");
}, 2000);
});
}
</script>
</body>
</html>
