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

Landscape

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

Landscape

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

Black
White
Gold
Landscape

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

Black
White
Gold
Landscape

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

Black
White
Gold
Landscape

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

White
White
Yellow
Green
Blue
Landscape

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

Black
White
Landscape

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

Black
White
Landscape

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

Landscape

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

Black
White
Yellow
Red
Blue
Landscape

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

White
Black
Landscape

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

Landscape

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>