Ecommerce Website With PHP & MySql - 44 - Login page - YouTube двуязычные субтитры

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-субтитры

Создавайте точные и быстрые AI-субтитры YouTube всего за 3-5 минут.

AI-определение слов

Нажмите на слова в субтитрах, чтобы найти определения с помощью AI.

AI-анализ грамматики

Анализируйте грамматику предложений, чтобы быстро понять их значение и освоить сложные грамматические моменты.

Дополнительные веб-функции

Помимо двуязычных видео субтитров, Trancy также предоставляет перевод слов и полноэкранный перевод для веб-страниц.

Ecommerce Website With PHP & MySql - 44 - Login page - Двуязычные субтитры

Разблокируйте больше функций

Совместимость с основными видеоплатформами

Готовы начать