1
00:00:00,110 --> 00:00:06,060
And while we're still working with the jobs container, let's also set up the optional CSS.

2
00:00:06,080 --> 00:00:07,920
So I want to navigate to assets.

3
00:00:07,939 --> 00:00:09,260
Again, I'm looking for wrappers.

4
00:00:09,260 --> 00:00:09,790
And you know what?

5
00:00:09,800 --> 00:00:10,730
I'll just.

6
00:00:11,380 --> 00:00:12,880
Clean some stuff here.

7
00:00:12,880 --> 00:00:20,350
So source the assets, then wrappers and we're looking for the jobs container one.

8
00:00:20,710 --> 00:00:21,820
Keep in mind that.

9
00:00:22,500 --> 00:00:28,320
There is a high chance that Veit is going to again log us out.

10
00:00:29,030 --> 00:00:30,110
Don't worry about it.

11
00:00:30,650 --> 00:00:34,370
Let me remove everything over here and let's set up everything from scratch.

12
00:00:34,370 --> 00:00:38,810
So we're looking for margin top and that will be equal to four Rems.

13
00:00:39,050 --> 00:00:40,610
Then the heading two.

14
00:00:40,610 --> 00:00:43,250
And this is for no jobs to display.

15
00:00:43,340 --> 00:00:46,250
And I just simply want to go with text transform.

16
00:00:47,030 --> 00:00:52,790
Unequal to none because by default in the global CSS I have text transform capitalized.

17
00:00:52,880 --> 00:00:59,120
Then also eventually will show how many jobs are there and it's going to be a heading five.

18
00:00:59,210 --> 00:01:02,120
So don't be surprised if I go here with the syntax.

19
00:01:02,120 --> 00:01:09,320
So I'm selecting the heading five, which is a direct child of my section.

20
00:01:09,320 --> 00:01:14,080
Again, something we don't have right now, but we might as well set up the CSS.

21
00:01:14,090 --> 00:01:21,080
So we're looking for font weight and we're going to go with 700 over here and also we're going to go

22
00:01:21,080 --> 00:01:26,250
with margin bottom and we'll set it equal to 1.5 Rems.

23
00:01:26,270 --> 00:01:30,320
Then we want to basically go with jobs.

24
00:01:30,470 --> 00:01:33,700
So now we're looking for jobs array.

25
00:01:33,890 --> 00:01:35,990
It's going to be display grid.

26
00:01:36,320 --> 00:01:41,000
And once it's display grid, we also want to set up a one column layout.

27
00:01:41,000 --> 00:01:43,070
So that's going to be the default look.

28
00:01:43,070 --> 00:01:46,980
And then once we get to 1120, we'll have a two column layout.

29
00:01:46,980 --> 00:01:50,130
So grid template and column.

30
00:01:50,340 --> 00:01:55,860
So let's set up this one as one fraction and it looks like the S is missing over here.

31
00:01:56,770 --> 00:01:58,000
So let me fix that.

32
00:01:58,000 --> 00:02:00,100
And then we want to go to the row gap.

33
00:02:00,400 --> 00:02:03,200
And this one will set it equal to two Rems.

34
00:02:03,340 --> 00:02:06,310
And then at the very end, let's set up that media query.

35
00:02:06,340 --> 00:02:09,430
So we're looking for Add media.

36
00:02:10,479 --> 00:02:11,680
And min width.

37
00:02:12,780 --> 00:02:16,470
Let's go with 1120 just like the other ones.

38
00:02:16,560 --> 00:02:23,700
And here, essentially, let's just grab this jobs and let's fix some values so we don't need to use

39
00:02:23,700 --> 00:02:24,660
display grid.

40
00:02:24,690 --> 00:02:25,800
That's good.

41
00:02:25,950 --> 00:02:27,120
As far as the.

42
00:02:28,020 --> 00:02:30,630
Column, so I'm going to go with one fraction, one fraction.

43
00:02:30,630 --> 00:02:36,900
So two column layout and then instead of row gap, since now we have columns, we might as well set

44
00:02:36,900 --> 00:02:39,120
both of them up as two columns.

45
00:02:39,120 --> 00:02:43,250
So now let's navigate here and notice we should have the same look.

46
00:02:43,260 --> 00:02:47,730
And with this in place now we can render the job info.