Recreating the archived 2014 version of apple.com website
We were to recreate an older version of apple website from scratch. The following is my version of the website
-
My version uses texts instead of picture positioning trick as texts are easier to render
-
In an attempt to use pure css and html for this project, I decided to go for "focus" pseudo class and add the background property, instead of expanding the whole search bar.
input#search:focus,
input#search:focus ~ i {
background: #fff;
color: black;
}- I used flex and margin auto to position elements as it was more convenient.
- I also used various icons from FontAwesome website.