Loading video...

Video Failed to Load

Go Home

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

viki_code's profile picture

Viki ✨

16,818 subscribers

908,753 views • 2 years ago •via X (Twitter)

Science & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

10 Comments

Viki ✨'s profile picture
Viki ✨2 years ago

CodePen link:

Robert D.'s profile picture
Robert D.2 years ago

Really beautifully done… but I have a Visa card. 😂

Viki ✨'s profile picture
Viki ✨2 years ago

😂

Pratham's profile picture
Pratham2 years ago

Pretty cool! Have you tried adding the perspective property? Will give a 3D look on the flip.

Kass 🦈's profile picture
Kass 🦈2 years ago

Incredible job!

Viki ✨'s profile picture
Viki ✨2 years ago

Thank you, Kass 😊

Kenneth Luplau-Brøgger's profile picture
Kenneth Luplau-Brøgger2 years ago

4 years ago this was posted.

Vadim Makeev 💙💛's profile picture
Vadim Makeev 💙💛2 years ago

Looks very nice! 😍 There are ways to make it even better! - Add autocomplete attributes: cc-name, etc. for better autofill experience for password managers - Use <input type=text inputmode=numeric> instead of type=number

Madza 👨‍💻⚡'s profile picture
Madza 👨‍💻⚡2 years ago

Another lit design, loving your projects and attention to detail in those! 💖👍💯

Anas Chudhary's profile picture
Anas Chudhary2 years ago

Where is code?

Related Videos

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇
0:20

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,482 views • 2 years ago

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇
0:33

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,849 views • 2 years ago

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇
0:35

Making a beautiful card effects with HTML & CSS No JavaScript ❌ CodePen 👇

Ali Reza

103,241 views • 3 years ago

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇
1:34

FINALLY!!! Built this Exclusive Fully Responsive Animated Multifunctional Portfolio Website with Light/Dark mode using HTML, CSS & Javascript How's it? Drop your comments 😊 SOURCE CODE 👇

Raja - impeccify.com 🚀

192,258 views • 3 years ago

This? Completed it ✨ HTML, CSS, and JavaScript can take you to fun places 🚀 You might spot some added extras in this version! ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ CodePen.IO link below 👇
0:42

This? Completed it ✨ HTML, CSS, and JavaScript can take you to fun places 🚀 You might spot some added extras in this version! ┬┴┬┴┤•ᴥ•ʔ├┬┴┬┴ CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

1,187,422 views • 3 years ago

Building a Nike E-commerce Website using HTML, CSS, JavaScript with Stripe Payment Integration
1:06

Building a Nike E-commerce Website using HTML, CSS, JavaScript with Stripe Payment Integration

Dhanian 🗯️

13,672 views • 1 year ago

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪
0:41

I designed and built this simple landing page from scratch using HTML, CSS, and JavaScript. Unto the next chapter REACT 💪

Benita Mbulu

14,430 views • 5 months ago

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇
0:36

Particle visualization with shockwaves and themes. Uses JavaScript, Three.js for WebGL, and GLSL shaders for visual effects. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

13,326 views • 1 year ago

Interactive particle system built with p5.js. Shapes smoothly morph between circle, square, and triangle on click. Made with javascript. Source code/CodePen link in the comment below. 👇
0:20

Interactive particle system built with p5.js. Shapes smoothly morph between circle, square, and triangle on click. Made with javascript. Source code/CodePen link in the comment below. 👇

Puneet | Techartist

12,164 views • 1 year ago

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev
0:26

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,204 views • 3 years ago

How my games are going... #javascript #HTML #CSS #IndieGameDev #indiegame #indiedev #NodeJS #mysql
2:34

How my games are going... #javascript #HTML #CSS #IndieGameDev #indiegame #indiedev #NodeJS #mysql

Lord Doomer Protector of the Omniverse

27,028 views • 1 year ago

Future CSS Tip! 🔮 Use scroll-driven animations to create those cool Apple-style text reveals 🔥 No JavaScript required 👀 Responsive too! 🙌 .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! 👇
0:49

Future CSS Tip! 🔮 Use scroll-driven animations to create those cool Apple-style text reveals 🔥 No JavaScript required 👀 Responsive too! 🙌 .sentence { animation: highlight; animation-timeline: view(); animation-range: cover 40% cover 75%; } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

347,782 views • 2 years ago

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇
0:48

An interactive 3D electric sphere rendered via JavaScript, Three.js, and WebGL. Custom GLSL shaders generate dynamic lightning and particle effects that react to user interaction. Source code/CodePen link in the comment below. 👇

Techartist

13,955 views • 1 year ago

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,272 views • 3 years ago

WebGL particle simulation with custom GLSL shaders, morphing between formations with mouse interaction. Uses Three.js, BufferGeometry, and UnrealBloomPass. Click/Tap changes patterns. Source code/CodePen link in the comment below. 👇 #OpenSource #javascript
0:26

WebGL particle simulation with custom GLSL shaders, morphing between formations with mouse interaction. Uses Three.js, BufferGeometry, and UnrealBloomPass. Click/Tap changes patterns. Source code/CodePen link in the comment below. 👇 #OpenSource #javascript

Techartist

14,977 views • 1 year ago

Los 3 cursos de Google para aprender desarrollo web desde cero: HTML, CSS y JavaScript ↓
0:21

Los 3 cursos de Google para aprender desarrollo web desde cero: HTML, CSS y JavaScript ↓

Brais Moure

20,938 views • 8 months ago

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇
0:40

A 3D scene built with Three.js, WebGL, and JavaScript. Features shape changing with a click/tap, camera navigation via dragging and scrolling, and adjustable bloom effects and animation properties. Source code/CodePen link in the comment below. 👇

Techartist

11,390 views • 1 year ago

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file
2:13

Prompt: Make a game like flappy bird using HTML/CSS/JS in a single HTML file

Diego | AI 🚀 - e/acc

145,468 views • 5 months ago

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,193 views • 5 months ago

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!
0:27

Stickers made with css and svg filters, inspired by the awesome work of Mats Erdkamp and Guillermo Rauch The peel effect is entirely CSS (transformations and masking), while the sticker outline, the shadow, and the lighting was created using SVG filters. Codepen dropping soon below!

balint

55,512 views • 10 months ago