OK, so we're going to get started now, this project is very heavy, that's what we're going to mostly
be focusing on.
We do need to add some JavaScript to have the hover effect.
But a lot of this is going to be styling.
So the HTML is actually going to be really simple.
Let's just jump right in here.
And this is a split landing page.
And I don't know, I just did that.
And we're going to get rid of this one.
And let's wrap everything in a container and then we're going to have the left and the right.
So both of these are going to have a class of split.
And this one will be the left.
So we'll also give it a class of left.
And then and here it will be.
Let's do an H1, say, PlayStation five, which is definitely my choice.
And then we'll have a link formatted as a button.
So I'm going to give this a class of B10 and it's not going to actually go anywhere.
And then for the text in here, we're going to say bye now.
OK, and then what we'll do is just copy this.
So this whole div right here, we're going to copy that down and just change this to.
Right.
So this is the right side and we're going to change this to Xbox Series X and by now.
And that's it.
So very simple html it's going to look like this.
So we're going to jump into our stylesheet I'm going to use the Roboto font, so we're going to keep
that.
And then for the body, I'm not going to use Flex, so I'm going to get rid of all of these.
And yeah, so that should be all set for the body.
Now I'm trying to figure out what we should style first.
Let's do we'll do the content.
Looks like the the heading in the in the button.
So let's start with the container which wraps around everything.
We want to position that to be relative and we want that to have a width of 100 percent and a height
of 100 percent and then the background so that two, three, three, three, which is a dark gray.
All right.
And this space up here is from the the margin on the heading now for the split.
Remember, both sides have a class of split.
So we're going to position the split absolu within the container and the width is going to be 50 percent.
So each one will be 50 percent, the height will be 100 percent.
And the overflow, we want that to be hidden.
All right.
So now it's positioned.
Let's do this, the left side.
So if we say split and we want to target the left side, so left, I'm going to set from the left zero.
And let's add the background, which is going to be a neutral.
Now, I didn't actually bring the images into this yet, so I'm just going to grab these and you can
get these in the repository.
And of course, you can use any images that you'd like.
So I'm just going to bring these over so we have the five of the Xbox.
So these are the two images that I'm using.
The left side is going to be the five.
So in here, let's say JPEG, OK, so we can see the background and we're going to add an overlay to
each side, but at least we have the background.
And then I just want to set the background, let's say background repeat.
I'm going to set to no repeat and background size, I'm going to set to cover.
So we see the whole thing.
All right.
So that's good.
Now for the overlay, actually.
Let's do the right first and then we'll do the overlay.
So let's say split with the class of.
Right.
And we want to position that on the right side.
So from the right zero and let's add the background.
So background is going to be neutral and it's going to be Xbox JPEG.
And let's set the background.
I forgot my semicolon here.
So background repeat will be no repeat in the background size to cover.
All right.
So I save that.
Now we have both images side by side, so now we'll go ahead and do the overlays.
So we'll start with the left overlay.
So we're going to use split left and then the before pseudo selector sokolenko them before.
And we're so.
Actually, styling like you can think of it as a ghost element that we're going to place over the left
side, so when we used before or after, we have to use a content property and we're just going to put
in just an empty string for that.
And then we want to position this to be absolute and it's going to have a width of 100 percent of its
container.
Same thing with height.
That's also going to be 100 percent.
And then we want the overlay, which is going to be a background color.
Now, I'm going to I'm going to put this in a custom property or variable just so it's easy to change.
So let's do Vare and we'll call this dash dash left, dash BGI dash color.
OK, and then let's go up to the top here.
And we want to define on a root scope.
Dash, dash, what I call it, left dash, B.G., dash color, and it's going to be a red, green,
blue Alfa because we needed to have some transparency so we can see the image behind the overlay.
So the color is going to be a bluish color.
So 87 for red, 84 for green and 236 for blue, and then for the alpha value will be zero point seven.
All right.
So if I go ahead and save that, I can see we have this blue overlay and while we're at it, we might
as well do the right overlay.
So let's change this to write big color.
And that's going to be it's going to be a little lighter than blacks.
We're going to do 43 for red, green and blue.
And then for the alpha value, let's do zero point eight and then we'll go down here and where we have
our split left before.
I'm just going to grab that and go under the right here and let's change this to split dot.
Right.
So now we're targeting the right side.
And let's see, this stuff here is going to be the same, 100 percent, and then the color is going
to be the right color, which just makes it a you know, it's like a gray, dark gray.
All right.
So that's good.
Now it's you trying to think what I want to do next.
Let's let's dial style the content now that's inside of it.
So we have the text, the H1 and the button that we want to style.
So let's do the H1 one first and I'm going to put that right up here.
See each one.
I'm going to increase the font size.
Let's do forum units and the color is going to be white and we want to position it.
So it's to position absolute.
So it's going to be position absolute on its in whatever side here and we want each one to be in the
middle.
So what we'll do is say from the left 50 percent and from the top we'll do 20 percent.
Now if I do that, it's going to put the beginning of the H1 right in the middle.
And that's not what I want.
I want the middle of the H1 in the middle of the of the side.
So to do that, we just need to add a transform and we're going to transform on translate X.
So we're going to move it on the X axis, negative 50 percent.
And now it's going to put it, you know, right in the middle.
Now, I don't want them to go on the next slide.
I don't want this to wrap even if this is smaller.
Like if I spent spane this out, it's on one line.
But even if it's smaller like this, I don't want it to wrap.
So we need to set the whitespace property.
So let's say white space and we're going to set that to no wrap.
So now, even if, you know, even if it's like that, it's still not going to rap, which is what I
want.
OK, so that's the one.
And now I think what we'll do is style the button.
And then in the next video we'll do the hover stuff and add our JavaScript and the rest of the season.
But let's dial the button.
So that has a class of buttons and it's going to close that up.
So first thing I'm going to do here is position it.
So let's say position absolute.
It's going to position the absolute within its container, within its side, and we want it to be in
the middle.
So let's say left 50 percent and let's do from the top will say 40 percent.
Now, that's going to put the beginning of it in the middle, right.
So this year we want the middle in the middle.
So we're going to add trends form, transform and then translate X negative 50 percent.
That's going to put it right in the middle.
And then let's take away that underline.
So text decoration is going to be none and the color is going to be white and we're going to add a border
of whites.
So that and solid and the width.
I'm going to use a RIM unit, so just point to room for the width.
OK, so we have our border, let's make the font size, we'll do one room for the font size and then
for the width of the button we'll do fifteen REM.
And then let's add padding of one point.
Five a.m. and then we want the text to be in the middle, so what I'm going to do is actually display
as flex and then we'll line items center and justify content center.
And let's also make it bold.
So let's see right in the font size will say font weight and set that to bold.
And I want it to be upper case as well.
So add text, transform into uppercase.
OK, so it looks pretty good and I think that's it as far as the button styles go.
Now we do want to have C yeah.
We do want to have a background color when we hover over these.
So let's actually define that as a variable up here so those can easily be changed.
So we'll say dash dash left, let's do left btn so left Betty and dash hover dash color.
And that's actually going to be the same as this except no transparency.
So instead of zero point seven for the alpha value will do one.
All right.
And then for the right let's say right button hover and that's going to be something different.
It's going to be the Xbox Green which is twenty eight one twenty two twenty eight.
And we're going to keep it solid.
So one.
And now we can go down here to the button
and let's add, let's say split left dot btn hover and we want to set the background, let's say a background
color.
We're going to set that to the variable or the custom property of dash dash left button hover color
and the border color because it has a white border by default, actually want the border to be the same
as this as well.
So let's change the border color to that.
So if I go over and I hover, OK, nothing's happening when I do split.
Split left button, hover background color.
Oh, I forgot my semicolons up here.
All right, now we get that blue hover, right, and then we'll do the same for the right side.
So let's just grab that and change this to rights and change this and this to right as well.
Now, come over here and we get that Xbox screen, however, call it so in the next video, we have
a little bit more access to.
Right.
Because we have to handle how wide we want it to go when we hover.
And of course, we have to add the hover effect by adding, adding and removing classes with JavaScript.
So we'll get into that in the next video.