1
00:00:02,060 --> 00:00:03,820
What do we have to style?

2
00:00:03,820 --> 00:00:07,800
Well, we created that main part and that photo part,

3
00:00:07,800 --> 00:00:11,550
and therefore, I first want to focus onto the main part here

4
00:00:11,550 --> 00:00:13,290
and therefore onto our image

5
00:00:13,290 --> 00:00:15,513
and the other elements it contains.

6
00:00:16,740 --> 00:00:21,640
For that, we'll go to our daily challenge CSS file.

7
00:00:21,640 --> 00:00:22,730
And up here,

8
00:00:22,730 --> 00:00:27,080
I first want to move the margin that we add to the body here

9
00:00:27,940 --> 00:00:31,140
into our shared CSS file.

10
00:00:31,140 --> 00:00:32,540
Right here.

11
00:00:32,540 --> 00:00:36,250
Because, for actually both our pages,

12
00:00:36,250 --> 00:00:39,123
we can remove this here in the daily challenge CSS file.

13
00:00:40,110 --> 00:00:40,943
If we go back,

14
00:00:40,943 --> 00:00:44,160
you'll see this margin we added doesn't hurt here.

15
00:00:44,160 --> 00:00:47,330
And same thing is true for the full week page.

16
00:00:47,330 --> 00:00:48,350
I think this looks good.

17
00:00:48,350 --> 00:00:52,140
So we can use this as a shared CSS style.

18
00:00:52,140 --> 00:00:52,973
By the way,

19
00:00:52,973 --> 00:00:54,240
talking about the looks,

20
00:00:54,240 --> 00:00:57,950
I'm using a zoom level of 125% here.

21
00:00:57,950 --> 00:01:00,000
So in case the page looks a bit different,

22
00:01:00,000 --> 00:01:01,660
that's the reason for this here.

23
00:01:01,660 --> 00:01:04,110
I just use it to make it better readable for you.

24
00:01:05,099 --> 00:01:08,240
However, let's now focus onto the main part.

25
00:01:08,240 --> 00:01:12,443
And here, I want to add our main selector.

26
00:01:13,990 --> 00:01:15,570
And there, I first want to work

27
00:01:15,570 --> 00:01:18,373
on the width of this main section.

28
00:01:19,460 --> 00:01:23,430
At the moment, if we go back and scroll down a bit,

29
00:01:23,430 --> 00:01:26,240
we have a width of more than 1000 pixels.

30
00:01:26,240 --> 00:01:27,890
And I think this doesn't look too good.

31
00:01:27,890 --> 00:01:29,890
So I want to reduce this width a bit.

32
00:01:29,890 --> 00:01:34,560
Therefore, let's maybe add a width of only 800 pixels here,

33
00:01:34,560 --> 00:01:36,700
to make this look better.

34
00:01:36,700 --> 00:01:37,533
Let's see.

35
00:01:37,533 --> 00:01:39,820
Yeah, but now the, well

36
00:01:39,820 --> 00:01:43,150
centering of our domain element is a bit off,

37
00:01:43,150 --> 00:01:46,380
but thankfully, we learned how to fix this quickly.

38
00:01:46,380 --> 00:01:50,440
Do you remember how can we center such block elements?

39
00:01:50,440 --> 00:01:53,210
Well, we can do this with our margin,

40
00:01:53,210 --> 00:01:58,210
because we actually only have to use a margin of auto here.

41
00:01:58,900 --> 00:02:01,453
If we do that, everything is centered.

42
00:02:02,500 --> 00:02:04,930
However, that's not the full truth.

43
00:02:04,930 --> 00:02:09,590
Because whilst I like the horizontal centering,

44
00:02:09,590 --> 00:02:13,840
I think that the distance to the top here and to the footer,

45
00:02:13,840 --> 00:02:17,740
so basically, top and bottom here, is not sufficient.

46
00:02:17,740 --> 00:02:21,090
Therefore, I want to add some more margin here,

47
00:02:21,090 --> 00:02:21,923
Specifically,

48
00:02:21,923 --> 00:02:25,530
I want to add a margin of 200 pixels to the top,

49
00:02:25,530 --> 00:02:27,913
and 72 pixels to the bottom.

50
00:02:29,040 --> 00:02:30,520
How can we do this now?

51
00:02:30,520 --> 00:02:33,150
Well, instead of our shortcut here,

52
00:02:33,150 --> 00:02:34,970
which adds this margin automatically,

53
00:02:34,970 --> 00:02:37,070
we can simply say that for the top,

54
00:02:37,070 --> 00:02:39,003
we used 200 pixel margin.

55
00:02:40,040 --> 00:02:43,440
For the right, we used auto margin.

56
00:02:43,440 --> 00:02:46,450
For the bottom, we used 72 pixels,

57
00:02:46,450 --> 00:02:48,733
and for the left, we used auto again.

58
00:02:49,920 --> 00:02:54,310
With this in place, now our page looks a lot better already.

59
00:02:54,310 --> 00:02:57,870
But still, the main part doesn't stand out enough.

60
00:02:57,870 --> 00:02:59,590
It's kind of a mix of text here,

61
00:02:59,590 --> 00:03:01,430
so I want to make it a bit clearer

62
00:03:01,430 --> 00:03:03,940
that this is the main part of the page.

63
00:03:03,940 --> 00:03:08,623
And for this, we use our good old background color property,

64
00:03:10,050 --> 00:03:11,140
this one here.

65
00:03:11,140 --> 00:03:14,780
And as always, I prepared color and RGB color,

66
00:03:14,780 --> 00:03:17,303
which is 219,

67
00:03:21,040 --> 00:03:22,450
108,

68
00:03:22,450 --> 00:03:24,783
and 94.

69
00:03:25,910 --> 00:03:27,800
With this in place, the main part,

70
00:03:27,800 --> 00:03:30,290
well, is a lot more visible now,

71
00:03:30,290 --> 00:03:32,913
but, now we are missing some other things.

72
00:03:33,800 --> 00:03:35,450
First thing is the padding.

73
00:03:35,450 --> 00:03:39,420
As you see, we don't have any padding in our main part.

74
00:03:39,420 --> 00:03:42,930
Let's add this quickly to give the text a bit more distance

75
00:03:42,930 --> 00:03:46,220
to the border of our element here.

76
00:03:46,220 --> 00:03:49,453
So we use a padding of 24 pixels all around,

77
00:03:50,520 --> 00:03:52,840
and now this looks better immediately.

78
00:03:52,840 --> 00:03:55,950
So we broke down the width on the padding and on the margin.

79
00:03:55,950 --> 00:03:59,290
What is missing now is our border.

80
00:03:59,290 --> 00:04:03,553
So let's add a border here and for this we'll take,

81
00:04:04,810 --> 00:04:07,503
oops, we'll take a bigger border of 5 pixels here,

82
00:04:08,340 --> 00:04:13,080
and a solid one with an RGB code of

83
00:04:13,080 --> 00:04:18,012
44, 44, and 44.

84
00:04:19,860 --> 00:04:21,593
Let's see. Yeah, better.

85
00:04:22,490 --> 00:04:27,490
And then we take our border radius of eight pixels,

86
00:04:29,230 --> 00:04:31,920
to give it these rounded corners all around,

87
00:04:31,920 --> 00:04:34,820
which gives it a nicer look in my opinion.

88
00:04:34,820 --> 00:04:37,130
That's it almost with the main element.

89
00:04:37,130 --> 00:04:39,970
What is missing though here is a box shadow.

90
00:04:39,970 --> 00:04:42,780
So a property which we have learned about,

91
00:04:42,780 --> 00:04:45,220
so let's also add the box shadow here.

92
00:04:45,220 --> 00:04:48,570
We move it from the left to the right by only 1 pixel,

93
00:04:48,570 --> 00:04:50,843
we move it top to bottom by 2 pixels,

94
00:04:52,290 --> 00:04:56,920
and maybe 8 pixels for the blur radius, and we also give it

95
00:04:57,910 --> 00:05:01,370
a color and RGBA color to be more precise.

96
00:05:01,370 --> 00:05:05,173
So we changed the opacity, and the color is 0,

97
00:05:06,480 --> 00:05:07,900
0, 0,

98
00:05:07,900 --> 00:05:09,420
so, black in the end,

99
00:05:09,420 --> 00:05:14,420
but now the opacity can be changed to 0.3, for example.

100
00:05:15,030 --> 00:05:17,010
Let's inspect this.

101
00:05:17,010 --> 00:05:17,843
Yeah, this row.

102
00:05:17,843 --> 00:05:20,570
Perfectly, I forgot the P here. Sorry.

103
00:05:20,570 --> 00:05:21,590
My bad.

104
00:05:21,590 --> 00:05:22,423
Now it's working.

105
00:05:22,423 --> 00:05:25,240
And now you see this slight box shadow here,

106
00:05:25,240 --> 00:05:27,093
around our main element.

107
00:05:28,650 --> 00:05:31,430
So this was step one of the styling.

108
00:05:31,430 --> 00:05:35,773
Let's now continue with the children of our main element.