THEMETRIAL

Realistic iOS Screen Mockup In Pure CSS

Author:MatejaSrejic
Views Total:0 views
Official Page:Go to website
Last Update:January 21, 2021
License:MIT

Preview:

Realistic iOS Screen Mockup In Pure CSS

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="https://www.cssscript.com/./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;
}


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.