Some desktop environments can be styled with CSS and JS, e.g. the GNOME DE in Linux, and there are even mock ups of Windows 10 using CSS (https://codepen.io/MohamedElGhandour/pen/GEbwEW, https://github.com/kexanie/csswin10). Today, your task is to do up a mockup of the iOS homepage. You will find the default wallpaper, and 20 icon images, for your use in the appropriate folders here.
- Re-create the following home screen in a web page as closely as possible, including the dock at the bottom of the screen.
-
Write the app names without writing any text in a div.
-
Make the battery icon slowly empty. You may use JS to achieve this.
-
Make your screen responsive. The iPhone 5 supports 5 rows of 4 icons in portrait mode while the iPhone 8 Plus supports 6 rows of 4 icons in portrait mode, excluding the single row of icons in the dock. The iPad supports 5 rows of 4 icons in portrait mode.
- Make 2 pages of icons so that only 1 page is visible at any one time. You should be able to scroll from one page to the other and back smoothly.
- The
:beforeand:afterselectors - CSS filter - blur