1
00:00:00,020 --> 00:00:00,350
All right.

2
00:00:00,350 --> 00:00:07,100
And up next, let's set up CSS for two components, the job info, as well as the job.

3
00:00:07,550 --> 00:00:10,060
So for starters, let's navigate to assets.

4
00:00:10,070 --> 00:00:11,870
We're looking for rappers.

5
00:00:12,650 --> 00:00:14,690
And for starters, let's go with job info.

6
00:00:16,270 --> 00:00:19,890
Want to remove all of this logic, we're going to go with display flex.

7
00:00:19,890 --> 00:00:23,430
So essentially there are going to be two elements the icon and the text.

8
00:00:23,430 --> 00:00:26,940
And I want to align them pretty much in one line.

9
00:00:26,940 --> 00:00:30,510
And then I also want to make sure that they're both.

10
00:00:31,470 --> 00:00:36,750
In the center vertically, and therefore I'm going to go with the line items and then center.

11
00:00:36,960 --> 00:00:40,890
Then after that, we want to go with a job icon.

12
00:00:41,130 --> 00:00:45,360
So remember, it's one of the classes we have in here.

13
00:00:45,360 --> 00:00:46,770
Let's go with font size.

14
00:00:46,770 --> 00:00:50,070
Let's set it equal to one Rems.

15
00:00:50,220 --> 00:00:57,060
Then also let's add some margin to the right that also is going to be equal to one Rems.

16
00:00:57,090 --> 00:01:02,160
Then we want to go with display flex because we want to place the icon exactly in the center.

17
00:01:02,160 --> 00:01:06,540
So align items and let's set it equal to center.

18
00:01:06,540 --> 00:01:12,270
And then when it comes to icon, it's actually returned as SVG, and therefore we want to target that

19
00:01:12,270 --> 00:01:15,840
then color and then let's go with the CSS variable.

20
00:01:15,840 --> 00:01:18,030
So hyphen hyphen text.

21
00:01:18,640 --> 00:01:22,060
Secondary and then hyphen color.

22
00:01:22,480 --> 00:01:25,620
And also we want to style that jawbone.

23
00:01:25,630 --> 00:01:31,990
So let me move out of the class and then in here, let's go with another one, the job text.

24
00:01:32,530 --> 00:01:34,780
We'll start with text Transform.

25
00:01:36,110 --> 00:01:37,940
We'll set it equal to capitalize.

26
00:01:40,490 --> 00:01:45,590
And then also let's add the letter spacing, which is going to be equal to our CSS variables.

27
00:01:45,620 --> 00:01:49,880
Letter spacing, var hyphen hyphen letter.

28
00:01:50,690 --> 00:01:51,530
Spacing.

29
00:01:51,530 --> 00:01:54,140
That should do it for job info.

30
00:01:54,380 --> 00:01:58,160
So now let's take a look where we have the job.

31
00:01:58,160 --> 00:02:04,220
JS And this one of course is going to have more code since we have more elements there.

32
00:02:04,220 --> 00:02:08,419
And the main setup pretty much is a bit more complex.

33
00:02:08,419 --> 00:02:12,910
So again, let's just remove everything and let's start from the scratch.

34
00:02:12,920 --> 00:02:17,180
So we want to start with the background and this is where we're going to use the.

35
00:02:18,070 --> 00:02:18,820
Background.

36
00:02:18,820 --> 00:02:20,020
Secondary color.

37
00:02:21,700 --> 00:02:29,650
So background here and then var hyphen hyphen background secondary and color.

38
00:02:30,290 --> 00:02:33,200
Then we want to go with some border radius.

39
00:02:34,890 --> 00:02:38,760
Border radius and we'll set it equal to our CSS variable.

40
00:02:38,760 --> 00:02:39,690
So var.

41
00:02:40,680 --> 00:02:42,750
Border radius.

42
00:02:43,610 --> 00:02:45,620
Then let's go with display grid.

43
00:02:45,620 --> 00:02:52,310
Just please keep in mind that of course, we're talking about the entire job component over here.

44
00:02:52,310 --> 00:02:54,770
So there's going to be more logic coming up.

45
00:02:54,770 --> 00:02:58,790
For now, we just want to go with display grid and we're going to go with rows.

46
00:02:58,790 --> 00:03:00,410
So we'll have two rows.

47
00:03:00,560 --> 00:03:05,600
We'll have one for the header and then the rest of the content.

48
00:03:06,020 --> 00:03:09,890
Therefore we're going to go with grid template rows.

49
00:03:10,280 --> 00:03:11,930
Let's start with one fraction.

50
00:03:11,930 --> 00:03:16,610
So the header is going to be spanning pretty much as much as possible and then the content is going

51
00:03:16,610 --> 00:03:17,510
to be auto.

52
00:03:17,600 --> 00:03:25,640
And then we also want to go with Box Shadow and we'll set it equal to hyphen, hyphen, shadow and then

53
00:03:25,640 --> 00:03:26,210
two.

54
00:03:26,240 --> 00:03:28,400
So that should do it for main component.

55
00:03:28,430 --> 00:03:29,990
Now let's go with header.

56
00:03:30,020 --> 00:03:31,750
Let's add some padding here.

57
00:03:31,760 --> 00:03:37,250
One REM is going to be top bottom and then 1.5 left and right.

58
00:03:37,430 --> 00:03:46,160
Then we want to add some border bottom and we'll set it equal to one pixel solid and var and then hyphen

59
00:03:46,160 --> 00:03:48,740
hyphen, gray and 100.

60
00:03:48,770 --> 00:03:51,080
Then let's go with display grid.

61
00:03:51,080 --> 00:03:52,640
So same deal.

62
00:03:53,400 --> 00:03:57,690
We'll set our header as grid and then grid.

63
00:03:58,410 --> 00:04:03,480
Template columns and we're going to go with auto and then one fraction.

64
00:04:03,660 --> 00:04:10,470
So essentially that first letter is going to be with auto and then the company in position is going

65
00:04:10,470 --> 00:04:13,050
to take up the entire space.

66
00:04:13,170 --> 00:04:19,589
And I want to make sure that they are aligned in the center vertically and therefore, we're going to

67
00:04:19,589 --> 00:04:22,960
go with align items and set it equal to center.

68
00:04:22,980 --> 00:04:25,140
Now let's style that main icon.

69
00:04:25,140 --> 00:04:26,820
So that first letter.

70
00:04:27,810 --> 00:04:30,150
And for that we're going to go with width.

71
00:04:30,660 --> 00:04:33,540
Let's set it equal to 60 pixels.

72
00:04:34,520 --> 00:04:38,510
We also want to set up some kind of height, also 60 pixels.

73
00:04:38,540 --> 00:04:43,820
Then we're going to go with display grid place items in the center.

74
00:04:45,070 --> 00:04:48,860
So place items on, let's set it equal to center.

75
00:04:48,910 --> 00:04:50,410
Then let's add the background.

76
00:04:50,410 --> 00:04:52,540
And this is going to be the case where.

77
00:04:53,110 --> 00:04:57,610
We're going to go with Var and then primary 500.

78
00:04:57,640 --> 00:04:59,230
That's going to be the color.

79
00:04:59,230 --> 00:05:01,390
And then let's also add the border radius.

80
00:05:01,390 --> 00:05:02,320
So border.

81
00:05:03,230 --> 00:05:06,920
Radius and let's go with var hyphen.

82
00:05:06,920 --> 00:05:07,700
Hyphen.

83
00:05:08,400 --> 00:05:09,480
Border radius.

84
00:05:09,990 --> 00:05:11,100
Border radius.

85
00:05:12,250 --> 00:05:19,180
Then we want to go with the font size and we're going to set it equal to 1.5 rems.

86
00:05:19,270 --> 00:05:24,850
Then font weight is going to be equal to 700.

87
00:05:26,670 --> 00:05:28,650
And then we have text transform.

88
00:05:29,540 --> 00:05:29,990
And you know what?

89
00:05:29,990 --> 00:05:32,480
Let me scroll down just so you can see better.

90
00:05:32,480 --> 00:05:37,520
So text transform and let's set it equal to uppercase.

91
00:05:38,390 --> 00:05:39,740
After that, we have color.

92
00:05:39,740 --> 00:05:41,990
And in this case, I'm going to go with white.

93
00:05:43,170 --> 00:05:47,070
And then lastly, we want to go with margin, right?

94
00:05:47,070 --> 00:05:49,800
And we'll set that one equal to two Rems.

95
00:05:49,860 --> 00:05:52,380
Then let's target the heading five.

96
00:05:52,740 --> 00:05:55,610
And in order to do that, we're going to go with info class.

97
00:05:55,620 --> 00:05:58,830
And then inside of the info class we have heading five.

98
00:05:58,980 --> 00:06:00,150
So let's target that.

99
00:06:00,150 --> 00:06:06,690
Remember, we can nest and we're just going to go with margin bottom and then 0.5 Rems.

100
00:06:06,690 --> 00:06:09,270
And also we have there a paragraph.

101
00:06:09,270 --> 00:06:09,840
Correct.

102
00:06:09,840 --> 00:06:15,180
So we're going to go with paragraph margin in this case is going to be equal to zero.

103
00:06:15,270 --> 00:06:17,610
Then text transform.

104
00:06:18,120 --> 00:06:20,040
We'll set it equal to capitalize.

105
00:06:22,090 --> 00:06:28,770
And then let's go with color, which will set as text, secondary color and letter spacing.

106
00:06:28,780 --> 00:06:30,790
So let's go here with letter.

107
00:06:32,370 --> 00:06:36,360
Spacing and that one will be equal to our CSS variable.

108
00:06:38,710 --> 00:06:40,990
And then also let's go with color.

109
00:06:40,990 --> 00:06:46,900
And in this case, it's going to be var hyphen, hyphen, text, secondary and color.

110
00:06:46,930 --> 00:06:48,130
Let's save that.

111
00:06:48,870 --> 00:06:51,480
And once we're done styling the header, let's take a look.

112
00:06:51,480 --> 00:06:53,190
So this is what we should see.

113
00:06:53,370 --> 00:06:54,690
That's the first letter.

114
00:06:54,690 --> 00:06:58,170
And then we have company as well as the position.

115
00:06:58,170 --> 00:07:00,690
So now let's start working on the content.

116
00:07:01,480 --> 00:07:04,420
So for starters, let's target the class.

117
00:07:04,840 --> 00:07:07,240
We're going to go again with display grid.

118
00:07:07,270 --> 00:07:13,270
Then margin top is going to be equal to one Rems, then margin bottom.

119
00:07:13,790 --> 00:07:15,860
Will be 1.5.

120
00:07:16,800 --> 00:07:18,180
So let's change it here.

121
00:07:18,850 --> 00:07:21,520
Then we want to go with grid template columns.

122
00:07:21,520 --> 00:07:25,690
And pretty much by default, it's going to be one column layout.

123
00:07:25,690 --> 00:07:30,190
But once we get to 576, it's going to be a two column layout.

124
00:07:30,220 --> 00:07:34,000
So for starters, let's go here with grid template.

125
00:07:35,580 --> 00:07:41,790
And columns and let's set it equal to one fraction, then row.

126
00:07:42,450 --> 00:07:46,140
Gap will be equal to 1.5 times.

127
00:07:46,500 --> 00:07:48,870
And then let's align everything in the center.

128
00:07:48,870 --> 00:07:52,320
So align items and center.

129
00:07:52,620 --> 00:07:56,630
Like I said, once we get to 576, we'll change it around.

130
00:07:56,640 --> 00:08:00,150
So let's go here with media and notice how I can nicely nest.

131
00:08:01,040 --> 00:08:03,140
And let's just go with min width.

132
00:08:04,210 --> 00:08:09,130
Men I've been with and let's set it equal to 576 pixels.

133
00:08:10,710 --> 00:08:12,480
And then as far as the logic.

134
00:08:13,330 --> 00:08:14,980
We're just going to copy this.

135
00:08:15,010 --> 00:08:22,600
So grid template columns and we'll set it as two columns and then we have the status one.

136
00:08:22,600 --> 00:08:28,900
So essentially, remember when we set up here this job one, I said that this will be the main class

137
00:08:28,900 --> 00:08:32,289
which pretty much gets added to all of them.

138
00:08:32,409 --> 00:08:34,390
And then this one will be dynamic.

139
00:08:34,390 --> 00:08:38,169
If it's pending, then we use one background and color.

140
00:08:38,169 --> 00:08:41,549
If it's something else, then of course there's going to be a different value.

141
00:08:41,559 --> 00:08:42,789
Hopefully that is clear.

142
00:08:42,789 --> 00:08:44,950
So now let's go to a job one.

143
00:08:45,580 --> 00:08:47,500
The class is status.

144
00:08:47,500 --> 00:08:54,910
So dot status and we're looking for border radius and we want to set it equal to CSS variable.

145
00:08:55,910 --> 00:09:01,880
So for that we're going to go with var hyphen hyphen border radius.

146
00:09:02,030 --> 00:09:04,970
Then we want to go with text transform.

147
00:09:06,810 --> 00:09:09,360
And we want to set it equal to capitalize.

148
00:09:10,550 --> 00:09:12,950
After that, let's go with letter spacing.

149
00:09:14,870 --> 00:09:18,370
And we're going to go with Var and then letter spacing.

150
00:09:18,370 --> 00:09:20,220
So that's our CSS variable.

151
00:09:20,230 --> 00:09:28,540
Then text align, let's set it equal to center over here and then let's set up some kind of width height.

152
00:09:28,660 --> 00:09:35,050
And also since we have the value inside of our div and I want to place it in the center, we'll need

153
00:09:35,050 --> 00:09:37,270
to set it up as display grid.

154
00:09:37,270 --> 00:09:40,420
So first let's go with width under pixels.

155
00:09:40,450 --> 00:09:44,680
That height is going to be equal to 30 pixels.

156
00:09:44,680 --> 00:09:52,780
Then we're going to go with display and grid, and then let's set up align items and we're going to

157
00:09:52,780 --> 00:09:54,190
go with center here.

158
00:09:54,190 --> 00:09:55,870
Then actions.

159
00:09:56,110 --> 00:09:57,790
Remember, that's our footer.

160
00:09:58,520 --> 00:10:00,680
So actions class.

161
00:10:01,280 --> 00:10:08,300
And as far as the styles we're going to go with margin top equals to one Rems then display will set

162
00:10:08,300 --> 00:10:10,640
it equal to flex and align.

163
00:10:11,520 --> 00:10:14,100
All items equal to center.

164
00:10:14,130 --> 00:10:14,970
Okay, good.

165
00:10:15,150 --> 00:10:18,090
And at the very end, let's style, edit and delete button.

166
00:10:18,090 --> 00:10:22,350
So edit hyphen btn comma and then delete button.

167
00:10:22,770 --> 00:10:23,850
Delete hyphen.

168
00:10:23,850 --> 00:10:24,660
BTN.

169
00:10:24,660 --> 00:10:27,120
And in here, let's go with some kind of height.

170
00:10:27,150 --> 00:10:30,210
We're going to set it as 30 pixels.

171
00:10:30,240 --> 00:10:34,560
Then font size will be equal to pum pum pum pum.

172
00:10:34,920 --> 00:10:37,990
0.85 rems.

173
00:10:38,010 --> 00:10:44,310
Then display we'll set it equal to flex again and then align items again.

174
00:10:44,790 --> 00:10:46,290
We're going to go with center.

175
00:10:46,290 --> 00:10:48,150
So align items and then center.

176
00:10:48,150 --> 00:10:52,530
And then at the very, very end, I want to set up some kind of margin on the edit.

177
00:10:52,530 --> 00:10:57,150
So let me target the button and let me go with margin.

178
00:10:57,660 --> 00:10:58,530
Right.

179
00:10:58,830 --> 00:11:02,820
And we're going to set it as 0.5 Rems.

180
00:11:02,820 --> 00:11:06,150
And with this in place, we should be done with the job component.

181
00:11:06,150 --> 00:11:08,790
But I can see that there's a bug.

182
00:11:08,790 --> 00:11:14,330
So let me navigate back to my CSS and I think it's over here where we have the content.

183
00:11:14,340 --> 00:11:16,530
So this is not a content class.

184
00:11:16,530 --> 00:11:19,410
This is actually content center by bad.

185
00:11:19,410 --> 00:11:24,420
And then when it comes to the actual content, we just want to add the padding over here.

186
00:11:24,420 --> 00:11:28,260
So this one will be equal to one REM top bottom and then left and right.

187
00:11:28,260 --> 00:11:29,520
1.5.

188
00:11:29,550 --> 00:11:30,210
Yep.

189
00:11:30,210 --> 00:11:34,560
Now it looks way better and now we can move on to the next step.