html5-device-mockups

by pixelsign

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website.

3.5K Stars 395 Forks Last release: 3 months ago (3.3) MIT License 190 Commits 10 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Gitter GitHub release Bower npm License: MIT

HTML5 device mockups v3 :iphone::computer:

You can view the demo page here: https://pixelsign.github.io/html5-device-mockups/

Use on... * Your website / splash screen

For... * Displaying photos * Displaying screenshots of your app(s) * Displaying reference works / illustrations * Displaying a content rotator / slideshow * Embedding a JavaScript app inside the device * Embedding a YouTube video

Why? * Looks cool * Attracts customers * Makes your site look professional * Give people the idea that your app/site works on mobile * Give the impression that your illustrations are meant for web/mobile * Lots of screenshots in just one "device"

Features: * Maintains the device's aspect ratio when scaled * Perfectly aligned screen content containers * Some devices have "home button" layer defined for possible click event bindings * Multiple color schemes * Multiple orientations * 86 different device images

Devices

| Name | Filename | Orientations | Colors | | --- | --- | --- | --- | | Chromebook | Chromebook | portrait | black | | Galaxy S3 | galaxyS3 | portrait, landscape | black, white | | Galaxy S5 | galaxyS5 | portrait, landscape | black, white, gold | | Galaxy Tab 4 | galaxyTab4 | portrait | black, white | | HTC One M8 | HtcOneM8 | portrait, landscape | black | | Huawei P8 | HuaweiP8 | portrait, landscape | gold | | iMac | iMac | portrait | black | | iPad | iPad | portrait, landscape | black, white | | iPad Air 2 | iPadAir2 | portrait, landscape | black, white, gold | | iPad Pro | iPadPro | portrait, landscape | black, white, gold | | iPhone 6 | iPhone6 | portrait, landscape | black, white, gold | | iPhone 6 Plus | iPhone6Plus | portrait, landscape | black, white, gold | | iPhone SE | iPhoneSE | portrait, landscape | black, white, gold, pink | | iPhone 5 | iPhone5 | portrait, landscape | black, white | | iPhone 6 Hand | iPhone6Hand | portrait | black, white | | iPhone 7 Hand | iPhone7Hand | portrait | black | | iPhone 7 Hand 2 | iPhone7Hand_2 | portrait | black | | iPhone 7 | iPhone7 | portrait, landscape | black, white, gold, pink, red | | iPhone X | iPhoneX | portrait, landscape | black | | Lumia 930 | Lumia930 | portrait, landscape | black, white | | Macbook | Macbook | portrait | black, white, gold | | Macbook 2015 | Macbook2015 | portrait | black, white, gold | | MacbookPro | Macbook2015 | portrait | black | | Pixel | Pixel | portrait | black, white | | Samsung TV | SamsungTV | portrait | black | | Surface Pro 3 | SurfacePro3 | landscape | black | | Surface Studio | SurfaceStudio | portrait | black |

Integrating to your website:

Bower

bower install html5-device-mockups

npm

npm i html5-device-mockups

Old traditional way


Usage

Use this example or grap the code from the HTML generator on our demo site:

FAQ

"I can not control the height of the device"

https://github.com/pixelsign/html5-device-mockups/issues/47

Created by:

Tomi Hiltunen * [email protected] * http://innovaniac.com

Angelos Arnis * [email protected] * http://dribbble.com/pixelsign

Benjamin Bortels * [email protected] * https://benjaminbortels.de

Credits for the original graphical renderings of the devices used in this package are found in a separate file which is provided with this package.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.