Animated Login Form Using HTML & CSS

-------------------------------------------🇮🇳-----------------------------------------
* JAI HIND DOSTO, WELCOME TO MY CHANNEL*
-------------------------------------------------------------------------------------------
Aj ki is Video Mai Ham log kuch Naya sikhenge, Agar Video Achi Lage to LIKE Kare Aur Agar Kuch Na Kuch Daily Sikhna Chate ho channel ko SUBSCRIBE Karke Bell Icon Press Karke Jise Hamara Koi Video ka Notification Miss Na Ho.
Today's Topic: how to change colur of Orbiting animation using html css only?
Official website 👉hashtechie007.blogspot.com/?m=0
Top videos:-
1.Dynamic island Effects • Dynamic island Animati...
2.Pulse heart Effects • Pulsing Heart Animatio...
3.Neon button Effects • CSS Neon Button effect...
4.Rainbow border Animations Effects • Rainbow🌈 Border Animat...
5.Frosted Glass Effect • Frosted Glass Effects ...
6.Birtday Box Effects • Responsive Birthday Gi...
7.Digital Clock • Digital Clock Using Ja...
8.orbiting animation • Orbiting Animation Eff...
-Thank you
-------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
STAY TUNED FOR LATEST UPDATE
------------------------------------------------------------------------------------------
login form in html and css,login form html css,html css,html login form,animated login form html css,animated login form using only html & css,transparent login form html css,login form,html,html css login form,login form using html and css,login html css,login form in html,registration form using html and css,css,html and css,html css login form design,responsive login form html css,css login form,login page html css,login form design
#css#animation#csstutorial#codewithharry
#loginform

[@hash_techie]

Source code--- github.com/Hashtechieofficial/Form-
Background Link-- www.wallpaperflare.com/digital-digital-art-artwork-illustration-minimalism-simple-wallpaper-gjwxk

[@Aryan_Raj_7167]

@Hash Techie
You can pin this comment .
So, your viewers can get this comment on top and they can find your comment easily.
by your Subscriber

[@RNR000]

I need a little help, I tested the code in my system but some of the codes didn't work. Then I went to the GitHub site and copy pasted the full code. Now css file is not even being recognised by the HTML file.

[@Yotapaki]

Remember me and forgot password on same line? i think you need to separate it.

[@xavier6130]

Remember me • Forgot password?

[@tonniecuts]

Need help how can I reach you

[@teemolert]

when I saw the thumbnail for this video I assumed the CSS was going to be very complex but when you actually break it down into its individual steps its actually suprisingly to make a nice looking website

[@tekamanurag6065]

guess i don't have any talent in designing.

[@PolPingo]

Tbh it looked very simple to me. Reading the title i was expecting some crazy animation.
Still a pretty simple but very effective design for a login page

[@teemolert]

@@PolPingo yeah fair enough, im pretty new to css and making webpages look nice so even simple things seem pretty complex to me right now.

[@z-matrix]

CSS is a simple language, there is no secret, if it were a professional code [even just html and css] it would require other concepts that go far beyond a code as basic as this one.

[@teemolert]

@@z-matrix Yes but its more about the process which does take lots of learning to get down. I struggle to actually get my ideas down with css.

[@dipereira0123]

The Idea, The Creation Process, The Result, The fact that you teach us to how to do it... Its Beautiful! This is a form of Art! Liked Subscribed and notifications Activated

[@matthewstrauck4646]

Great video, really shows how the whole coding process of a website works and thus helps with learning 👍🏽

[@exoticlol]

Maybe you could give the "Remember Me" and "Forgot Password" elements more spacing.

[@hash_techie]

My mistake bro you can change the property of css.

[@Hypenexy]

Better yet, make them block elements and let them have their own vertical space

[@Bigwealth21]

My mentor

[@echetammesoma7232]

I had this in mind

[@gengrim2333]

Didn't bother at the end probably

[@boteich3118]

Great, nice animated login form, I really liked it, continue to create layouts and send videos to your TH-cam channel

[@shaikhtausif4761]

Awesome bro!!!, I recently started learning web developement and you have cleared my many doubts. AMAZING BRO!

[@abhishekvishwakarma3482]

Bro....
You are amazing,
You made awesome website,
If I had to do it with scratch I would take more tha a week 😂
But you did awesome work bro 👏

[@zohaibkareem9219]

when i saw the thumbnail this video i think this is to tough to make but and when i saw the video step by step and release it is very crazy and impressive. you make the login form in a 15 mint😍 but i make it in a month😁.
keep going to make us motivate. And LOve from PAKISTAN ,PUNJAB ,NANKANA SAHIB❤❤

[@guillermomazzari4983]

Beautiful work! Thanks for sharing!

[@hash_techie]

Thanks

[@levi9613]

Very simple yet ELEGANT

[@Casonplayz]

Cool I wish log in pages like this were done more

[@sphinxz_gaming]

Stunning Animated Login Form!

[@penguin1714]

Wish we could get this as a sddm login theme. Looks great

[@MisterToine972]

Thank you so much for your work and for sharing it 🙏🏽

[@ximaxwellix]

For anyone who wants to fix the label dropping back down when the input is not a valid email:
1. Add placeholder=" " to the inputs in HTML for both email and password
Eg.:
2. Change "input:focus ~ label, input:valid ~ label" to "input:focus ~ label, input:not(:placeholder-shown) ~ label"
This way, as long as the placeholder " " is shown, the labels are down. But whenever we insert something, the label stays up.
Theoretically, something like input:not([value=""]) should work as well, but I didn't get that to work. I am also still learning HTML/CSS

[@sirsuer6726]

thx for sharing.

[@sychose.3597]

still doesn't work

[@cawankeven6718]

THXXXXXXXXXXXXXXXXX

[@weirdo_fy]

Thanks bro, it worked.

[@geraldrollner4842]

now the password goes down also instead of only email

[@InfiniteM13]

You've earned me a subscribe just because of using ncs songs, love the work btw💕

[@NovaAbstract]

seeing it all come to life is pretty cool

[@kyledaines2428]

This could possibly be the best DC trailer ever.

[@Blade_Neon1]

Thank you so much for this amazing tutorial your work really inspires to continue doing better keep up the good work 🔥🔥

[@mortalmotivation]

I love this kind of teaching, thank you

[@ferasalfarsi897]

Amazing work!
Keep up!

[@dylankc1]

This is so amazing. Thank you so much for sharing this!

[@hash_techie]

❤️

[@Phuc-A-gy9mq]

This is just amazing and touching 💓💓

[@hash_techie]

Thanks

[@CrashQwerty]

ohh man this video is amazing, i need this examples because i like the practice and the documention in more occasions it's very confuse

[@imusinghuzuni]

We need companies to hire this guy as their designers.

[@hash_techie]

Thanks ❤️❤️❤️❤️

[@imusinghuzuni]

@@hash_techie These are amazing, and completely perfect. I would love to see websites using them

[@emnd4540]

Good job bro. Thanks for the video ❤ New subscriber here

[@KGee911]

Thank you very much.. this is really helpful 👏 👌

[@user-sb9lt9bn4g]

I love this video.Thanks for sharing 😊

[@hash_techie]

Thanks buddy

[@seanmaddows9790]

Great design and nice video

[@melroijohnlardizabal]

Very nice! I love glass morphism!❤

[@fozanalikhan]

Awesome work buddy simple CSS with so good looking website page

[@hash_techie]

Thanks bhai

[@jaegercrown964]

This is very amazing thanks for sharing

[@oscar8677]

Great video and clear login

[@hash_techie]

Thanks sir

[@TheGreatAnnouncer]

Thanks for your help. I love this video

[@aminansarimehr9464]

It's very good and useful for me
Thank you 🙏

[@ShowbizKiduniya-n5h]

Thanks Sir 🎉
You are the great 👍🏻👍🏻👍🏻

[@ravish8620]

Beautiful♥️

[@hash_techie]

Thanks dude

[@tarekehab9113]

Really nice sir that’s great back ground

[@hash_techie]

Thanks bro

[@jaganniwas826]

Oh Thanks, it helped me a lot, I appreciate it!

[@milandharani1125]

this video really deserve one like and comment

[@kodirovnodirbek6849]

Thanks, it was helpful!

[@touristsworld349]

very nice bro ..More power to you

[@KelKnows]

I'm learning how to code now and what your doing looks godly compared to what I'm doing right now.😭 Good job

[@alexandre1383]

I started studying HTML and CSS three weeks ago and I feel the same way! 😅

[@KelKnows]

@@alexandre1383 I’m learning python 🥲

[@dannyjenkins1408]

Honestly learn some basic javascript then come back to HTML and CSS. Otherwise youre gonna get stuck as a beginner. My js is pretty advanced and i still need to google absolutely everything when it comes to CSS, html is easy after javascript so dont worry about that.

[@KelKnows]

@@dannyjenkins1408 so should I continue with Python?

[@kirysha52]

@@KelKnows if you are learning html and css,you need to be + - medium in that, to you can make good projects and after start to learn some js. i am on this way now.i started learn js few days ago. so i will learn to junior or medium level, after still learn it with css , make animation in css and also in js.i wanna become really good in html and css to work on frilans,and learn react js , typescript js and vue js. and i am crazy 13 years russian boy.))

[@elsachichon9429]

Very Good bro, is amazing

[@ft.anirxddh]

I am learning to code and your channel is helpful!! Thank you Bhai! ✨

[@hash_techie]

Thanks

[@hash_techie]

Dude for comment ❤️

[@ketankushwah6488]

Amazing👍

[@hash_techie]

Thanks

[@derpyzx]

Just a quick question, with the spacing between Remember me and forgot password. Which line of code would I have to change to create more spacing between them

[@hash_techie]

I think positions relative will work .(left)

[@criscaicedo1748]

Amazing! Thank you

[@studyingwithharshandsid9507]

I love this channel helped me start my coding career

[@hash_techie]

❤️❤️

[@veeee5577]

Just wow 👑

[@dark_soul9318]

Cool really inspiring..

[@manvirsingh5381]

AMAZING ❤️

[@fiazkhokharfiazkhokhar1900]

such a good work

[@kyh148]

Looks great

[@RDFContent]

Brilliant video but what alot of people don't do who do these in then show the viewers how to take that code & upload it somewhere so its visible when you then go to a webpage.

[@badbunny6941]

Cool 🔥❤️

[@hash_techie]

Thanks bro

[@AlexIlyaGuennad]

Just awesome
Thank yo uso much!

[@parsuramnaik500]

thanks bhai.. u got a new subscriber

[@hackersaqib786]

Excellent Work Bro

[@hash_techie]

Thanks sir ji😌

[@supremeomegacompany]

Great awasome

[@alexandre1383]

So beautiful and clean

[@hash_techie]

Thanks

[@TheBelpahar]

wow.. super.. mind blowing

[@hash_techie]

New one coming soon

[@MA-hp9eo]

Love it!

[@juanjoseperezramos1982]

Looks nice bro

[@nicolafontaine9919]

Woa thanks man ! I was wondering how do you do to put a video in the background instead of the picture ? Do you just have to change the CSS file with the video ?

[@rafi-leigh]

You still want to know?

[@Saturn157]

​@@rafi-leighI would like to, since I didn't understand that part

[@dheylinantigua]

Amazing I love it !

[@hash_techie]

Thanks

[@santhosharts4028]

thats really good bro

[@hash_techie]

Thanks bro

[@nicholasdaily2589]

I have never ever seen people using the contrasting colours like that to visualize what they are working with. That was like an aha moment for me. I went to school for three years for this lol I’m just - wow lol thanks for sharing. Definitely will be using this technique !!

[@eliott2307]

You did a good job, well done !

[@hash_techie]

Then bro check other one

[@hash_techie]

Thanks bro

[@COD5Yuri]

Looks great! Only thing to complain about is the contrast in the last paragraph, which is difficult to read for people with visual impairments.

[@hash_techie]

Sorry for inconvenience bro , check the source code which is pinned at comments section

[@danielescobar6933]

Eso es magia 🤩

[@hash_techie]

Thanks bro new video coming soon stay tuned.

[@sudipthakuri7231]

Wow nice bro
Keep it up!

[@hash_techie]

Thanks bhai

[@ElZorrO-RD-]

bro eres un master me fue genial gracias a Dios y a tu video

[@eanswith2062]

Good idea 😮

[@saiei]

Good job vro thanks

[@JustAPersonWhoComments]

man this feels like Discord login in a whole new level

[@hash_techie]

❤️

[@aviseksingh2896]

bro, I suggest u to add your source code along with this video description. Btw video and code is fantastic.

[@hash_techie]

Already in comments section bro

[@franescobar89]

muy bueno!! yo agregaría que el texto de mail y password al subir disminuya el font-size como si fuese un legend

[@hash_techie]

Thanks

[@UltraNyan]

13:00 I would just leave the colors like they are, very human design, very pleasing to the eye.

[@pricilaleitesilva]

Very good 👏

[@RCWolf]

this is awesome, also nice background I've used the same one for everything for years XD

[@hash_techie]

Oh cool

[@yazuka2023]

I have a problem thhe background that I saved in my pc isnt showing

[@KSKS292]

@@yazuka2023 I having same issue

[@carlosgonzaga2084]

awesome!!!

[@it9hektar]

nice... thank u 👍

[@CreativeGamerAbhi]

Bht badhia bhala lagila dekhiki madi chala .....

[@CreativeGamerAbhi]

reply if you understand ha ha..... btw great work bro

[@hash_techie]

I think you are from west Bengal,assam

[@gangleader1224]

only css and html nice work bro

[@hash_techie]

Thanks Bruh

[@saulopereira7704]

amazing!!

[@tastecode]

Good video ❤️

[@hash_techie]

Thanks dear

[@ERYS14]

you are using Windows 11, just because of that I've liked it!

[@anitshrestha4753]

Awesome...

[@kitcat2449]

Pretty!

[@fcpolon1a543]

Hmmm that is very interesting... Now I'm gonna copy paste it without even trying to understand anything

[@NuwanSampath-fi5zr]

Thank you so much ❤😊.

[@dinga_tech]

Super😊

[@tthemfknghost]

Nice Video!

[@tommyIT]

it looks very nice but the important and harder part is to make it work...

[@hash_techie]

Thanks buddy

[@samvelisrayelyan1310]

Wow you're amazing

[@hash_techie]

Thanks bro

[@Davidalvarez-we7iy]

Increible video

[@prithviksitpakala9559]

how does the website keep refreshing automatically with changes in the code? I have to manually refresh after every edit in code

[@Anime2Ruby]

Nicee ❤❤