OK, so we're going to get started on the HTML and access, I have my project starter open here, the
index HTML.
I do have a link to font awesome because we'll be using a couple of icons for the buttons, the arrows.
So down in the title here, let's get rid of that and change it to background slider and get rid of
this H1 here and we're going to have a wrapper container called slider dash container.
And in here we were going to have five divs with the class of slide.
And the first one, I'm also going to give a class of active that's going to represent the current image
or the active image.
All right.
So go ahead and do that.
And nothing is going to go in these devs.
We're going to add in inline style for the background image.
So let's say background image and set that to you earlier.
And then inside here, we're going to put a link to an image which I'm going to grab real quick.
And if you want these exact images, you can get them from the the final repository.
So that's all that these divs are going to be just a class of slide with a inline style background image.
So I'm going to just grab and paste the the other four.
So this div ends here.
You still want to be within the container and I'm going to paste these other four in and save so the
other four don't have the class of active.
Only the first one should have the active class and then under all those divs but still in the container.
So right above the last div here we're going to have our buttons and this one is going to have a class
of arrow and the class of arrow dash left or left arrow and then also inside of left.
And the button itself is going to be a font awesome icon.
So I tag class of eFax and then f a dash arrow dash left.
All right.
And then we'll go ahead and just copy that down and let's replace left here, here and here with right.
OK, and that should do it.
So I'm going to save and this is all we're going to see for now.
We don't see the background image because these divs have no content and we didn't set a height or width
on these div.
So we're not going to see the images just yet.
Now let's jump into our stylesheet and ultimately the background image is going to get generated through
the JavaScript.
But for now, I'm going to just just hard code a background image and I'm going to use the first image
from the HTML here from this first div.
I'm just going to grab that and we'll go ahead and put that in there.
And if I say we should now see that background image, I'm going to add some background properties.
So let's add the position to the background position will be center on both the X and Y axis and let's
add a background size and set that to cover.
And there we go.
Now, I'm also going to add a transition here because ultimately we're going to change images.
And I just want to have like kind of a little little slide effect or slide transition.
So on the on the body, let's add a zero point for second transition and we'll use the EAS effect.
And you can see when I save it kind of shows you that.
All right.
Now for the overlay, because we don't want this whole like we don't want this image to be this bright.
So for the overlay, I'm going to take the body and use the before pseudo selector.
And when we use before or after, we have to add content here, which we're not actually adding any
content.
So just leave that blank.
And what we're essentially doing is just putting an overlay over this image here.
So we want to position this to be absolute.
It's going to be absolute and then from the top so top zero and left zero.
So we're just starting in the top left corner and then we want the width to be 100 percent and we want
the height to be 100 viewport height.
So we want to just take up the entire viewport.
And then for the background, the same background color, we're going to set that to be a and set it
to black and then let's do zero point seven for the for the Alpha, for the transparency.
Now you can see we have the overlay with the arrows are actually behind the overlay and we don't want
that.
So I'm going to set the Z index to negative one.
I'm going to set it lower.
So now that everything will be on top of the overlay.
So now let's go ahead and add.
The slider container styles, so we're going to have a box shadow here and we're going to have to shadows,
the first will do zero two zero three pixels.
So the horizontal and vertical offset and then the Blu will do six pixels and the color RGB A, which
is going to be black.
And for the alpha value, let's do zero point one six and then we'll put a comma here for the next shadow,
which will be zero three pixels, six pixels are GBA and zero zero zero and zero point two three.
And we can't see that yet because we don't have any content.
We also don't have a height or with.
So let's set a height here.
We'll do 70 viewport heights and let's give this a width of 70 VW, which is viewport widths.
And now you can see the outline here.
You can see the box shadows.
And then I also want to just add position relative, because the slides are going to be positioned absolute
within the container and then also overflow hidden because we don't want anything going out of the container.
So we'll set that as well.
Now we have multiple divs with background images and each one has a class of slide, but only one should
have a class of active.
So I'm going to set slide initially, set the opacity to zero and then down here, let's say slide with
the class of active, then that's going to have an opacity one.
So we only see the first one.
OK, now this slide class, we have to add a bunch of other stuff here.
Remember, this has the background image on it.
It's just in line, so it's not in the style sheet.
So I do want to set well, you know what?
Let's do the heightened with first so that we can actually see the image.
So we'll do a height of one hundred viewport heights in a width of 100 viewport widths.
OK, so that obviously doesn't look right.
We want to add some background position.
So background position is going to be center center on both X and Y and let's do a background size of
cover and there we go.
Now, I do want to set the position of this to absolute and then I want to set from the top negative
15 pixels.
So it's going to move it up a little bit.
And then let's say from the left, negative are not fifteen pixels.
Fifteen vich like that.
And then the left is going to be negative.
Fifteen VW.
All right.
And then we're going to have a transition on this because these, these are going to be switched the
background images and we want a nice transition.
So let's do zero point four seconds.
And he used an EZ effect and just set the Z index to one.
So it's always on top.
Now for the Arrow.
Let's go ahead and add that class here, and I'm going to position both both of the buttons of the class
of our I'm going to position them to be fixed and then to see them just tempora, because ultimately
they're going to be like, you know, over here and over here.
But right now they're behind this.
So and this slide has a Z index of one.
So let's set the Z index of this just temporarily.
I'm going to set it to 100.
So now that we can see them and since we position them fixed, they're basically both in the same spot.
But we'll fix that.
Let's just add some style to them.
So we'll add a background, let's say background color transparent.
OK, and now let's make the actual side some padding there, so padding will do 20 pixels kind of break
it up a little bit, let's put the font size because remember, we're using font awesome icons.
So we're going to have the font size to 30 pixels.
And then let's set the I want to move it down.
Actually, before we do that, let's do the border, which I'm going to do two pixels solid and orange
for the color.
And then let's say from the top, let's go down 50 percent.
But we want to be in the exact middle.
We don't want just the top of it to be in the middle.
So the way we can do that is by adding a transformed property.
So transform and we want to set translate.
Why?
Because this is on the Y axis, which is the vertical axis, and we just want negative 50 percent,
which will move it up into the exact middle.
So the middle of this is now right in the middle.
Now for the let's see.
So we have a left arrow and a right arrow.
If we look back here, we have left arrow, left our right arrow.
So I'm going to position those.
So let's say a left arrow.
And remember, the arrows are positioned fixed.
I'm going to set the left position and pass in a calc value here.
So this will calculate whatever I put in here, which is going to be 15 viewport widths, minus 65 pixels.
And if I save that, you can see that now this is over here, the left arrow.
So the right arrow.
We want to calculate that.
So let's just copy this and let's get right arrow.
And instead of selling the left position, we want to set from the right the same thing, 15 VW minus
sixty five.
And that should put that and put them in the right spot.
Now we don't want these to actually be have a higher Z index than this because you can see right here
it's going over it.
So we're going to get rid of that Z index of 100 and save and now you can't see the edge.
It's just kind of coming off of the image.
And then one other thing, when I click on this, you see that outline?
We want to get rid of that.
So let's go up here and say Arrow.
When it's in the focus state, we want to set the outline to zero.
So now we shouldn't have that outline.
And we also want the arrow to be white.
So right here, arrow, let's go color and set that to white.
All right, cool.
So that gives us a success.
One other thing.
Let's make it a point when we hover over it.
So we'll add cursor pointer.
There we go.
So our success is done now.
We want obviously, we want this to function.
We want to be able to slide the image, also the background image.
So in the next video, we'll start on the JavaScript.