All language subtitles for 054 Movies UI Layout.en

OK, so we're going to get started on our movie app, and the first thing we want to do is the HTML,

then we'll jump into the contest and then finally we'll start in our JavaScript to pull in the data.

So in our index, each 12 of our projects start out.

Let's change the title here and call movie app and let's change or let's add into the body here.

We want a header at the top with a form.

I'm going to give this form an idea of form and insight here.

Actually, we don't need an action.

Get rid of that.

So we just want one input in here, which is going to be our search.

I'm going to give it an idea of search and also a class of search, and it's going to be text.

And then let's add a placeholder of search as well, OK?

And I'm not going to add a button, so we'll just have to hit enter.

If you want to add a button, you can.

But under the header, we're going to have our main area.

And I'm going to give this an idea of main.

And ultimately, this is all we're going to have in our HTML because the movies are going to it's going

to get inserted into the DOM with JavaScript.

But for now, we're just going to go ahead and hardcoded the HTML so we can style it so each one will

have a class of movie around it and it'll have an image.

And for now I'm just going to grab just an on splash stock image of some movie seats and it's going

to take up the whole thing for now.

But under that image, we're going to have a div with the class of movie dash info, which is going

to have the title.

So an H3 with the movie title and under the movie title will have a span.

Now this is going to be the rating and the color of the text is going to be different depending on the

rating.

So it'll be green if it's a high rating.

I think it's a ten point scale, but we'll just say like nine point eight so that that'll have a class

of green in the JavaScript will make it dynamic.

If it's a low rating, it'll be red.

If it's a mid rating, it'll be orange.

Now, under the movie info div, we're going to have our overview.

So class of overview.

And inside here, it's just going to be an H3 with overview as a label.

And then let's do LAAM 20 just for some dummy text here and then that should do it for the movie.

Now we're going to have a lot of these movie divs that are going to be inserted from the JavaScript

with the API data.

So I'm going to copy that and just put two more these movie divs in here for now.

And then in our stylesheet here, I'm going to use the Poppins font, so I'm going to highlight Raboteau

here, command highlighted here and change it to Poppins hit Escape to get back to my cursor up here

and let's use 200 400 for the weight.

And in the body we can get rid of everything except the font family and the margin zero.

OK, because we're not using Flex to, you know, put put in the middle like we have with most projects

because we do have a header, you know, that we're going to have and then the movies.

So I do want to add a background color here and we'll be using this color and another one throughout

the project.

So I'm going to put them into custom properties on the root scope.

So let's have a custom property or variable called primary dash color.

And this is going to be two two two five four B, it's going to be that.

And then we'll have a secondary color, which is going to be hexadecimal three seven three B six nine.

And let's call this.

Secondary, OK, and then primary color here is will say var.

This is the syntax for custom properties is var parentheses and then whatever the variable.

OK, so you can see that now the header, we want to style that.

So header I'm going to add some padding will do one to one room padding and I'm going to display Fleck's

and there's only one Fleck's item which is the form and I want to align that all the way to the right.

So I'm going to use to justify content Fleck's and which will push it all the way over and then let's

style the search box itself.

So search I'm going to set the background color to transparence and let's set the border.

So the border is going to be two pixel solid and it's going to be the secondary color.

So var dash dash secondary color and actually.

No, wait a minute.

Do we want that now.

We want the primary color for that.

Actually.

Hold on a second.

The header, yeah, the header, we actually want to have a background of the secondary color, so I'm

going to paste that in and change that to secondary.

There we go.

All right.

So I also want the border radius to be 50 pixels for the search form.

And let's make sure we inherit four font family.

We want to inherit our Poppins font, and then I'm going to increase the font size to one room and I'm

going to add some padding.

So we'll do point five from top and bottom one room, left and right.

And the color of the text that we type in will be white and that should do it.

I also want to change the color of the placeholder.

So search colon, colon placeholder.

Let's make that color.

This is actually going to be a seven three seven eight SI five.

OK, so I can see it has that purplish color and for the focus, so let's say search colon focus.

So when we click inside of it, I want to remove any outline.

So outline will be none.

But I also want to change the background color to be the primary colors so far.

Dash, dash, primary colors.

If I click in here, you can see it gets that background color.

All right, now let's do the movie area.

So are the main area, I should say.

So for Main, I'm going to display Flex because remember all the divs with the class of movies, those

are going to be flex items within Mane.

So it'll turn it into a flex row.

And I want them to wrap onto the next line.

So Flex Wrap will set to wrap and then I'm just going to grab the image so each div has a class of movie

and then we have an image inside.

I want that to be 100 percent of its container, which right now just goes all the way across.

But let's set the movie so each movie class will have a width of three hundred pixels.

All right.

And then we'll go ahead and add a margin of one ram to separate them out.

I'm also going to do back for a background background color.

I'm going to set that to the secondary color.

So var dash dash secondary color and we'll add a little box shadow.

So box shadow for the offsets will do zero for pixel by pixel blur arga black and zero point two for

the alpha.

So it gives it a little bit of a shadow and I'm going to position this relative so that we can position

other things inside of it.

Absolute.

I'm going to set the overflow to hidden and I'm going to set the border radius to three pixels so it's

just slightly rounded.

OK, now the movie info is the title and the rating, so class movie info and I'm going to first change

the color, make that brighter and I want to display Flex because I want it to be, you know, the title

here in the rating over here.

So if we do display Flex and let's take any.

Let's see, let's take the margin top off of the heading, so movie info three, that set margin top

to zero like that.

All right.

So we have display flex, let's line items to the center and let's justify content.

I want to put the space, the extra space between them so it pushes the rating all the way over.

And then for padding, let's do zero point five ram, one ram and then one ram on the bottom as well.

All right, and then I'm just going to add letter spacing here, and we're going to do point half a

pixel, point five pixel.

All right, now, what should we do next here?

The span, which is the rating here is going to have we're going to have the ability to add separate

classes depending on, you know, how high or low the rating is.

So we need those classes.

But the base class or the base element.

So movie info span, let's add a background color and that's going to be for the spane.

Let's do VARE and we're going to use our primary color like that.

And let's set.

Some padding on that, so we'll do point to five from top and bottom, point five from left and right.

Good.

Let's set a border radius of three pixels and then let's set font weight to bold.

OK, so that's our rating.

Now we want the different color classes.

So let's just grab that.

And let's say if it has a class of green, let's set color to green.

Actually, that's a little too dark.

Let's do.

It's light green look like, you know, we can do that, and then let's just take this, we want three

of these and the second one here is going to be orange and we'll set this color to orange.

And then this one here is going to be red and will set this one to red.

Right now, if one of these ratings, like, let's say this last one is is three point eight and we

set the class to red, then it's going to have a red coloring.

Now, the last part of this is the overview.

And the overview is going to be the white part that when we hover over, it's going to you know, it's

going to come up from the bottom.

So we want to add a transition on that.

But let's style overview first.

So I'm going to set the background color to white on overview and let's set some padding so it's not

up against the sides will do to some padding.

We're going to position this to be absolute.

And as far as you know, where we want to position this, let's do top top left, top zero, bottom

zero and right zero.

I'm sorry, not top left.

So we want left and right, zero and bottom.

All right.

So it should look like that.

And then.

Yeah, and then I'm going to set a max height of one hundred percent.

OK, now we don't want this to show initially what I want to do is have it pushed all the way down out

of the box and then when we hover, it comes up, transitions up so we can move it down with transform

and then we can use translate whi, which translates or moves it on the Y axis and I want to move it

down so it'll be a positive number.

We're going to do 101 percent.

So 100 percent of its height plus one more percent, which will move it all the way down.

If I set this to like 50 percent, it'll push it 50 percent down, but we want it off screen to begin

with and then when we hover it, so we'll say overview hover.

I'm sorry, not overview.

However, we want movie.

So when we when we hover over a movie, which is the entire box, then we want the overview to change

its transform translate why to zero, which is its original positioning.

Now if I hover over you can see it, it does that, but there's no transition yet.

So let's add a transition on to this.

We want transition and we want to transition.

The transform property will do zero point three second duration and we'll do an ease in effect.

So that way when I hover over it just kind of slides up, which is what I want.

OK, so now that we have the design down in, the next video will jump into our script J.S. and pull

in the data from the API using fetch and then ultimately insert these cards with the dynamic movie data.