1
00:00:00,390 --> 00:00:08,580
All right, so the goal of this video is going to be to style our image assets, luckily most of this

2
00:00:08,580 --> 00:00:11,130
work has already been done by the designer.

3
00:00:11,670 --> 00:00:17,670
If we jump back to Sigma, we can start by clicking on our branding layer.

4
00:00:18,570 --> 00:00:23,810
So once we do that, we can see that we have some success in the corner here.

5
00:00:24,450 --> 00:00:26,310
So we're just going to copy that.

6
00:00:26,870 --> 00:00:28,440
It's as simple as that.

7
00:00:28,950 --> 00:00:32,910
And we'll jump back to our code into our success.

8
00:00:33,450 --> 00:00:37,860
And the class name we're targeting is our brand Dash IMG.

9
00:00:39,090 --> 00:00:44,820
So we'll do that actually above our title, because it appears above our title, their brand, Dash

10
00:00:44,820 --> 00:00:52,320
AMG, and then we'll just paste that in there and we'll need to shift that position, of course, and

11
00:00:52,320 --> 00:00:53,340
we can save that.

12
00:00:53,760 --> 00:00:56,550
And yeah, so our branding is looking a lot better.

13
00:00:56,560 --> 00:01:01,770
It's the right size and you can actually see that it's lining up with the text here as well, just like

14
00:01:01,770 --> 00:01:03,930
it does in our page here.

15
00:01:05,040 --> 00:01:05,610
Awesome.

16
00:01:06,070 --> 00:01:14,790
Next, let's focus on our App Store links, so we'll start with our Apple App Store styling so we can

17
00:01:14,790 --> 00:01:18,540
copy this, just like we did jump back to our code.

18
00:01:19,110 --> 00:01:23,760
And we want to style our app Dash Store Dash button.

19
00:01:24,000 --> 00:01:31,290
So App Dash Store Dash BTN for button and we're going to face that in same thing.

20
00:01:31,300 --> 00:01:35,370
We'll need to align that again, save it and check it out.

21
00:01:35,770 --> 00:01:42,600
OK, so we can see that our positioning is correct, but we have an issue that our image itself is still

22
00:01:42,600 --> 00:01:43,980
bigger than it should be.

23
00:01:43,980 --> 00:01:45,270
It should be smaller than that.

24
00:01:45,870 --> 00:01:53,370
How we need to fix that is we actually need to target the image that is a child of our class and we

25
00:01:53,370 --> 00:01:57,210
need to explicitly set the width and height.

26
00:01:58,260 --> 00:02:04,830
So right below this, we're just going to type app, dash store, dash button and then space and then

27
00:02:04,830 --> 00:02:05,520
IMG.

28
00:02:05,610 --> 00:02:11,040
So this is going to target the image that is a child of our App Store button.

29
00:02:11,790 --> 00:02:17,220
Then we can simply copy the width and height and pasted in there.

30
00:02:17,490 --> 00:02:19,950
So if we save that now and check it out.

31
00:02:21,170 --> 00:02:24,180
We can see that that is now the right size.

32
00:02:24,740 --> 00:02:25,260
Awesome.

33
00:02:25,850 --> 00:02:31,180
So now we'll do the same thing with our Google Play badge as well.

34
00:02:31,760 --> 00:02:38,840
So we'll jump back to Sigma, click on our Google Play badge, coffee this Quseir, jump back to the

35
00:02:38,840 --> 00:02:39,410
code.

36
00:02:40,260 --> 00:02:49,500
And target our Google Dash play, Dash BTN, curly bracket, paste that in there and we'll fix the formatting.

37
00:02:51,020 --> 00:02:59,210
Then below that, we will type out the same class, followed by AMG to target that image element and

38
00:02:59,210 --> 00:03:03,750
then we will copy in the width and height as well.

39
00:03:04,190 --> 00:03:05,450
So let's save that.

40
00:03:06,710 --> 00:03:13,520
OK, so that's working a lot better, but we can see that our main image is still way too big, so we'll

41
00:03:13,520 --> 00:03:14,420
need to fix that.

42
00:03:14,420 --> 00:03:18,620
Next, we'll need to jump back to figure to grab the styling.

43
00:03:20,380 --> 00:03:23,530
We're going to click on our main image layer.

44
00:03:24,430 --> 00:03:26,320
To copy our success.

45
00:03:27,630 --> 00:03:36,590
So we'll need to attach this to our main dash image, dash container and paste that in there.

46
00:03:37,570 --> 00:03:41,080
Fix the formatting, save it.

47
00:03:41,620 --> 00:03:42,280
Check it out.

48
00:03:43,240 --> 00:03:45,790
OK, so a couple things are happening here.

49
00:03:46,270 --> 00:03:54,700
First, we can see that our other images have decided to move their way up, which is not ideal, and

50
00:03:55,060 --> 00:03:57,990
our main image is also the wrong height.

51
00:03:58,420 --> 00:04:00,210
So we'll need to fix that as well.

52
00:04:00,790 --> 00:04:06,460
So we jump back to FIMA, expand our main layer and click on our iPhone.

53
00:04:06,820 --> 00:04:12,220
We can see that it has a smaller height than our parent container does.

54
00:04:12,610 --> 00:04:21,790
So we will copy that height and back in our code, we'll do a similar thing as before and we'll target

55
00:04:21,790 --> 00:04:28,660
the main image container, specifically the image element of that main image container, then paste

56
00:04:28,660 --> 00:04:33,460
in our new height of four hundred and eleven point fifteen pixels.

57
00:04:34,060 --> 00:04:34,990
Let's save that.

58
00:04:35,230 --> 00:04:35,890
Check it out.

59
00:04:37,080 --> 00:04:43,620
OK, so our main image now is looking much better, it's the right size, you can see that it's a lot

60
00:04:43,620 --> 00:04:47,090
sharper now that it's smaller compared to these bigger ones.

61
00:04:47,100 --> 00:04:48,920
So that proves my point there.

62
00:04:49,710 --> 00:04:53,100
Now we're going to need to style the rest of our images.

63
00:04:53,670 --> 00:04:58,950
So I'm going to just fast forward through copying and pasting over the styling from each of these and

64
00:04:58,950 --> 00:05:00,930
then we'll check it out after that.

65
00:05:03,070 --> 00:05:06,930
OK, so now ready to save and check it out.

66
00:05:08,310 --> 00:05:14,490
So the first part of that looks a lot better than before, and if we scroll down, OK, we can definitely

67
00:05:14,490 --> 00:05:16,590
see that there are some issues.

68
00:05:17,100 --> 00:05:23,110
So the first issue is that our bottom two assets are bigger than they should be.

69
00:05:23,520 --> 00:05:30,330
So this is because we're only showing half of the image, but we have the same height that we do for

70
00:05:30,330 --> 00:05:31,020
the others.

71
00:05:32,230 --> 00:05:39,010
The solution to this will be to try to cut the height in half of these two assets, but I've kind of

72
00:05:39,010 --> 00:05:40,210
forgotten which is which.

73
00:05:40,480 --> 00:05:42,220
Let's go back to our Fatema.

74
00:05:42,640 --> 00:05:51,820
And if we hover over it, so we're concerned with the product one as well as the cart one back in the

75
00:05:51,820 --> 00:05:52,180
code.

76
00:05:52,180 --> 00:05:58,180
Then for our cart, we will change this to be two hundred and twenty two pixels.

77
00:05:58,190 --> 00:06:02,470
So cut it in half and our product image will do the same.

78
00:06:02,800 --> 00:06:04,920
Cut that in half to two to two.

79
00:06:05,530 --> 00:06:06,880
OK, so let's save that.

80
00:06:07,670 --> 00:06:10,040
OK, so that's looking a whole lot better.

81
00:06:10,570 --> 00:06:17,170
The next thing that I'm noticing now that I can see more clearly is that the box shadow is cut off here.

82
00:06:17,710 --> 00:06:19,870
So you see there's a sharp line in the box.

83
00:06:19,870 --> 00:06:25,060
Shadow doesn't fade nicely and the same thing is happening with this one as well.

84
00:06:25,270 --> 00:06:28,090
So again, let's double check which ones those were.

85
00:06:28,330 --> 00:06:32,590
So this is for our orders and our home assets.

86
00:06:34,160 --> 00:06:43,040
So we can go back to the code now and we'll just increase the height to be 470 set of four forty four.

87
00:06:43,460 --> 00:06:48,280
So that was for our orders and for our home as well.

88
00:06:49,010 --> 00:06:54,110
So change that to four seventy as well and we can save that.

89
00:06:55,080 --> 00:06:59,970
OK, so that's looking a lot better, you can see that we have our full box shadow at the bottom here

90
00:07:00,390 --> 00:07:02,410
that is looking way, way better.

91
00:07:02,880 --> 00:07:09,180
Something else you may have noticed is that our gradient is not extending to the bottom of our page.

92
00:07:09,790 --> 00:07:15,210
That is because our wrapper has a min height of only one hundred viewport height.

93
00:07:15,210 --> 00:07:18,570
So it's only filling one screen and then you can see it stops.

94
00:07:19,520 --> 00:07:27,200
So we're going to need to adjust the height value for our wrapper if we jump back to figure, we can

95
00:07:27,200 --> 00:07:34,610
see that if we click on our landing page layer on the right side, we have a static height value of

96
00:07:34,610 --> 00:07:36,800
thirteen eighty eight pixels.

97
00:07:37,550 --> 00:07:45,560
We can go ahead and copy that, jump back to the code, scroll back up to the top in order to replace

98
00:07:45,890 --> 00:07:46,880
our wrapper.

99
00:07:46,880 --> 00:07:51,110
Min Height will convert it just to height because it's a static value.

100
00:07:52,140 --> 00:07:57,630
Then we'll paste in the value from Sigma Save to check it out.

101
00:07:58,320 --> 00:08:03,190
OK, so we can see that the gradient now is going all the way to the bottom.

102
00:08:03,210 --> 00:08:04,170
So that's good.

103
00:08:04,920 --> 00:08:08,190
But we can also see that we have a bit of a gap here on the bottom.

104
00:08:09,000 --> 00:08:11,340
Let's see if we can make it a little bit smaller.

105
00:08:12,670 --> 00:08:19,690
So I already know from my own experimentation that I can have a new value of thirteen seventy nine in

106
00:08:19,690 --> 00:08:25,390
order to make it smaller, but still stretch to the very bottom of the page.

107
00:08:26,110 --> 00:08:27,630
OK, so that's looking better.

108
00:08:27,640 --> 00:08:30,160
We have a nice thin gap at the bottom.

109
00:08:30,910 --> 00:08:32,120
All right, awesome.

110
00:08:32,830 --> 00:08:34,960
So our gradient is going all the way to the bottom.

111
00:08:35,260 --> 00:08:37,120
Our assets are all the right side.

112
00:08:37,120 --> 00:08:38,410
They're all in the right position.

113
00:08:38,680 --> 00:08:47,170
If we jump back and compare what we had in figure that our designer gave us and what we have now in

114
00:08:47,170 --> 00:08:50,880
our page, and we can see that it looks very similar.

115
00:08:50,920 --> 00:08:53,740
The only difference is we're actually scrolling to get to the bottom.

116
00:08:54,100 --> 00:08:59,550
But other than that, everything is lined up exactly as it is in figure.

117
00:09:00,250 --> 00:09:00,780
All right.

118
00:09:00,790 --> 00:09:05,290
So that's it for our developer from designer handoff.

119
00:09:05,470 --> 00:09:12,310
In the next video, I'm going to show you how you can have toggles in the top right to allow users to

120
00:09:12,310 --> 00:09:14,190
be able to change the background.

121
00:09:14,470 --> 00:09:16,780
I'll see in that one by four now.