Stap 4: De statische html-inhoud toevoegen
in de map 'openbaar', door de volgende bestanden toevoegen:
index.html
Wanneer ik plak de HTMLcode in instructables, het automatisch maakt als onderdeel van de pagina, dus ik het bestand beschikbaar op pastebin maakte: http://pastebin.com/jJ9L0RF8
Style.CSS
body { text-align: center; margin-top: 50px; background: #50D0A0; } input[type=range]{ -webkit-appearance: none; width: 80%; } input[type=range]::-webkit-slider-runnable-track { height: 10px; background: #ddd; border: none; border-radius: 3px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; height: 32px; width: 32px; border-radius: 50%; background: goldenrod; margin-top: -12px; } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #ccc; }
Dit opmaakmodel is geoptimaliseerd voor webkit browsers zoals Google Chrome of de chroom-browser.
De website werkt prima zonder het, maar het kijkt veel aardiger met.
De website moet ook renderen en werken prima op de meeste smartphones en tablets (getest met Chrome).