So let's work on the background color now.
A very straightforward approach would be to go to
our highlight selector, add the background color property,
and add a color,
maybe with an RGB code of 227, 255, and 253,
and with that you are done.
This can be done like this,
but typically this doesn't have the nicest look,
so to say.
Modern websites, even though they only might have a plain
color in the background, look a bit more vivid.
They look better simply than this simple background color
here.
And the reason for this is that we can add a gradient,
a linear gradient color to this background.
This brings the whole thing a bit more to life and makes the
page look a lot more modern.
Now is adding a gradient color complicated in CSS?
No, it's not.
Because CSS comes with so-called functions,
Now the very functions are default features in CSS,
and we will learn more about functions,
especially related to JavaScript in a lot more detail
throughout this course.
But the function simply allows us to apply certain
operations automatically, so to say.
In case of the linear gradient,
we have such a linear gradient CSS function,
which builds or creates an image with a
progressive transition between well,
two or more colors.
We'll focus onto two colors here.
So it basically creates this gradient automatically.
The only thing you have to refine is,
which colors do you want to have,
which are part of this gradient,
and which direction should this gradient have.
So should it be left to right?
Or should it be like 45 degrees?
Anything like this.
We can create such a function,
narrow code by getting rid of the background color property
and using the background property instead.
And now in this background property as a value,
we use the linear gradient CSS function.
You can see functions always with this combination of the
function name and then the parenthesis afterwards,
the parenthesis then hold the values the function
needs to be executed.
In our case, the function can hold three different values.
One could be the degree,
so the angle our linear gradient should have.
So here we could, for example,
say 45 degrees written like this, the number,
and then D-E-G.
Then we need to add the colors
that should be part of the gradient.
We'll go with two colors here. And again,
we'll use an RGB code.
The one we had before, 227, 255, and 253.
And then we'll add a second RGB color of
202, 243, and 240, like this.
So this is the entire CSS function with this.
If we go back, you don't see a big change,
but I think you can see that the colors changed and that the
page looks better now, simply.
If I would, for example,
change to RGB code here to a very dark one,
maybe like this, let's try this.
Then you see the impact of the gradient right here.
Of course, not leave it like this.
Question that remains is what about these degrees
right here for this?
Let's maybe change 45 to 0 first, like this.
So you'll see now we have the starting color at the bottom
and the darker color at the top.
If I would change this to 180 degrees,
then things would be the other way round.
So we have light color starting color at the top
and the darker color, second color we added at the bottom.
As you can imagine, with 90 degrees,
we have the starting color to the left and
the second color to the right and
with the values in between for example,
45 here, we have a nice transition.
So we go from the bottom left, so to say,
to the top, right, or if we make 45, 90,
so 135 being the next logical values,
we go from the top left to the bottom right.
Here, I'll go with 0 degrees still
because I think this looks all right in our case,
especially if we change back the RGB code to our 202,
oops, 202,
243,
and 240 value.
Now it looks better.
And the big differences between the two colors,
which is just for demonstration purposes.
As I said, typically, you keep the changes,
very subtile, just to add this slightly more life,
so to say, to our background color here.
With this, our page looks great, I guess.
We have the first section and the second section
finished.
What is missing now is our last part of the landing page.
And this is our footer.