Ecommerce Website With PHP & MySql - 44 - Login page

Ecommerce Website With PHP & MySql - 44 - Login page - 双语字幕

Welcome back.

Now what I'm going to do is that I'm going to work on the login page.

So I'm going to create a new here page called login.html.

And then in this login.html,

first I'm going to copy the the header and the body from the index from the index here I'm going to first copy this part

and then I'm going to paste it in the login and then I'm going to again copy the footer part which

is this part these three lines and then I'm going to paste it paste them in the

So I'm going to get I'm going to get the navigation from the index here I'm going to get this navigation

and then I'm going to paste it in the login

and then I'm going to close it because we don't want to work on it

and I'm going to get also the footer so I'm going to

copy the footer and paste it in the index as well and then I'm going to close it

because I'm not going to work on it.

Now we need to work on the login form.

So in order to work on the login form I'm going to create a login section.

I'm going to say here login.

And then, here I'm going to create the section.

I'm to say here section.

And for this section, first of all, I'm going to give it a class.

I'm going to say here class.

And I'm going to give it the margin, Y margin top on bottom.

I'm pairing top and bottom 5.

Then that I'm going to create a div and for this div I'm going to also give it a class and that class is going to be the container.

And I'm going to also give it a text center, because I want the text to be centered.

And I also need margin top and margin and padding top.

I'm going to say margin top three and padding top five.

Now inside this div, I'm going to display here, I'm going to use H2T.

And I'm going to give this h2 class, and that class is going to be the form weight bolt.

And I'm going to say here login.

Below this login, I'm going to display hr, and I'm going to give it a class.

And that class is going to be Mx, auto, margin, right and left, auto.

And then I'm going to create, below this, I'm to create a dev.

But I do so,

let's test first, I'm going to save all, and let me hit the over to the browser and let me go to the login.

So if you go to the login, you'll find that we have your login.

Let's now work on the form itself.

So below this div, I'm going to create another div.

So for this div, I'm going to say here, class.

And then I'm going to say, mxauto, because I want a div.

the this form and I'm gonna add the container class to it because I want to add margins left and right to it.

Now inside this I'm gonna create the form itself.

I'm say here form and then I'm gonna give this form an ID.

Ready be login form and inside that form we need a dev.

And this div is going to be for the first input.

I'm going to say class form group.

And then inside this, I'm going to use the label to display info about the first label, about the first input.

So the first input is going to be email, therefore I'm going to say here email.

And the input itself,

that's going to allow the user to type their email, is going to be the input I'm going to be using, the input itself.

And I'm going to give it a type.

The is text or email, let's say text.

And I'm going to give it also a class, a bootstrap class called form control.

And I'm going to give it ID.

The ID is very important.

I've an ID called login email.

And also the name, the name is going to be, name is going to be email.

And also let's say placeholder, I'm going to say placeholder, email, email.

And finally, I'm going to say required.

So this is for the email, let me save and let me hidden over to the browser and test.

So the email here, as you can see, this is the input for the email.

Let's create another one, so to create another one, I'm just going to copy this, Dev, and then I'm going to paste it below.

And we just need to change a few things.

So for, instead of saying email, we need password.

So the user would be able to log in using the email.

The type is going to be password, the form control, the ID is login password.

And we need also a name, so the name is password.

and the placeholder holder is passed forward.

Lastly, we need to display, let me first save and show you this.

As you can see, we have email and password.

Lastly, we need to add a button.

So to add a button, I'm going to copy again this div, and I'm going to paste it below.

But the button is going to be different.

The button doesn't need to have a label.

I'm going to remove the label.

And the button type is going to be submit.

It should be submit.

And the be and the class is going for the input is just going to be BTN.

We need the form control.

We to say BTN.

And the ID is going to be login BTN, login BTN.

The class, we already said that the class is a BTN.

Finally, we need the value.

We need any of this.

So going to remove all of these.

Instead, we just need the value.

So the value is login.

Let me save and let me head over to the browser and test.

So we should have here a here it says, login, but we need to work on the design.

But before I work on the design, let's continue on the finish of this form.

So the last thing that we need on the form is the registration URL.

We need a link that takes the user to the registration page.

Therefore, I'm going to create another dev below And this one is going to be a tag.

So going to remove this input completely.

And then I'm going to say a tag.

And for this a tag, I'm going to give it an ID.

I'm going to say ID.

Regis to URL.

And the class, I'm going to give it also a class.

I'm going to say class median.

Lastly, I'm going to display here.

Don't have account.

and then your pre-gister.

Let me now see if I'm letting it over to the browser and refresh.

And as you can see, we have now this button.

It says, don't have an account.

Let's now start working on the design.

So I'm going to open up the CSS, the assets we have the CSS, and the style that CSS let's start working on the login.

So I'm going to add here a comment first.

I'm going to say here login,

have the login the login form so I'm gonna start with the login form I'm gonna

say here hashtag login form so for the login form itself the first thing is that I'm gonna change the width.

I'm gonna say width 50% because I want I want the the form to take only this area.

I want it to be centered and I want the log it for it to be small and I don't want it to take the complete

Therefore, I'm going to say here with 50%.

Next, I'm going to say margin, margin 5px auto.

This is going to center the v4.

Next, I'm going to say text Alliance Center, text Alliance Center, but I think we already

have given the entire We didn't so the this text center was for the login,

so it's not so this we need to add this text line

Center Next we need to say padding we need to add padding padding is gonna give it a good space from all sides.

I'm going to say 20px.

Lastly, I'm going to border top to it.

1px solid orange.

So the orange color that they have been using was this one.

So, thank you now, Steve, and...

see how this looks like.

So as you can see now it's much smaller and it's being displayed in the middle.

Now let's work on the rest of the form.

So in the form itself we have the inputs.

So for the inputs I'm going to say here, I'm going to say login.

For the inputs, for the inputs, I want also the size to be 50%.

I'm going to say 50%, because as you can see the The inputs are extraordinary big, they are extraordinary big, and we don't want that.

I just want them to be extremely small.

There is no need to display an email or password field with this huge width.

It must be small.

So this is for the input, and also we need to add some margins.

So I'm going to add to your margin.

5bx top and bottom and auto left and right.

The next thing that I'm going to do is that I'm going to work on the login button design.

I'm to say login form and then button, login btn.

So for the login button, I want the login to have the orange color.

I'm to say background color, background color.

So background color is going to be the orange color and the color itself is going to be white.

The color of the text is going to be white.

I'm to say color and then with this color.

Similarly for the register, for the the reverse.

For the register, I'm going to say here login form, and then I want the register, register URL.

For the register URL, I just want the text to be orange.

So I'm going to say color orange.

color this color which is the orange color let's now save and let me show you

how this would look like so as you can see now it looks outstanding now

the form is not extraordinary beak it's much smaller and And it looks amazing.

The doesn't have to fill a huge input.

It's just enough for the email or the password.

Also, the button fits perfectly with the width of the inputs.

Also, we have the don't have account button, which looks amazing.

It be displayed as a button.

It should be a link like this, where the color is different, but the background is nothing.

The background is just white, like the background color of the website itself.

And we also have here the logo.

which is being displayed at the top, which is also important.

To let the user know that this is the login page.

So now we have the login page complete.

翻译语言

选择翻译语言

视频总结导出字幕口语评测

解锁更多功能

安装 Trancy 扩展，可以解锁更多功能，包括AI字幕、AI单词释义、AI语法分析、AI口语等

兼容主流视频平台

Trancy 不仅提供对 YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera 等平台的双语字幕支持，还能实现对普通网页的 AI 划词/划句翻译、全文沉浸翻译等功能，真正的语言学习全能助手。

支持全平台浏览器

Trancy 支持全平台使用，包括iOS Safari浏览器扩展

多种观影模式

支持剧场、阅读、混合等多种观影模式，全方位双语体验

多种练习模式

支持句子精听、口语测评、选择填空、默写等多种练习方式

AI 视频总结

使用 OpenAI 对视频总结，快速视频概要，掌握关键内容

AI 字幕

只需3-5分钟，即可生成 YouTube AI 字幕，精准且快速

AI 单词释义

轻点字幕中的单词，即可查询释义，并有AI释义赋能

AI 语法分析

对句子进行语法分析，快速理解句子含义，掌握难点语法

更多网页功能

Trancy 支持视频双语字幕同时，还可提供网页的单词翻译和全文翻译功能