What better way to run a web design Community Project than on CodePen? In this, the first of such challenges, I want you to check out our example pen, fork it and improve it. That’s all you have to do. The best examples will be showcased in a week or so!
Entries for this challenge are now closed–take a look at what you all came up with!
<h1> section headings, then appends a link to each one allowing users to share that link.
The link itself is hidden until the user hovers over the title.
We want you to make this link look awesome. Maybe you’ll switch the text out for an icon of some sort? Or make the link much smaller and give it a background? Perhaps the opacity change is a bit safe for you–give it some animated pizzazz? Do anything you want, as long as it happens within the realms of the CSS tab.
Over to You
Here’s what you need to do, in a few dead easy steps.
Firstly, head on over to the demo on CodePen. This is what it looks like:
Hit the Fork button to create your own copy of it, then make as many changes as you want to the CSS.
Step 3 (Optional)
If you’re signed into CodePen you can edit the description by hitting the Info button. Use this to give folks an idea of what you’ve done.
Hit Save, you’re done. Be sure to let us know in the comments when you’ve finished–and feel free to let us know by tweeting us @wdtuts as well.
That’s it! All entries will be added to this collection on CodePen and the best examples will be showcased on Tuts+ in a week or so!
Good luck and don’t forget to follow Tuts+ on Codepen!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post