pixelsign/html5-device-mockups

This project gives you ready-made device frames for phones, tablets, laptops, and desktop monitors that you can drop into any webpage. The frames are built from CSS and HTML, so they work in any browser without needing images to be swapped out manually. You put your own screenshot, video, or live app inside the frame, and it looks like it is running on a real device. The collection covers 27 different devices: iPhones going back to the iPhone 5 and up through the iPhone X, several iPad models, Galaxy phones and tablets, a Chromebook, a Macbook, an iMac, a Surface Pro, a Surface Studio, a Samsung TV, a Huawei P8, a Lumia 930, a Pixel, and an HTC One M8. Each device comes in the color options the real product shipped in, such as black, white, gold, pink, or red depending on the model. Most phones and tablets can be displayed in portrait or landscape orientation. The main use case is showing off an app or website in a portfolio or landing page. Instead of pasting a flat screenshot, you wrap it in one of these device frames so visitors can immediately picture it running on a real phone or laptop. You can also embed a live JavaScript app or a YouTube video inside the frame, so the device appears to be actively running something. Adding it to a project is straightforward. You can install it through npm or Bower with a single command, or just link the provided CSS file the traditional way. Then you add a short block of HTML, pick a device name, an orientation, and a color, and place your content inside the designated screen area. The README includes a working HTML snippet you can copy directly. The project is licensed under MIT, meaning you can use it in personal or commercial work without restrictions. It is a static, purely front-end library with no server component and no build step required beyond the CSS file.