Typography and Writing Formats

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Simple paragraph:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra

Bold paragraph:

Italic paragraph:

Simple block quote:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra

Simple list:

Viverra frills dignitaries quantum had.
Proin been such bulla.
Attack changed their directors.

Numbered list:

Images back good information.
Good information.
How the whole world.

Accordings:

Accordion 1

Lorem ipsum dolor sit amet, consectemtur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.

Accordion 2

Accordion 3

Syntax highlighter

     function myFunction() {                  var btn = document.getElementById("myButton");                  if (btn.value == "Open button") {                     btn.value = "Close button";                     btn.innerHTML = "Close button";                 }                 else {                     btn.value = "Open button";                     btn.innerHTML = "Open button";                 }              }

Multi-tab syntax Highlighter

HTML CSSJavaScript


<!DOCTYPE html>
    <html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->

</html>


   /* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}


   function myFunction() {

                var btn = document.getElementById("myButton");

                if (btn.value == "Open button") {
                    btn.value = "Close button";
                    btn.innerHTML = "Close button";
                }
                else {
                    btn.value = "Open button";
                    btn.innerHTML = "Open button";
                }

            }

Spolier

Spoiler:

Show

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur at est quis ultricies. Nulla facilisi. Integer non consectetur orci. Mauris imperdiet quam nisl, et suscipit magna scelerisque sit amet. Morbi risus massa, iaculis nec porta vitae, luctus ac arcu. Nulla posuere luctus ex eu rhoncus. Sed eget erat a eros porttitor ullamcorper.

Buttons:

Simple button:

Click Here

Small button:

Click Here

Rounded button:

Click Here

Active button:

Click Here

Large button:

Click Here

Download button:

Download

Demo and Download button:

Demo Download

Download button with file Details:

Note Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lor turpis ultrices viverra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et effnuirpis ferro ogronetlia visma potro ultrices viverra

Typography and Writing Formats

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Simple paragraph:

Bold paragraph:

Italic paragraph:

Simple block quote:

Simple list:

Numbered list:

Accordings:

Syntax highlighter

Multi-tab syntax Highlighter

Spolier

Spoiler:

Buttons:

Note Block

Reviews and Comments