Close

MDB cards

This is a simple example of a card layout web form, designed using CSS and HTML. The images have been added to the form with their image URLs imported. The styles are added according to the shapes of the polygon in the cards. An initial filter of drop shadow(5px 5px 15px #388BDF) is added to the cards. The clip-blue-polygon initially has the styles of top as -0.3125rem, left as -0.1875rem, background as linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A), clip-path as polygon(0 0, 100% 0%, 71% 100%, 0% 100%), and border-radius as .75rem. The clip-smaller-polygon also has the same initial style set except for the clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%). Clip-mirror-polygon is given the styles of transform: scaleX(-1), top:-0.3125rem, left:-15rem, background: linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A), clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%), and border-radius: .75rem. A sheen effect is added to the last polygon with the style animation: sheening 1s forwards.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.