A circular calendar and clock display, with and added weather and daily activity widget mock-ups.
A Pen by Matthew Juggins on CodePen.
jocubeit
/ circular-calendar-display.markdown
Created
March 18, 2019 02:15
Circular Calendar Display
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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
jocubeit
/ index.html
Created
March 18, 2019 02:06
password strength validation with visibility toggle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
jocubeit
/ draggable-translucent-modal.markdown
Created
March 18, 2019 02:00
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %input#button{type:"checkbox"} | |
| %label{for:"button"} Click Me! | |
| %div.modal | |
| %div.content Pure CSS Modal! No JS! |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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") |
Simple card flip using CSS 3D transforms and transitions
A Pen by Cole Bemis on CodePen.
A simple card flip effect using Anime.js
A Pen by Marcos Paulo on CodePen.
NewerOlder