All Codes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Top Classic Style Inspiration ideas

Default Buttons

Default Preview Download Link Shop cart More info

Writing format:

<a class="button" href="javascript:;">Default</a>
<a class="button preview" href="javascript:;">Preview</a>
<a class="button download" href="javascript:;">Download</a>
<a class="button link" href="javascript:;">Link</a>
<a class="button cart" href="javascript:;">Shop cart</a>
<a class="button share" href="javascript:;">Share</a>
<a class="button info" href="javascript:;">More info</a>

Colored Buttons

Default Preview Download Link Shop cart More info

Writing format:

<a class="button green" href="javascript:;">Default</a>
<a class="button preview red" href="javascript:;">Preview</a>
<a class="button download yellow" href="javascript:;">Download</a>
<a class="button link purple" href="javascript:;">Link</a>
<a class="button cart blue" href="javascript:;">Shop cart</a>
<a class="button share orange" href="javascript:;">Share</a>
<a class="button info dark" href="javascript:;">More info</a>
<a class="button white preview" href="javascript:;">Preview</a>

Two button in single line:

Writing format:

<div class="x-button">
<a class="button preview" href="javascript:;">Preview</a>
<a class="button download" href="javascript:;">Download</a>
</div>

Alert Boxes

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Writing format:

<blockquote class='check'>Lorem Ipsum...</blockquote>
<blockquote class='flag'>Lorem Ipsum...</blockquote>
<blockquote class='warn'>Lorem Ipsum...</blockquote>
<blockquote class='alert'>Lorem Ipsum...</blockquote>
<blockquote class='star'>Lorem Ipsum...</blockquote>

Bordered Table

FirstnameLastnameEmail
AlexEvansalex@example.com
AliceSmithalice@example.com
GraceDooleygrece@example.com

Writing format:

<table>
<thead><tr>
<th>Firstname</th><th>Lastname</th><th>Email</th>
</tr></thead>
<tbody>
<tr>
<td>Alex</td><td>Evans</td><td>alex@example.com</td>
</tr>
<tr>
<td>Alice</td><td>Smith</td><td>alice@example.com</td>
</tr>
<tr>
<td>Grace</td><td>Dooley</td><td>grece@example.com</td>
</tr>
</tbody>
</table>

Code Box

Simple <pre> code

Default PRE
$("#main-nav #s").focus(function());


Copyable Code Box

codes

Codebox syntax powered by Prism

Code box syntax with param: lang="js"

<pre lang="js">$("#main-nav #s").blur(function()...</pre>

👉 Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});



Code box syntax with param: lang=""

<pre lang="">$("#main-nav #s").blur(function()...</pre>

Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});



Code box syntax with param: lang="css"

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  }

Scrolling Images

Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display.

We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations

Writing format:

<div class="psImg scImg scrlH">
  <div class="zImg"><img alt="image_title" src="image_url" /></div>
  <div class="zImg"><img alt="image_title" src="image_url" /></div>
  <div class="zImg"><img alt="image_title" src="image_url" /></div>
</div>

Image with Grid Layout

Non-intrusive notifications are in fashion
Non-intrusive notifications are in fashion
Non-intrusive notifications are in fashion
Non-intrusive notifications are in fashion

Writing format:

<div class="p-img">
  <div class="g-img"><img alt="image_title" src="image_url" /></div>
  <div class="g-img"><img alt="image_title" src="image_url" /></div>
  <div class="g-img"><img alt="image_title" src="image_url" /></div>
</div>

Related Posts Manually

Writing format:

<div class="Xrelated">
  <b>You may want to read these posts:</b>
  <ul>
    <li><a href="your_url">Name_post</a></li>
    <li><a href="your_url">Name_post</a></li>
    <li><a href="your_url">Name_post</a></li>
  </ul>
</div>

3 Comments

Promer

Fast, versatile and elegant Blogger template.

Advertising Space