I often find myself going on Dribbble, finding nice little UI widgets and re-creating them on CodePen. There are also a ton of beautiful website redesigns on there, just waiting to be implemented in HTML/CSS/JS. I feel an entire website redesign within CodePen would be a bit awkward, with the limited amount of space available. Therefore, I’ll just post them here.
This one is from a dribbble shot of a LinkedIn redesign. I started this project months ago, and this is my attempt at completing it before the calendar year flips.
It’s not an exact copy of the original design, as I felt it was a little too wide based on web standards. I’ve moved things around a bit and this was my final result. It’s not completely responsive across all breakpoints, but it’s pretty decent IMO.
Here’s a list of some of the tools I used:
- Laravel Elixir for Front End Compilation and Concatenation of assets. Here is a blog post explaning how to use it outside of Laravel.
- Flickity for the carousel.
- Font Awesome for Icon Fonts
- Simple Grid
If you’re interested, have a look at the GitHub repo for the code:
View on GitHub