Simple Terminal

Easy to use terminal based on the w3.css framework.

<!DOCTYPE html>

<html>

<title>W3.CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2021.css">

<style>

  .w3-container::-webkit-scrollbar {

    height: 10px;

    width: 10px;

  }

  .w3-container::-webkit-scrollbar-thumb {

    background-color: #455A64;

  }

  .w3-container::-webkit-scrollbar-track {

    background-color: #38444f;

  }

</style>

<body>


<div class="w3-container w3-margin">

  <div class="w3-card-4 w3-bar w3-round-large">

    <header class="w3-container w3-bar w3-dark-grey w3-padding">

      <span class="w3-badge w3-red w3-circle w3-small w3-text-red">&nbsp;</span>

      <span class="w3-text-dark-grey">&nbsp;</span>

      <span class="w3-badge w3-yellow w3-circle w3-small w3-text-yellow">&nbsp;</span>

      <span class="w3-text-dark-grey">&nbsp;</span>

      <span class="w3-badge w3-green w3-circle w3-small w3-text-green">&nbsp;</span>

    </header>

    <div class="w3-container w3-bar w3-2021-inkwell" style="max-width: 100%; max-height: 100%; overflow: auto;">

<pre>

 sh$ echo 'Simple Terminal Code'

 Simple Terminal code

 sh$ echo 'This is a long line to show the horizontal scroll bar that will come up instead of wrapping around ...'

 This is a long line to show the horizontal scroll bar that will come up instead of wrapping around ...

</pre>

    </div>


  </div>

</div>


</body>

</html>