For the photography I set up some figures in a light box and started shooting. I have a table set up in my flex office. There are also a couple of older photos.
screengrab of a web page. the header says
I built an information card with facts about each figure. This included product name, company, and when it was released, plus a little blurb or fun fact about about the figure.
Animation
When a user hovers over the picture, a green shadow appears and the images tilts. Once the user clicks the pic a larger version opens.
a > img {
width: 113px;
height: 150px;
}
a > img:hover {
box-shadow: 4px 4px 2px 2px rgba(101, 215, 70, 0.5);
transform: scale(0.90);
transform: skewY(-15deg);
}
Styling a List
For the facts list I wanted to make the disc look like the moon. But I couldn't find how to color the list-style icon. I was positive I've done it before. Found position information but couldn't find a solution for color. I decided to try an image instead.
A full moon emoji SVG was added to decorate the informational unordered list. The actual list-style was set to none. Then the SVG is added to each item. I set the image size to line up with the text. It looked good. Then I tested the site in Lighthouse.
The image gave a low lighthouse score for performance and not having an alt on every il image. The image size was set in CSS, but I guess Lighthouse wanted it set on every list item in the HTML. I didn't want be be that old school. Lighthouse also suggested adjusting the font color, needed more contrast from the background.
After more research, I finally found how to color a list item. By use the selector of marker. Then I had to play with sizing due to browsers differences and got the disc to look like a full moon. This got performance, accessibility, and SEO up to 100.
li::marker {
color: var(--yellow);
font-size: 25px;
}
Next Steps
I would like to add more figures to the page. Some of the figures have a human counterpart. It would be neat to photograph them and set the pics so a user could hover over it and it would change to the wolf version.
What's your favorite werewolf movie?
-- Thanks for reading
-$JarvisScript git commit -m "Werewolf, There wolf"