Dom Jocubeit jocubeit

Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups.

Dot Digit Input

The nice input with dots that you fill. One of my YouTube subscribers asked me how to do that you can find that on some websites this cool thing. And I was wondering how they do that. Some messed up tricks and wacks and we got this. It also works on the phone

A Pen by Godje on CodePen.

License.

Draggable Translucent Modal

Building off of a translucency exercise that I completed a few days ago. This one is even more fun!

A Pen by Jesse Couch on CodePen.

License.

Fluid tab bar

Remake of Fluid Tab Bar Interaction on dribbble https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction

Icons from the Nuon project

A Pen by Mikael Ainalem on CodePen.

License.

CSS Card Flip

Simple card flip using CSS 3D transforms and transitions

A Pen by Cole Bemis on CodePen.

License.

Card Flip

A simple card flip effect using Anime.js

A Pen by Marcos Paulo on CodePen.

License.

	<div class="container">

	<div class="demo-flex-spacer"></div>

	<div class="webflow-style-input">
	<input class="" type="email" placeholder="What's your email?"></input>
	<button type="submit"><i class="icon ion-android-arrow-forward"></i></button>
	</div>

	<div class="demo-flex-spacer"></div>

	<div class="password-wrapper">
	<input id="password-field" type="password" class="input" name="password">
	<div class="icon-wrapper">
	<span toggle="#password-field" class="ion ion-eye field-icon toggle-password"></span>
	</div>

	<div class="strength-lines">
	<div class="line"></div>
	<div class="line"></div>
	<div class="line"></div>

	%input#button{type:"checkbox"}
	%label{for:"button"} Click Me!
	%div.modal
	%div.content Pure CSS Modal! No JS!

	input(type='radio', name='choice', id='spaces', checked)
	input(type='radio', name='choice', id='tabs')
	mixin card(content, answer, id)
	.card(class=`${answer ? 'card--answer' : ''} ${id ? `card--${id}` : ''}`)
	.card__content= content
	footer.card__footer
	-if(answer)
	img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-Black-Small.png")
	-else
	img(src="http://blog.codepen.io/wp-content/uploads/2012/06/Button-White-Small.png")