Thread by @Prathkum

CSS arts are simple🌈
Let's make this laptop in a few simple steps👇

THREAD🧵

STEPS

- Create screen
- Create base
- Create touch pad
- Create key's base
- Create keys

STEP 1: Create Screen

- Create a rectangle for our laptop screen
- Set background color as white

- Set a black solid border for side bezel
- Top border should be larger as compared to side and bottom border
- Set a bit border-radius as well to give it more natural look

STEP 2: Create Base

- We need a Trapezium shape for the base of the laptop
- I have used border technique to achieve trapezium, you can use any other trick

- Add volume to the base so that it looks more realistic
- Create a narrow strip and place it at the bottom of the base
- Add border-radius at bottom left and bottom right

STEP 3: Create Touch Pad

- Again we need a trapezium but this time top and bottom side is almost equal
- Place touch pad to the center of the base

STEP 4: Create Key's base

- Again create a trapezium for the key's base
- Place it at the center of the base

STEP 5: Create Keys

- Creating the keys is very simple. We will use box-shadow method to create multiple keys
- Make a small solid white square

- Create second key using box-shadow
- Repeat the box-shadows to get multiple keys

FINAL OUTPUT😍

SOURCE CODE: @CodePen

codepen.io/prathamkumar/p…