Animated Login Form Using HTML CSS & JavaScript

Animated login form using HTML CSS and JavaScript. Responsive login form. It contains an elegant and beautiful background, with floating labels and a button to show hide the password.
🔔 Subscribe for more!
/ @bedimcode
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔗 Source code
github.com/bedimcode/animated...
💎 Membership
www.buymeacoffee.com/bedimcod...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
👨‍💻 Build the project from scratch
github.com/bedimcode/animated...
👆 Download (empty files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
📂 Assets
Icons: remixicon.com/
Fonts: fonts.google.com/
⏱ Timestamps
0:00 Intro Animated Login Form
1:36 Project Setup
2:43 Variables & Reset CSS
4:00 Login Image HTML
4:25 Login Image CSS
5:25 Login HTML
10:36 Login CSS
20:50 Floating & Adhesive Labels
23:12 Show & Hide Password
27:40 Breakpoints
29:10 Final Project
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🔥 Follow me!
/ bedimcode
/ bedimcode
☕️ Support me
www.buymeacoffee.com/bedimcode
ko-fi.com/bedimcode
👍 Thanks for watching!
Make sure to like + Subscribe for more! 💗
#loginform #loginformhtmlcss #animatedlogin

[@biLLie_wiLLie]

Cool animated form! I like it

[@felipemelo9975]

Very good!

[@SparrowTutorialsFun]

This is sooo cool! 😎

[@Bedimcode]

Thank's my friend regards.

[@youcube291]

Fantastic

[@tekky8882]

can you provide the timestamp for when you made the login button clickable please

[@miguelolvera3546]

amigo, te quedo estupendo

[@johnlloydflorendo1790]

There’s an uncaught type error: Cannot read properties of null( reading ‘type’) how to fix read

[@mdshahadat1170]

First🎉

[@marcelmrk3414]

Beautiful design and login form. From where you get this amazing background images ?

[@Bedimcode]

Thanks friend, you can get more images on wallpaperflare

[@hoanglt126]

Amazing

[@emmanuellivinus3035]

I love ❤️ this

[@Bedimcode]

Thanks for the support friend, greetings.

[@raveneliette7948]

What vs code theme you are using? and font?

[@Bedimcode]

One dark darker and cascadia code font

[@jeralphremoto4219]

Can be linked this web page into the my sql database, and How?

[@Bedimcode]

You should look for how to create a login form with mysql, then you can give them the styles of this project, greetings,

[@pedromuchaluat5714]

How do you do to put the template in your side in browser?

[@Bedimcode]

I open Visual Studio Code and with live server I open the project, then in the browser that you are right click and inspect and resize the window the same as you do for the code editor.

[@helloworld2054]

What icons are you using in vs code?

[@Bedimcode]

File Icons: Material Icon Theme
Sidebar Icons: Fluent Icons

[@pedromuchaluat5714]

where is the code from text animated login form? can you answer me pls

[@Bedimcode]

I did not understand your question

[@Ankii_kumar]

❤ amazing & next time background music me 😅 marshmallow songs try karna please

[@notIdeal78]

thanks you bro

[@Bedimcode]

❤

[@shayshayblack]

I have a question, how can i link my website after user had been logged in? pls sir make a video on it i wish it

[@Bedimcode]

JavaScript can be used, but if they are usernames and passwords that are saved there, php and the database are used, which are already other programming languages.

[@animecloud5854]

Your video is really great❤. Umm... I am interested in web development but i don't know where to start, can you give some advice.

[@Bedimcode]

Thanks my friend. First you must know what the web is, to later learn the languages that make it possible to create web pages or projects. Since they are HTML, CSS and JavaScript, those three technologies are fine to begin with.
Then you will go reinforcing more, I hope it helps, regards.

[@animecloud5854]

@@Bedimcode thanks my friend ❤️. I really wish to learn web development. I will try my best to learn html and css. Thanks for your advice. See you on your next video ❤️❤️

[@user-ln5nm6rh4u]

Permission to download bro..thx u

[@pedromuchaluat5714]

my login box is not centralized you know how to solve

[@Bedimcode]

The tutorial is in the video friend, follow the steps and don't rush and everything will be fine, regards.

[@Arse009]

En el código de javascript en vez de añadir una clase con iconEye.add() y despues quitar la ppotra con iconEye.remove() podrias simplemente hacer un iconEye.replace(' ', ' ').

[@Bedimcode]

Gracias amigo, lo revisare y actualizare el código en GitHub, gracias por tu sugerencia, saludos.

[@Arse009]

@@Bedimcode de nada

[@sanocycles6642]

❤❤❤❤

[@yixian2093]

do u use any database to store the password？

[@Bedimcode]

Only design and frontend, but you can insert a database, greetings.

[@amannigam7045]

How to get a cool background like these

[@Bedimcode]

You can get more backgrounds at (wallpaperflare), greetings.

[@DineshPatil-mj5tw]

Bhai soun