dev-seahouse / css-ios

CSS iOS!

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.

Deliverables

• Re-create the following home screen in a web page as closely as possible, including the dock at the bottom of the screen.

Further

• 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.

Further

• 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.

Useful tools

• The :before and :after selectors
• CSS filter - blur