Author: | Surabhi-George |
---|---|
Views Total: | 206 views |
Official Page: | Go to website |
Last Update: | July 1, 2021 |
License: | MIT |
Preview:

Description:
A realistic Mac keyboard & trackpad template build with CSS and HTML lists.
How to use it:
1. Load the required stylesheet in the document.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <link type="text/css" href="./style.css" rel="stylesheet" />
2. The necessary HTML for the Mac keyboard.
<div class="k-keyboard-wrap"> <div class="k-flex p8"> <div class="k-sound-card"> </div> <div class="k-shadow-wrap w100"> <ul class="k-flex"> <li class="w60" tabindex="1">Esc</li> <li tabindex="2"> <span>⌘</span> <span class="k-funkeys">F1</span> </li> <li tabindex="3"> <span>⌘</span> <span class="k-funkeys">F2</span> </li> <li tabindex="4"> <span>⌘</span> <span class="k-funkeys">F3</span> </li> <li tabindex="5"> <span>⌘</span> <span class="k-funkeys">F4</span> </li> <li tabindex="6"> <span>⌘</span> <span class="k-funkeys">F5</span> </li> <li tabindex="7"> <span>⌘</span> <span class="k-funkeys">F6</span> </li> <li tabindex="8"> <span>⌘</span> <span class="k-funkeys">F7</span> </li> <li tabindex="9"> <span>⌘</span> <span class="k-funkeys">F8</span> </li> <li tabindex="10"> <span>⌘</span> <span class="k-funkeys">F9</span> </li> <li tabindex="11"> <span>⌘</span> <span class="k-funkeys">F10</span> </li> <li tabindex="12"> <span>⌘</span> <span class="k-funkeys">F11</span> </li> <li tabindex="13"> <span>⌘</span> <span class="k-funkeys">F12</span> </li> <li tabindex="14"> <span class="material-icons k-fs20">power_settings_new</span> </li> </ul> <ul class="k-flex"> <li tabindex="15" class="k-flex-sb"> <span>~</span> <span>`</span> </li> <li tabindex="16" class="k-flex-sb"> <span>!</span> <span>1</span> </li> <li tabindex="17" class="k-flex-sb"> <span>@</span> <span>2</span> </li> <li tabindex="18" class="k-flex-sb"> <span>#</span> <span>3</span> </li> <li tabindex="19" class="k-flex-sb"> <span>$</span> <span>4</span> </li> <li tabindex="20" class="k-flex-sb"> <span>%</span> <span>5</span> </li> <li tabindex="21" class="k-flex-sb"> <span>^</span> <span>6</span> </li> <li tabindex="22" class="k-flex-sb"> <span>&</span> <span>7</span> </li> <li tabindex="23"> <span>*</span> <span>8</span> </li> <li tabindex="24" class="k-flex-sb"> <span>(</span> <span>9</span> </li> <li tabindex="25" class="k-flex-sb"> <span>)</span> <span>0</span> </li> <li tabindex="26" class="k-flex-sb"> <span>_</span> <span>-</span> </li> <li tabindex="27" class="k-flex-sb"> <span>+</span> <span>=</span> </li> <li tabindex="28" class="w60 k-flex-end">delete</li> </ul> <ul class="k-flex"> <li tabindex="29" class="w60 k-flex-start">tab</li> <li tabindex="30">Q</li> <li tabindex="31">W</li> <li tabindex="32">E</li> <li tabindex="33">R</li> <li tabindex="34">T</li> <li tabindex="35">Y</li> <li tabindex="36">U</li> <li tabindex="37">I</li> <li tabindex="38">O</li> <li tabindex="39">P</li> <li tabindex="40" class="k-flex-sb"> <span>{</span> <span>[</span> </li> <li tabindex="41" class="k-flex-sb"> <span>}</span> <span>]</span> </li> <li tabindex="42" class="k-flex-sb"> <span>|</span> <span>\</span> </li> </ul> <ul class="k-flex"> <li tabindex="43" class="w70 k-flex-start">caps lock</li> <li tabindex="44">A</li> <li tabindex="45">S</li> <li tabindex="46">D</li> <li tabindex="47">F</li> <li tabindex="48">G</li> <li tabindex="49">H</li> <li tabindex="50">J</li> <li tabindex="51">K</li> <li tabindex="52">L</li> <li tabindex="53" class="k-flex-sb"> <span>:</span> <span>;</span> </li> <li tabindex="54" class="k-flex-sb"> <span>"</span> <span>'</span> </li> <li tabindex="55" class="w70 k-flex-end k-flex-sb"> <span class="k-flex-as-fe">enter</span> <span>return</span> </li> </ul> <ul class="k-flex"> <li tabindex="56" class="w96 k-flex-start">shift</li> <li tabindex="57">Z</li> <li tabindex="58">X</li> <li tabindex="59">C</li> <li tabindex="60">V</li> <li tabindex="61">B</li> <li tabindex="62">N</li> <li tabindex="63">M</li> <li tabindex="64" class="k-flex-sb"> <span><</span> <span>,</span> </li> <li tabindex="65" class="k-flex-sb"> <span>></span> <span>.</span> </li> <li tabindex="66" class="k-flex-sb"> <span>?</span> <span>/</span> </li> <li tabindex="67" class="w96 k-flex-end">shift</li> </ul> <ul class="k-flex"> <li tabindex="68" class="k-flex-start">fn</li> <li tabindex="69" class="k-flex-start">control</li> <li tabindex="70" class="k-flex-start k-flex-sb"> <span>alt</span> <span>option</span> </li> <li tabindex="71" class="k-flex-start k-flex-sb w50"> <span class="k-flex-as-fe">⌘</span> <span>command</span> </li> <li tabindex="72" class="w236"></li> <li tabindex="73" class="k-flex-start k-flex-sb w50"> <span>⌘</span> <span>command</span> </li> <li tabindex="74" class="k-flex-start k-flex-sb"> <span class="k-flex-as-fe">alt</span> <span>option</span> </li> <div class="k-arrow-wrapper"> <li tabindex="75" class="k-arrow"> <span class="material-icons">arrow_left</span> </li> <div class="k-arrow-wrap"> <li tabindex="76" class="k-arrow"><span class="material-icons">arrow_drop_up</span></li> <li tabindex="77" class="k-arrow"><span class="material-icons">arrow_drop_down</span></li> </div> <li tabindex="78" class="k-arrow"> <span class="material-icons">arrow_right</span></li> </div> </ul> </div> <div class="k-sound-card"> </div> </div> <div class="k-touch-pad"></div> <div class="k-bottom-shadow"></div> </div>