13 Pure CSS Mobile Devices.css

We've created several minimal iPhone, Android, Lumia and iPad devices in pure CSS to showcase the prototypes our users make on Github. Made with love by M Ramzan Ch.

Update: Brand new iPhone X and Samsung Galaxy Note 8. Just include devices.min.css and grab the code below!

Star
Download on Github

iPhone X

Grab the code

To use this pure CSS iPhone X, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone-x">
    <div class="notch">
        <div class="camera"></div>
        <div class="speaker"></div>
    </div>
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="bottom-bar"></div>
    <div class="volume"></div>
    <div class="overflow">
        <div class="shadow shadow--tr"></div>
        <div class="shadow shadow--tl"></div>
        <div class="shadow shadow--br"></div>
        <div class="shadow shadow--bl"></div>
    </div>
    <div class="inner-shadow"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

Galaxy Note 8

Grab the code

To use this pure CSS Galaxy Note 8, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device note8">
    <div class="inner"></div>
    <div class="overflow">
        <div class="shadow"></div>
    </div>
    <div class="speaker"></div>
    <div class="sensors"></div>
    <div class="more-sensors"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

iPhone 8

Grab the code

To use this pure CSS iPhone 8, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone8 silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

iPhone 8 Plus

Grab the code

To use this pure CSS iPhone 8 Plus, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone8plus black">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

iPhone 5S

Grab the code

To use this pure CSS iPhone 5S, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone5s">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

iPhone 5C

Grab the code

To use this Pure CSS iPhone 5C, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone5c green">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

iPad Mini

Grab the code

To use this pure CSS iPad Mini, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device ipad silver">
    <div class="camera"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
</div>

iPhone 4S

Grab the code

To use this pure CSS iPhone 4S, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device iphone4s silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

Nexus 5

Grab the code

To use this pure CSS Nexus 5, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device nexus5">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

Lumia 920

Grab the code

To use this pure CSS Lumia 920, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device lumia920 yellow">
    <div class="top-bar"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

Samsung Galaxy S5

Grab the code

To use this pure CSS Galaxy S5, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device s5 white">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
</div>

HTC One

Grab the code

To use this pure CSS HTC One, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device htc-one">
    <div class="top-bar"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
</div>

MacBook Pro

Grab the code

To use this pure CSS Macbook Pro, download & include devices.min.css from Github, and paste the code below into your page.

						
<link rel="stylesheet" href="devices.min.css" type="text/css">
						
					
					<div class="marvel-device macbook">
    <div class="top-bar"></div>
    <div class="camera"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="bottom-bar"></div>
</div>