Skinning: Product Details

version 1.0.0 | Last Update: March 25, 2019

Within the below "Memento" - Movie example you will find all the elements you need to be able to design your own product details. Replace the elements in the JS section with your own content, replace the screengrab that represents the video background with your own to match your complete design.

save the CSS as: option-product.css

Memento: Polaroid Design

See the Pen Showtag: Product Details by Ewald Bos (Showtag) on CodePen.

This product details design uses nth-of-type selector for the similar product array, used in this example to rotate each and every individual array element
Design: Inhouse

Some other examples

The Voice of Holland

See the Pen Showtag: Product Details - The Voice by Ewald Bos (Showtag) on CodePen.

Basic design of the product Details where an icon is added to the ExternalLink with CSs:Before
Design: Inhouse