Pens from Jeremy Hawes https://codepen.io/jhawes/ en nospam@codepen.io Copyright 2024 2020-05-29T01:56:29-07:00 Burger https://codepen.io/jhawes/pen/MWaMBoB https://codepen.io/jhawes/pen/MWaMBoB Jeremy Hawes

See the Code - See it Full Page - See Details

]]>
Burger 2020-05-29T01:56:29-07:00
backdrop-filter demo https://codepen.io/jhawes/pen/JjPxWVy https://codepen.io/jhawes/pen/JjPxWVy Jeremy Hawes

See the Code - See it Full Page - See Details

]]>
backdrop-filter demo 2019-09-23T21:33:11-07:00
Click - Static Image to Gif https://codepen.io/jhawes/pen/qJKOON https://codepen.io/jhawes/pen/qJKOON Jeremy Hawes

See the Code - See it Full Page - See Details

To save load times this is so that a static image can be used instead of a gif (more valuable if the gif is large or if there are lots of gifs on a single page). Once the static image is clicked the gif will load and the overlay with play button will go away.

]]>
Click - Static Image to Gif 2018-10-19T22:15:20-07:00
Instafeed.js Example https://codepen.io/jhawes/pen/rKNdYe https://codepen.io/jhawes/pen/rKNdYe Jeremy Hawes

See the Code - See it Full Page - See Details

Just a basic feed using the instafeed.js plugin. User ID: https://www.otzberg.net/iguserid/ Client ID: https://instagram.com/developer/clients/manage/ (need to create) Access Token: http://instagram.pixelunion.net/ (be logged into the account - the token will be unique to each account)

]]>
Instafeed.js Example 2018-05-31T19:19:52-07:00
Animated Flipping Card for Promotional Content https://codepen.io/jhawes/pen/QQPjKV https://codepen.io/jhawes/pen/QQPjKV Jeremy Hawes

See the Code - See it Full Page - See Details

Light weight CSS3 animations for a simple card flipping effect. JavaScript makes the even counts flip to random images, though they always return to the same front side on odd counts. jQuery helps set the animation speed and class changes. The front is designed more for text and the side it flips to is designed more for images.

]]>
Animated Flipping Card for Promotional Content 2018-05-31T21:38:54-07:00
Example Simplified AMP Article https://codepen.io/jhawes/pen/eyrMxL https://codepen.io/jhawes/pen/eyrMxL Jeremy Hawes

See the Code - See it Full Page - See Details

AMP places heavy restrictions on the use of styling and even eliminates calling to most external stylesheets. This is an attempt to come up with a an extremely simplified AMP article format. NOTE, You'll need to replace some elements with their AMP declarations.

]]>
Example Simplified AMP Article 2018-01-12T00:19:56-07:00
Concept for Static 4 Column Banner https://codepen.io/jhawes/pen/BJxwbB https://codepen.io/jhawes/pen/BJxwbB Jeremy Hawes

See the Code - See it Full Page - See Details

Not complete, but a concept for a 4 column bootstrap banner with a static image and 4 columns that can be opened and closed. I've tried to keep jQuery to a minimal.

]]>
Concept for Static 4 Column Banner 2018-01-11T19:39:37-07:00
Input field change credit card based on first character entered https://codepen.io/jhawes/pen/jLwxeG https://codepen.io/jhawes/pen/jLwxeG Jeremy Hawes

See the Code - See it Full Page - See Details

Bootstrap progress bar animation for basic web form with Credit Card reader that automatically puts in what credit card is being used based on the first digit entered. Also uses the jQuery Masked plugin for the phone number and credit card formatting (http://digitalbush.com/projects/masked-input-plugin/).

]]>
Input field change credit card based on first character entered 2017-12-19T17:56:58-07:00
Word Counter https://codepen.io/jhawes/pen/VjbZoZ https://codepen.io/jhawes/pen/VjbZoZ Jeremy Hawes

See the Code - See it Full Page - See Details

A word counter built in HTML/CSS/JS. Shows number of characters, words, reading time and readability score. Also generates a list of top keywords.

]]>
Word Counter 2016-06-29T22:28:29-07:00
Form that Calculates select field totals & automatically adds Credit Card icon https://codepen.io/jhawes/pen/yJbBRz https://codepen.io/jhawes/pen/yJbBRz Jeremy Hawes

See the Code - See it Full Page - See Details

This is a basic bootstrap form layout that does 2 things I wanted to be able to reference for future projects: (1) Adds the credit card picture based on the first digit of the card, (2) Calculates the total value of two select fields in the button at the bottom. The credit card icons only look at the first digit of the credit card on file, which definitely could be improved to cover more credit card types - right now it's just Mastercard, Visa, Discover, and American Express. jQuery, Bootstrap, Sass, Compass, Jade

]]>
Form that Calculates select field totals & automatically adds Credit Card icon 2016-06-29T22:05:35-07:00