Skip to content

lhjd/css-ios

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published