User Tools

Site Tools


coding:htmlexamples

Table of Contents

Examples

Login form

Source: http://learn.shayhowe.com/
html:

<form>
  <label for="login_username">Username</label>
  <input type="text" name="login_username" id="login_username">
  <label for="login_password">Password</label>
  <input type="password" name="login_password" id="login_password">
  <fieldset>
    <input type="submit" name="login_submit" id="login_submit" value="Login">
    <label><input type="checkbox" name="login_remember" id="login_remember"> Stay signed in</label>
  </fieldset>
</form>

CSS:

form {
  background: linear-gradient(top, #fff, #f8f8f8);
  border: 1px solid #d0d2d5;
  border-bottom: 1px solid #bebfc2;
  border-radius: 4px;
  margin: 0 0 20px 0;
  padding: 20px;
  width: 212px;
}
label {
  color: #404853;
  display: block;
  font-weight: bold;
}
input {
  background: #fff;
  border: 1px solid #c6c9cc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 #fff;
  color: #555;
  font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
  margin: 0 0 20px 0;
  padding: 5px;
  width: 200px;
}
fieldset {
  background: linear-gradient(top, #ebeced, #dedfe0);
  border: none;
  border-top: 1px solid #d0d2d5;
  border-radius: 0 0 4px 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  margin: 5px 0 -20px -20px;
  padding: 18px 20px;
  width: 212px
}
fieldset input {
  margin: 0;
  width: auto;
}
#login_submit {
  background: linear-gradient(top, #687587, #404853);
  border: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #fff;
  font-weight: bold;
  float: left;
  padding: 5px 10px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
}
#login_submit:hover {
  background: linear-gradient(top, #5a6675, #333942);
}
#login_submit:active {
  background: #333942;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.75);
}
fieldset label {
  color: #888;
  cursor: pointer;
  float: left;
  font-size: 12px;
  font-weight: normal;
  margin: 5px 0 0 20px;
}
fieldset label input {
  margin: -2px 2px 0 0;
  padding: 0;
}

Result:

Invoice (table)

Source: http://learn.shayhowe.com/

<table>
  <thead>
    <tr>
      <th class="item" colspan="2">Items</th>
      <th class="qty">Qty</th>
      <th class="price">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item">Envisioning Information <span>By Edward R. Tufte – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$33.32</td>
    </tr>
    <tr>
      <td class="item">Outliers <span>By Malcolm Gladwell – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">2</td>
      <td class="price">$33.58 <span>($16.79 × 2)</span></td>
    </tr>
    <tr>
      <td class="item">Don’t Make Me Think <span>By Steve Krug – Paperback</span></td>
      <td class="stock out">Out of Stock</td>
      <td class="qty">1</td>
      <td class="price">$22.80</td>
    </tr>
    <tr>
      <td class="item">Steve Jobs <span>By Walter Isaacson – Hardcover</span></td>
      <td class="stock in">In Stock</td>
      <td class="qty">1</td>
      <td class="price">$17.49</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="sub">
      <td class="title" colspan="3">Subtotal</td>
      <td class="price">$107.19</td>
    </tr>
    <tr class="tax">
      <td class="title" colspan="3">Tax</td>
      <td class="price">$10.71</td>
    </tr>
    <tr class="total">
      <td class="title" colspan="3">Total</td>
      <td class="price">$117.90</td>
    </tr>
  </tfoot>
</table>

CSS:

table {
  border-collapse: separate;
  border-spacing: 0;
}
th, td {
  vertical-align: top;
}
th {
  background: #404853;
  background: linear-gradient(#687587, #404853);
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 11px;
  padding: 9px 8px 7px 8px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}
th.qty, th.price {
  padding: 9px 20px 7px 20px;
  text-align: center;
}
th.item {
  border-left: 0;
}
th.price {
  border-right: 0;
}
td {
  padding: 8px;
}
tbody td {
  border-bottom: 1px solid #c6c9cc;
  border-left: 1px solid #e4e7eb;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
tbody tr:nth-child(even) td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
  border-left: 1px solid #d5d8db;
}
tbody td.item, tbody tr:nth-child(even) td.item {
  border-left: 1px solid #c6c9cc;
}
tbody td.item {
  color: #404853;
  font-weight: bold;
}
tbody td.stock, tbody td.qty, tbody td.price {
  vertical-align: middle;
}
tbody td.stock, tbody td.qty {
  text-align: center;
}
tbody td.price {
  border-right: 1px solid #c6c9cc;
  text-align: right;
}
tfoot td {
  border-bottom: 1px solid #c6c9cc;
  border-left: 1px solid #e4e7eb;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  text-align: right;
}
tfoot td.title {
  border-left: 1px solid #c6c9cc;
}
tfoot td.price {
  border-right: 1px solid #c6c9cc;
}
tfoot tr.sub td {
  border-bottom: 0;
  padding: 8px 8px 0 8px;
}
tfoot tr.tax td {
  padding: 0 8px 8px 8px;
}
tfoot tr.sub td, tfoot tr.tax td {
  color: #8c8c8c;
  font-size: 12px;
}
tfoot tr.total td {
  background: #e8eae9;
  background: linear-gradient(#f7faf9, #e8eae9);
  color: #404853;
  font-size: 14px;
  font-weight: bold;
}
tfoot tr.total td.price {
  border-left: 1px solid #d5d8db;
}
.in {
  color: #00b515;
}
.out {
  color: #b50000;
}
span {
  color: #8c8c8c;
  display: block;
  font-size: 12px;
  font-weight: normal;
}

Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 20 bytes) in /home_p2/d/o/domidesign.ch/htdocs/domicode.com/wiki/lib/plugins/authplain/auth.php on line 333