Two button in single line
<div class='btnF'> <a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a> <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a> </div>
Automatic Colored Syntax Highlighter
<div class='pre hl notranslate' data-text='.html'> <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre> </div>
<div class='pre hl language-javascript notranslate' data-text='.js'> <pre style='white-space:pre-wrap; max-height:none;'>Your_code_is_here</pre> </div>
Button
<div class='btnF'> <a class='button ln' href='url_is_here'>Demo</a> <a class='button' href='url_is_here'><i class='icon dl'></i>Download</a> </div>
MultiTabs Syntax Highlighter
Your_code_is_here
Your_code_is_here
Your_code_is_here
<div class='pre tb'> <!--[ Active function ]--> <input class='prei hidden' id='preT-1' type='radio' name='preTab' checked> <input class='prei hidden' id='preT-2' type='radio' name='preTab'> <input class='prei hidden' id='preT-3' type='radio' name='preTab'> <!--[ Header/title ]--> <div class='preH tbHd scrlH'> <!--[ Change atribute data-text='...' to replace title ]--> <label for='preT-1' data-text='HTML'></label> <label for='preT-2' data-text='CSS'></label> <label for='preT-3' data-text='JS'></label> </div> <!--[ Content ]--> <div class='preC-1'> <pre>Your_code_is_here</pre> </div> <div class='preC-2'> <pre>Your_code_is_here</pre> </div> <div class='preC-3'> <pre>Your_code_is_here</pre> </div> </div>
Toggle Content or Accordion
Title_is_here
Your_text_is_here.
Title_is_here
Your_text_is_here.
<!--[ Accordion start ]--> <div class='showH'> <!--[ Accordion line 1 ]--> <details class='ac'> <summary>Title_is_here</summary> <div class='aC'> <p>Your_text_is_here.</p> </div> </details> <!--[ Accordion line 2 ]--> <details class='ac alt'> <summary>Title_is_here</summary> <div class='aC'> <p>Your_text_is_here.</p> </div> </details> ... ... </div>
Countdown Download Box
Music_Wallpaper.png
Music
3.05MB
1920×1080
.png
<div class='dldCo' id='download1'> <div class='dldBx'> <div class='dldTp'> <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'> <svg class='dldSv' viewBox='0 0 34 34'> <circle class='b' cx='17' cy='17' r='15.92' /> <circle class='c dldPg' cx='17' cy='17' r='15.92' /> </svg> </div> <div class='dldIn'> <span data-text='Name'>Music_Wallpaper.png</span> <span data-text='Category'>Music</span> <span data-text='Size'>3.05MB</span> <span data-text='Resolution'>1920×1080</span> <span data-text='Extension'>.png</span> </div> </div> <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button> <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button> </div> <div class='dldSl'> <div class='dldMe'></div> </div> </div>
Music Player
<div id='musicPlayer'></div> <script> /*<![CDATA[*/ /* Music Player Tracks */ var playerTracks = [{ name: "Track_title_here", artist: "Artist_names_here", cover: "https://raw.githubusercontent.com/.../name.jpg", source: "https://raw.githubusercontent.com/.../name.mp3" }, { name: "Track_title_here", artist: "Artist_names_here", cover: "https://raw.githubusercontent.com/.../name.jpg", source: "https://raw.githubusercontent.com/.../name.mp3" }, { name: "Track_title_here", artist: "Artist_names_here", cover: "https://raw.githubusercontent.com/.../name.jpg", source: "https://raw.githubusercontent.com/.../name.mp3" }, { name: "Track_title_here", artist: "Artist_names_here", cover: "https://raw.githubusercontent.com/.../name.jpg", source: "https://raw.githubusercontent.com/.../name.mp3" } ]; /*]]>*/ </script>
Lazy YouTube Video
<!--[ Lazy youtube ]--> <div class='ytShdw'> <div class='lazyYt' data-embed='Youtube_video_ID'> <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> </div>