1
00:00:02,350 --> 00:00:05,500
So let's work on the background color now.

2
00:00:05,500 --> 00:00:08,560
A very straightforward approach would be to go to

3
00:00:08,560 --> 00:00:13,513
our highlight selector, add the background color property,

4
00:00:14,860 --> 00:00:16,047
and add a color,

5
00:00:16,047 --> 00:00:20,413
maybe with an RGB code of 227, 255, and 253,

6
00:00:27,170 --> 00:00:28,520
and with that you are done.

7
00:00:29,530 --> 00:00:31,200
This can be done like this,

8
00:00:31,200 --> 00:00:34,832
but typically this doesn't have the nicest look,

9
00:00:34,832 --> 00:00:36,780
so to say.

10
00:00:36,780 --> 00:00:39,882
Modern websites, even though they only might have a plain

11
00:00:39,882 --> 00:00:43,500
color in the background, look a bit more vivid.

12
00:00:43,500 --> 00:00:46,160
They look better simply than this simple background color

13
00:00:46,160 --> 00:00:46,993
here.

14
00:00:46,993 --> 00:00:50,740
And the reason for this is that we can add a gradient,

15
00:00:50,740 --> 00:00:54,550
a linear gradient color to this background.

16
00:00:54,550 --> 00:00:57,140
This brings the whole thing a bit more to life and makes the

17
00:00:57,140 --> 00:00:59,282
page look a lot more modern.

18
00:00:59,282 --> 00:01:02,990
Now is adding a gradient color complicated in CSS?

19
00:01:02,990 --> 00:01:04,489
No, it's not.

20
00:01:04,489 --> 00:01:09,110
Because CSS comes with so-called functions,

21
00:01:09,110 --> 00:01:12,634
Now the very functions are default features in CSS,

22
00:01:12,634 --> 00:01:14,704
and we will learn more about functions,

23
00:01:14,704 --> 00:01:18,140
especially related to JavaScript in a lot more detail

24
00:01:18,140 --> 00:01:19,300
throughout this course.

25
00:01:19,300 --> 00:01:24,300
But the function simply allows us to apply certain

26
00:01:24,670 --> 00:01:27,344
operations automatically, so to say.

27
00:01:27,344 --> 00:01:29,940
In case of the linear gradient,

28
00:01:29,940 --> 00:01:33,152
we have such a linear gradient CSS function,

29
00:01:33,152 --> 00:01:37,824
which builds or creates an image with a

30
00:01:37,824 --> 00:01:40,990
progressive transition between well,

31
00:01:40,990 --> 00:01:42,200
two or more colors.

32
00:01:42,200 --> 00:01:44,700
We'll focus onto two colors here.

33
00:01:44,700 --> 00:01:47,750
So it basically creates this gradient automatically.

34
00:01:47,750 --> 00:01:49,510
The only thing you have to refine is,

35
00:01:49,510 --> 00:01:51,290
which colors do you want to have,

36
00:01:51,290 --> 00:01:53,133
which are part of this gradient,

37
00:01:53,133 --> 00:01:56,570
and which direction should this gradient have.

38
00:01:56,570 --> 00:01:57,950
So should it be left to right?

39
00:01:57,950 --> 00:01:59,762
Or should it be like 45 degrees?

40
00:01:59,762 --> 00:02:01,473
Anything like this.

41
00:02:02,730 --> 00:02:04,977
We can create such a function,

42
00:02:04,977 --> 00:02:09,977
narrow code by getting rid of the background color property

43
00:02:12,500 --> 00:02:15,560
and using the background property instead.

44
00:02:15,560 --> 00:02:18,810
And now in this background property as a value,

45
00:02:18,810 --> 00:02:23,060
we use the linear gradient CSS function.

46
00:02:23,060 --> 00:02:26,650
You can see functions always with this combination of the

47
00:02:26,650 --> 00:02:30,850
function name and then the parenthesis afterwards,

48
00:02:30,850 --> 00:02:34,320
the parenthesis then hold the values the function

49
00:02:34,320 --> 00:02:36,380
needs to be executed.

50
00:02:36,380 --> 00:02:41,192
In our case, the function can hold three different values.

51
00:02:41,192 --> 00:02:43,910
One could be the degree,

52
00:02:43,910 --> 00:02:47,352
so the angle our linear gradient should have.

53
00:02:47,352 --> 00:02:49,110
So here we could, for example,

54
00:02:49,110 --> 00:02:51,851
say 45 degrees written like this, the number,

55
00:02:51,851 --> 00:02:54,113
and then D-E-G.

56
00:02:55,170 --> 00:02:57,840
Then we need to add the colors

57
00:02:57,840 --> 00:02:59,600
that should be part of the gradient.

58
00:02:59,600 --> 00:03:01,720
We'll go with two colors here. And again,

59
00:03:01,720 --> 00:03:03,163
we'll use an RGB code.

60
00:03:04,600 --> 00:03:09,137
The one we had before, 227, 255, and 253.

61
00:03:10,520 --> 00:03:13,530
And then we'll add a second RGB color of

62
00:03:15,920 --> 00:03:17,370
202, 243, and 240, like this.

63
00:03:22,810 --> 00:03:26,800
So this is the entire CSS function with this.

64
00:03:26,800 --> 00:03:29,654
If we go back, you don't see a big change,

65
00:03:29,654 --> 00:03:33,050
but I think you can see that the colors changed and that the

66
00:03:33,050 --> 00:03:34,894
page looks better now, simply.

67
00:03:34,894 --> 00:03:36,673
If I would, for example,

68
00:03:36,673 --> 00:03:39,873
change to RGB code here to a very dark one,

69
00:03:39,873 --> 00:03:43,363
maybe like this, let's try this.

70
00:03:44,200 --> 00:03:46,820
Then you see the impact of the gradient right here.

71
00:03:46,820 --> 00:03:48,560
Of course, not leave it like this.

72
00:03:48,560 --> 00:03:52,330
Question that remains is what about these degrees

73
00:03:52,330 --> 00:03:53,590
right here for this?

74
00:03:53,590 --> 00:03:56,744
Let's maybe change 45 to 0 first, like this.

75
00:03:56,744 --> 00:04:01,540
So you'll see now we have the starting color at the bottom

76
00:04:01,540 --> 00:04:05,600
and the darker color at the top.

77
00:04:05,600 --> 00:04:08,604
If I would change this to 180 degrees,

78
00:04:08,604 --> 00:04:10,770
then things would be the other way round.

79
00:04:10,770 --> 00:04:13,550
So we have light color starting color at the top

80
00:04:13,550 --> 00:04:17,120
and the darker color, second color we added at the bottom.

81
00:04:17,120 --> 00:04:19,913
As you can imagine, with 90 degrees,

82
00:04:20,980 --> 00:04:23,444
we have the starting color to the left and

83
00:04:23,444 --> 00:04:26,100
the second color to the right and

84
00:04:26,100 --> 00:04:28,290
with the values in between for example,

85
00:04:28,290 --> 00:04:31,810
45 here, we have a nice transition.

86
00:04:31,810 --> 00:04:34,510
So we go from the bottom left, so to say,

87
00:04:34,510 --> 00:04:38,824
to the top, right, or if we make 45, 90,

88
00:04:38,824 --> 00:04:42,336
so 135 being the next logical values,

89
00:04:42,336 --> 00:04:46,700
we go from the top left to the bottom right.

90
00:04:46,700 --> 00:04:49,850
Here, I'll go with 0 degrees still

91
00:04:49,850 --> 00:04:52,960
because I think this looks all right in our case,

92
00:04:52,960 --> 00:04:57,960
especially if we change back the RGB code to our 202,

93
00:04:58,780 --> 00:04:59,720
oops, 202,

94
00:05:02,350 --> 00:05:03,373
243,

95
00:05:05,616 --> 00:05:07,150
and 240 value.

96
00:05:07,150 --> 00:05:08,320
Now it looks better.

97
00:05:08,320 --> 00:05:11,470
And the big differences between the two colors,

98
00:05:11,470 --> 00:05:13,510
which is just for demonstration purposes.

99
00:05:13,510 --> 00:05:16,220
As I said, typically, you keep the changes,

100
00:05:16,220 --> 00:05:20,460
very subtile, just to add this slightly more life,

101
00:05:20,460 --> 00:05:24,253
so to say, to our background color here.

102
00:05:25,130 --> 00:05:28,280
With this, our page looks great, I guess.

103
00:05:28,280 --> 00:05:30,490
We have the first section and the second section

104
00:05:30,490 --> 00:05:31,350
finished.

105
00:05:31,350 --> 00:05:35,180
What is missing now is our last part of the landing page.

106
00:05:35,180 --> 00:05:36,993
And this is our footer.