CSSDA Website Award Monograms

Your CSSDA WOTD Award Monogram

Congratulations on your achievement!

Please chose your official CSSDA WOTD monogram from the options below.

Option 1. Static PNG

Right click or drag to your desktop to download the PNG of your choice. Then place it on your site with a link back to your award page.

CSSDA WOTD Award Monogram white
CSSDA WOTD Award Monogram purple
CSSDA WOTD Award Monogram black

Option 2. Pure code - customizable, interactive & responsive

The CSSDA award monogram is the world's first 100% code based, fully customizable & responsive site award. Make your award monogram a piece of art that suits your site by editing the CSS via the Codepen window. How to use the pure code monogram:

1. Click the Codepen link below.
2. Copy and Paste the HTML from the Codepen window into your code.
3. Copy and Paste the CSS from the Codepen window into your code.

CSS Design Awards WOTD Monogram on Codepen »

- Change the positioning and decide if you want it 'absolute' or 'fixed’.
- Change the 'z-index' in order to move it forward or backward in your layout.
- Change the colors that you prefer and make it suit your site!
- Change the 'hover' animation to create your own unique version of the monogram.

See the Pen CSS Design Awards Monogram by Lorenzo Bocchi (@LorenzoBocchi) on CodePen.

Note: The monogram showing in the Codepen window is in a responsive mode.

Credit: Design by CSSDA, Code by Lorenzo Bocchi

Go to Top