Realistic iOS Screen Mockup In Pure CSS

Preview:

Description:

An HTML/CSS only iOS 14 home screen mockup that can be used to showcase your artwork in a realistic way.

How to use it:

1. Code the HTML for the iOS home screen mockup.

<div class="wrapper">
  <div class="ui">
    <!-- Everything on the OS goes ere. -->
    <div class="row">
      <div class="mail icon"></div>
      <div class="calendar icon"></div>
      <div class="photos icon"></div>
      <div class="camera icon"></div>
    </div>
    <div class="row">
      <div class="maps icon"></div>
      <div class="clock icon"></div>
      <div class="weather icon"></div>
      <div class="calculator icon"></div>
    </div>
    <div class="row">
      <div class="myshortcuts icon"></div>
      <div class="notes icon"></div>
      <div class="reminders icon"></div>
      <div class="files icon"></div>
    </div>
    <div class="widget-2"></div>
    <div class="row">
      <div class="health icon"></div>
      <div class="appstore icon"></div>
      <!--<div class="itunes icon"></div>
      <div class="books icon"></div>-->
    </div>
    <div class="row">
      <div class="wallet icon"></div>
      <div class="settings icon"></div>
      <!--<div class="appletv icon"></div>
      <div class="home icon"></div>-->
    </div>
    <div class="widget-4"></div>
    <div class="bottombar">
      <div class="call icon"></div>
      <div class="safari icon"></div>
      <div class="iosmessage icon"></div>
      <div class="itunes icon"></div>
    </div>
  </div>
</div>

2. Load the app icons into the document.

<link rel="stylesheet" href="./css/appicons.css" />

3. Add the iPhone mockup to the page.

body {
  background-position-x: 10px;
  background-position-y: 10px;
  background-image: url('./prototype/screen-mockup.png');
  background-repeat: no-repeat;
  background-size: 300px;
}