Skip to content

Latest commit

 

History

History
24 lines (14 loc) · 1.29 KB

README.md

File metadata and controls

24 lines (14 loc) · 1.29 KB

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