A Pen by Brandon McConnell on CodePen.
CodeMyUI CodeMyUI
This file contains hidden or 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
| <section class="pricing-table"> | |
| <div class="card"> | |
| <h6 class="type">basic</h6> | |
| <div class="price"><span>$</span>20</div> | |
| <h5 class="plan">plan</h5> | |
| <ul class="details"> | |
| <li>FREE Stickers</li> | |
| <li>FREE Delivery</li> | |
| <li>24/7 support</li> | |
| </ul> |
CodeMyUI
/ credit-card-payment-form.markdown
Created
November 18, 2019 23:42
Credit Card Payment Form
Wanted to work with some masking so made a payment form so, using vanilla JS and the imask.js library, made a fairly simply payment form that uses regex patterns to detect the credit card type as the user is inputting values and properly applies the relevant spacing associated with that brand. Also wanted to do a smidge of style flair so made a simple SVG card that changes as the user fills out the form.
A Pen by Adam Quinlan on CodePen.
Wanted to experiment with this prototype of image slicing and combining the pieces together to create the full image in a slider.
A Pen by Jarrod Thibodeau on CodePen.
CodeMyUI
/ index.html
Created
November 18, 2019 23:03
Physic Milestones Timeline - Date 11 (24 days of animation)
This file contains hidden or 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
| <section class="timeline"> | |
| <ul> | |
| <li> | |
| <div> | |
| <time>1687</time> | |
| <div class="discovery"> | |
| <h1>Discovery</h1> | |
| <p> | |
| Laws of motion | |
| </p> |
CodeMyUI
/ drone-delivery-submit-css-animation.markdown
Created
November 15, 2019 02:42
Drone Delivery Submit CSS Animation
Based on a beautiful design by Hoang Nguyen https://dribbble.com/shots/7269049-Drone-Delivery-Progressing https://twitter.com/nguyenxuanhoan2/status/1178597565870198784
A Pen by Nikolay Talanov on CodePen.
CodeMyUI
/ index.html
Created
November 13, 2019 06:26
magnifying image view with zoom 🔍 +touch support
This file contains hidden or 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="image"> | |
| <a href="" target="_blank"> | |
| <img src="" alt=""> | |
| </a> | |
| </div> | |
| <div class="zoom"> | |
| <img class="zoom-image" src="" alt=""> | |
| </div> |
This file contains hidden or 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="intro"> | |
| <div class="popout-video"> | |
| <video src="https://ice-creme.de/codepen_live_view.mp4" playsinline controls class="intro-video" preload="auto" type="video/mp4" autoplay muted></video> | |
| <div class="popout-video__controls"> | |
| <div class="close-video"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="content"> |
This file contains hidden or 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
| #wrap | |
| .field | |
| %form.signup | |
| %input.email{:type => "email", :placeholder => "email", :maxlength => "25"}/ | |
| .btnwrap | |
| -6.times do | |
| .spark | |
| .btn | |
| .inner | |
| -12.times do |
This file contains hidden or 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 id="loop" class="center"></div> | |
| <div id="bike-wrapper" class="center"> | |
| <div id="bike" class="centerBike"></div> | |
| </div> |