old-apple-site-clone

This was my attempt at cloning the old 2014 Apple website as depicted on the Wayback machine's archive at (https://web.archive.org/web/20140301004610/http://www.apple.com/).

The navbar on the original used an image sprite to depict the gradient background, the Apple logo on the first link, and even the link names. I had to do it with the gradient function in CSS. It didn't quite turn out like the original, but that boils down to the fact that they used a unique image, I suppose.

Still, they had to use lots of hacks back then to get things to work. All the text under the navbar in the main section, for example, wasn't really text. It was images. The anchor that starts with "Watch the 'Your Verse' film..." uses an image sprite to change the text-decoration to underlined on hovering with the mouse. It's incredible!

I actually got so interested in their methods that I decided ton reproduce the 'Your Verse' anchor's image sprite, just to challenge myself. The rest was pure text. Overall, it was a fun project and I enjoyed doing it. It made me appreciate just how far the CSS specification has come since 2014.

screenshot

Built With

  • HTML,
  • CSS,

Live Demo

Live Demo Link

Here's a Production Demo Link that changes as changes are made to the code. It's mainly for the sake of future edits.

Author

👤 Ramsey Njire

🤝 Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!