1
00:00:00,560 --> 00:00:04,010
I app, as it is now, is neither looking great nor beautiful.

2
00:00:05,270 --> 00:00:06,770
Then, after all, it is just pure a.

3
00:00:07,610 --> 00:00:13,160
So in a world representation for this to stand out, we are supposed to add some testosterone so that

4
00:00:13,160 --> 00:00:16,670
it can look at least beautiful and presentable.

5
00:00:17,070 --> 00:00:23,150
So for that purpose, let's move back into our index thesis, and the first step is to clear all the

6
00:00:23,150 --> 00:00:25,240
cases that has been preloaded.

7
00:00:25,730 --> 00:00:29,330
And now be targeting the main main element.

8
00:00:29,780 --> 00:00:35,780
So you might recall that this man is off dashboard, which was holding our tools component.

9
00:00:38,400 --> 00:00:40,410
So it was all from a dashboard of.

10
00:00:42,040 --> 00:00:47,860
So in the function dashboard, we see a day of class name two of men now that's targeted and we're at

11
00:00:47,860 --> 00:00:56,920
a rate of 90 viewport and give it a maximum of 620 pixels and a margin of five in order to hit, save

12
00:00:56,920 --> 00:00:58,780
and see what has happened in our app.

13
00:00:59,260 --> 00:01:06,660
OK, so it has deviated from left as it is right now, I'm going to give it a margin of error to identify

14
00:01:06,670 --> 00:01:07,150
with and or.

15
00:01:07,900 --> 00:01:08,620
OK, no.

16
00:01:08,950 --> 00:01:10,960
Then again, taking the title.

17
00:01:11,560 --> 00:01:17,650
So you might recall the struggles of those component, which was holding it was holding out heading

18
00:01:17,890 --> 00:01:18,490
outdoors.

19
00:01:18,970 --> 00:01:23,740
So outdoors is a child of death with that last name title.

20
00:01:23,860 --> 00:01:28,870
So if we're targeting your title element, then you would expect telling us into a margin, burn them

21
00:01:28,880 --> 00:01:30,370
off for them.

22
00:01:32,170 --> 00:01:35,230
And then we'll just hit save and again, Europe.

23
00:01:36,220 --> 00:01:41,190
OK, so it has been centered, but as you might see, that energy is still non-uniform.

24
00:01:41,200 --> 00:01:43,180
Some of them are quite big, some of them it's quite small.

25
00:01:43,660 --> 00:01:47,260
So we need to refactor this code a bit more.

26
00:01:48,130 --> 00:01:53,740
So that again will be targeting underlined last year at a rate of extreme height of.

27
00:01:54,770 --> 00:02:04,460
0.2 firearm and background of edges are two of 78 by the 60 percent and a margin left of auto and a

28
00:02:04,460 --> 00:02:06,530
margin rate of auto again.

29
00:02:08,300 --> 00:02:10,330
No, just hits it and lets you grab a game.

30
00:02:11,700 --> 00:02:16,650
So, OK, so we can see the vomiting that we didn't just know.

31
00:02:18,670 --> 00:02:23,290
Now, let's head back to our two's company, and you might recall this is the underlying element that

32
00:02:23,290 --> 00:02:24,810
we just have targeted now.

33
00:02:25,430 --> 00:02:32,890
No more into enthusiasts and we target this time the single tour element of our tour component.

34
00:02:34,730 --> 00:02:36,680
So in the tour, we have a single tour.

35
00:02:38,940 --> 00:02:42,120
And it is the article element of class name single to.

36
00:02:43,830 --> 00:02:50,080
So basically, we're targeting the card of our doors inaugurated, give it a October of hashtag Bar-Lev.

37
00:02:50,100 --> 00:02:56,400
So basically this is right, but with a slightly different view and a border radius of zero point of

38
00:02:56,400 --> 00:02:58,830
item and a margin of 210.

39
00:02:59,870 --> 00:03:08,540
And zero and a boxer, a shadow of zero five pixels, 15 pixels and RGV of zero zero and zero point

40
00:03:08,540 --> 00:03:08,810
one.

41
00:03:09,880 --> 00:03:13,650
Now, I'll give it that transition off on 0.3 seconds linear.

42
00:03:17,160 --> 00:03:18,480
No hits ever in Europe.

43
00:03:19,170 --> 00:03:24,780
OK, so begins your car component, you might see that slightly raised a portion of our guides as well

44
00:03:24,780 --> 00:03:25,650
as the information.

45
00:03:29,080 --> 00:03:31,330
OK, so it seems it seems to be working now.

46
00:03:32,280 --> 00:03:37,550
That's move back and add a single to so that whenever we have about Overgaard.

47
00:03:38,490 --> 00:03:39,210
It gives up.

48
00:03:40,500 --> 00:03:47,130
A box set of 05 fixes and 15 pixels with IGB of zero zero zero point one.

49
00:03:48,240 --> 00:03:49,140
Then hit save.

50
00:03:50,600 --> 00:03:52,010
And now will be targeting.

51
00:03:53,280 --> 00:04:00,690
Single to imagine if you want them to be uniform, a uniform and size, because these are non-uniform

52
00:04:00,690 --> 00:04:01,440
at present.

53
00:04:03,770 --> 00:04:10,840
OK, so just go back and we'll give it away to 100 percent a height of 2010 and object of it cover.

54
00:04:11,660 --> 00:04:15,100
You want it to cover it, but stop it.

55
00:04:15,110 --> 00:04:19,610
I traded a zero one two five Adam and border bottom left radius of zero 0.01.

56
00:04:23,580 --> 00:04:28,260
Then just hit save now you can see all of our images out of similar shapes and sizes.

57
00:04:28,740 --> 00:04:32,670
So this is good because this gives a uniformity to our app.

58
00:04:33,600 --> 00:04:36,390
Now go back and read together to add info.

59
00:04:36,630 --> 00:04:40,470
So basically, this time we are targeting the information that is being displayed in our tool component.

60
00:04:41,130 --> 00:04:45,900
So as you might see the tour info which contains the title as well as a price.

61
00:04:47,190 --> 00:04:48,060
And the subheading.

62
00:04:50,950 --> 00:04:53,140
OK, let's go back to an index thesis.

63
00:04:54,140 --> 00:04:54,800
And.

64
00:04:56,000 --> 00:05:00,200
Give it a display of flex justified content of space between.

65
00:05:03,440 --> 00:05:04,100
And it's a.

66
00:05:05,370 --> 00:05:06,960
So, OK, it has been implemented now.

67
00:05:08,580 --> 00:05:14,450
The spaces between our title, as well as Price now adding items to the center.

68
00:05:15,210 --> 00:05:16,260
Margin bottom of.

69
00:05:17,660 --> 00:05:18,350
Let's give it.

70
00:05:22,390 --> 00:05:27,520
1.5 Jim and two it and four of each food.

71
00:05:29,020 --> 00:05:29,740
Margin bottom.

72
00:05:31,850 --> 00:05:32,240
Zero.

73
00:05:34,480 --> 00:05:36,130
So if he gets it in Europe now.

74
00:05:36,820 --> 00:05:42,070
OK, so it been implemented now, let's go back and our index to assess and give it a single.

75
00:05:44,260 --> 00:05:49,630
We are targeting single button element, and you're the background of transparent, we do not own the

76
00:05:49,630 --> 00:05:54,100
background that if our button's background and as well give it.

77
00:05:55,390 --> 00:05:57,850
So we see that default button background has been removed now.

78
00:06:00,730 --> 00:06:06,670
And now let's just go back and give it a color transparent, we want to absolutely remove every default

79
00:06:06,970 --> 00:06:08,080
characteristics of the button.

80
00:06:09,420 --> 00:06:14,020
No text transition of Capralos transform capitals.

81
00:06:14,720 --> 00:06:18,780
And we want every, every word in it to be capitalized.

82
00:06:19,320 --> 00:06:20,490
And now we're not interested.

83
00:06:21,270 --> 00:06:25,590
OK, then again, will you read the color of itself to a fire 78 percent and 60 percent?

84
00:06:26,100 --> 00:06:29,640
And if one size of wonder and of course, a pointer.

85
00:06:32,680 --> 00:06:34,500
And betting that 0.5mm.

86
00:06:36,460 --> 00:06:37,660
Now, if we just Europe.

87
00:06:38,640 --> 00:06:40,650
OK, so Britain has a different color now.

88
00:06:41,600 --> 00:06:43,700
And it is looking good.

89
00:06:44,850 --> 00:06:48,810
Now, let's head back to our ambassadors and give tours price.

90
00:06:48,900 --> 00:06:54,990
The pricing of our two of you might remember that in autos component, we have a tool price class or

91
00:06:55,050 --> 00:06:58,040
the class name to price know your decoder.

92
00:06:58,140 --> 00:07:00,840
It is said to have 78 and 60 percent.

93
00:07:02,340 --> 00:07:05,850
Background color features a dual 500 percent and 96 percent.

94
00:07:06,990 --> 00:07:14,640
And let's say and let's fill it up again, so we are hearing about it now as well as a price has a different

95
00:07:14,640 --> 00:07:15,000
color.

96
00:07:18,250 --> 00:07:23,050
Now getting into it first with your departing of 0.5 Iranian, 0.5 Iran, because they wanted to slightly

97
00:07:23,050 --> 00:07:27,040
shift away from the borders and a border radius, or zero point of evidence.

98
00:07:28,590 --> 00:07:29,850
OK, so it's working now.

99
00:07:32,160 --> 00:07:39,090
No, Tiger does include for that and give it a padding of 0.7 one podium and do them.

100
00:07:40,660 --> 00:07:41,910
And the single to.

101
00:07:47,530 --> 00:07:50,830
OK, let's just remove it and give it single to delete button.

102
00:07:52,150 --> 00:07:55,780
Basically, you might remember that this button is not doing anything but just for it's just for this

103
00:07:55,780 --> 00:07:57,670
plant will be adding dynamic start later on.

104
00:07:57,970 --> 00:08:05,770
So if you were a display of it and imagine, but we want it to be in the center, not away from the

105
00:08:05,770 --> 00:08:06,870
day of even the center.

106
00:08:06,880 --> 00:08:09,820
So let's just say that it went to zero in auto.

107
00:08:10,120 --> 00:08:11,590
So there's really a central element.

108
00:08:12,390 --> 00:08:20,030
It's a case of our investor button has been internal or no margin of wondering and the color of three

109
00:08:20,080 --> 00:08:25,600
sixty six, 360, 67 percent, forty 44 percent and letter spacing of zero point two hundred and a background

110
00:08:25,600 --> 00:08:26,590
color of transparent.

111
00:08:29,790 --> 00:08:32,430
It's very transparent, it's safe.

112
00:08:32,460 --> 00:08:34,020
OK, so here you have a spacing.

113
00:08:35,060 --> 00:08:38,120
And adverts now, crystal clear.

114
00:08:41,120 --> 00:08:48,710
OK, so each and every element has been placed successfully now below the border of a solid and natural

115
00:08:48,710 --> 00:08:58,100
killer of 30, 60, 67 percent and 44 percent, and a padding of 0.5 firearm and 0.5 them and a border

116
00:08:58,100 --> 00:08:59,540
radius of zero point about him.

117
00:09:04,790 --> 00:09:10,190
No effective and we are up again, so it is looking slightly better, a lot better if we compare to

118
00:09:10,190 --> 00:09:11,660
the previous version of Arab.

119
00:09:16,010 --> 00:09:17,390
Then again, we'll just.

120
00:09:19,390 --> 00:09:28,690
If you are up, there are certain pre batting and margins, added Ed Ed Components Web Browser, So

121
00:09:28,690 --> 00:09:31,930
we will be removing all those by the following code.

122
00:09:32,170 --> 00:09:35,350
We want to we are targeting the entire record and we want after and before.

123
00:09:35,350 --> 00:09:36,370
The margin should be zero.

124
00:09:36,580 --> 00:09:39,890
As well as the padding should be zero and a boxer you should be worried about.

125
00:09:40,600 --> 00:09:47,890
And we'll give it a foreign body font family of Apple system background color of Excel two and zero.

126
00:09:48,070 --> 00:09:55,000
36 percent 96 percent A color of SSL to a nine, 61 and 16 percent and a line height of 1.5 percent

127
00:09:55,360 --> 00:09:58,480
with a font size of zero point eight seven five.

128
00:09:59,140 --> 00:10:03,010
So if it just hits, if not, we'll see on a slightly different color.

129
00:10:03,010 --> 00:10:10,480
And all those patterns and margins have disappeared now, so we have successfully added scissors to

130
00:10:10,480 --> 00:10:11,020
add up.

131
00:10:11,740 --> 00:10:12,960
Though they're not invest.

132
00:10:12,990 --> 00:10:14,140
Button is not working now.

133
00:10:14,140 --> 00:10:17,320
We'll be adding functionalities to it in the coming tutorial.

134
00:10:18,780 --> 00:10:23,010
So we have successfully added all the capabilities and functions to it up.