Source Code Template

Kode membuat tampilan menarik

Button

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>

TABLE 1

<div class="table">
<div class="sch-row sc">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Occupation</div>
<div class="cell">Location</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Name">Luke Peters</div>
<div class="cell" data-title="Age">25</div>
<div class="cell" data-title="Occupation">Freelance Web Developer</div>
<div class="cell" data-title="Location">Brookline, MA</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Name">Joseph Smith</div>
<div class="cell" data-title="Age">27</div>
<div class="cell" data-title="Occupation">Project Manager</div>
<div class="cell" data-title="Location">Somerville, MA</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Name">Maxwell Johnson</div>
<div class="cell" data-title="Age">26</div>
<div class="cell" data-title="Occupation">UX Architect &amp; Designer</div>
<div class="cell" data-title="Location">Arlington, MA</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Name">Harry Harrison</div>
<div class="cell" data-title="Age">25</div>
<div class="cell" data-title="Occupation">Front-End Developer</div>
<div class="cell" data-title="Location">Boston, MA</div>
</div>
</div>

TABLE 2

<div class="table">
<div class="sch-row sc green">
<div class="cell">Product</div>
<div class="cell">Unit Price</div>
<div class="cell">Quantity</div>
<div class="cell">Date Sold</div>
<div class="cell">Status</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Product">Solid oak work table</div>
<div class="cell" data-title="Unit Price">$800</div>
<div class="cell" data-title="Quantity">10</div>
<div class="cell" data-title="Date Sold">03/15/2023</div>
<div class="cell" data-title="Status">Waiting for Pickup</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Product">Leather iPhone wallet</div>
<div class="cell" data-title="Unit Price">$45</div>
<div class="cell" data-title="Quantity">120</div>
<div class="cell" data-title="Date Sold">02/28/2023</div>
<div class="cell" data-title="Status">In Transit</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Product">27" Apple Thunderbolt displays</div>
<div class="cell" data-title="Unit Price">$1000</div>
<div class="cell" data-title="Quantity">25</div>
<div class="cell" data-title="Date Sold">02/10/2023</div>
<div class="cell" data-title="Status">Delivered</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Product">Bose studio headphones</div>
<div class="cell" data-title="Unit Price">$60</div>
<div class="cell" data-title="Quantity">90</div>
<div class="cell" data-title="Date Sold">01/14/2023</div>
<div class="cell" data-title="Status">Delivered</div>
</div>
</div>

TABLE 3

<div class="table">
<div class="sch-row sc blue">
<div class="cell">Username</div>
<div class="cell">Email</div>
<div class="cell">Password</div>
<div class="cell">Active</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Username">My School</div>
<div class="cell" data-title="Email">[e-mail]</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Username">jsmith41</div>
<div class="cell" data-title="Email">[e-mail]</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">No</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Username">My Admin</div>
<div class="cell" data-title="Email">[e-mail]
</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
<div class="sch-row">
<div class="cell" data-title="Username">Herry Potter</div>
<div class="cell" data-title="Email">[e-mail]</div>
<div class="cell" data-title="Password">************</div>
<div class="cell" data-title="Active">Yes</div>
</div>
</div>

ALERT

<h2>
Success Message</h2>
<div class="alert-message success">
<i class="fa fa-check-circle"></i> success message : You successfully read this important message.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Alert Message</h2>
<div class="alert-message alert">
<i class="fa fa-info-circle"></i> Alert message : This alert needs your attention.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Warning Message</h2>
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i> Warning message : Warning! Best check yo self.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Error Message</h2>
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i> Error message : Oh snap! Change a few things up.     <br />
<div class="alert-del-btn">
</div>
</div>

GALLERY

<section id="box-gallery">

<a href="https://1.bp.blogspot.com/-P0pshD_4GEQ/XPDRRXiID0I/AAAAAAAAAd4/ZQuK0tzXSU8r2tVwIEzeP1_oIDDDrp-BACLcBGAs/s1600/8.jpg"><img class="lazyload" data-sizes="auto" src="https://1.bp.blogspot.com/-P0pshD_4GEQ/XPDRRXiID0I/AAAAAAAAAd4/ZQuK0tzXSU8r2tVwIEzeP1_oIDDDrp-BACLcBGAs/s1600/8.jpg" /></a>     

<a href="https://1.bp.blogspot.com/-HzACOYzK4Mc/XPDRR_V8H6I/AAAAAAAAAeA/bwOMdck5t8IACsIlK_7ZghfYIfh-wJgvACLcBGAs/s1600/9.jpg"><img class="lazyload" data-sizes="auto" src="https://1.bp.blogspot.com/-HzACOYzK4Mc/XPDRR_V8H6I/AAAAAAAAAeA/bwOMdck5t8IACsIlK_7ZghfYIfh-wJgvACLcBGAs/s1600/9.jpg" /></a>     

<a href="https://1.bp.blogspot.com/-R1-VB9oP12g/XPDRP4y-CUI/AAAAAAAAAdc/Lzx5W7ROUbYwYdKh6gGKzQ7P7LL6ikPHQCLcBGAs/s1600/10.jpg"><img class="lazyload" data-sizes="auto" src="https://1.bp.blogspot.com/-R1-VB9oP12g/XPDRP4y-CUI/AAAAAAAAAdc/Lzx5W7ROUbYwYdKh6gGKzQ7P7LL6ikPHQCLcBGAs/s1600/10.jpg" /></a>

</section>

LAZYLOAD

Every time to add an image in an article or anywhere you have to insert the Lazyload Image code in it to speed up loading on the blog

Example:

class="lazyload" data-sizes="auto"