Animated Login Form using Html & CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 153

  • @OnlineTutorialsYT
    @OnlineTutorialsYT  ปีที่แล้ว +13

    Revolutionize projects with our advanced source code. Elevate innovation, accelerate development, and gain a competitive edge. Your key to success is here. Transform ideas into reality now.
    Get now more than 1000+ source code just by clicking on this link : www.patreon.com/onlinetutorials
    Here you will find each and every Source Code is Unique.

    • @100xIncome69
      @100xIncome69 ปีที่แล้ว

      Which browser (version ) do you use to see the code runing or not..
      plzzz replay
      🙏🙏🙏🙏

  • @deepakjoyjose8189
    @deepakjoyjose8189 ปีที่แล้ว +20

    That final touch to add the animation around the border was just fantastic. Great tutorial!!!

    • @entertainmentwebstv
      @entertainmentwebstv 6 หลายเดือนก่อน +1

      Can you give me css code Jo likha hai esma

  • @adrieladegunju
    @adrieladegunju 24 วันที่ผ่านมา

    I am 10yrs ol d and you are the only person that has not made my brain go cuckoo after ten minutes

  • @ahmedghallab5342
    @ahmedghallab5342 8 หลายเดือนก่อน +1

    جزاك الله خيرا It was helpful

  • @ahmadofficial7261
    @ahmadofficial7261 ปีที่แล้ว +36

    I am copying you from 2 months and learn more css thank you bro

    • @ManelCAM
      @ManelCAM ปีที่แล้ว +1

      @MR. UNKNOWN 🇨🇦 Dicas pra eu estudar css ? ou é só nessa de ver vídeos e treinar mesmo ?

    • @webdev_sabareesh
      @webdev_sabareesh ปีที่แล้ว

      ​@CHRIS_IQ yes

  • @joshwzr1257
    @joshwzr1257 10 หลายเดือนก่อน +2

    Thanks so much. I have used this form somewhere in my project. Its why i came back to give a sub, and appreciate you for the work done.

    • @entertainmentwebstv
      @entertainmentwebstv 6 หลายเดือนก่อน

      Bro please give me this css code in written text I want to match my code but how please give me this css code

  • @shek-lz3yu
    @shek-lz3yu ปีที่แล้ว +6

    This is the problem in the animation, you need to add ","
    ".box form ,.inputBox input:valid ~ span
    .box form ,.inputBox input:focus ~ span"
    also this
    " .box form ,.inputBox input:valid ~ i
    .box form ,.inputBox input:focus ~ i "
    I don't know if that's the real problem but at least it works for me, I hope it works for you too.

  • @infegfx
    @infegfx ปีที่แล้ว +8

    Hello. I am graphic designer and I have no idea about coding. Just I have an idea about animate. If you can use rounded gradiend in any color you want like 360/x (x=color you want) bg color (black) to color like 100-100 to 0 - range. At that time corners of colors will flat. It will looks better I think and you can use any numbers of colors in single layer.

  • @patrickbanda3585
    @patrickbanda3585 ปีที่แล้ว +10

    Awesome 👌 👏

  • @tanvirhossainrahat8409
    @tanvirhossainrahat8409 ปีที่แล้ว

    bro u really deserve a like

  • @OfficialDeRifal.
    @OfficialDeRifal. ปีที่แล้ว +3

    art in programming✨

  • @CMB696
    @CMB696 ปีที่แล้ว +5

    U can also do margin-block: 10px; instead of margin: 10px 0;

  • @isimarkhor5096
    @isimarkhor5096 ปีที่แล้ว

    Gr8 work.... its done for my project login page.

  • @Tahir-C-14
    @Tahir-C-14 11 หลายเดือนก่อน

    Great Tutorial indeed.

  • @bunn58_20
    @bunn58_20 11 หลายเดือนก่อน

    nice tutorial, thank you so much, i learned so much from this video

  • @koshnar1073
    @koshnar1073 ปีที่แล้ว +1

    Thank you so much، I can learn a lot through this code

  • @agothwekwek1905
    @agothwekwek1905 ปีที่แล้ว +2

    Hello, I'm proud of your tutorial, I'm having an issue with the box form I have tried applying the same code in the tutorial but it does not work! can you kindly help me? I'm from South Sudan!

  • @praveenkumar-xz2xc
    @praveenkumar-xz2xc ปีที่แล้ว

    Thankyou so much bro GOD BLESS YOU 🙏

  • @stephenwilliams7892
    @stephenwilliams7892 ปีที่แล้ว

    You are very creative, I liked it very much

  • @kevink3072
    @kevink3072 ปีที่แล้ว +2

    This is just wonderful

  • @AzucenaSinto
    @AzucenaSinto ปีที่แล้ว +1

    Muchísimas gracias por este magnífico videotutorial de formulario.

  • @rohan_karkii
    @rohan_karkii ปีที่แล้ว

    Thank you so much it helps me to build a project😊 I love you brother

  • @Mrcube8
    @Mrcube8 ปีที่แล้ว +1

    What extension do you use for that CSS, that color looks good

  • @parasbabiya9133
    @parasbabiya9133 ปีที่แล้ว

    You are great bro you are creating very good things

  • @Lord_Arkham
    @Lord_Arkham ปีที่แล้ว +13

    Wonderful tutorial! I just made it and was both fun and instructive to do. I liked the animation part, so it made the form even more dinamic. Thanks. I'll give you my like!

    • @tigullavikas4516
      @tigullavikas4516 ปีที่แล้ว

      im having issues with my source code, can u give me your's please

    • @agothwekwek1905
      @agothwekwek1905 ปีที่แล้ว

      Sir, kindly I need help I have an issue with this tutorial the box in which the animation runs around has defeated me plz help

    • @Lord_Arkham
      @Lord_Arkham ปีที่แล้ว

      @@agothwekwek1905 Sure! Which problem did you had?

    • @Lord_Arkham
      @Lord_Arkham ปีที่แล้ว

      @@tigullavikas4516 Yes. No problem.

    • @SiddhantKumar-oc6tm
      @SiddhantKumar-oc6tm 8 หลายเดือนก่อน

      Sir please can you give me your source code

  • @prasenjitnayak_
    @prasenjitnayak_ ปีที่แล้ว +4

    what if he will add voice of his own and explaining it instead of playing a random tune in background .

  • @funnyedits012
    @funnyedits012 ปีที่แล้ว +3

    Can you add 2 to 3 pages on button
    For example in home page 3 buttons are there if i click on 1 button then i will redirect to next page like this please make a video on this topic

  • @dailychinese1396
    @dailychinese1396 ปีที่แล้ว

    I ve done it successfully. Cool tutorial

  • @roundface321
    @roundface321 ปีที่แล้ว

    Excellent Bro!

  •  ปีที่แล้ว

    Thanks for sharing!

  • @sandorpapp7057
    @sandorpapp7057 ปีที่แล้ว +1

    brilliant, artistic job

  • @romigamesofficial9483
    @romigamesofficial9483 ปีที่แล้ว

    so imprsseive sir love u hogia

  • @King-sc4vt
    @King-sc4vt ปีที่แล้ว +1

    hello bro, I wanted to ask you if you can do something like what you know how to do this epic with the theme of sambalentu Valentine's day of love and friendship

  • @dashking487
    @dashking487 ปีที่แล้ว

    Decode the figma tool you will gain more you are very good in this i am watching your html css

  • @Arafat.Academy
    @Arafat.Academy ปีที่แล้ว

    روووعة ❤

  • @priyamax273
    @priyamax273 ปีที่แล้ว

    Thanks yoy.❤❤

  • @saritaprajapat730
    @saritaprajapat730 ปีที่แล้ว

    Thanks 😊 bro

  • @RBPROGRAPHIC-ef8kc
    @RBPROGRAPHIC-ef8kc ปีที่แล้ว

    Awesome 😮😮😮

  • @dudewithdonuts7639
    @dudewithdonuts7639 5 หลายเดือนก่อน

    Genius

  • @raymondmoundzele4907
    @raymondmoundzele4907 ปีที่แล้ว

    cool ! thank you

  • @prashanthshetty8337
    @prashanthshetty8337 ปีที่แล้ว

    Superb!!!

  • @raviel498
    @raviel498 ปีที่แล้ว +1

    Amazing

  • @woolhat5191
    @woolhat5191 ปีที่แล้ว +1

    Thanks alot I replicated this and i got to understand how animation and @keyframes works better.

  • @subhankarsinha134
    @subhankarsinha134 ปีที่แล้ว

    Artistic ❤

  • @varshinim9472
    @varshinim9472 8 หลายเดือนก่อน +1

    From where u have collected data for url

  • @SadatiFred
    @SadatiFred 8 หลายเดือนก่อน +1

    the background sound ....😑though .....but REALLY APPRECIATE

  • @djordjesajlovic2376
    @djordjesajlovic2376 ปีที่แล้ว +1

    Very nice, definitely will use one day :)

  • @chamalkakumuditha
    @chamalkakumuditha 9 หลายเดือนก่อน +2

    do i need data connection top url working?@import url(“”); help me

  • @fellenjoy7717
    @fellenjoy7717 7 หลายเดือนก่อน +1

    Bro what is the meaning of .box form . input { transition:0.5s}

  • @dashking487
    @dashking487 ปีที่แล้ว

    Hey bro i think you have to decode the ui/ux designers portfolios

  • @Actor_mp
    @Actor_mp ปีที่แล้ว

    thanks, great job

  • @harshankpatelofficial
    @harshankpatelofficial ปีที่แล้ว +3

    this is not work for input[type=email]:invalid please give me solutions

  • @tienvu7442
    @tienvu7442 ปีที่แล้ว

    very good

  • @mahiamomo12
    @mahiamomo12 ปีที่แล้ว +1

    which theme u have used

  • @prasenjitnayak_
    @prasenjitnayak_ ปีที่แล้ว +1

    animation working perfectly but sign in page isn't working.

  • @kallenkozuki0853
    @kallenkozuki0853 ปีที่แล้ว +1

    im trying to do this with a button, scaled down the sizes and all but it still doesn't work. for some reason, my color box is not moving around the area even with transform-origin: bottom right. this is too coooooool though!! ill keep trying ,,

  • @uctoannguyen2091
    @uctoannguyen2091 ปีที่แล้ว +2

    i try but i dont know why my .box::before and .borderLine::before dont work

  • @abnermateus3518
    @abnermateus3518 ปีที่แล้ว +2

    ótimo video! parabéns!

  • @BNY_Anime
    @BNY_Anime ปีที่แล้ว +1

    what was the first import in css
    and can somebody tell me/ give the link of import

  • @AhmadRiaz-e9l
    @AhmadRiaz-e9l 3 หลายเดือนก่อน

    good

  • @shubhamvernela4845
    @shubhamvernela4845 10 หลายเดือนก่อน

    What if we have to add third colour what will be the animation delay

  • @shivanigupta8439
    @shivanigupta8439 10 หลายเดือนก่อน +9

    When i code same as my code not work like this

    • @its_mysteriousguy
      @its_mysteriousguy 6 หลายเดือนก่อน

      Set up visual code properly!!

    • @shgaming4503
      @shgaming4503 2 หลายเดือนก่อน

      I ran the code on my phone it works

  • @fikretcure
    @fikretcure ปีที่แล้ว +1

    nice

  • @百さん-x6v
    @百さん-x6v ปีที่แล้ว +2

    My code doesn't move. so tired. Do you have a text?

  • @subzerogaming1234
    @subzerogaming1234 11 หลายเดือนก่อน

    In css bottom right linear line like a flash help to solve

  • @jeyuanjum514
    @jeyuanjum514 11 หลายเดือนก่อน

    Im a beginner..can u please tell where i have to write the code😞cant understand..where can i fet tat html n css platform

  • @agenciavolksein5486
    @agenciavolksein5486 4 หลายเดือนก่อน

    مقاطع الفيديو الخاصة بك هي الأفضل، والمذهلة، والموسيقى أكثر اكتئابًا
    These videos are the tops, most popular, as the music is more compressed

  • @sallooferfero
    @sallooferfero ปีที่แล้ว +1

    thanks all you

  • @FdWebdesign
    @FdWebdesign ปีที่แล้ว +1

    Nice

  • @husi_razzaq.725
    @husi_razzaq.725 ปีที่แล้ว +1

    Please tell me from which website you put the link of style i.e. @import url() I can't find it

  • @tednelson5277
    @tednelson5277 ปีที่แล้ว

    What editor are you using to do this?

  • @devilrjn1587
    @devilrjn1587 ปีที่แล้ว

    Beautiful :)

  • @veeee5577
    @veeee5577 ปีที่แล้ว

    It would be great if you did a voiceover tutorial

  • @khaledradwan2685
    @khaledradwan2685 ปีที่แล้ว +1

    wonderful ^^

  • @diyaribeste5845
    @diyaribeste5845 ปีที่แล้ว

    Are u a human? Bro ur work is insane( I don’t need the login but WOAH)

  • @Easy8932
    @Easy8932 ปีที่แล้ว

    What you did in line no. 75,76 tell me i am new in css

  • @Venuja_Pro
    @Venuja_Pro ปีที่แล้ว +7

    1 st comment

  • @gona__
    @gona__ 5 หลายเดือนก่อน

    how can i add the icons?

  • @kabukiknight4902
    @kabukiknight4902 ปีที่แล้ว

    Neat

  • @armindurakovic-d3f
    @armindurakovic-d3f ปีที่แล้ว

    How do you get that link whenever he goes to style.css

  • @ashrafulalam7042
    @ashrafulalam7042 ปีที่แล้ว

    I wonder why you don’t use voice for better explanation!! Also speed has to be a bit slower ..

  • @adrieladegunju
    @adrieladegunju 24 วันที่ผ่านมา

    I use aqua by the way

  • @humbleayugho4534
    @humbleayugho4534 ปีที่แล้ว

    Which website does he use to code dis pls tell me

  • @JennelMontalvo
    @JennelMontalvo ปีที่แล้ว

    cool.....

  • @indianhackergamer3004
    @indianhackergamer3004 ปีที่แล้ว +2

    Bro please give me the html and css code please 🙏

  • @azizahjamilmatdoan9198
    @azizahjamilmatdoan9198 ปีที่แล้ว

    something wrong sith my sign-up, the space between sign-up and login is to long 😢 😢

  • @MasaiDartz
    @MasaiDartz 6 หลายเดือนก่อน

    Anyone else had a problem with the moving animation square?

  • @anonymous_basics
    @anonymous_basics ปีที่แล้ว

    which font is in use here?

  • @estebanibarralargo5619
    @estebanibarralargo5619 ปีที่แล้ว +3

    Que utilizas para que la linea numero 1 en el css se vea completa?

  • @ravivarmasarikonda2808
    @ravivarmasarikonda2808 ปีที่แล้ว

    It is not working at position absolute at input span

  • @karuppusamy3945
    @karuppusamy3945 ปีที่แล้ว

    What is the debug

  • @gymkhana521
    @gymkhana521 ปีที่แล้ว

    Bro muje apse personally bat krni ha please reply zarur krna

  • @HadeesOfficial-n3x
    @HadeesOfficial-n3x ปีที่แล้ว

    Styling krty hoy 2nd page per kasy jaty hain smj ni a rhii

  • @Mindscape-Quotes
    @Mindscape-Quotes ปีที่แล้ว

    dont same but completedyour copy please tell me

  • @Gojosensei001
    @Gojosensei001 ปีที่แล้ว

    Don’t know why but didn’t worked on mine

  • @dascorey2392
    @dascorey2392 ปีที่แล้ว

    the animation is not working for me

  • @paimyozaw7811
    @paimyozaw7811 11 หลายเดือนก่อน

    hey bro I can't run codes in CSS

  • @Y.B.avg_01
    @Y.B.avg_01 ปีที่แล้ว +2

    Bro I'm having issues with the z index one of the border animation is working good and other is not hiding why??

  • @MuhammadSafwan-i2r
    @MuhammadSafwan-i2r ปีที่แล้ว

    want that css link

  • @YashMehra-fv8vs
    @YashMehra-fv8vs 7 หลายเดือนก่อน +1

    My project not is support 😒