Close

Blog Cards

This is an example of a Blog Cards layout, designed using CSS and HTML. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display details in an orderly manner. The images have been imported to the form with their URLs. The body is given the styles of background as #f1f1f1, and margin as 2rem. Colors have been defined as variables; which are $color_white as #fff, $color_prime as #5ad67d, $color_grey as #e2e2e2, $color_grey_dark as #a2a2a2. The blog card has the styles of background: $color_white, line-height: 1.4, font-family: sans-serif, and border-radius: 5px. The details inside the card are given the styles color: $color_white, font-size: .9rem and, text-decoration: dotted underline.The photo takes a transform of scale(1.3) rotate(3deg) and a skew effect of skew(3deg) in a hover event whereas the list inside the card and the author name takes the color $color_prime in a mouse hover effect. Source: https://codepen.io/ChynoDeluxe/pen/bdXeqQ/

Post Comment or Questions

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

Your email address will not be published.