The spirit of web design

Web design is an art, its canvas varied among the myriad devices your audience may use. Your masterpiece expresses who you are, what drives you, what inspires passion in your heart—your spirit.

Praesent sollicitudin auctor erat, in elementum augue ultricies non. Nam iaculis, sapien sit amet consequat interdum, tellus erat bibendum mauris, eget hendrerit felis velit vel ante. Morbi laoreet vitae ipsum ut semper. Vivamus ipsum ex, volutpat nec ultrices vitae, tincidunt a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dapibus felis sed augue facilisis, quis tincidunt eros blandit. Nulla maximus pretium lorem, in bibendum lacus condimentum sit amet. Maecenas nec enim imperdiet, mollis felis vitae, tincidunt lorem. Ut rhoncus sed elit id rutrum. Nam dictum ut elit ac pretium. Proin interdum erat velit, et congue nisl placerat.

Mix it up...

Conventional layouts are sometimes called for, but a little twist on the norm can be a sight for sore eyes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed magna nec elit fermentum bibendum. Etiam volutpat tempor nunc, non scelerisque nisi blandit nec. Pellentesque ac mollis lectus. Suspendisse a sem quis ante laoreet rutrum vitae quis nisi. Ut posuere, elit non lacinia congue, massa diam scelerisque dui, vel hendrerit eros mi sed sapien. Ut porta gravida ornare. Vivamus porttitor, nibh id commodo malesuada, lectus purus fermentum nulla, ac imperdiet metus dui mollis nibh. Fusce ullamcorper finibus iaculis. Etiam placerat lacus nec tellus tempus pulvinar. Ut pretium dolor sed est euismod, blandit egestas mi lacinia. Donec sed nibh metus. Quisque venenatis nibh ipsum, at interdum augue volutpat et. Fusce ut ex in odio egestas ullamcorper sit amet in lacus.

Praesent sollicitudin auctor erat, in elementum augue ultricies non. Nam iaculis, sapien sit amet consequat interdum, tellus erat bibendum mauris, eget hendrerit felis velit vel ante. Morbi laoreet vitae ipsum ut semper. Vivamus ipsum ex, volutpat nec ultrices vitae, tincidunt a tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dapibus felis sed augue facilisis, quis tincidunt eros blandit. Nulla maximus pretium lorem, in bibendum lacus condimentum sit amet. Maecenas nec enim imperdiet, mollis felis vitae, tincidunt lorem. Ut rhoncus sed elit id rutrum. Nam dictum ut elit ac pretium. Proin interdum erat velit, et congue nisl placerat.

Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.

Did you know?

We used two interesting techniques in this particular column. The first involves setting a fixed background image. Since background-attachment fixed sets the background image as a child of the body, only binding it to the the vertical boundaries of its parent element, we crafted a special image that is 1920 pixels wide and 1080 pixels tall, with the parts we want to display pinned to the right edge of the image. Then we set a color mask by using multiple background-image syntax: a linear gradient followed by a JPG. The linear gradient is set in RGBA colors. The result is a semi-transparent mask. Here is the syntax:

background: linear-gradient(rgba(120,120,120,0.98), rgba(120,120,120,0.30)), url(p7Zeitgeist/img/face.jpg);

The second technique we used is applied to the hmy-content DIV, which is set to position: sticky with a top position of 80 pixels so that it clears the fixed header. As you scroll the page, this column's text remains inside the viewport for as long as possible.

Contemplation

The ultimate value of life depends upon awareness and the power of contemplation rather than upon mere survival - Aristotle

Whimsy

We shouldn't be afraid to embrace whimsy, that nagging idea that life could be magical; it could be special if we were only willing to take a few risks - Donald Miller

Vision

Vision without action is merely a dream. Action without vision just passes the time. Vision with action can change the world - Joel A. Barker

a·sym·me·try

Noun. Lack of equality or equivalence between parts or aspects of something; lack of symmetry.
"There was an asymmetry between the last column and the ones before it. But it looks right."