Nono Code

by houman kargaran

HTML

<!DOCTYPE html>

<html>

  <head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style>
      .button {
        padding: 15px 25px;
        font-size: 24px;
        text-align: center;
        cursor: pointer;
        outline: none;
        color: #fff;
        background-color: #4CAF50;
        border: none;
        border-radius: 15px;
        box-shadow: 0 9px #999;
      }
      
      .button:hover {
        background-color: #3e8e41
      }
      
      .button:active {
        background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
      }

    </style>

  </head>

  <body style="background-color:black">

    <h1 style="margin:2px;background-color:lightgreen">My tools</h1>
    <table class="table table-sm table-dark">
    
      <tr>
        <th class="bg-primary">Tool Name</th>
        <th class="bg-success">Qty</th>
        <th class="bg-warning">Usage</th>
      
      </tr>

      <tr>
        <td class="bg-primary">Hammer</td>
        <td class="bg-success">1</td>
        <td class="bg-warning">
          I need it because of this and that
        </td>
   
      </tr>
      <tr>
        <td class="bg-dark">...</td>
        <td class="bg-dark">...</td>
        <td class="bg-dark">...</td>
 
      </tr>
      <tr>
        <td class="bg-primary">...</td>
        <td class="bg-success">...</td>
        <td class="bg-warning">...</td>
      </tr>
      <tr>
        <td class="bg-dark">...</td>
        <td class="bg-dark">...</td>
        <td class="bg-dark">...</td>

      </tr>
      <tr>
        <td class="bg-primary"></td>
        <td class="bg-success"></td>
        <td class="bg-warning">...</td>

      </tr>
      <tr>
        <td...