M1 Macbook Keyboard Using HTML & CSS

M1 Macbook Keyboard Using HTML & CSS – Animated Interactive Mackbook Keyboard (M1 Slide) built with HTML and CSS / CSS3 only.

Todo:

Change font-family
Improve 3D animation

css number counter animation, counter js, macbook pro m1, js counter animation, macbook pro 2022 m1, media query css for all devices with example

Mac Keyboard & Trackpad Using Pure HTML5 CSS3

How to make use of it:

1. Create the HTML for the Macbook keyboard.

<div class="cube-wrapper">
  <div class="cube">
    <div class="front-side">
      <div class="container-I">
        <div class="box">
          <div class="container">
            <div class="partition">
              <div class="line-1">
                <span class="esc f-key">
                  <span class="">esc</span>
                </span>
                <span class="f-key">f1</span>
                <span class="f-key">f2</span>
                <span class="f-key">f3</span>
                <span class="f-key">f4</span>
                <span class="f-key">f5</span>
                <span class="f-key">f6</span>
                <span class="f-key">f7</span>
                <span class="f-key">f8</span>
                <span class="f-key">f9</span>
                <span class="f-key">f10</span>
                <span class="f-key">f11</span>
                <span class="f-key">f12</span>
                <span class="touch-id f-key"></span>
              </div>
              <div class="line-2">
                <div class="square">
                  <span class="content">~</span>
                  <span class="content">`</span>
                </div>
                <div class="square">
                  <span class="content">!</span>
                  <span class="content">1</span>
                </div>
                <div class="square">
                  <span class="content">@</span>
                  <span class="content">2</span>
                </div>
                <div class="square">
                  <span class="content">#</span>
                  <span class="content">3</span>
                </div>
                <div class="square">
                  <span class="content"><pre wp-pre-tag-0=""></pre>lt;/span> <span class="content">4</span> </div> <div class="square"> <span class="content">%</span> <span class="content">5</span> </div> <div class="square"> <span class="content">^</span> <span class="content">6</span> </div> <div class="square"> <span class="content">&</span> <span class="content">7</span> </div> <div class="square"> <span class="content">*</span> <span class="content">8</span> </div> <div class="square"> <span class="content">(</span> <span class="content">9</span> </div> <div class="square"> <span class="content">)</span> <span class="content">0</span> </div> <div class="square"> <span class="content">⎯</span> <span class="content">-</span> </div> <div class="square"> <span class="content">+</span> <span class="content">=</span> </div> <div class="square delete"> <span>delete</span> </div> </div> <div class="line-3"> <div class="tab square"><span>tab</span></div> <span class="square">Q</span> <span class="square">W</span> <span class="square">E</span> <span class="square">R</span> <span class="square">T</span> <span class="square">Y</span> <span class="square">U</span> <span class="square">I</span> <span class="square">O</span> <span class="square">P</span> <div class="square"> <span class="content">{</span ><span class="content">[</span> </div> <div class="square"> <span class="content">}</span ><span class="content">]</span> </div> <div class="square"> <span class="content">|</span ><span class="content">\</span> </div> </div> <div class="line-4"> <div class="caps square"> <span class="">●</span><span class="">caps lock</span> </div> <span class="square">A</span> <span class="square">S</span> <span class="square">D</span> <span class="square">F</span> <span class="square">G</span> <span class="square">H</span> <span class="square">J</span> <span class="square">K</span> <span class="square">L</span> <div class="square"> <span class="content">:</span ><span class="content">;</span> </div> <div class="square"> <span class="content">"</span ><span class="content">'</span> </div> <div class="delete square"> <span class="">return</span> </div> </div> <div class="line-5"> <div class="shift square"> <span class="">shift</span> </div> <span class="square">Z</span> <span class="square">X</span> <span class="square">C</span> <span class="square">V</span> <span class="square">B</span> <span class="square">N</span> <span class="square">M</span> <div class="square"> <span class="content"><</span ><span class="content">,</span> </div> <div class="square"> <span class="content">></span ><span class="content">.</span> </div> <div class="square"> <span class="content">?</span ><span class="content">/</span> </div> <div class="shift2 square"> <span class="">shift</span> </div> </div> <div class="line-2"> <div class="square font-size"> <div class="content fn">fn</div> <span class="content sub-fn">⎈</span> </div> <div class="square font-size"> <span class="content fn">^</span> <span class="content">control</span> </div> <div class="square font-size"> <span class="content fn">⎇</span> <span class="content">option</span> </div> <div class="square font-size command"> <span class="content fn">⌘</span> <span class="content">command</span> </div> <div class="square space-bar"> <span class="content"></span> </div> <div class="square font-size command"> <span class="content fn-last">⌘</span> <span class="content">command</span> </div> <div class="square font-size"> <span class="content fn-last">⎇</span> <span class="content">option</span> </div> <div class="arrow-wrapper"> <span class="f-key arrow">▲</span> <div class="down-arrows"> <span class="f-key arrow">◀︎</span> <span class="f-key arrow">▼</span> <span class="f-key arrow">▶︎</span> </div> </div> </div> </div> <div class="track-pad"></div> </div> </div> </div> </div> <div class="back-side"> <!-- <div class="section-1"> <div class="back-dot">●</div> <div class="back-dot">●</div> </div> <div class="section-1"> <div class="back-dot">●</div> <div class="back-dot">●</div> </div> --> </div> </div> </div>

2. Load the required stylesheet within the doc.

<link rel="stylesheet" href="style.css" />

3. Override the default styles.

:root {
  --gold-color: #ffd8bf;
  --white: #ebe6e6;
  --gold-shadow: #a87961;
  --white-plain: #fff;
  --black: #202124;
  --black-plain: #000;
  --dark-gold: #9f6e57;
  --light-gold: #f9d2b8;
}

Macbook (M1) Keyboard Mockup, M1 Macbook Keyboard using HTML & CSS Github, apple m1 macbook pro