All right, so the goal of this video is going to be to style our image assets, luckily most of this
work has already been done by the designer.
If we jump back to Sigma, we can start by clicking on our branding layer.
So once we do that, we can see that we have some success in the corner here.
So we're just going to copy that.
It's as simple as that.
And we'll jump back to our code into our success.
And the class name we're targeting is our brand Dash IMG.
So we'll do that actually above our title, because it appears above our title, their brand, Dash
AMG, and then we'll just paste that in there and we'll need to shift that position, of course, and
we can save that.
And yeah, so our branding is looking a lot better.
It's the right size and you can actually see that it's lining up with the text here as well, just like
it does in our page here.
Awesome.
Next, let's focus on our App Store links, so we'll start with our Apple App Store styling so we can
copy this, just like we did jump back to our code.
And we want to style our app Dash Store Dash button.
So App Dash Store Dash BTN for button and we're going to face that in same thing.
We'll need to align that again, save it and check it out.
OK, so we can see that our positioning is correct, but we have an issue that our image itself is still
bigger than it should be.
It should be smaller than that.
How we need to fix that is we actually need to target the image that is a child of our class and we
need to explicitly set the width and height.
So right below this, we're just going to type app, dash store, dash button and then space and then
IMG.
So this is going to target the image that is a child of our App Store button.
Then we can simply copy the width and height and pasted in there.
So if we save that now and check it out.
We can see that that is now the right size.
Awesome.
So now we'll do the same thing with our Google Play badge as well.
So we'll jump back to Sigma, click on our Google Play badge, coffee this Quseir, jump back to the
code.
And target our Google Dash play, Dash BTN, curly bracket, paste that in there and we'll fix the formatting.
Then below that, we will type out the same class, followed by AMG to target that image element and
then we will copy in the width and height as well.
So let's save that.
OK, so that's working a lot better, but we can see that our main image is still way too big, so we'll
need to fix that.
Next, we'll need to jump back to figure to grab the styling.
We're going to click on our main image layer.
To copy our success.
So we'll need to attach this to our main dash image, dash container and paste that in there.
Fix the formatting, save it.
Check it out.
OK, so a couple things are happening here.
First, we can see that our other images have decided to move their way up, which is not ideal, and
our main image is also the wrong height.
So we'll need to fix that as well.
So we jump back to FIMA, expand our main layer and click on our iPhone.
We can see that it has a smaller height than our parent container does.
So we will copy that height and back in our code, we'll do a similar thing as before and we'll target
the main image container, specifically the image element of that main image container, then paste
in our new height of four hundred and eleven point fifteen pixels.
Let's save that.
Check it out.
OK, so our main image now is looking much better, it's the right size, you can see that it's a lot
sharper now that it's smaller compared to these bigger ones.
So that proves my point there.
Now we're going to need to style the rest of our images.
So I'm going to just fast forward through copying and pasting over the styling from each of these and
then we'll check it out after that.
OK, so now ready to save and check it out.
So the first part of that looks a lot better than before, and if we scroll down, OK, we can definitely
see that there are some issues.
So the first issue is that our bottom two assets are bigger than they should be.
So this is because we're only showing half of the image, but we have the same height that we do for
the others.
The solution to this will be to try to cut the height in half of these two assets, but I've kind of
forgotten which is which.
Let's go back to our Fatema.
And if we hover over it, so we're concerned with the product one as well as the cart one back in the
code.
Then for our cart, we will change this to be two hundred and twenty two pixels.
So cut it in half and our product image will do the same.
Cut that in half to two to two.
OK, so let's save that.
OK, so that's looking a whole lot better.
The next thing that I'm noticing now that I can see more clearly is that the box shadow is cut off here.
So you see there's a sharp line in the box.
Shadow doesn't fade nicely and the same thing is happening with this one as well.
So again, let's double check which ones those were.
So this is for our orders and our home assets.
So we can go back to the code now and we'll just increase the height to be 470 set of four forty four.
So that was for our orders and for our home as well.
So change that to four seventy as well and we can save that.
OK, so that's looking a lot better, you can see that we have our full box shadow at the bottom here
that is looking way, way better.
Something else you may have noticed is that our gradient is not extending to the bottom of our page.
That is because our wrapper has a min height of only one hundred viewport height.
So it's only filling one screen and then you can see it stops.
So we're going to need to adjust the height value for our wrapper if we jump back to figure, we can
see that if we click on our landing page layer on the right side, we have a static height value of
thirteen eighty eight pixels.
We can go ahead and copy that, jump back to the code, scroll back up to the top in order to replace
our wrapper.
Min Height will convert it just to height because it's a static value.
Then we'll paste in the value from Sigma Save to check it out.
OK, so we can see that the gradient now is going all the way to the bottom.
So that's good.
But we can also see that we have a bit of a gap here on the bottom.
Let's see if we can make it a little bit smaller.
So I already know from my own experimentation that I can have a new value of thirteen seventy nine in
order to make it smaller, but still stretch to the very bottom of the page.
OK, so that's looking better.
We have a nice thin gap at the bottom.
All right, awesome.
So our gradient is going all the way to the bottom.
Our assets are all the right side.
They're all in the right position.
If we jump back and compare what we had in figure that our designer gave us and what we have now in
our page, and we can see that it looks very similar.
The only difference is we're actually scrolling to get to the bottom.
But other than that, everything is lined up exactly as it is in figure.
All right.
So that's it for our developer from designer handoff.
In the next video, I'm going to show you how you can have toggles in the top right to allow users to
be able to change the background.
I'll see in that one by four now.