Close

Flexbox Article Layout

This is an example of a simple article layout designed using HTML, CSS and Flexbox layout style. Flexbox styles had been added to the code, before other styles. The body of the form is given the styles of background as #EDD382, text-align as center, padding as 2em, font-family as ‘Source Sans Pro', sans-serif, font-size as 1.4em, font-weight as 300, and line-height as 1.6em. The header is given a font-weight of 900 and text-transform is set to uppercase to automatically transform text to uppercase. The body of the article is given the styles of font-family as 'Georgia', Times, serif, and line-height as 1.6em. The Read More button has the initial styles of color of #000, display of inline-block, border-bottom of 4px solid #000, text-transform of uppercase, font-weight of 900, letter spacing of .1em, and a background color of #FF521B which takes a transition of .2s all in a hover event to take the styles padding-left of .75em, padding-right of .75em, color of #fff, and a border color of #FF521B. Source: https://codepen.io/jondaiello/pen/wWWmNB

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.