Using Pure CSS framework to make table


# Make Model Year
1 Honda Accord 2009
2 Toyota Camry 2012
3 Hyundai Elantra 2010
the code : 
<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>
READ MORE - Using Pure CSS framework to make table
Labels: , , , ,

CSS framework Examples Post using to Blogger

Yeah!! Milligram is amazing.
Default Button
  • Unordered list item 1
  • Unordered list item 2
  1. Ordered list item 1
  2. Ordered list item 2
Description list item 1
Description list item 1.1

Name Age Height Location
Stephen Curry 27 1,91 Akron, OH
Klay Thompson 25 2,01 Los Angeles, CA

.column
.column
.column
.column
.column
.column column-50 column-offset-25

10%
20%
25%
33%
40%
50%
60%
67%
75%
80%
90%
100%
the code 
<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>
READ MORE - CSS framework Examples Post using to Blogger
Labels: , , , ,

Embedding Instagram to Blog Post

Sometimes we want a source from our article to be compiled into articles that we can publish on the blogger post platform. Yes, we upload it to Instagram as well as a source that fills the articles we post in our blog. Yup, basically this time I just thought about how to insert from Instagram (anywhere) into the article that we will post.


do you see the three points in the lower right corner?

click then select embed (in english) or pin (in indonesian)




source : 
http://mashersam.blogspot.com/2018/09/menyematkan-atau-meng-embed-dari.html


READ MORE - Embedding Instagram to Blog Post
Labels: , , , , ,

JQcloud to Make Easy

In this javascript function here a simple use and easy how to make cloud words with this jquery plugin. As the author say that jQCloud is a jQuery plugin that builds neat and pure HTML + CSS word clouds and tag clouds that are actually shaped like a cloud (otherwise, why would we call them 'word clouds'?).
the basic example


READ MORE - JQcloud to Make Easy
Subscribe to: Posts (Atom)