:root { /*======= 1st row button =============*/ --boxShadow: 0 -10px 0 #848484; --boxShadow1: 8px -10px 0 #848484; --boxShadow2: 18px -10px 0 #848484; --boxShadow3: 26px -10px 0 #848484; --boxShadow4: 36px -10px 0 #848484; --boxShadow5: 44px -10px 0 #848484; --boxShadow6: 54px -10px 0 #848484; --boxShadow7: 62px -10px 0 #848484; --boxShadow8: 72px -10px 0 #848484; --boxShadow9: 80px -10px 0 #848484; --boxShadow10: 90px -10px 0 #848484; --boxShadow11: 98px -10px 0 #848484; --boxShadow12: 108px -10px 0 #848484; --boxShadow13: 116px -10px 0 #848484; --boxShadow14: 126px -10px 0 #848484; --boxShadow15: 134px -10px 0 #848484; /*======== 2nd row button =============*/ --boxShadowH: 10px 0 0 #848484; --boxShadowH1: 20px 0 0 #848484; --boxShadowH2: 30px 0 0 #848484; --boxShadowH3: 40px 0 0 #848484; --boxShadowH4: 50px 0 0 #848484; --boxShadowH5: 60px 0 0 #848484; --boxShadowH6: 70px 0 0 #848484; --boxShadowH7: 80px 0 0 #848484; --boxShadowH8: 90px 0 0 #848484; --boxShadowH9: 100px 0 0 #848484; --boxShadowH10: 110px 0 0 #848484; --boxShadowH11: 120px 0 0 #848484; --boxShadowH12: 130px 0 0 #848484; --boxShadowH13: 140px 0 0 #848484; /*======== 3rd row button =============*/ --boxShadowV: 0 10px 0 #848484; --boxShadowV1: 10px 10px 0 #848484; --boxShadowV2: 20px 10px 0 #848484; --boxShadowV3: 30px 10px 0 #848484; --boxShadowV4: 40px 10px 0 #848484; --boxShadowV5: 50px 10px 0 #848484; --boxShadowV6: 60px 10px 0 #848484; --boxShadowV7: 70px 10px 0 #848484; --boxShadowV8: 80px 10px 0 #848484; --boxShadowV9: 90px 10px 0 #848484; --boxShadowV10: 100px 10px 0 #848484; --boxShadowV11: 110px 10px 0 #848484; --boxShadowV12: 120px 10px 0 #848484; --boxShadowV13: 130px 10px 0 #848484; --boxShadowV14: 140px 10px 0 #848484; /*======== 4th row button =============*/ --btn: 0 20px 0 #848484; --btn1: 10px 20px 0 #848484; --btn2: 20px 20px 0 #848484; --btn3: 30px 20px 0 #848484; --btn4: 40px 20px 0 #848484; --btn5: 50px 20px 0 #848484; --btn6: 60px 20px 0 #848484; --btn7: 70px 20px 0 #848484; --btn8: 80px 20px 0 #848484; --btn9: 90px 20px 0 #848484; --btn10: 100px 20px 0 #848484; --btn11: 110px 20px 0 #848484; --btn12: 120px 20px 0 #848484; --btn13: 130px 20px 0 #848484; --btn14: 140px 20px 0 #848484; /*======= 5th row button =============*/ --switch: 0 30px 0 #848484; --switch1: 10px 30px 0 #848484; --switch2: 20px 30px 0 #848484; --switch3: 30px 30px 0 #848484; /*========= space bar =============*/ --switch4: 40.5px 30px 0 #848484; --switch5: 48.5px 30px 0 #848484; --switch6: 56.5px 30px 0 #848484; --switch7: 64.5px 30px 0 #848484; --switch8: 72.5px 30px 0 #848484; --switch9: 80.5px 30px 0 #848484; --switch10: 88.5px 30px 0 #848484; /*==================================*/ --switch11: 100px 30px 0 #848484; --switch12: 110px 30px 0 #848484; --switch13: 120px 30px 0 #848484; --switch14: 130px 30px 0 #848484; --switch15: 140px 30px 0 #848484; /*============touch pad==============*/ --touchPad: 50px 43px 0 #848484; --touchPad1: 58px 43px 0 #848484; --touchPad2: 66px 43px 0 #848484; --touchPad3: 74px 43px 0 #848484; --touchPad4: 82px 43px 0 #848484; --touchPad5: 90px 43px 0 #848484; --touchPad6: 50px 50px 0 #848484; --touchPad7: 58px 50px 0 #848484; --touchPad8: 66px 50px 0 #848484; --touchPad9: 74px 50px 0 #848484; --touchPad10: 82px 50px 0 #848484; --touchPad11: 90px 50px 0 #848484; } body { margin: 0; padding: 0; height: 100vh; font-family: sans; background: linear-gradient(to top right,#ff0073,#d9ff59,#4a87ff,#fd05d4); } h2 { margin: 30px 0; text-align: center; color: orange; transform: rotate(15deg); animation: shake 0.3s ease-in infinite alternate; } @keyframes shake { from { transform: rotate(15deg); } to { transform: rotate(-15deg); } } div.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) perspective(400px); width: 155px; height: 90px; transform-style: preserve-3d; } div.box span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; transform-style: preserve-3d; } div.box span.scrn { top: -10px; background: rgba(255,255,255,0.3); border: 5px solid #353535; transform: rotateX(180deg) translateZ(65px); animation: load 10s linear infinite; } div.box span.scrn h3 { margin: 35px 0; color: #fff; opacity: 0; text-align: center; transform: rotateX(-180deg); animation: fade 10s linear infinite; } @keyframes fade { 0%,100% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: 0; } } @keyframes load { 0% { background: red; } 20% { background: #59D44D; } 40% { background: #0D94C3; } 60% { background: #CFBF3E; } 80% { background: purple; } 100% { background: orange; } } div.box span.scrn:before { content:""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; background: #fff; border-radius: 50%; } div.box span.keybrd { border-width: 5px; border-style: solid; border-color: transparent #848484 #848484 #848484; background: #E4E4E4; transform: rotateX(75deg) translateZ(-54px); box-shadow: inset 0 3px 5px rgba(0,0,0,0.5), 0 15px 5px -8px rgba(0,0,0,0.5); } div.box span.keybrd:before, div.box span.keybrd:after { content:""; position: absolute; } div.box span.keybrd:before { top: 5%; left: 2%; right: 2%; bottom: 5%; background: #fff; } div.box span.keybrd:after { top: 25%; left: 3%; width: 8px; height: 8px; background: #848484; box-shadow: /*>>>>>>>>>>>> 1st row button <<<<<<<<<<<<*/ var(--boxShadow), var(--boxShadow1), var(--boxShadow2), var(--boxShadow3), var(--boxShadow4), var(--boxShadow5), var(--boxShadow6), var(--boxShadow7), var(--boxShadow8), var(--boxShadow9), var(--boxShadow10), var(--boxShadow11), var(--boxShadow12), var(--boxShadow13), var(--boxShadow14), var(--boxShadow15), /*>>>>>>>>>>>> 2nd row button <<<<<<<<<<<<*/ var(--boxShadowH), var(--boxShadowH1), var(--boxShadowH2), var(--boxShadowH3), var(--boxShadowH4), var(--boxShadowH5), var(--boxShadowH6), var(--boxShadowH7), var(--boxShadowH8), var(--boxShadowH9), var(--boxShadowH10), var(--boxShadowH11), var(--boxShadowH12), var(--boxShadowH13), /*>>>>>>>>>>>> 3rd row button <<<<<<<<<<<<*/ var(--boxShadowV), var(--boxShadowV1), var(--boxShadowV2), var(--boxShadowV3), var(--boxShadowV4), var(--boxShadowV5), var(--boxShadowV6), var(--boxShadowV7), var(--boxShadowV8), var(--boxShadowV9), var(--boxShadowV10), var(--boxShadowV11), var(--boxShadowV12), var(--boxShadowV13), var(--boxShadowV14), /*>>>>>>>>>>>> 4th row button <<<<<<<<<<<<*/ var(--btn), var(--btn1), var(--btn2), var(--btn3), var(--btn4), var(--btn5), var(--btn6), var(--btn7), var(--btn8), var(--btn9), var(--btn10), var(--btn11), var(--btn12), var(--btn13), var(--btn14), /*>>>>>>>>>>>> 5th row button <<<<<<<<<<<<*/ var(--switch), var(--switch1), var(--switch2), var(--switch3), /*>>>>>>>>>>> space bar <<<<<<<<<<<<<<<*/ var(--switch4), var(--switch5), var(--switch6), var(--switch7), var(--switch8), var(--switch9), var(--switch10), /*>>>>>>>>>>>>>>>>>>>================>>><<<<*/ var(--switch11), var(--switch12), var(--switch13), var(--switch14), var(--switch15), /*==========touch pad==============*/ var(--touchPad), var(--touchPad1), var(--touchPad2), var(--touchPad3), var(--touchPad4), var(--touchPad5), var(--touchPad6), var(--touchPad7), var(--touchPad8), var(--touchPad9), var(--touchPad10), var(--touchPad11); }

CSS laptop design