About Challenge

This is my own challenge of creating 100 really interesting and hard (for me) snippets with HTML/CSS/JS technics. Also I'll use HTML and CSS preprocessors in my snippets and will make videos of how it was created for some of them.

11
Codepens are ready
64
Hours are spent
5
Snippets are in Picked Pens
16
Coffee cups

My Challenge Codepens

#11 Animated progress/skill bars collection

See the Pen Animated progress/skill bars collection by fox_hover (@fox_hover) on CodePen.

#10 Search field animations with material icons

See the Pen Search field animations with material icons by fox_hover (@fox_hover) on CodePen.

#9 Portfolio Items CSS3 transitions effects

See the Pen Portfolio Items CSS3 transitions effects by fox_hover (@fox_hover) on CodePen.

#8 CSS3 buttons hover effects with FontAwesome5

See the Pen CSS3 buttons hover effects with FontAwesome5 by fox_hover (@fox_hover) on CodePen.

#7 Pure CSS3 animated Illustration - Bakery

See the Pen Pure CSS3 animated Illustration - Bakery by fox_hover (@fox_hover) on CodePen.

#6 CSS3 accordion slider with Transitions and Flexbox

See the Pen CSS3 accordion slider with Transitions and Flexbox by fox_hover (@fox_hover) on CodePen.

#5 CSS3 Social buttons with Font Awesome vol.3

See the Pen CSS3 Social buttons with Font Awesome vol.3 by fox_hover (@fox_hover) on CodePen.

#4 CSS3 Mobile Menu Icons vol.2

See the Pen CSS3 Mobile Menu Icons vol.2 by fox_hover (@fox_hover) on CodePen.

#3 Pure CSS3 Teapot animated icon

See the Pen Pure CSS3 Teapot animated icon by fox_hover (@fox_hover) on CodePen.

#2 Pure CSS3 Checkboxes with FontAwesome

See the Pen Pure CSS3 Checkboxes with FontAwesome by fox_hover (@fox_hover) on CodePen.

#1 CSS3 Animated Whale Icon

See the Pen #100DaysofCodepen: Whale icon, fully CSS3 by fox_hover (@fox_hover) on CodePen.

Contact Me