Close

News Cards

This is an example of a News Card 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 fonts and images are imported to the form with their URLs. The colors and fonts are declared as variables, which are $regal-blue: #034378, $san-juan: #2d4e68, $bermuda: #77d7b9, $white: #fff, $black: #000, and $open-sans: 'Open Sans'. The body of the form has the styles of background-image as linear-gradient(to right, $regal-blue, $san-juan), height as 100vh, and font-family as $open-sans. For the first example, date section has the styles of background-color: $bermuda, color: $white, font-weight: 700, font-size: 24px, and text-transform: uppercase. The title is given the color lighten($black, 50%). The menu button has the styles text-align: center¸and cursor: pointer. For the second example, the header has the styles color: $white, padding: 1em, and the date has the styles font-size: 12px. The read more button is given the styles text-align: center, font-size: 12px, color: $white, and a transform of translate(0, -50%). Source: https://codepen.io/choogoor/pen/YWBxAg/

Post Comment or Questions

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

Your email address will not be published.

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