Skip to content

Instantly share code, notes, and snippets.

@jph00

jph00/numberline.html

Created October 18, 2020 01:01
Show Gist options
  • Save jph00/b7390a4912a7ef7350e5360802329a01 to your computer and use it in GitHub Desktop.
Save jph00/b7390a4912a7ef7350e5360802329a01 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
numberline.html
<body>
<h1>Claire's Number Line</h1>
<table>
<thead>
<tr>
<th style="text-align:left"> &nbsp; &nbsp; ones<br/>tens</th>
<th style="background-color:hsla(284, 84%, 59%, 1)">0</th>
<th style="background-color:hsla(347, 87%, 78%, 1)">1</th>
<th style="background-color:hsla(46, 100%, 79%, 1)">2</th>
<th style="background-color:hsla(166, 70%, 84%, 1)">3</th>
<th style="background-color:hsla(154, 88%, 66%, 1)">4</th>
<th style="background-color:hsla(43, 27%, 65%, 1)">5</th>
<th style="background-color:hsla(79, 65%, 66%, 1)">6</th>
<th style="background-color:hsla(190, 91%, 60%, 1)">7</th>
<th style="background-color:hsla(168, 82%, 71%, 1)">8</th>
<th style="background-color:hsla(121, 76%, 71%, 1)">9</th>
</tr>
</thead>
<tbody>
<tr>
<th style="background-color:hsla(284, 84%, 59%, 1)">0</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(284, 84%, 59%, 1))">0</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(284, 84%, 59%, 1))">1</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(284, 84%, 59%, 1))">2</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(284, 84%, 59%, 1))">3</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(284, 84%, 59%, 1))">4</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(284, 84%, 59%, 1))">5</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(284, 84%, 59%, 1))">6</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(284, 84%, 59%, 1))">7</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(284, 84%, 59%, 1))">8</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(284, 84%, 59%, 1))">9</td>
</tr>
<tr>
<th style="background-color:hsla(347, 87%, 78%, 1)">1</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(347, 87%, 78%, 1))">10</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(347, 87%, 78%, 1))">11</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(347, 87%, 78%, 1))">12</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(347, 87%, 78%, 1))">13</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(347, 87%, 78%, 1))">14</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(347, 87%, 78%, 1))">15</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(347, 87%, 78%, 1))">16</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(347, 87%, 78%, 1))">17</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(347, 87%, 78%, 1))">18</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(347, 87%, 78%, 1))">19</td>
</tr>
<tr>
<th style="background-color:hsla(46, 100%, 79%, 1)">2</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(46, 100%, 79%, 1))">20</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(46, 100%, 79%, 1))">21</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(46, 100%, 79%, 1))">22</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(46, 100%, 79%, 1))">23</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(46, 100%, 79%, 1))">24</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(46, 100%, 79%, 1))">25</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(46, 100%, 79%, 1))">26</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(46, 100%, 79%, 1))">27</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(46, 100%, 79%, 1))">28</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(46, 100%, 79%, 1))">29</td>
</tr>
<tr>
<th style="background-color:hsla(166, 70%, 84%, 1)">3</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(166, 70%, 84%, 1))">30</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(166, 70%, 84%, 1))">31</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(166, 70%, 84%, 1))">32</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(166, 70%, 84%, 1))">33</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(166, 70%, 84%, 1))">34</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(166, 70%, 84%, 1))">35</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(166, 70%, 84%, 1))">36</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(166, 70%, 84%, 1))">37</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(166, 70%, 84%, 1))">38</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(166, 70%, 84%, 1))">39</td>
</tr>
<tr>
<th style="background-color:hsla(154, 88%, 66%, 1)">4</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(154, 88%, 66%, 1))">40</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(154, 88%, 66%, 1))">41</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(154, 88%, 66%, 1))">42</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(154, 88%, 66%, 1))">43</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(154, 88%, 66%, 1))">44</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(154, 88%, 66%, 1))">45</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(154, 88%, 66%, 1))">46</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(154, 88%, 66%, 1))">47</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(154, 88%, 66%, 1))">48</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(154, 88%, 66%, 1))">49</td>
</tr>
<tr>
<th style="background-color:hsla(43, 27%, 65%, 1)">5</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(43, 27%, 65%, 1))">50</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(43, 27%, 65%, 1))">51</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(43, 27%, 65%, 1))">52</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(43, 27%, 65%, 1))">53</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(43, 27%, 65%, 1))">54</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(43, 27%, 65%, 1))">55</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(43, 27%, 65%, 1))">56</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(43, 27%, 65%, 1))">57</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(43, 27%, 65%, 1))">58</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(43, 27%, 65%, 1))">59</td>
</tr>
<tr>
<th style="background-color:hsla(79, 65%, 66%, 1)">6</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(79, 65%, 66%, 1))">60</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(79, 65%, 66%, 1))">61</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(79, 65%, 66%, 1))">62</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(79, 65%, 66%, 1))">63</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(79, 65%, 66%, 1))">64</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(79, 65%, 66%, 1))">65</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(79, 65%, 66%, 1))">66</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(79, 65%, 66%, 1))">67</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(79, 65%, 66%, 1))">68</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(79, 65%, 66%, 1))">69</td>
</tr>
<tr>
<th style="background-color:hsla(190, 91%, 60%, 1)">7</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(190, 91%, 60%, 1))">70</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(190, 91%, 60%, 1))">71</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(190, 91%, 60%, 1))">72</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(190, 91%, 60%, 1))">73</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(190, 91%, 60%, 1))">74</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(190, 91%, 60%, 1))">75</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(190, 91%, 60%, 1))">76</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(190, 91%, 60%, 1))">77</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(190, 91%, 60%, 1))">78</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(190, 91%, 60%, 1))">79</td>
</tr>
<tr>
<th style="background-color:hsla(168, 82%, 71%, 1)">8</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(168, 82%, 71%, 1))">80</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(168, 82%, 71%, 1))">81</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(168, 82%, 71%, 1))">82</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(168, 82%, 71%, 1))">83</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(168, 82%, 71%, 1))">84</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(168, 82%, 71%, 1))">85</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(168, 82%, 71%, 1))">86</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(168, 82%, 71%, 1))">87</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(168, 82%, 71%, 1))">88</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(168, 82%, 71%, 1))">89</td>
</tr>
<tr>
<th style="background-color:hsla(121, 76%, 71%, 1)">9</th>
<td style="background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(121, 76%, 71%, 1))">90</td>
<td style="background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(121, 76%, 71%, 1))">91</td>
<td style="background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(121, 76%, 71%, 1))">92</td>
<td style="background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(121, 76%, 71%, 1))">93</td>
<td style="background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(121, 76%, 71%, 1))">94</td>
<td style="background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(121, 76%, 71%, 1))">95</td>
<td style="background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(121, 76%, 71%, 1))">96</td>
<td style="background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(121, 76%, 71%, 1))">97</td>
<td style="background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(121, 76%, 71%, 1))">98</td>
<td style="background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(121, 76%, 71%, 1))">99</td>
</tr>
</tbody>
</table>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment