Blockquote style raised
See the Pen Damn simple blockquote by Lukas Dietrich (@lukasdietrich) on CodePen.
Blockquotes Simple styles
See the Pen Alternating Blockquotes by Tommy Hodgins (@tomhodgins) on CodePen.
Jeasyui Table with Filter and sort - really easy
| Item ID | Product | List Price | Unit Cost | Attribute | Status |
|---|
Using Pure CSS framework to make table
| # | Make | Model | Year |
|---|---|---|---|
| 1 | Honda | Accord | 2009 |
| 2 | Toyota | Camry | 2012 |
| 3 | Hyundai | Elantra | 2010 |
<link href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="stylesheet"></link>
<br />
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
</tr>
</tbody>
</table>
CSS framework Examples Post using to Blogger
Yeah!! Milligram is amazing.Default Button
- Unordered list item 1
- Unordered list item 2
- Ordered list item 1
- Ordered list item 2
- Description list item 1
- Description list item 1.1
.column
.column
.column
.column
.column
.column column-50 column-offset-25
10%
20%
25%
33%
40%
50%
60%
67%
75%
80%
90%
100%
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" sizes="180x180"><link rel="icon" href="images/favicon-32x32.png" sizes="32x32"><link rel="icon" href="images/favicon-16x16.png" sizes="16x16"><link rel="manifest" href="manifest.json"><link rel="image_src" href="images/thumbnail.png"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
<blockquote>
<p><em>Yeah!! Milligram is amazing.</em></p>
</blockquote>
<a class="button" href="#">Default Button</a>
<button class="button button-outline">Outlined Button</button>
<input class="button button-clear" type="submit" value="Clear Button">
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
<dl>
<dt>Description list item 1</dt>
<dd>Description list item 1.1</dd>
</dl>
<form>
<fieldset>
<label for="nameField">Name</label>
<input type="text" placeholder="CJ Patoilo" id="nameField">
<label for="ageRangeField">Age Range</label>
<select id="ageRangeField">
<option value="0-13">0-13</option>
<option value="14-17">14-17</option>
<option value="18-23">18-23</option>
<option value="24+">24+</option>
</select>
<label for="commentField">Comment</label>
<textarea placeholder="Hi CJ …" id="commentField"></textarea>
<div class="float-right">
<input type="checkbox" id="confirmField">
<label class="label-inline" for="confirmField">Send a copy to yourself</label>
</div>
<input class="button-primary" type="submit" value="Send">
<br>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen Curry</td>
<td>27</td>
<td>1,91</td>
<td>Akron, OH</td>
</tr>
<tr>
<td>Klay Thompson</td>
<td>25</td>
<td>2,01</td>
<td>Los Angeles, CA</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
<br>
<div class="container">
<div class="row">
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
</div>
<div class="row">
<div class="column">.column</div>
<div class="column column-50 column-offset-25">.column column-50 column-offset-25</div>
</div>
</div>
<br></br>
<div class="container">
<div class="row">
<div class="column column-10">10%</div>
</div>
<div class="row">
<div class="column column-20">20%</div>
</div>
<div class="row">
<div class="column column-25">25%</div>
</div>
<div class="row">
<div class="column column-33">33%</div>
</div>
<div class="row">
<div class="column column-40">40%</div>
</div>
<div class="row">
<div class="column column-50">50%</div>
</div>
<div class="row">
<div class="column column-60">60%</div>
</div>
<div class="row">
<div class="column column-67">67%</div>
</div>
<div class="row">
<div class="column column-75">75%</div>
</div>
<div class="row">
<div class="column column-80">80%</div>
</div>
<div class="row">
<div class="column column-90">90%</div>
</div>
<div class="row">
<div class="column">100%</div>
</div>
</div>
Subscribe to:
Posts (Atom)