Login Form | HTML CSS

#shorts #youtubeshorts #html #css #tutorials
This video shows to create login form

[@vladtheduck]

For those who are wondering:


*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container{
display: flex;
flex-direction: column;
width: 300px;
padding: 15px;
border: 1px solid skyblue;
border-radius: 5px;
}
input{
margin: 5px 0px;
height: 35px;
padding: 7px;
}
button{
height: 35px;
margin: 5px 0px;
background-color: skyblue;
border: none;
border-radius: 5px;
color: #333;
}
button:hover{
background-color: #333;
color: skyblue;
}






Login

[@rathorff999]

Bro copy kaha se karenge😂😂😂

[@Ayushgamer12347o]

Bro take the Screenshot in Google lens and then Copy It..​@@rathorff999

[@nainigamer9738]

thanks but how to copy

[@rokivaitrick]

Google se

[@maheshbadgujar1686]

Video ki link copy Karo and pc ya laptop se copy kr lo..😅

[@AftabUA]

Basic and very simple but good for beginners

[@PrachiPriyamwada]

After the hardwork getting the result, the hardwork really paid off❤

[@learning-axis]

of course

[@DrOduor]

This is impressive. I've also been trying to learn html and css. Have posted a few videos.

[@therapy.i]

i'm so happy for understand this code

[@learning-axis]

cool

[@Sushilsarkar-7s-tp603]

Nice I'm also interested to learn 😊

[@xekeplove]

finally a normal login page without ultra animations and 91799919 lines of css code. good job!

[@learning-axis]

thanks

[@TopMovieScene01]

😂😂

[@IshtiaqAhmed-m7o]

Love this

[@learning-axis]

thank you

[@eluser7854]

You would have to put the result first and then the development... but good

[@Efsane_yolculuk9]

Wow it’s perfect and great 🎉

[@learning-axis]

thank you

[@KausikkumarSaha-iq6dn]

At last u use vscode ❤❤

[@saharabbas8486]

Thats good.....I have also leraned html and was helpful

[@learning-axis]

That's great to hear! I'm glad you found learning HTML helpful. It's a fundamental skill for web development and can open up many possibilities. Keep up the good work, and feel free to ask if you have any questions or need further assistance!

[@KhalRashid]

I use VS code, but beginner and I found this to be way too fast for me to grasp

[@kieransmithy2402]

No tag? How you gonna POST?

[@evgeniyzabolotskih4530]

by Hogwarts magic ✨

[@kieransmithy2402]

Learn Django and python, everything backend

[@yashagrawal774]

Bro its only design

[@yactonrichol]

I thought the same. This is basic 😂😂😂😂

[@Nocontenthere1039]

​@@kieransmithy2402 seriously its just design

[@vanshraj6772]

Why haven't you used from tag

[@romigamesofficial9483]

Awosam

[@LaxmiPaudelDhakal]

You shoulf put background color:rgba(235,35,78,0.7)

[@learning-axis]

yes you can

[@muralikonada5170]

Nice✨

[@SaifAly-l6r]

Button {
Cursor: pointer;
}

[@youtuber3134]

Woww😮

[@swairam3556]

Please tell me how to animate frame by frame in HTML

[@luisllorensmompo]

Me encanta, sólo falta que funcione.

[@learning-axis]

thank you

[@TechBox2026]

Look like good.

[@Zoxipro]

Veri cool

[@mrdevbai]

For HTML apps, what do you recommend? Sublime Text or Visual Studio Cods?

[@learning-axis]

vs code

[@Ayeshakhan-vf5bn]

Agr fsc ky bad koye development mn ana chahy to easily learn kr skta ha?

[@learning-axis]

g g kr sakty hain

[@edwardkem425]

Nice and easy 🙏🏼

[@Insentium_gd]

Whats the point of making it if it doesn't work, however good it looks? Make a tutorial with using javascript also

[@rga1888]

Because you need JS for the backend stuff, like creating databases of users information. However, for stuff like appearance it's totally fine.

[@Bostonia9]

We Can Do This

[@Mizuki-Hiroshi]

Thank you, now i have 60 unauthorized information of the families I sent to trick them into thinking they won the jackpot.

[@ZdsBunker]

epik 0:00

[@PAIN-xd4wk]

oh man u didn't use the tag hahaha

[@abdulrafay4745]

You should apply transition on "login button"

[@ns200addicted3]

Which is best app to practice the html and css in mobile

[@learning-axis]

vs code is best on desktop

[@bhuwankashyap4756]

Spck Editor

[@manoj4208]

New subscriber 😀😀

[@osho439]

max office

[@sonaks5727]

Thanku so much... ✨

[@CodingW3]

👏🏻👏🏻👏🏻👏🏻

[@fathimasyeda2345]

Vry nice sayeed ❤ hat's off i am Fathima didi u knw me well

[@Hggamming567]

Nice🎉🎉🎉 yarrr

[@Liv8ngPrinc3]

Legit this is good

[@PAIN-xd4wk]

without title and desc looks bad :(

[@cycrothelargeplanet]

HE DID IT
HE CENTERED THE DIV

[@insearchofpeace-xp3cf]

Truly a great achievement

[@romigamesofficial9483]

Op bro op bro

[@Princevlogs01]

Hi good bro

[@gorkiiogurec]

Hello, is there a way to make a like button?

[@learning-axis]

In HTML & CSS, you may use external "Font Awesome Icons library" to create like button

[@gorkiiogurec]

@@learning-axis Thanks for the answer, but can you show an example if it's not difficult?

[@learning-axis]

@@gorkiiogurec sure I will send you a code

[@gorkiiogurec]

@@learning-axis Thank you!

[@learning-axis]

Hello! code for the like button is below:
Video link: shorturl.at/fiuFT
Source code: shorturl.at/csMW2

[@vincentpalionay]

Pa req po ako paano gumawa ng webpage or website

[@issahasni-qh6kv]

Hi brother I went to quarantine that login register page

[@whoisyurii]

That's the content i pay Internet for

[@922sina6]

How make to center

[@ankushbhagatofficial]

Minimal design ✅

[@caydaruuskayse4643]

Thanks 🤍🤍🤍

[@yashbanait...7277]

Is the own website built with html and css..??

[@learning-axis]

yes you can

[@learning-axis]

but you also need javascript

[@yashbanait...7277]

@@learning-axis Still I'm learning CSS, after finishing this I'll Start Javascript..☺️

[@learning-axis]

@@yashbanait...7277 great

[@kirtigarg897]

​@@yashbanait...7277 yes

[@hidestudio7735]

Can I copy this?

[@emilianomartinezpena5420]

Nuevo sub

[@HattonNtobeng-uj6ut]

I need the copy

[@williamspenser-xz6cu]

i can add the backend with js

[@learning-axis]

php or nodejs

[@williamspenser-xz6cu]

@@learning-axis node

[@FrankMyuguye]

Can you do it in phone please

[@radcaptain9855]

Plz tell me app name

[@mhd_Code]

👏

[@flipoff1429]

cursor: pointer ;

[@danielemmanuel2865]

Why won't the login click
I mean to login for real

[@rockshubham7556]

There's no javascript.

[@Chaudharylafij]

Plz help me my TikTok account hacked 😢

[@a_one_ff_shorts]

bro code plzz

[@ericlamela371]

Source code please

[@learning-axis]

see description

[@earnwithfalak09]

Bhai phone me vs code chala rha h

[@learning-axis]

nahee

[@Tiptrickszone]

How to bypass it ?

[@brunozampieri8201]

For the newbies... There is a LOT of bad practices

[@manjitsingh7449]

Where will be the I'd password we entered will be stored

[@learning-axis]

in data base, or you can send it to you email and google sheet

[@rohanpaul1531]

​​@@learning-axishow to connect in data base this website?
Please make a video for this

[@deepaksahriya1293]

Itna cide likhna Aaj asan ho gaya chatgpt par

[@your_bookshelf]

can css codes make this log in form

[@learning-axis]

no

[@franwill3994]

plz code

[@honzosaurus42069-no_furry]

C'mon maaaaan... Why do you wrote css in html file it's then messy and you can't understand what's goin' on......

[@Chess_world12]

🤣🤣🤣🤣🤣😊

[@Facts70658]

Mereko ye aata hai brother kisi ko sikhna hai kya

[@neutralkid9240]

Login360😂?

[@nu6691]

Background song pls ?

[@siddhibhapkar1377]

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 8em orange;
}
.earth,.moon {
position: absolute;
border-style: double;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 26.05s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 8.1s linear infinite ;
}
.earth::before,
.moon::before {
content: "";
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: cyan;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: lightgray;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}

[@codinglearningvlog7462]

#codinglearningvlog7462

[@dennisnonailladajr.8605]

I'd rather use two different language so it would look clean

[@SaifAly-l6r]

Button {
Cursor: pointer;
}

[@Ar-TK]

Add transition attribute on both button and button:hover.

[@fred_001]

what font are you using?

[@learning-axis]

default vs code font

[@fred_001]

@@learning-axis Weird. And for some reason it seemed to me that such a cool font. On my laptop, this font looks worse because of the screen. So I changed it to a more beautiful font.

[@kavitaagrawal5605]

Jajaj

[@yaalimadad2148]

Mujhya bhi seekhni hai html 😢😢😢