Pens from Jose Peiró https://codepen.io/mrmoonrocket/ en nospam@codepen.io Copyright 2024 2024-01-31T08:13:20-07:00 Toggle Pill https://codepen.io/mrmoonrocket/pen/oNVEPMQ https://codepen.io/mrmoonrocket/pen/oNVEPMQ Jose Peiró

See the Code - See it Full Page - See Details

A pill component coded using a checkbox as a base. Ideally, instead of having a single element (input of type checkbox), we could have the input inside a label, apply the styles to the label itself, so the text is selectable too. That would require a little extra effort like having styles for focus (as it would be the input that is focused and not the label), but they wouldn't bee too complex. Note about the previous paragraph: I created that label+checkbox version. You can see it on [this CodePen demo](https://codepen.io/alvaromontoro/pen/VwRygOp). I think that version is nicer because if the styles don't load for whatever reasons, it will display the label, so it will be more accessible for sighted users (in case of error loading the CSS).

]]>
Toggle Pill 2024-01-31T08:13:20-07:00
Hero Landings Alquiler https://codepen.io/mrmoonrocket/pen/mdoOyda https://codepen.io/mrmoonrocket/pen/mdoOyda Jose Peiró

See the Code - See it Full Page - See Details

]]>
Hero Landings Alquiler 2024-01-12T09:14:18-07:00
Yacht -- Label in Header form https://codepen.io/mrmoonrocket/pen/YzgGvvp https://codepen.io/mrmoonrocket/pen/YzgGvvp Jose Peiró

See the Code - See it Full Page - See Details

]]>
Yacht -- Label in Header form 2024-01-29T16:59:04-07:00
CSS Grid auto-filling masonry https://codepen.io/mrmoonrocket/pen/NWJNQqb https://codepen.io/mrmoonrocket/pen/NWJNQqb Jose Peiró

See the Code - See it Full Page - See Details

Building the grid from https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f

]]>
CSS Grid auto-filling masonry 2024-01-08T12:41:24-07:00
Mail NauticAdventure https://codepen.io/mrmoonrocket/pen/MWLPWeN https://codepen.io/mrmoonrocket/pen/MWLPWeN Jose Peiró

See the Code - See it Full Page - See Details

]]>
Mail NauticAdventure 2023-11-30T10:05:07-07:00
Email Template NauticAdventure https://codepen.io/mrmoonrocket/pen/JjxagMB https://codepen.io/mrmoonrocket/pen/JjxagMB Jose Peiró

See the Code - See it Full Page - See Details

Using this pen project to play with font, color, and layout.

]]>
Email Template NauticAdventure 2023-11-30T10:05:00-07:00
A Pen by Jose Peiró https://codepen.io/mrmoonrocket/pen/VwgxROo https://codepen.io/mrmoonrocket/pen/VwgxROo Jose Peiró

See the Code - See it Full Page - See Details

]]>
A Pen by Jose Peiró 2023-11-23T19:10:09-07:00
A Pen by Jose Peiró https://codepen.io/mrmoonrocket/pen/wvNpqNL https://codepen.io/mrmoonrocket/pen/wvNpqNL Jose Peiró

See the Code - See it Full Page - See Details

]]>
A Pen by Jose Peiró 2023-11-17T15:05:20-07:00
A Pen by Jose Peiró https://codepen.io/mrmoonrocket/pen/VwgrqGB https://codepen.io/mrmoonrocket/pen/VwgrqGB Jose Peiró

See the Code - See it Full Page - See Details

]]>
A Pen by Jose Peiró 2023-11-16T17:59:26-07:00
A Pen by Jose Peiró https://codepen.io/mrmoonrocket/pen/wvNqZMw https://codepen.io/mrmoonrocket/pen/wvNqZMw Jose Peiró

See the Code - See it Full Page - See Details

]]>
A Pen by Jose Peiró 2023-11-14T12:15:50-07:00