Ashad UI Framework for ESP8266

ashad.css

/*
	Ashad css Framework
	Version 1.0.0
	Updated: January 08, 2020
	http://e-labinnovations.web.app
	Copyright (c) 2020, e-lab innovations.
	License: MIT
*/

/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */

.hidden,
[hidden] {
  display: none !important;
}

/* Color */
/*!LOTUS*/
.bg-dark-gray {
  background-color: #a8b2bd;
}
.bg-light-gray {
  background-color: #e2e5e9;
}
.bg-red {
  background-color: #ff7772;
}
.bg-green {
  background-color: #67ba72;
}
.bg-blue {
  background-color: #70bde6;
}
.bg-yellow {
  background-color: #ffdd69;
}
.bg-magenta {
  background-color: #bf75ff;
}
.bg-cyan {
  background-color: #92f9f6;
}
.bg-black {
  background-color: #353535;
}
.txt-dark-gray {
  color: #a8b2bd;
}
.txt-light-gray {
  color: #e2e5e9;
}
.txt-red {
  color: #ff7772;
}
.txt-green {
  color: #67ba72;
}
.txt-blue {
  color: #70bde6;
}
.txt-yellow {
  color: #ffdd69;
}
.txt-magenta {
  color: #bf75ff;
}
.txt-cyan {
  color: #92f9f6;
}

/* Grid */
.row {
  margin-left: -1.25em;
}
.col,
.col-sm,
.col-lg {
  background-clip: content-box;
  box-sizing: border-box;
  display: inline-block;
  margin-right: -0.25em;
  min-height: 1px;
  padding-left: 1.25em;
  position: relative;
  vertical-align: top;
}
.no-gutter {
  padding-left: 0.25em;
}
.c12 {
  width: 100%;
}
.c11 {
  width: 91.66%;
}
.c10 {
  width: 83.33%;
}
.c9 {
  width: 75%;
}
.c8 {
  width: 66.66%;
}
.c7 {
  width: 58.33%;
}
.c6 {
  width: 50%;
}
.c5 {
  width: 41.66%;
}
.c4 {
  width: 33.33%;
}
.c3 {
  width: 25%;
}
.c2 {
  width: 16.66%;
}
.c1 {
  width: 8.33%;
}
@media (max-width: 55em) {
  .col-lg {
    width: 100%;
    margin-bottom: 1.25em;
  }
}
@media (max-width: 30em) {
  .col {
    width: 100%;
    margin-bottom: 1.25em;
  }
}
/* Responsive extra */
@media (min-width: 56em) {
  .hide-lg {
    display: none;
  }
  .show-lg {
    display: block;
  }
  .show-md,
  .show-sm {
    display: none;
  }
}
@media (max-width: 55em) {
  .hide-md {
    display: none;
  }
  .show-md {
    display: block;
  }
  .show-lg,
  .show-sm {
    display: none;
  }
  .cm12 {
    width: 100%;
  }
  .cm11 {
    width: 91.66%;
  }
  .cm10 {
    width: 83.33%;
  }
  .cm9 {
    width: 75%;
  }
  .cm8 {
    width: 66.66%;
  }
  .cm7 {
    width: 58.33%;
  }
  .cm6 {
    width: 50%;
  }
  .cm5 {
    width: 41.66%;
  }
  .cm4 {
    width: 33.33%;
  }
  .cm3 {
    width: 25%;
  }
  .cm2 {
    width: 16.66%;
  }
  .cm1 {
    width: 8.33%;
  }
}
@media (max-width: 30em) {
  .hide-sm {
    display: none;
  }
  .hide-md,
  .show-sm {
    display: block;
  }
  .show-lg,
  .show-md {
    display: none;
  }
  .cs12 {
    width: 100%;
  }
  .cs11 {
    width: 91.66%;
  }
  .cs10 {
    width: 83.33%;
  }
  .cs9 {
    width: 75%;
  }
  .cs8 {
    width: 66.66%;
  }
  .cs7 {
    width: 58.33%;
  }
  .cs6 {
    width: 50%;
  }
  .cs5 {
    width: 41.66%;
  }
  .cs4 {
    width: 33.33%;
  }
  .cs3 {
    width: 25%;
  }
  .cs2 {
    width: 16.66%;
  }
  .cs1 {
    width: 8.33%;
  }
}

/*Spacing*/
.sp-sm {
  padding: 1em;
}
.sp-vert-sm {
  padding-bottom: 1em;
  padding-top: 1em;
}
.sp-horiz-sm {
  padding-left: 1em;
  padding-right: 1em;
}
.sp-md {
  padding: 2em;
}
.sp-vert-md {
  padding-bottom: 2em;
  padding-top: 2em;
}
.sp-horiz-md {
  padding-left: 2em;
  padding-right: 2em;
}
.sp-lg {
  padding: 3em;
}
.sp-vert-lg {
  padding-bottom: 3em;
  padding-top: 3em;
}
.sp-horiz-lg {
  padding-left: 3em;
  padding-right: 3em;
}
@media (max-width: 30em) {
  .sp-sm {
    padding: 0.5em;
  }
  .sp-vert-sm {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
  }
  .sp-horiz-sm {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
  .sp-md {
    padding: 1em;
  }
  .sp-vert-md {
    padding-bottom: 1em;
    padding-top: 1em;
  }
  .sp-horiz-md {
    padding-left: 1em;
    padding-right: 1em;
  }
  .sp-lg {
    padding: 1.5em;
  }
  .sp-vert-lg {
    padding-bottom: 1.5em;
    padding-top: 1.5em;
  }
  .sp-horiz-lg {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }
}

/* Button */
.btn {
  /* Structure */
  display: inline-block;
  zoom: 1;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
  box-sizing: border-box;
}

/* Firefox: Get rid of the inner focus border */
.btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* Inherit .g styles */
.btn-group {
  letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
  *letter-spacing: normal; /* reset IE < 8 */
  *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
  text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
}

.opera-only :-o-prefocus,
.btn-group {
  word-spacing: -0.43em;
}

.btn-group .btn {
  letter-spacing: normal;
  word-spacing: normal;
  vertical-align: top;
  text-rendering: auto;
}
/*csslint outline-none:false*/

.btn {
  font-family: inherit;
  font-size: 100%;
  padding: 0.5em 1em;
  color: #444; /* rgba not supported (IE 8) */
  color: rgba(0, 0, 0, 0.8); /* rgba supported */
  border: 1px solid #999; /*IE 6/7/8*/
  border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/
  background-color: #e6e6e6;
  text-decoration: none;
  border-radius: 2px;
}

.btn-hover,
.btn:hover,
.btn:focus {
  background-image: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.1)
  );
}
.btn:focus {
  outline: 0;
}
.btn-active,
.btn:active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,
    0 0 6px rgba(0, 0, 0, 0.2) inset;
  border-color: #000;
}

.btn[disabled],
.btn-disabled,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active {
  border: none;
  background-image: none;
  /* csslint ignore:start */
  filter: alpha(opacity=40);
  /* csslint ignore:end */
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  pointer-events: none;
}

.btn-hidden {
  display: none;
}

.btn-primary,
.btn-selected,
a.btn-primary,
a.btn-selected {
  background-color: rgb(0, 120, 231);
  color: #fff;
}

/* Button Groups */
.btn-group .btn {
  margin: 0;
  border-radius: 0;
  border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.btn-group .btn:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.btn-group .btn:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-right: none;
}
/* icon font */
@font-face {
  font-family: 'Ashad';
  src: url('data:application/x-font-ttf;charset=utf-8;base64,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')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Ashad' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-plus:before {
  content: '\f067';
}
.icon-search:before {
  content: '\f002';
}
.icon-check:before {
  content: '\f00c';
}
.icon-close:before {
  content: '\f00d';
}
.icon-repeat:before {
  content: '\f01e';
}
.icon-lock:before {
  content: '\f023';
}
.icon-unlock:before {
  content: '\f09c';
}
.icon-caret-down:before {
  content: '\f0d7';
}
.icon-caret-up:before {
  content: '\f0d8';
}
.icon-caret-left:before {
  content: '\f0d9';
}
.icon-caret-right:before {
  content: '\f0da';
}
.icon-unlock-alt:before {
  content: '\f13e';
}
.icon-wifi:before {
  content: '\f1eb';
}
.icon-microchip:before {
  content: '\f2db';
}
.icon-cog:before {
  content: '\e994';
}
.icon-menu:before {
  content: '\e9bd';
}

/* Form */
/*csslint box-model:false*/
/*
Box-model set to false because we're setting a height on select elements, which
also have border and padding. This is done because some browsers don't render
the padding. We explicitly set the box-model for select elements to border-box,
so we can ignore the csslint warning.
*/

.form input[type='text'],
.form input[type='password'],
.form input[type='email'],
.form input[type='url'],
.form input[type='date'],
.form input[type='month'],
.form input[type='time'],
.form input[type='datetime'],
.form input[type='datetime-local'],
.form input[type='week'],
.form input[type='number'],
.form input[type='search'],
.form input[type='tel'],
.form input[type='color'],
.form select,
.form textarea {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  vertical-align: middle;
  box-sizing: border-box;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]) {
  padding: 0.5em 0.6em;
  display: inline-block;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 3px #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
.form input[type='color'] {
  padding: 0.2em 0.5em;
}

.form input[type='text']:focus,
.form input[type='password']:focus,
.form input[type='email']:focus,
.form input[type='url']:focus,
.form input[type='date']:focus,
.form input[type='month']:focus,
.form input[type='time']:focus,
.form input[type='datetime']:focus,
.form input[type='datetime-local']:focus,
.form input[type='week']:focus,
.form input[type='number']:focus,
.form input[type='search']:focus,
.form input[type='tel']:focus,
.form input[type='color']:focus,
.form select:focus,
.form textarea:focus {
  outline: 0;
  border-color: #129fea;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type]):focus {
  outline: 0;
  border-color: #129fea;
}

.form input[type='file']:focus,
.form input[type='radio']:focus,
.form input[type='checkbox']:focus {
  outline: thin solid #129fea;
  outline: 1px auto #129fea;
}
.form .checkbox,
.form .radio {
  margin: 0.5em 0;
  display: block;
}

.form input[type='text'][disabled],
.form input[type='password'][disabled],
.form input[type='email'][disabled],
.form input[type='url'][disabled],
.form input[type='date'][disabled],
.form input[type='month'][disabled],
.form input[type='time'][disabled],
.form input[type='datetime'][disabled],
.form input[type='datetime-local'][disabled],
.form input[type='week'][disabled],
.form input[type='number'][disabled],
.form input[type='search'][disabled],
.form input[type='tel'][disabled],
.form input[type='color'][disabled],
.form select[disabled],
.form textarea[disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form input:not([type])[disabled] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3;
}
.form input[readonly],
.form select[readonly],
.form textarea[readonly] {
  background-color: #eee; /* menu hover bg color */
  color: #777; /* menu text color */
  border-color: #ccc;
}

.form input:focus:invalid,
.form textarea:focus:invalid,
.form select:focus:invalid {
  color: #b94a48;
  border-color: #e9322d;
}
.form input[type='file']:focus:invalid:focus,
.form input[type='radio']:focus:invalid:focus,
.form input[type='checkbox']:focus:invalid:focus {
  outline-color: #e9322d;
}
.form select {
  /* Normalizes the height; padding is not sufficient. */
  height: 2.25em;
  border: 1px solid #ccc;
  background-color: white;
}
.form select[multiple] {
  height: auto;
}
.form label {
  margin: 0.5em 0 0.2em;
}
.form fieldset {
  margin: 0;
  padding: 0.35em 0 0.75em;
  border: 0;
}
.form legend {
  display: block;
  width: 100%;
  padding: 0.3em 0;
  margin-bottom: 0.3em;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

.form-stacked input[type='text'],
.form-stacked input[type='password'],
.form-stacked input[type='email'],
.form-stacked input[type='url'],
.form-stacked input[type='date'],
.form-stacked input[type='month'],
.form-stacked input[type='time'],
.form-stacked input[type='datetime'],
.form-stacked input[type='datetime-local'],
.form-stacked input[type='week'],
.form-stacked input[type='number'],
.form-stacked input[type='search'],
.form-stacked input[type='tel'],
.form-stacked input[type='color'],
.form-stacked input[type='file'],
.form-stacked select,
.form-stacked label,
.form-stacked textarea {
  display: block;
  margin: 0.25em 0;
}

/*
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
since IE8 won't execute CSS that contains a CSS3 selector.
*/
.form-stacked input:not([type]) {
  display: block;
  margin: 0.25em 0;
}
.form-aligned input,
.form-aligned textarea,
.form-aligned select,
/* NOTE: help-inline is deprecated. Use .form-message-inline instead. */
.form-aligned .help-inline,
.form-message-inline {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
}
.form-aligned textarea {
  vertical-align: top;
}

/* Aligned Forms */
.form-aligned .control-group {
  margin-bottom: 0.5em;
}
.form-aligned .control-group label {
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  width: 10em;
  margin: 0 1em 0 0;
}
.form-aligned .controls {
  margin: 1.5em 0 0 11em;
}

/* Rounded Inputs */
.form input.input-rounded,
.form .input-rounded {
  border-radius: 2em;
  padding: 0.5em 1em;
}

/* Grouped Inputs */
.form .group fieldset {
  margin-bottom: 10px;
}
.form .group input,
.form .group textarea {
  display: block;
  padding: 10px;
  margin: 0 0 -1px;
  border-radius: 0;
  position: relative;
  top: -1px;
}
.form .group input:focus,
.form .group textarea:focus {
  z-index: 3;
}
.form .group input:first-child,
.form .group textarea:first-child {
  top: 1px;
  border-radius: 4px 4px 0 0;
  margin: 0;
}
.form .group input:first-child:last-child,
.form .group textarea:first-child:last-child {
  top: 1px;
  border-radius: 4px;
  margin: 0;
}
.form .group input:last-child,
.form .group textarea:last-child {
  top: -2px;
  border-radius: 0 0 4px 4px;
  margin: 0;
}
.form .group button {
  margin: 0.35em 0;
}

.form .input-1 {
  width: 100%;
}
.form .input-3-4 {
  width: 75%;
}
.form .input-2-3 {
  width: 66%;
}
.form .input-1-2 {
  width: 50%;
}
.form .input-1-3 {
  width: 33%;
}
.form .input-1-4 {
  width: 25%;
}

/* Inline help for forms */
/* NOTE: help-inline is deprecated. Use .form-message-inline instead. */
.form .help-inline,
.form-message-inline {
  display: inline-block;
  padding-left: 0.3em;
  color: #666;
  vertical-align: middle;
  font-size: 0.875em;
}

/* Block help for forms */
.form-message {
  display: block;
  color: #666;
  font-size: 0.875em;
}

/* Table */
.table {
  /* Remove spacing between table cells (from Normalize.css) */
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #cbcbcb;
}

.table caption {
  color: #000;
  font: italic 85%/1 arial, sans-serif;
  padding: 1em 0;
  text-align: center;
}

.table td,
.table th {
  border-left: 1px solid #cbcbcb; /*  inner column border */
  border-width: 0 0 0 1px;
  font-size: inherit;
  margin: 0;
  overflow: visible; /*to make ths where the title is really long work*/
  padding: 0.5em 1em; /* cell padding */
}

.table thead {
  background-color: #e0e0e0;
  color: #000;
  text-align: left;
  vertical-align: bottom;
}

/*
striping:
   even - #fff (white)
   odd  - #f2f2f2 (light gray)
*/
.table td {
  background-color: transparent;
}
.table-odd td {
  background-color: #f2f2f2;
}

/* nth-child selector for modern browsers */
.table-striped tr:nth-child(2n-1) td {
  background-color: #f2f2f2;
}

/* BORDERED TABLES */
.table-bordered td {
  border-bottom: 1px solid #cbcbcb;
}
.table-bordered tbody > tr:last-child > td {
  border-bottom-width: 0;
}

/* HORIZONTAL BORDERED TABLES */

.table-horizontal td,
.table-horizontal th {
  border-width: 0 0 1px 0;
  border-bottom: 1px solid #cbcbcb;
}
.table-horizontal tbody > tr:last-child > td {
  border-bottom-width: 0;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IcoMoon Demo</title>
    <meta name="description" content="An Icon Font Generated By IcoMoon.io" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./ashad.css" />
  </head>
  <body>
    <h1>Icons</h1>
    <div class="clearfix bshadow0 pbs">
      <i class="icon-plus"></i>
      <span class="mls"> icon-plus</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-search"></i>
      <span class="mls"> icon-search</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-check"></i>
      <span class="mls"> icon-check</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-close"></i>
      <span class="mls"> icon-close</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-repeat"></i>
      <span class="mls"> icon-repeat</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-wifi"></i>
      <span class="mls"> icon-wifi</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-lock"></i>
      <span class="mls"> icon-lock</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-unlock"></i>
      <span class="mls"> icon-unlock</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-unlock-alt"></i>
      <span class="mls"> icon-unlock-alt</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-microchip"></i>
      <span class="mls"> icon-microchip</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-cog"></i>
      <span class="mls"> icon-cog</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-menu"></i>
      <span class="mls"> icon-menu</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-caret-up"></i>
      <span class="mls"> icon-caret-up</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-caret-down"></i>
      <span class="mls"> icon-caret-down</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-caret-left"></i>
      <span class="mls"> icon-caret-left</span>
    </div>

    <div class="clearfix bshadow0 pbs">
      <i class="icon-caret-right"></i>
      <span class="mls"> icon-caret-right</span>
    </div>

    <h1>Button</h1>
    <a class="btn" href="#">A Pure Button</a>
    <button class="btn">A Pure Button</button>

    <div class="sp-vert-lg test">
      <h1 class="txt-center">Grid</h1>

      <hr />

      <div class="row sp-vert-sm">
        <div class="col bg-red c1"></div>
        <div class="col bg-red c11"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col bg-red c2">c2</div>
        <div class="col bg-red c10">c10</div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col bg-red c3">c3</div>
        <div class="col bg-red c9">c9</div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col bg-red c4">c4</div>
        <div class="col bg-red c8">c6</div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col bg-red c5"></div>
        <div class="col bg-red c7"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col bg-red c6"></div>
        <div class="col bg-red c6"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col c6 bg-dark-gray test"></div>
        <div class="col c3"></div>
        <div class="col c3 bg-red test"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col-sm c4"></div>
        <div class="col-sm c4 bg-dark-gray test"></div>
        <div class="col-sm c4"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col-sm c3 bg-dark-gray">
          <div class="sp-sm">&nbsp;</div>
        </div>
        <div class="col-sm c3 bg-red"></div>
        <div class="col-sm c3 bg-dark-gray"></div>
        <div class="col-sm c3 bg-red"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col-sm c4 bg-red"></div>
        <div class="col-sm c2 bg-red"></div>
        <div class="col-sm c6 bg-dark-gray"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col c12 bg-red"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col-sm c6 bg-dark-gray"></div>
        <div class="col-sm c3 bg-red"></div>
        <div class="col-sm c3 bg-red"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col c2 bg-red"></div>
        <div class="col c2 bg-red"></div>
        <div class="col c4 bg-dark-gray"></div>
        <div class="col c2 bg-red"></div>
        <div class="col c2 bg-dark-gray"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col c1 bg-red"></div>
        <div class="col c10 bg-red"></div>
        <div class="col c1 bg-red"></div>
      </div>

      <div class="row sp-vert-sm">
        <div class="col c1 bg-red"></div>
        <div class="col c1 bg-red"></div>
        <div class="col c1 bg-red"></div>
        <div class="col c1 bg-red"></div>
        <div class="col c4 bg-red"></div>
        <div class="col c2 bg-red"></div>
        <div class="col c2 bg-red"></div>
      </div>
    </div>

    <h1>Table</h1>
    <table class="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>
    <script src="./ashad.js"></script>
  </body>
</html>