Login Form in HTML & CSS

Поділитися
Вставка
  • Опубліковано 23 вер 2024
  • Login Form in HTML and CSS, Login Page HTML CSS, Login Form using HTML and CSS, Login Form HTML CSS, Login Page HTML CSS, Login Form CSS
    Click For More: / @codehal
    Website:
    codehalweb.com/
    -------------------------------------------------------------------
    Get Source Code from here and support me ❤
    www.buymeacoff...
    Get Source Code by PayPal
    ko-fi.com/s/3f...
    🔔 Subscribe Now!
    / @codehal
    Related Videos:
    Animated Login Form using HTML and CSS Only
    • Animated Login Form us...
    How To Make A Website With Login And Register | HTML CSS & Javascript
    • How To Make A Website ...
    How To Create A Website With Login And Register | HTML & CSS & Javascript
    • How To Create A Websit...
    How To Create A Website With Login | HTML & CSS
    • How To Create A Websit...
    Download Image & Start Project From Scratch:
    drive.google.c...
    Icons:
    boxicons.com/
    Image Sources:
    Image created by pikisuperstar
    www.freepik.co...
    Codehal
    -------------------------------------------------------------------
    #css #cssanimation #csseffect #codehal
    -------------------------------------------------------------------
    Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

КОМЕНТАРІ • 502

  • @PierceSinclair-e5x
    @PierceSinclair-e5x Місяць тому +86

    I wanted to say THANK YOU I got my first web dev job! I started 9 months ago with this course and now I made a portfolio based on React Typescript projects and will start into my first frontend engineer job in July =) Believe in yourself guys! You can make it!

    • @vitorlopes523
      @vitorlopes523 Місяць тому +3

      congratulations

    • @AleenaCliff
      @AleenaCliff Місяць тому +2

      Congratulations

    • @Commenter1-w3x
      @Commenter1-w3x Місяць тому

      congrats

    • @Brawlstriker89
      @Brawlstriker89 24 дні тому

      Bullshit. Copying people on UA-cam will not get you a job people..

    • @Mr.Vishal.J
      @Mr.Vishal.J 23 дні тому +4

      ​@@Brawlstriker89copying ? Keep practicing .... watch and apply....

  • @catherinesalazar2113
    @catherinesalazar2113 11 місяців тому +133

    Everything about this video was BEAUTIFUL! the color-elements harmony, music, the neat code and the 'simple' yet spectacular final result. Thank you!

  • @alexandramoura2918
    @alexandramoura2918 11 місяців тому +57

    I'm so in love with possibilities of this design, the code is simple, the visuals are minimalist yet so beautiful, thank you fot this!!

  • @jasminnieoo
    @jasminnieoo 9 місяців тому +33

    i much appreciate you beginning with bright colors when positioning + sizing, it helps me understand how to put things in place

  • @ilhan537
    @ilhan537 Рік тому +61

    Your coding style is amazing.After watching your videos i have also started web designing...

    • @DaniellaB.
      @DaniellaB. 5 місяців тому +2

      Hi, how has it been going for u?

    • @t2hasnain
      @t2hasnain 4 місяці тому

      @@DaniellaB. cffvnfvnvn c

    • @ThatGuy-u3k
      @ThatGuy-u3k 15 днів тому

      I hope all the testimonials am seeing here are nt false cos am a beginner web developer and as I progress I will so want to share my progress here too,so video please be nicely

  • @lehaswinipalla3365
    @lehaswinipalla3365 Рік тому +23

    Thank you so much! I didn't know anything about css but i sure learnt a lot from this!

  • @BynxBS
    @BynxBS Рік тому +24

    I am really going to say thank you! Thank you for this immense help!

  • @lava_boy18
    @lava_boy18 4 місяці тому +163

    I am studying in 7 standard but I have passion to learn coding

    • @Jarpulaabhi5
      @Jarpulaabhi5 3 місяці тому +56

      Iam LKG I have interested in coding...

    • @free7633
      @free7633 3 місяці тому +52

      I am not even born yet but I have a dream of becoming a software developer

    • @Zack_Knight
      @Zack_Knight 3 місяці тому

      Im in my dad's balls but I dreamed to be hacker

    • @Outlevelgamers
      @Outlevelgamers 3 місяці тому +3

      6th standard

    • @Prots0392
      @Prots0392 3 місяці тому +12

      Learn it and in college you will be the smart kid

  • @bigarshiev2195
    @bigarshiev2195 10 місяців тому +10

    This was very good I’ve been going through w3schools but they had nothing regarding designing the login form to this level

  • @efraimelkan5794
    @efraimelkan5794 9 місяців тому +7

    Professional work. I like how you help us which div is which one by giving each a different color.

  • @jwinters007
    @jwinters007 8 місяців тому +5

    I could really use the practice with my HTML and CSS, your video was perfect! Thanks so much man keep up the good work!

  • @JimmyCrackorn
    @JimmyCrackorn 28 днів тому

    Helped me figure out the problems with my code, and I was able to use this knowledge as solid inspiration to finish crafting my login page! THANK YOU SO MUCH!

  • @Tornado-ln7fq
    @Tornado-ln7fq 10 місяців тому +4

    That's what you can't do, it's to move to the center of h1 using text align. It is better to wrap the text separately in a block, and set it from the parent block margin 0 auto; And add the text style separately.

  • @muppasaikrishna9403
    @muppasaikrishna9403 Рік тому +108

    In the style.css file you imported the url you didn't show that where did you imported that

    • @ayeminkyaw3754
      @ayeminkyaw3754 8 місяців тому +22

      It doesn't matter because the programmer already knows about that.

    • @vaibhavshukla1659
      @vaibhavshukla1659 8 місяців тому

      Same question ❓

    • @sanjaymishra-ec9lw
      @sanjaymishra-ec9lw 8 місяців тому +7

      They import Google fonts from Google.

    • @alonefill
      @alonefill 7 місяців тому

      Same question 🥺

    • @Anshu_0.7
      @Anshu_0.7 7 місяців тому +2

      Import in the same folder where you have created the project

  • @mmaLyons
    @mmaLyons Місяць тому +1

    when he said CSS in 20 minutes, he wasn't kidding. He actually wrapped up necessary stuffs within 20 minutes.

  • @debs.1037
    @debs.1037 4 місяці тому +1

    What an amazing video! This is the first project that I managed to finish completely, and I learned a lot. Thank you!

  • @playerdani327
    @playerdani327 Рік тому +10

    Looks perfect and a great tutorial, thank you👌🏼✌🏼

  • @flowerdecorationskochi3554
    @flowerdecorationskochi3554 3 місяці тому

    thank you sir because of you i was able to create a login.html page and i'm improving a lot , and my craze for coding is improving

  • @lgnocak7245
    @lgnocak7245 2 місяці тому +1

    The most ideal project for beginners 👍🏼

  • @muppasaikrishna9403
    @muppasaikrishna9403 Рік тому +13

    I am really going to say thank you! It's simple and useful

  • @AMANIA-e7g
    @AMANIA-e7g 2 місяці тому

    thank you for this, as someone who get easily overwhelm when things get so many ways, I appreciated doing this step by step

  • @HectorSoto-n3g
    @HectorSoto-n3g Місяць тому +1

    Bro you came straight out the Heaven to teach us all these.

  • @OmarAhmed-hy8pd
    @OmarAhmed-hy8pd 5 місяців тому +1

    Why did he use the ?
    Isn't it used to make an italic style ??

  • @TemitopeElizabeth-ek7fv
    @TemitopeElizabeth-ek7fv 8 місяців тому +1

    Amazing 👌 followed the steps and the result was nice. Thanks sir Codehal
    😊

  • @mitikouman7581
    @mitikouman7581 11 місяців тому +4

    I am really grateful to you
    I learned many things ❤❤

  • @arielb102011
    @arielb102011 5 місяців тому +1

    I had to set an id to that first . I could not use the class in the css

  • @animeworld1035
    @animeworld1035 Місяць тому

    Guys can anyone tell me why he is using way too much and what it do

  • @LifterAndy
    @LifterAndy Рік тому +18

    Thank you! I just made the same one!❤

    • @zeta1527
      @zeta1527 Рік тому +6

      if u want to learn faster do something else but with the things that youve learned from this vid. like a login form but in your own style

  • @anthonyoneal1856
    @anthonyoneal1856 6 місяців тому +1

    used this for a live exercise to get my feet wet into, CSS. I like the style but want to learn the element on my own.

  • @JACNNN80
    @JACNNN80 9 місяців тому +2

    Best tutorial i ever seen thank you so much.🎉

  • @deltalight5894
    @deltalight5894 5 місяців тому

    Thanks to you I learned how to center a div(also trying not to fall in tutorial hell by following different objects making a few small changes for example the background, I set it as an URL and made a few changes to make it look good)

  • @Got-it747
    @Got-it747 4 місяці тому

    I am genuinely grateful for this video. Thank you so very much.

  • @idachemoses228
    @idachemoses228 4 місяці тому

    You're such a great teacher. Thank you sir.

  • @OmGandharwar
    @OmGandharwar 7 місяців тому +1

    "Thank you very much for creating these videos."

  • @DevScriptStudio.
    @DevScriptStudio. 9 місяців тому +2

    thanks for help to create my first css lagin page
    thank you so much

  • @KennethWhite-v5b
    @KennethWhite-v5b Місяць тому

    Not even kidding, you are saving my ass in university right now. Just watched 2 full playlists now bout to watch this one.

  • @ricseljohnresare4503
    @ricseljohnresare4503 Рік тому +4

    Thank youuu it made my project better a 100%

  • @MSS_Akram
    @MSS_Akram 11 місяців тому +2

    awesome work dude....also it'll be more impressive if we have hover feature when we move our pointer across the login button....if possible please comment down the code for that one

  • @Nachokira
    @Nachokira 3 місяці тому

    Thanks man, I can practice HTML and CSS exercises with this.

  • @apaacobaa-p3t
    @apaacobaa-p3t 10 місяців тому +1

    Izin menyimpan video bro, buat tugas sekolah, thankss ✨

  • @matinghobadi8958
    @matinghobadi8958 25 днів тому

    hi i want to say than you my degree is desian & devlopment of website you are so good

  • @karinegillis9327
    @karinegillis9327 2 місяці тому

    Amazing! I was getting crazy trying to solve this problem.

  • @Kellynaij
    @Kellynaij 7 місяців тому

    This video will be so helpful to me cos I really need to do something like this but I don’t know how to use html and css very well just wish I can learn from you
    This video is so beautiful btw thanks

  • @strikerjay4802
    @strikerjay4802 Рік тому +7

    How do you make it where when you click login it actually works and makes you go to the website while being logged in. I need one for a teacher versus student where the teacher can do things the student can't. also with forgot password etc how do I make those applicable?

    • @leonardonunes1199
      @leonardonunes1199 Рік тому +2

      Those thing you said need a backend project, starting with MySQL database. Now, to make all the buttons applicable, you need to create a several pages and link them to the buttons. It's not hard hard work, it's not a free work either. Requires studying and practicing.

    • @brokegod5871
      @brokegod5871 Рік тому

      Just wrap them in an anchor tag. If you want the login button to take you to another website, put an tag first with the href of that target website and inside the tag have your login button. On pressing the button, it will take you to the target website. Do the same for any button that you want to open a different website to

  • @unnathpgowda5437
    @unnathpgowda5437 Рік тому +4

    If I am giving a padding to .input-box input the size of the input box is increasing rather than what happened in the video. Can you please tell what I might be missing

    • @LnqIslive
      @LnqIslive Рік тому

      I think its for the placeholder not sure which part of the video your saying

    • @rteditz21
      @rteditz21 Рік тому

      What to do bro did u get it

    • @sposada00
      @sposada00 11 місяців тому

      .input-box input {
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      }
      add the box-sizing property

  • @ИгорьСикорский-ц3ы

    Очень круто, спасибо!

  • @OminaOrifjonova-p8g
    @OminaOrifjonova-p8g 7 місяців тому +2

    Thanks it was ver helpfull for me ❄

  • @bajutaboy7588
    @bajutaboy7588 6 місяців тому

    Respect for you blood Good Creativity and awesome Idea...

  • @RewindzFrxst
    @RewindzFrxst 9 днів тому

    I don’t know if you’ll see this but could you make a part 2 and show us how to make the login button take you to a different site

  • @xamdasiciid1290
    @xamdasiciid1290 17 днів тому

    I'm new in yr channel i visited today i want to learn created all forms

  • @Binteabdulrauf
    @Binteabdulrauf 6 днів тому

    You work is amazing but please music ki jaga ap voice add kar den kuch properties asi hn jo samjh nahi ayen

  • @sophiewaibole1457
    @sophiewaibole1457 2 місяці тому

    thank you! such a cool practice for a begginer 👍

  • @FearAwaits
    @FearAwaits Рік тому +2

    Thank you sir! More tutorial please❤

  • @امعبدالرحمان-ز7م
    @امعبدالرحمان-ز7م 3 місяці тому +3

    هذا الفيديو رائع ولكن لوكان تنحي المسيقة وتشرح يجي افضل من هذا بكثير 🤑🤑😇😇😄😄🤗🤗🤭🤭🤭🤠🥳🥳🤠🤠

  • @hasstudyt
    @hasstudyt 2 місяці тому

    Your syntax color is cute😍
    Can you teach me how to change it please??

  • @random-i6h
    @random-i6h 19 днів тому

    Excelente, muchas gracias, lo acabo de terminar. En firefox no funciona el filtro de blur... por si acaso.

  • @maangoswami5622
    @maangoswami5622 5 місяців тому

    Thank you very much for this video, it was very informative

  • @yugrathod2083
    @yugrathod2083 5 місяців тому +1

    pls help for some reason I can't connect my html and css together....at 3:00 when u r trying to align in centre it is not aligning in my computer pls respon

    • @MOHDAQUIF13
      @MOHDAQUIF13 5 місяців тому

      You have to type link tag in head for connecting css to html file

  • @godofanimez2504
    @godofanimez2504 Місяць тому

    Everything was what I needed. Thanks

  • @InPixel180
    @InPixel180 7 місяців тому

    Thanks a lot Mate! This really helped me in my Coding Journey!

  • @muhammadshees8417
    @muhammadshees8417 Рік тому +1

    Most amazing video that I have ever seen my brain tell me to write this comment great video ❤

  • @russ_the_ceo6456
    @russ_the_ceo6456 10 місяців тому

    Thank you! Very helpful and easy to follow along.

  • @alexglez3434
    @alexglez3434 2 місяці тому

    excelente tutorial. 👍 Thanks

  • @hemashirisha9522
    @hemashirisha9522 Рік тому +1

    Thank you so much .. this video helps me a lot

  • @samuel-Geometry
    @samuel-Geometry 8 місяців тому

    Thanks you for this video, you are amazing, i will want do some that in the future

  • @mehmetardc6180
    @mehmetardc6180 3 місяці тому

    This is very well, thank u to share us this video.

  • @casualxtalks
    @casualxtalks 4 місяці тому +1

    Thanks for this amazing video!!!!

  • @diegomatallana7994
    @diegomatallana7994 8 місяців тому

    Thanks for this video I used this format for practice, but I made with Dragon Ball tematic ☺

  • @medandcare
    @medandcare 12 днів тому

    Thanks for the help 👍

  • @SupardiAtisina
    @SupardiAtisina Рік тому +1

    Thanks bro I am from indo love your channel

  • @hkynltn
    @hkynltn 10 місяців тому

    Thankyou you saved me my teacher is happy

  • @fabriwaliase8633
    @fabriwaliase8633 6 місяців тому

    Thank you so much, my login website is amazing now
    🥰🥰

  • @snekavarsha9402
    @snekavarsha9402 Місяць тому

    Excellent work 👏🏻👏

  • @Lordd-Grimm
    @Lordd-Grimm 11 місяців тому

    thank you bro you are helping me to learn something new 😊😊

  • @footballCartoon91
    @footballCartoon91 7 місяців тому +1

    why would you set "border : none;" and then you set it again "border: 2px solid rgba(255, 255, 255, .2);" @5:14

  • @StylishBanditSlayerS
    @StylishBanditSlayerS 7 місяців тому +1

    Thank You So Much For All Bro!!!! This Is So UseFull For Us!!!!! Thank You So Much For All Bro!!!!!

  • @AlihaWaseem-y5g
    @AlihaWaseem-y5g 5 місяців тому

    great lt is helped me in web desining😄

  • @shohruxzokirjonov3356
    @shohruxzokirjonov3356 11 місяців тому

    thank you so much. for such a beautiful contents.

  • @mrraj7534
    @mrraj7534 Рік тому +4

    Great work

  • @DrDreadful
    @DrDreadful 5 місяців тому

    Amazing video! Great help.

  • @pvksmaheeth8816
    @pvksmaheeth8816 Рік тому +1

    thank you so much perfect design

  • @saba-tabagua
    @saba-tabagua 8 місяців тому

    thank you for this evrything and good luck in you career

  • @maangoswami5622
    @maangoswami5622 5 місяців тому

    Thank you very much for this video

  • @EmmanuelChiemeka-g8v
    @EmmanuelChiemeka-g8v Місяць тому

    🎉 the person that did this really deserves more than 500k like

  • @hemavarshini1822
    @hemavarshini1822 7 місяців тому

    Thank you so much . The Video is very useful.

  • @کلاغ-ط7ح
    @کلاغ-ط7ح 9 місяців тому

    Thanks for video ❤️ i looking your video from Iran

  • @saismile1045
    @saismile1045 Рік тому +3

    Thanks a lot dude!!!😍😍😍💯💯💯🔥🔥🔥✊️✊️✊️

  • @victorgaliza
    @victorgaliza 8 місяців тому +1

    it's so satisfying ☺️❤

  • @tanishkamhatre-q2g
    @tanishkamhatre-q2g Місяць тому

    Thank you so much its very helpful

  • @SanowarJahanTasnim
    @SanowarJahanTasnim 2 місяці тому +1

    wonderful work,thanks a lot

  • @Kuroo37
    @Kuroo37 4 місяці тому

    Thanks bro nice video and the login is PRO

  • @studynewthings1727
    @studynewthings1727 Місяць тому

    Awesome designing

  • @Alejandro-di4sf
    @Alejandro-di4sf 4 місяці тому +1

    Hello Codehal,
    I am reaching out to inquire about the copyright status of your content. I work for a company and we are interested in implementing it in our projects. Could you please clarify if your content is free to use? Thank you for your time.
    Best regards

  • @gustavoaparecido2102
    @gustavoaparecido2102 Місяць тому

    Amazing! Thank you.

  • @-fat
    @-fat Місяць тому

    Thank you for these videos

  • @German-wh4dm
    @German-wh4dm Місяць тому

    It's looks great 👍

  • @hasnat-ps8fp
    @hasnat-ps8fp 16 днів тому

    thanks for the amazing tutorial

  • @BananaPieWithAnxiety
    @BananaPieWithAnxiety 2 місяці тому

    This is suprisinly easy to make, I just remade it just based on how it looks

  • @salcedosama
    @salcedosama 6 місяців тому +1

    Cómo se puede hacer para que en la sección de "password" a la hora de digitar, se marquen asteriscos ¿? Gracias

  • @gabrielOkunola-wp4pt
    @gabrielOkunola-wp4pt 5 місяців тому

    thank you you have inspired me to do more😎😎😍😍