Skip to content

Instantly share code, notes, and snippets.

Avatar

Dom Jocubeit jocubeit

View GitHub Profile
View circular-calendar-display.markdown

Circular Calendar Display

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

A Pen by Matthew Juggins on CodePen.

License.

@jocubeit
jocubeit / index.html
Created Mar 18, 2019
Webflow-style email input
View index.html
<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>
View dot-digit-input.markdown

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.

@jocubeit
jocubeit / index.html
Created Mar 18, 2019
password strength validation with visibility toggle
View index.html
<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>
View draggable-translucent-modal.markdown

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.

View index.haml
%input#button{type:"checkbox"}
%label{for:"button"} Click Me!
%div.modal
%div.content Pure CSS Modal! No JS!
View fluid-tab-bar.markdown
@jocubeit
jocubeit / index.pug
Created Mar 18, 2019
Pure CSS Cards Against Developers(Tap to choose!) 😈😅 #CodePenChallenge
View index.pug
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")
View css-card-flip.markdown
View card-flip.markdown
You can’t perform that action at this time.