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 Marvel. Made with love by Oleg.

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>