https://github.com/igorskyflyer/my-pens
🕊️ Sources of my CodePens. ✒️
https://github.com/igorskyflyer/my-pens
bootstrap codepen css design front-end html javascript js labs sass scss ui ux web-development
Last synced: about 1 month ago
JSON representation
🕊️ Sources of my CodePens. ✒️
- Host: GitHub
- URL: https://github.com/igorskyflyer/my-pens
- Owner: igorskyflyer
- License: mit
- Created: 2021-06-18T17:14:03.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-04T00:24:12.000Z (about 2 years ago)
- Last Synced: 2025-04-12T15:05:56.149Z (about 1 month ago)
- Topics: bootstrap, codepen, css, design, front-end, html, javascript, js, labs, sass, scss, ui, ux, web-development
- Language: SCSS
- Homepage: https://codepen.io/igorskyflyer/pens/public
- Size: 975 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# My Pens
🕊️ Sources of my CodePens. ✒️
A collection of front-end Web projects transferred from my [CodePen](https://codepen.io/igorskyflyer/pens/public/) account.
Below is the list of original Pens and their counterparts available here on Github.
### Pens [A - Z]
📌 **3D Cube** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/3d-cube) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/dBNKeL)
📌 **Animated Details** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/animated-details) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/ZdZjqw)
📌 **Animated Navbar** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/animated-navbar) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/BgQxpE)
📌 **Animated Striped Button** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/animated-striped-button) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/JQVaOE)
📌 **Audio Player UI** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/audio-player-ui) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/OYaLrb)
📌 **Auto-Pausing Video** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/auto-pausing-video) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/oRZZLr)
📌 **Box Decoration** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/box-decoration) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/joxoNp)
📌 **Card Switcher** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/card-switcher) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/orGMdy)
📌 **CSS BEM Buttons** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/css-bem-buttons) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MWgOERq)
📌 **CSS Loader** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/css-loader) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/qedjjN)
📌 **Custom Checkbox** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/custom-checkbox) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/gNmwQQ)
📌 **Custom Tooltips** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/custom-tooltips) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/VwexbQz)
📌 **Diamond Grid** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/diamond-grid) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/PrdKej)
📌 **Disappearing Text** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/disappearing-text) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/LKqwXr)
📌 **Endless Road** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/endless-road) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/QXBrXz)
📌 **Expanding Searchbox** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/expanding-searchbox) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/OewvyL)
📌 **Face Hexagons** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/face-hexagons) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/agWYZa)
📌 **Flip Card** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/flip-card) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/byMJQo)
📌 **FM Radio Card** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/fm-radio-card) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MdPNNp)
📌 **Game Changer** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/game-changer) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/wvwyGpa)
📌 **Gradient Border** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/gradient-border) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/wLEqVj)
📌 **with Animation** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/gradient-border/with-animation) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/KjxXNY)
📌 **Gradient Shadow** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/gradient-shadow) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/vqzeRd)
📌 **Grid System with Flex 💪** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/grid-system-with-flex) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/pYvaYN)
📌 **Having Fun with border-image** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/having-fun-with-border-image) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/gEOmPo)
📌 **HTML5 Dialog** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/html5-dialog) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/agrGXm)
📌 **HTML5 Progressbar** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/html5-progressbar) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/dxqgqr)
📌 **Instagram Like 💗** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/instagram-like) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/dBXNaj)
📌 **Interactive 3D Cube** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/interactive-3d-cube) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/XvbQpp)
📌 **Interval Picker** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/interval-picker) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/oNbLmwP)
📌 **Laptop Prototype** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/laptop-prototype) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/orWEjo)
📌 **Muted Video Auto-Play and Video Reflection** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/muted-video-autoplay-and-video-reflection) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/xBrwza)
📌 **My Mobile (SM-A605)** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/my-mobile-SM-A605) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/pmGyGR)
📌 **New Tab Page** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/new-tab-page) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/xNmEGZ)
📌 **Popsicle** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/popsicle) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/ydaMYJ)
📌 **Radio Buttons** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/radio-buttons) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/JqaYKK)
📌 **Responsive Grid without Media Queries** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/responsive-grid-without-media-queries) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/YbZNMo)
📌 **Searchable HTML Dropdown** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/searchable-html-dropdown) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MMRqNy)
📌 **Stripes Timed Effect** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/stripes-timed-effect) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/WNbjQEB)
📌 **CITY** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/stripes-timed-effect/city) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MWYmaLe)
📌 **Text Decorations** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/text-decorations) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MMdGRW)
📌 **Text with Image Background** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/text-with-image-background) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/KjxyBW)
📌 **Time Picker** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/time-picker) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/rNxWNqq)
📌 **Tooltips** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/tooltips) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/MMbQOV)
📌 **Weather Card** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/weather-card) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/zQaXqW)
📌 **Web Template** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/web-template) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/YbvBRQ)
📌 **Workdays Checkboxes** > [Github](https://github.com/igorskyflyer/my-pens/tree/main/workdays-checkboxes) 🧿 [CodePen](https://codepen.io/igorskyflyer/pen/QWyEZzd)
🎉 Happy coding, people! 🙌