Typography & 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:



>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 >



Italic 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 >




Simple blockquote:




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
Someone famous





Simple list: 




  • Viverra frills dignitaries quantum had.

  • Proin been such bulla.

  • Attack changed their directors. 





Numbered list:



  1. Images back good information.

  2. Good information.

  3. How the whole world.





Accordings:









class="acc-input hidden"
id="acc1"
name="accordion"
type="checkbox"
checked
/>


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.







class="acc-input hidden"
id="acc2"
name="accordion"
type="checkbox"
/>


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.







class="acc-input hidden"
id="acc3"
name="accordion"
type="checkbox"
/>


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.








Syntax highlighter



id="item-to-copy"
>

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 > CSS >JavaScript







<!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:



.XML


Xpo-Fast premium Template.Xml

file size - 286.7kb








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


Reviews and Comments

Subscribe to: Post Comments (Atom)