All Typography and Writing Formats

All Style Typography and Format Posts
<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img alt='Image_Alt_Here' src='image_src.png'/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Caption_here</td>
    </tr>
  </tbody>
</table>

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara
<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations Boating Experience in Pokhara
<!--[ Show All Image ]-->
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  
  <div class='btImg'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage' aria-label='Show all image'>Show All</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
    <img alt='Image_Alt_Here' src='image_src.png'/>
  </div>
</div>

Construction of New Highway Langtang Tracking Major Attraction De Spain Preparations
<!--[ Scroll Image ]-->
<div class='psImg scImg scrlH'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
</div>

<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

<div class='pRelate'>
  <!--[ Related title ]-->
  <b>Baca juga :</b>

  <ul>
    <li><a href='javascript:;'>Lorem ipsum dolor sit amet consectetur adipiscing</a></li>
    <li><a href='javascript:;'>Proin vestibulum dignissim diam</a></li>
    <li><a href='javascript:;'>Sed suscipit sapien sed turpis ultrices viverra</a></li>
  </ul>
</div>

<!--[ To break paragraphs apart ]-->
<hr>

<p class='pIndent'>Your_text_here</p>

<p><span class='dropCap'>Y</span>our_text_here</p>

<blockquote>Your_text_here</blockquote>



<blockquote class='s-1'>Your_text_here</blockquote>

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

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

// Tags to add color

<i class='gray'>...</i>				= Gray
<i class='red'>...</i>				= Red
<i class='blue'>...</i>				= Blue
<i class='green'>...</i>			= Green
<i class='block'>...</i>			= Block Blue

<div class='pre html'><pre>Your_code_here</pre></div>

<div class='pre css'><pre>Your_code_here</pre></div>

<div class='pre js'><pre>Your_code_here</pre></div>

<div class='pre'><pre style='white-space:pre-wrap'>Your_code_here</pre></div>

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Accordion_first_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac'>
    <summary>Accordion_second_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 3 ]-->
  <details class='ac'>
    <summary>Accordion_third_title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class='ac alt'>
    <summary>Accordion_fourth_title (alt)</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
</div>

<p class='note'>Yout_text_here</p>

// Another style

<p class='note wr'>Yout_text_here</p>
<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>





<a class='button' href='#'>Standard_button</a>
<a class='button' href='#'><i class='icon dl'></i>Download</a>
<a class='button ln' href='#'><i class='icon dl'></i>Download</a>
<a class='button' href='#'><i class='icon demo'></i>Demo</a>

<div class='btnF'>
  <a class='button ln' href='javascript:;'>Demo</a>
  <a class='button' href='javascript:;'><i class='icon dl'></i>Download</a>
</div>
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='javascript:;'><i class='icon dl'></i></a>
</div>

<!--[ Lazy youtube ]-->
<div class='lazyYt' data-embed='mNOdyNNRSrM'>
  <div class='play'>
    <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Referensi:
jagodesain.com

<p class='pRef'>Referensi:<br> www.jagodesain.com</p>