Project Name:
Fire Emblem Character Selector
Software & Technologies Used:
-Adobe Photoshop
-CSS/SASS
-HTML
-VS Code
Client:
Fanshawe College (Assignment)
Link:
Fire Emblem Character SelectorDescription:
A character selector based off of Fire Emblem Heroes, that shows information of each character via their own lightbox!
This was a project in my first term where we were tasked with making a character selector for any series we wanted. I wanted to branch away from Pokemon for a moment and focus on another series I loved; Fire Emblem!
Our task was to display six characters, containing their own images, names, and biography. At the time, this was all hard coded. Each character lived in their own lightbox, and when you click on a character, it would open the corresponding lightbox.
At the time, position: absolute and position:relative were some of the banes of my existence. It was rather rough to place the elements how I wanted them, but in the end, with enough patience and perseverance, I managed to get the result I achieved, using the methods taught in class mixed with some trial and error too.
Since this was a Term 1 assignment, everything is hard coded. If I was to go back and revisit this website, I would take out all of the hard coded information and use an array to dynamically generate and display all of the information.
In fact, I have another project where I did just that. My Pokemon Trainer website accomplishes something similar, minus the lightboxes.
Thumbnail
This assignment challenged us to use a single image and use CSS to dynamically select the area we want to feature in the boxes. Then, on a hover, it changes the display.
The golden bars are toggleable in size on a hover, using position: absolute to keep its positioning on the screen. It adds a nice little touch to spice up any profile!
The character information is displayed in a lightbox. Originally, we hard coded the information with different lightboxes, but now I would just use an array and javascript!
Thumbnail
Thumbnail
Thumbnail