welcome friends, बहुत-बहुत स्वागत है आपको इस साइट पर। इस पोस्ट में अलग-अलग 10 कोड बॉक्स provide किया है, जो code box अच्छा लगता है blogger theme की हिसाब से, वह उस डिजाइन का box की code को कॉपी करके आप use कर सकते हैं। बॉक्स की भीतर कोड देने से पहले Online parser tool use करके कोड को एक बार parse जरूर कीजिए।
📦 Code Box no 1.
👇 Copy Your Code.
<style>
.code-container {
position: relative;
margin-bottom: 20px;
border: 2px solid #42e61e;
border-radius: 5px;
overflow: hidden;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background-color: #4CAF50;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
z-index: 1;
}
.copy-btn:active {
background-color: #45a049;
}
pre {
margin: 0;
padding: 15px;
background-color: #99d7f0;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5;
white-space: pre-wrap;
position: relative;
}
</style>
<h2>Multiple Code Boxes with Copy Buttons</h2>
<!-- Code Box 1 -->
<div class="code-container">
<button class="copy-btn">Copy</button>
<pre>
// Paste your Code 01 here //
</pre>
</div>
<!-- Code Box 2 -->
<div class="code-container">
<button class="copy-btn">Copy</button>
<pre>
// Paste your Code 02 here //
</pre>
</div>
<!-- Code Box 3 -->
<div class="code-container">
<button class="copy-btn">Copy</button>
<pre>
// Paste your Code 03 here //
</pre>
</div>
<script>
document.querySelectorAll('.copy-btn').forEach(button => {
button.addEventListener('click', () => {
const codeElement = button.nextElementSibling;
const codeText = codeElement.innerText.trim();
navigator.clipboard.writeText(codeText).then(() => {
button.textContent = 'Copied!';
setTimeout(() => button.textContent = 'Copy', 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
});
});
</script>
📦 Code Box no 2.
👇 Copy Your Code.
<!-- Code Box Container -->
<div class="custom-code-box">
<div class="code-box-header">
<span>Code Snippet</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<div class="code-content">
<pre><code>YOUR_PARSER_CODE_HERE</code></pre>
</div>
</div>
<!-- Styles for the Code Box -->
<style>
.custom-code-box {
background-color: #cbe6b8;
border-radius: 6px;
margin: 20px 0;
overflow: hidden;
font-family: 'Courier New', Courier, monospace;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.code-box-header {
background-color: #e8e8ca;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
font-size: 14px;
}
.copy-btn {
background-color: #007bff;
color: white;
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.2s;
}
.copy-btn:hover {
background-color: #0056b3;
}
.code-content pre {
margin: 0;
padding: 15px;
overflow-x: auto;
}
.code-content code {
color: #f8f8f2;
font-size: 14px;
white-space: pre;
}
</style>
<!-- JavaScript for Copy Functionality -->
<script>
function copyCode(button) {
// Find the code element relative to the clicked button
const codeBlock = button.closest('.custom-code-box').querySelector('code');
const textToCopy = codeBlock.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
button.textContent = 'Copied!';
button.style.backgroundColor = '#28a745'; // Green success color
// Reset button text after 2 seconds
setTimeout(() => {
button.textContent = 'Copy';
button.style.backgroundColor = '#007bff';
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
</script>
📦 Code Box no 3.
👇 Copy Your Code.
<div class="custom-code-box">
<div class="code-box-header">
<span>HTML</span>
<button class="copy-btn" onclick="copyToClipboard(this, 'code-block-1')">Copy</button>
</div>
<pre id="code-block-1">Your parser code here</pre>
</div>
<!-- Styling for the Code Box -->
<style>
.custom-code-box {
position: relative;
background-color: #1e1e1e;
border-radius: 6px;
margin: 20px 0;
font-family: 'Courier New', Courier, monospace;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
overflow: hidden;
}
.code-box-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #e6ce20;
padding: 8px 16px;
color: #ffffff;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #3d3d3d;
}
.copy-btn {
background-color: #007acc;
color: white;
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background 0.2s ease;
}
.copy-btn:hover {
background-color: #005999;
}
.custom-code-box pre {
margin: 0;
padding: 15px;
overflow-x: auto;
color: #d4d4d4;
font-size: 14px;
line-height: 1.5;
}
</style>
<!-- Copy Functionality JavaScript -->
<script>
function copyToClipboard(button, targetId) {
const codeText = document.getElementById(targetId).innerText;
navigator.clipboard.writeText(codeText).then(() => {
const originalText = button.innerText;
button.innerText = "Copied!";
button.style.backgroundColor = "#28a745";
setTimeout(() => {
button.innerText = originalText;
button.style.backgroundColor = "#007acc";
}, 2000);
}).catch(err => {
console.error("Failed to copy code: ", err);
});
}
</script>
<div class="custom-code-box">
<div class="code-box-header">
<span>Css</span>
<button class="copy-btn" onclick="copyToClipboard(this, 'code-block-1')">Copy</button>
</div>
<pre id="code-block-1">Your parser code here</pre>
</div>
<div class="custom-code-box">
<div class="code-box-header">
<span>Java Script</span>
<button class="copy-btn" onclick="copyToClipboard(this, 'code-block-1')">Copy</button>
</div>
<pre id="code-block-1">Your parser code here</pre>
</div>
📦 Code Box no 4.
👇 Copy Your Code.
<!-- Code Box Container -->
<div class="custom-code-box">
<div class="code-box-header">
<span class="code-language">CODE</span>
<button class="copy-btn" onclick="copySnippet(this)">Copy</button>
</div>
<div class="code-box-body">
<pre><code>Paste your parsed snippet here.("Hello World");</code></pre>
</div>
</div>
<!-- Styling and Script (Add once per post) -->
<style>
.custom-code-box {
background-color: #1e1e1e;
border-radius: 6px;
margin: 20px 0;
overflow: hidden;
font-family: 'Courier New', Courier, monospace;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.code-box-header {
background-color: #2d2d2d;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.code-language {
color: #aeaeae;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.copy-btn {
background-color: #4ade80;
border: none;
color: #111;
padding: 4px 12px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}
.copy-btn:hover {
background-color: #22c55e;
}
.code-box-body pre {
margin: 0;
padding: 16px;
overflow-x: auto;
}
.code-box-body code {
color: #f8f8f2;
font-size: 14px;
white-space: pre;
}
</style>
<script>
function copySnippet(button) {
// Locate the code text relative to the clicked button
const codeBlock = button.closest('.custom-code-box').querySelector('code');
const textToCopy = codeBlock.textContent;
navigator.clipboard.writeText(textToCopy).then(() => {
button.textContent = "Copied!";
button.style.backgroundColor = "#a3e635";
// Reset button text after 2 seconds
setTimeout(() => {
button.textContent = "Copy";
button.style.backgroundColor = "#4ade80";
}, 2000);
}).catch(err => {
console.error("Failed to copy text: ", err);
});
}
</script>
📦 Code Box no 5.
👇 Copy Your Code.
<!-- Prism.js Light Theme + Line Numbers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet"/>
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.code-top {
background: #f5f5f5;
color: #333;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.code-title {
font-weight: 600;
}
.copy-btn {
background: #007acc;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
/* Desktop: hide button until hover */
@media (min-width: 768px) {
.copy-btn {
opacity: 0;
}
.code-wrap:hover .copy-btn {
opacity: 1;
}
}
/* Mobile: always show button */
@media (max-width: 767px) {
.copy-btn {
opacity: 1;
}
}
.copy-btn:hover { background: #005f9e; }
.copy-btn.copied { background: #28a745; }
pre[class*="language-"] {
margin: 0 !important;
border-radius: 0 !important;
max-height: 500px;
overflow: auto;
background: #f8f8f8 !important;
}
/* Line numbers */
.line-numbers .line-numbers-rows {
border-right: 1px solid #ddd;
color: #999;
}
</style>
<div class="code-wrap">
<div class="code-top">
<span class="code-title">HTML</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="line-numbers"><code class="language-javascript">const greeting = "Hello Blogger";
console.log(greeting);
function sum(a, b) {
return a + b;
}</code></pre>
</div>
</br>
<!-- Prism.js Light Theme + Line Numbers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet"/>
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.code-top {
background: #f5f5f5;
color: #333;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.code-title {
font-weight: 600;
}
.copy-btn {
background: #007acc;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
/* Desktop: hide button until hover */
@media (min-width: 768px) {
.copy-btn {
opacity: 0;
}
.code-wrap:hover .copy-btn {
opacity: 1;
}
}
/* Mobile: always show button */
@media (max-width: 767px) {
.copy-btn {
opacity: 1;
}
}
.copy-btn:hover { background: #005f9e; }
.copy-btn.copied { background: #28a745; }
pre[class*="language-"] {
margin: 0 !important;
border-radius: 0 !important;
max-height: 500px;
overflow: auto;
background: #f8f8f8 !important;
}
/* Line numbers */
.line-numbers .line-numbers-rows {
border-right: 1px solid #ddd;
color: #999;
}
</style>
<div class="code-wrap">
<div class="code-top">
<span class="code-title">CSS</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="line-numbers"><code class="language-javascript">const greeting = "Hello Blogger";
console.log(greeting);
function sum(a, b) {
return a + b;
}</code></pre>
</div>
</br>
<!-- Prism.js Light Theme + Line Numbers -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet"/>
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e0e0e0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.code-top {
background: #f5f5f5;
color: #333;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e0e0e0;
}
.code-title {
font-weight: 600;
}
.copy-btn {
background: #007acc;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
/* Desktop: hide button until hover */
@media (min-width: 768px) {
.copy-btn {
opacity: 0;
}
.code-wrap:hover .copy-btn {
opacity: 1;
}
}
/* Mobile: always show button */
@media (max-width: 767px) {
.copy-btn {
opacity: 1;
}
}
.copy-btn:hover { background: #005f9e; }
.copy-btn.copied { background: #28a745; }
pre[class*="language-"] {
margin: 0 !important;
border-radius: 0 !important;
max-height: 500px;
overflow: auto;
background: #f8f8f8 !important;
}
/* Line numbers */
.line-numbers .line-numbers-rows {
border-right: 1px solid #ddd;
color: #999;
}
</style>
<div class="code-wrap">
<div class="code-top">
<span class="code-title">JavaScript</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="line-numbers"><code class="language-javascript">const greeting = "Hello Blogger";
console.log(greeting);
function sum(a, b) {
return a + b;
}</code></pre>
</div>
📦 Code Box no 6.
👇 Copy Your Code.
Message Box:--
<style>
.note-box {
background-color: #e3f2fd;
border-left: 5px solid #2196f3;
padding: 15px;
margin: 20px 0;
color: #0d47a1;
border-radius: 4px;
}
</style>
<div class="note-box">
<strong>Note:</strong> YOUR MESSAGE HERE
</div>
<style>
.alert-box {
background-color: #ffebee;
border-left: 5px solid #f44336;
padding: 15px;
margin: 20px 0;
color: #b71c1c;
border-radius: 4px;
}
</style>
<div class="alert-box">
<strong>Warning:</strong> YOUR MESSAGE HERE
</div>
<style>
.success-box {
background-color: #e8f5e9;
border-left: 5px solid #4caf50;
padding: 15px;
margin: 20px 0;
color: #1b5e20;
border-radius: 4px;
}
</style>
<div class="success-box">
<strong>Success:</strong> YOUR MESSAGE HERE
</div>
📦 Code Box no 7.
👇 Copy Your Code.
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
border: 2px solid #ddd;
overflow: hidden;
}
.code-top {
background: #282c34;
color: #abb2bf;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
.copy-btn {
background: #61afef;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
.copy-btn:hover { background: #19e6c0; }
.copy-btn.copied { background: #98c379; }
.code-box {
background: #e3c04d;
color: #dcdcdc;
padding: 16px;
margin: 0;
overflow-x: auto;
font: 14px/1.6 Consolas, Monaco, "Courier New", monospace;
white-space: pre;
}
.code-box code { display: block; color: inherit; }
/* Light theme option - uncomment if you want
.code-box { background: #f8f8f8; color: #333; }
.code-top { background: #eee; color: #333; }
*/
</style>
<script>
function copyCode(btn) {
const codeEl = btn.closest('.code-wrap').querySelector('code');
const text = codeEl.innerText;
navigator.clipboard.writeText(text).then(() => {
const oldText = btn.innerText;
btn.innerText = 'Copied!';
btn.classList.add('copied');
setTimeout(() => {
btn.innerText = oldText;
btn.classList.remove('copied');
}, 2000);
}).catch(() => {
alert('Copy failed. Please copy manually.');
});
}
</script>
<div class="code-wrap">
<div class="code-top">
<span>HTML Code</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-box"><code><h1>Hello Blogger</h1>
<p>This is a code box</p></code></pre>
</div>
<br />
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
border: 1px solid #ddd;
overflow: hidden;
}
.code-top {
background: #282c34;
color: #abb2bf;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
.copy-btn {
background: #61afef;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
.copy-btn:hover { background: #528bff; }
.copy-btn.copied { background: #98c379; }
.code-box {
background: #f7ec6f;
color: #dcdcdc;
padding: 16px;
margin: 0;
overflow-x: auto;
font: 14px/1.6 Consolas, Monaco, "Courier New", monospace;
white-space: pre;
}
.code-box code { display: block; color: inherit; }
/* Light theme option - uncomment if you want
.code-box { background: #f8f8f8; color: #333; }
.code-top { background: #eee; color: #333; }
*/
</style>
<script>
function copyCode(btn) {
const codeEl = btn.closest('.code-wrap').querySelector('code');
const text = codeEl.innerText;
navigator.clipboard.writeText(text).then(() => {
const oldText = btn.innerText;
btn.innerText = 'Copied!';
btn.classList.add('copied');
setTimeout(() => {
btn.innerText = oldText;
btn.classList.remove('copied');
}, 2000);
}).catch(() => {
alert('Copy failed. Please copy manually.');
});
}
</script><div class="code-wrap">
<div class="code-top">
<span>CSS Code</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-box"><code><h1>Hello Blogger</h1>
<p>This is a code box</p></code></pre>
</div>
<br />
<style>
.code-wrap {
position: relative;
margin: 20px 0;
border-radius: 8px;
border: 1px solid #ddd;
overflow: hidden;
}
.code-top {
background: #282c34;
color: #abb2bf;
padding: 10px 14px;
font: 13px/1.4 system-ui, sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
.copy-btn {
background: #61afef;
color: #fff;
border: 0;
padding: 6px 12px;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: 0.2s;
}
.copy-btn:hover { background: #528bff; }
.copy-btn.copied { background: #98c379; }
.code-box {
background: #1e222a;
color: #dcdcdc;
padding: 16px;
margin: 0;
overflow-x: auto;
font: 14px/1.6 Consolas, Monaco, "Courier New", monospace;
white-space: pre;
}
.code-box code { display: block; color: inherit; }
/* Light theme option - uncomment if you want
.code-box { background: #f8f8f8; color: #333; }
.code-top { background: #eee; color: #333; }
*/
</style>
<script>
function copyCode(btn) {
const codeEl = btn.closest('.code-wrap').querySelector('code');
const text = codeEl.innerText;
navigator.clipboard.writeText(text).then(() => {
const oldText = btn.innerText;
btn.innerText = 'Copied!';
btn.classList.add('copied');
setTimeout(() => {
btn.innerText = oldText;
btn.classList.remove('copied');
}, 2000);
}).catch(() => {
alert('Copy failed. Please copy manually.');
});
}
</script><div class="code-wrap">
<div class="code-top">
<span>JAVASCRIPT Code</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre class="code-box"><code><h1>Hello Blogger</h1>
<p>This is a code box</p></code></pre>
</div>
📦 Code Box no 8.
👇 Copy Your Code.
<!-- 1. The Code Box Structure -->
<div class="code-container">
<div class="code-header">
<span>Code Snippet</span>
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
</div>
<pre><code class="code-content">YOUR CODE HERE / Message here</code></pre>
</div>
<!-- 2. CSS Styling for the Code Box -->
<style>
.code-container {
background-color: #2d2d2d;
border-radius: 6px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 20px 0;
overflow: hidden;
font-family: 'Courier New', Courier, monospace;
}
.code-header {
background-color: #1e1e1e;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
color: #9cdcfe;
font-size: 14px;
border-bottom: 1px solid #333;
}
.copy-btn {
background-color: #007acc;
color: #ffffff;
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s ease;
}
.copy-btn:hover {
background-color: #005999;
}
.code-container pre {
margin: 0;
padding: 15px;
overflow-x: auto;
}
.code-content {
color: #f8f8f2;
font-size: 14px;
white-space: pre;
display: block;
}
</style>
<!-- 3. JavaScript Functionality -->
<script>
function copyCode(button) {
// Find the code element relative to the clicked button
const container = button.closest('.code-container');
const codeText = container.querySelector('.code-content').innerText;
// Copy the text to the clipboard
navigator.clipboard.writeText(codeText).then(() => {
// Temporary success state change
button.innerText = "Copied!";
button.style.backgroundColor = "#28a745";
// Reset button after 2 seconds
setTimeout(() => {
button.innerText = "Copy";
button.style.backgroundColor = "#007acc";
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
}
</script>
📦 Code Box no 9.
👇 Copy Your Code.
<!-- Code Box Container -->
<div class="custom-code-box" style="background: #2d2d2d; border-radius: 6px; padding: 15px; position: relative; font-family: monospace; margin: 20px 0;">
<!-- Header with Language and Copy Button -->
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #aaa; font-size: 13px;">
<span>CODE SNIPPET NAME</span>
<button class="copy-btn" onclick="copyCode(this)" style="background: #444; color: #fff; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: 0.2s;">Copy</button>
</div>
<!-- The Code Display Area -->
<pre style="margin: 0; overflow-x: auto;"><code class="code-content" style="color: #f8f8f2; white-space: pre; display: block; font-size: 14px;">YOUR_ PARSED_CODE_HERE</code></pre>
</div>
<!-- JavaScript Functionality (Only needed once per post) -->
<script>
function copyCode(button) {
// Find the code content relative to the clicked button
const codeBox = button.closest('.custom-code-box');
const codeText = codeBox.querySelector('.code-content').innerText;
// Copy text to clipboard
navigator.clipboard.writeText(codeText).then(() => {
button.innerText = "Copied!";
button.style.background = "#27ae60"; // Change button to green
// Reset button text after 2 seconds
setTimeout(() => {
button.innerText = "Copy";
button.style.background = "#444";
}, 2000);
}).catch(err => {
console.error("Failed to copy code: ", err);
});
}
</script>
📦 Code Box no 10.
👇 Copy Your Code.
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS code box styles */
.code-box {
position: relative;
background-color: #f1f1f1;
padding: 10px;
border-radius: 4px;
}
/* Copy button styles */
.copy-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="code-box">
<pre>
<code>
/* Your CSS code here */
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #333;
}
h1 {
font-size: 24px;
font-weight: bold;
color: #555;
}
</code>
</pre>
<button class="copy-button" onclick="copyCode()">Copy</button>
</div>
<script>
function copyCode() {
var codeElement = document.querySelector('.code-box code');
var code = codeElement.innerText;
navigator.clipboard.writeText(code)
.then(function() {
alert('Code copied to clipboard!');
})
.catch(function(error) {
console.error('Failed to copy code: ', error);
});
}
</script>
</body>
</html>
Thank you,please visit again 🙏
