Newspaper Layout using CSS Columns

HTML
<article> <h1>Newspaper Title</h1> <div class="time"> <time>Tuesday, September, 5th, 2014</time> </div> <section> <h2>Subheading to the article</h2> <p lang="en">Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit tempus porttitor.</p> <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <blockquote> "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus." </blockquote> <p>Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p> <h3>Subheading</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</p> <h3>Subheading</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p> </section> </article>
CSS
::selection { background: #808080; color: #E6E6E6; } ::-moz-selection { background: #808080; color: #E6E6E6; } body { font-family: 'PT Serif', serif; background-color: #f9f7f1; color: #404040; padding: 20px; } blockquote { font-family: 'Oswald', sans-serif; line-height: 1.2em; font-size: 1.8em; column-span: 2; -webkit-column-span: 2; margin: 0px; padding: 0px; margin-left: 5px; } h1 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 4em; line-height: 1em; text-align: center; font-weight: 700; padding: 0px; margin: 0px; margin-bottom: 32px; } h2, h3, h4, h5, h6 { font-family: 'PT Sans Narrow', sans-serif; } h2 { font-size: 3em; line-height: 1em; margin-top: 10px; margin-bottom: 10px; } h3 { font-size: 2.4em; margin: 0px; padding: 0px; line-height: 0.8em; padding-top: 20px; } .time { text-align: center; font-family: 'PT Sans Narrow', sans-serif; border-top: 3px solid #333; border-bottom: 3px solid #333; font-size: 1.6em; padding-top: 12px; padding-bottom: 12px; margin-bottom: 30px; font-weight: 700; text-transform: uppercase; } @media only all and (min-width: 600px) { article { -moz-columns: 3; /* How many columns? */ -webkit-columns: 3; columns: 3; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; line-height: 1.5em; font-size: 1em; -webkit-column-rule: 2px outset #444; -moz-column-rule: 2px outset #444; column-rule: 2px outset #444; } h1 { font-size: 8em; column-span: all; -webkit-column-span: all; } .time { column-span: all; -webkit-column-span: all; } p { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; hyphenate-character: "\u2605"; } }
JAVASCRIPT
Expand for more options Login