Pure HTML CSS Codebox

Coloured Codebox Showcase

In code related articles I thought of using a codepen or jsfiddle site to demonstrating code examples. However, I came up with other thoughts and I thought of using a little more unique codeboxes sometimes. I browsed the codepen and came across cool boxes. I added styles to my blog so I can use them effortlessly.

Below are two examples of boxes and here is a link to the original source code.

Comprehensive tutorials where, e.g. HTML is used, I will add code examples to the codepen. I would like to remind you that you can send me topics on which you want me to make an article. I have coding tutorials (mainly for the wordpress platform) in progress, but send me suggestions so I write them down.

Here is the live example how it looks like:

CSS

code {
	font-family: Courier, sans-serif;
        font-size: 1em;
	line-height: 1.3;
      }

JS

     alert( 'Hello, world!' );
     

Related articles

• Lazy Load Images and Iframes
• Should I Learn PHP in 2021?
• 5 PHP Frameworks You May Not Have Heard Of