Extreme CSS Mimicry

This is a website that I created for an intermediate interactive media college course solely with HTML and CSS to resemble a given image in September 2021.

For this assignment, I was provided with only a Photoshop document and told to recreate it as closely as possible using HTML and CSS. The Photoshop document only included a desktop layout, so it was up to me how the site looked in mobile view. In order to complete this assignment, I extracted all icons from the Photoshop document using the slice tool, created a spritesheet out of the extracted icons, and used HTML and CSS very strategically to recreate the given images down to the smallest details.

After completing the assignment with only HTML and CSS, I used two jQuery plugins to add slight interactivity to the site. One of the plugins is a news ticker that rotates the text in the "Announcements" area of the page, and the other plugin displays a tooltip when the user hovers over the pie charts in the "Analytics" section. Below is a section of the reference image and my own recreation for comparison. View the full reference file here.

CSS Mimicry Reference
The reference image.
CSS Mimicry
My recreation.
View Github Repository Visit Live Site