Pretty semantic HTML

There should be no need for complicated CSS to make some HTML look good. This is made for you if you just want to write some semantic HTML and not care.

How to use

Add the link to the css file in the head of the html file.

<link 
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/fippli/css@latest/regular.css"
/>

To do

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vestibulum gravida justo ac accumsan. Vivamus vitae lacus augue. Fusce ultrices vel magna id pulvinar. Maecenas non rhoncus augue.

Images

A cat thinking about his life choices
A cat thinking about his life choices

Links

A link to this page

A link not visited

A visited link to this page

Buttons

Forms

Sign up
Contact

Tables

Month Savings
January $100
February $80
Sum $180

Unordered list

Ordered list

  1. First item
  2. Second item
  3. Third item
  4. Fourth item
  5. Fifth item
  6. Sixth item
  7. Seventh item
  8. Eighth item
  9. Ninth item
  10. Tenth item
  11. Eleventh item
  12. Twelfth item

Code

I use prism.js for syntax highlighting

Code block

For when the code stuff spans over a lot of lines like

const identity = function(x) {
  return x;
}

The markup gets a bit messed up if you want to avoid lines in your code block. Look at the code in this document to get it right.

Inline code

If you ever want to describe the identity function

function f(x) { return x; } in

the middle of it all.

This is a long code block to test on mobile phones. fe3f5305-a83b-4955-92f6-cac0dbdab129-051ee049-de7f-4b5f-9395-52e8c82b872f-0e18110c-6498-464f-b2ff-0e491cf1011a

Checkbox