|
|
| Line 213: |
Line 213: |
| | | | |
| | <body> | | <body> |
| − | <h1>Isotope - filtering & sorting</h1>
| |
| − | <h2>Filter</h2>
| |
| − | <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">show all</button>
| |
| − | <button class="button" data-filter=".metal">metal</button>
| |
| − | <button class="button" data-filter=".transition">transition</button>
| |
| − | <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
| |
| − | <button class="button" data-filter=":not(.transition)">not transition</button>
| |
| − | <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
| |
| − | <button class="button" data-filter="numberGreaterThan50">number > 50</button>
| |
| − | <button class="button" data-filter="ium">name ends with –ium</button>
| |
| − | </div>
| |
| − |
| |
| − | <div class="grid">
| |
| − | <div class="element-item transition metal " data-category="transition">
| |
| − | <h3 class="name">Mercury</h3>
| |
| − | </div>
| |
| − | <div class="element-item metalloid " data-category="metalloid">
| |
| − | <h3 class="name">Tellurium</h3>
| |
| − | </div>
| |
| − | <div class="element-item post-transition metal " data-category="post-transition">
| |
| − | <h3 class="name">Bismuth</h3>
| |
| − | </div>
| |
| − | <div class="element-item post-transition metal " data-category="post-transition">
| |
| − | <h3 class="name">Lead</h3>
| |
| − | </div>
| |
| − | <div class="element-item transition metal " data-category="transition">
| |
| − | <h3 class="name">Gold</h3>
| |
| − |
| |
| − | </div>
| |
| − | <div class="element-item alkali metal " data-category="alkali">
| |
| − | <h3 class="name">Potassium</h3>
| |
| − | </div>
| |
| − | <div class="element-item alkali metal " data-category="alkali">
| |
| − | <h3 class="name">Sodium</h3>
| |
| − | </div>
| |
| − | <div class="element-item transition metal " data-category="transition">
| |
| − | <h3 class="name">Cadmium</h3>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| | | | |
| | <div class="main-container" style=" background-color: #394048;"> | | <div class="main-container" style=" background-color: #394048;"> |
