Werewolf? There Wolf.

This is a submission for Frontend Challenge - Halloween Edition, Perfect Landing

What I Built

For the Halloween Challenge, I chose to look at my favorite monster, the werewolf. Toy Photography is a hobby, so why not use it to build a landing page. Using code and photography I made a page to showcase some werewolf toys. Most are LEGO but there are a few action figures.

Demo

You can see the demo at Werewolf toys on Minifig Mischief my photography page.

Journey

HTML and CSS were used to build out the page. No JavaScript yet. If I can think of some thing interesting or interactive I'll add it. This is more of a show and tell page.

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.

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"