Accordion With Dt & Dd Tags.

4.06.2018

jQuery accordion using definition lists.

Made with: HTML,CSS,JS

View Code

Accordion With Dt & Dd Tags.

Gucci Backpack Checkout Ui - Css

4.06.2018

Made with: HTML,CSS (SCSS),JavaScript

View Code

Gucci Backpack Checkout Ui - Css

Fx-82Ms Scientific Calculator

3.06.2018

fx-82MS scientific calculator in HTML and CSS.

Made with: HTML,CSS

View Code

Fx-82Ms Scientific Calculator

Spread Fx

3.06.2018

Suppose there are two hidden planes that are going to be shown 1 by 1 when the shared container is hovered. E.g. On hover, flips A (0.7s motion) then B (0.3s motion); On mouseout, transit backward We can do that by specifying transition-delay on two states: /*hover state*/ A:hover { transition-delay:0 }/* A first */ B:hover { transition-delay:0.7s }/* 0.7s for A mo duration */ /*normal state (=mouseout state) */ A { transition-delay:0.3s }/* 0.3s for B mo duration */ B { transition-delay:0s }/* B first */

Made with: HTML,CSS

View Code

Spread Fx

Assorted Cards And Images (Css Grid And Bem)

3.06.2018

A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent).

Made with: HTML (Haml),CSS (SCSS)

View Code

Assorted Cards And Images (Css Grid And Bem)

Perspective Menus

3.06.2018

CSS only perspective menus.

Made with: HTML (Pug),CSS (Stylus)

View Code

Perspective Menus

Image Hotspots Mobile Friendly

3.06.2018

Interactive hotspots - click or tap to see labels. Labels can be positioned so the hotspot is attached to any corner.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Image Hotspots Mobile Friendly

Gdpr Badges

2.06.2018

GDPR badges in HTML and CSS.

Made with: HTML,CSS

View Code

Gdpr Badges

Html <Details> & <Summary>

2.06.2018

HTML <details> & <summary>: bad kids’ jokes.

Made with: HTML,CSS (SCSS),JavaScript

View Code

Html <Details> & <Summary>

Writer's Unblock With Html <Dt> & <Dd> Tags

2.06.2018

When you load the page, you will see two completely random and unrelated English words appear on the screen. Use these word prompts to get your creative juices flowing and get an idea for a story, poem, or some other form of content. If you want a new prompt, just click "new words" and a fresh prompt will appear.

Made with: HTML,CSS (Sass),JavaScript

View Code

Writer's Unblock With Html <Dt> & <Dd> Tags

Pure Css Thought Bubbles

2.06.2018

Made with: HTML,CSS

View Code

Pure Css Thought Bubbles

Apple Keyboard

1.06.2018

Just another CSS Grid demo. This time, it’s an interactive Apple USB keyboard (without the cable).

Made with: HTML,CSS,JS

View Code

Apple Keyboard

Html <Del> & <Ins>: Stings

1.06.2018

Original text and additions/deletions based on the early manuscripts from the collections of Smith College and the Estate of Sylvia Plath.

Made with: HTML,CSS (SCSS)

View Code

Html <Del> & <Ins>: Stings

Roman Pagination

1.06.2018

Simple CSS Roman pagination.

Made with: HTML,CSS (SCSS)

View Code

Roman Pagination

Apple Keyboard

1.06.2018

Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable).

Made with: HTML,CSS,JS

View Code

Apple Keyboard

Css Bear Toggle

1.06.2018

A beary cute toggle.

Made with: HTML,CSS (SCSS)

View Code

Css Bear Toggle

<Sup> <Sub>

31.05.2018

Simple animation for HTML <sup> & <sub> elements.

Made with: HTML,CSS (SCSS)

View Code

<Sup> <Sub>

Kitties! Hover Images

31.05.2018

No Edge support for pentagons and hover effect (because of clip-path... still looks decent though).

Made with: HTML (Pug),CSS (SCSS)

View Code

Kitties! Hover Images

Dt And Dd: Primer Accordion

31.05.2018

Accordion-like feature for a card with HTML <dt> & <dd> tags.

Made with: HTML,CSS (Stylus),JavaScript

View Code

Dt And Dd: Primer Accordion

Sliding Reveal Description List

30.05.2018

This example shows how the dt and dd HTML elements can be used to create a sliding door style list.

Made with: HTML,CSS,JavaScript (Babel)

View Code

Sliding Reveal Description List