Jonas: Hey there and welcome back
to the last section before the footer.
And so this is finally the call-to-action section.
So here, we will basically create a form
where the user can then start signing up for Omni Food.
So we will have a field for the name, the email,
how they found Omni Food, and then also a submit button.
Then before that, we will also have,
as always, some heading and some text.
And on the right side here,
I actually want to add a supporting image,
so to make this form look a little bit more catchy.
And yeah, in general, supporting images
are many times a good idea.
And so we'll just do that here as well, all right?
So we're gonna base this example
on the standout sections that I've been showing you
in the web design section.
So just like that first example there.
And then as for the form,
basically I will make a form in a grid.
So here, a two-by-two grid,
as you can see in my sketch here.
Okay?
So let's start doing this now.
So adding yet another section here,
so section CTA,
which stands for call to action.
Then this one we also, just like all the others
or at least most of the others, we want it to be centered.
So container,
but of course, it wouldn't have to be centered.
So this is just the design decision
that it took for this one.
But if you wanted,
you could also have a standout section that,
for example, occupies like 80, or 90, or even 100%
of the view port width.
But here, I just like to keep it centered
like the rest of the sections.
Now, okay.
Then here, inside of that container,
on the left side, we will basically have that form
and also all that other content.
So the heading
and the paragraph text that I drawed in the sketch.
And so, let's call this one here the CTA text box,
and then the other one for the right side
which is where the image will live.
So CTA image box.
All right.
And here we will actually, again, create our own grid
because we want these two columns here,
so these two elements, not to have the exact same width,
but instead the image should take up 1/3,
and then this other box here, about 2/3 of the container.
So let's give this here another name
so we can style it individually.
Okay, let's grab all of this here, as always.
So CTA section.
And so, now that CTA,
let's actually immediately work on what I just said.
So making it a flex container,
or actually a grid container.
So of course, we could also use flex box,
but well, as I said in the beginning,
I'm simply choosing to use CSS grid
for all the big overall page layout elements.
And so I would say that this is one of them.
And so, yeah, using CSS grid for those
and using flex box for the small stuff.
So grid template columns.
And so, as I said, I want this first box,
so the first grid item here to be 2/3,
and this one, 1/3.
And so that's very simple.
So the first one needs to be 2fr, and the second, 1fr.
And so together, they make up 3fr's.
And of those, two out of three are for the first one,
and one out of three are for the second one.
And so that's then exactly 1/3
and 2/3 for the first one.
Okay?
So I hope that made sense.
So let's check it out here in our page.
And indeed, that does look as though this one here
has 2/3 and this one here, 1/3.
Great, we're off to a good start,
but since this is one of those standout sections,
let's give it a background color.
And I will actually use a gradient here.
But for now, let's just choose our regular brand color,
and I will also add a box shadow to it.
And here I will use the same one that we used for the meals.
And again, that is just for consistency.
So this one here.
So maybe we will make it a bit darker,
but we will use these same values here.
And actually, let's copy that also here
into our design decisions,
which, of course, you don't have to do it,
but just so we keep it consistent,
we can then come here and copy that.
So that's especially useful if our project is really big.
So let's try that here,
but probably we will have to make it a bit darker.
Oh, and of course we cannot see much
because the element is really small still.
So let's, for now, add some temporary height here.
So this is temporary.
So height, let's say, 50 rem.
And so let's see now.
And, well, you can very faintly see the shadow here,
maybe in the screencast, you cannot see it.
So we will have to make it darker.
And the reason for that is that the darker
the background basically is,
then the more dark the shadow also needs to be
because otherwise it will not be visible at all.
So let's make it .15 maybe.
And since we're here,
let's also make the borders round again.
So again, using the same 11 pixels as in the middle.
And that already looks a lot better.
So it's still quite subtle of course
because that will always be the goal.
We never want a dark shadow, remember that.
But if we turn it off, then it looks quite different, right?
And so it is definitely there,
and we could maybe make it even a bit darker,
but also I think it is okay like this.
But anyway, let's now take care of that gradient
that I was talking about.
So what I want to do is to create a gradient
that is darker on one side and lighter on the other side.
So basically what I'm gonna do is to use a lighter version
of our orange here to use it on one side of the gradients.
But first, let's remember here again
how gradients actually work,
just in case you skipped the first lecture
where I first introduced this.
Let's turn this one off.
And now here, in order to specify a gradient,
we use the background image property actually.
So a gradient is basically treated
as though it was an image, okay?
And so here, we then write this function here,
so linear gradient, and then we can specify two colors.
So let's specify our regular brand color here first,
just like this.
And then we can specify a second one.
Let's actually do the second one first.
And just for testing, I'm gonna go with the red here.
Okay, so that is definitely a background
even though not a very pretty one yet.
And you see that by default,
the gradient flows from the top to the bottom here, okay?
But we can also change that here
as the first value that we specify here
which is basically the degree.
So we can say 90 degree here, for example.
And so then it will flow from the left to the right.
Okay.
And if we say 180 degrees, then it will be, again,
from top to bottom, which is basically the default.
And then with 360 degree, then it should be the opposite.
And indeed it is.
Now this is one way of doing it,
but there is actually another one.
So we can also basically do it using English language
and writing something like, to right.
And so, now it flows to the right.
So from the starting color here to the right,
all the way to the second color,
and we can also say, to the left,
then it will be the opposite direction.
You see that.
And we can also basically use corners.
So we can say, to right bottom.
And so then it should start
at the left top corner exactly here,
and then flow to the right bottom corner
as we just specified.
And so let's actually leave it at this setting.
All right?
But here, of course, you could experiment
with all the other values here as well.
So here it could be also left,
and here it could also be top.
But now as for the second color here,
let's get one of our tints.
So this is the original one,
so let's grab another one, maybe this one.
So with this, I think we wouldn't have a big difference,
but here it should then be noticeable.
So just copy that,
replacing the red with that new one.
And yeah, I think that does look quite nice here.
And so let's leave it at that.
I will just copy this here into our designs.
Okay.
And so that's it for now for this part.
So that's the entire CTA here.
And now let's take care of this image here.
Now what I'm gonna do is to actually now
use a background image.
So instead of specifying the image right here,
I will use a background image
because that will then make it easy for me
to overlay a color on top of it.
So again, we actually already did that before,
but I thought it was important to do it here once more.
So let me copy these two actually,
or at least I will also already write this one here.
All right.
And now, as I was saying,
let's specify the background image right here.
So when we have an actual image,
we need to use the URL function here.
And the image we are looking for here is this one.
So this, I think, is a very beautiful supporting image
of a lady eating here, again, some nice food.
And so this, once again, has the goal
of making the user then really feel
like they should be signing up for Omni Food.
But here, specifying the path
will actually become a little bit trickier.
So let me show you why.
So if we just specify, let's say, img,
and then slash eating like we have been doing before,
so like this, well, then it shouldn't really work.
So let me show you that on the page,
and indeed, it is not here.
So let me inspect that right here.
And you see we have this red error,
so if we click here to console,
we will see that failed to load resource on eating.jpg.
Okay?
So let me show you why that is.
Now, VS Code somehow displays it here,
but, well, it is actually not correct.
So the reason for this is that right now
here in this CSS file, we are actually in this CSS folder.
So in this one, right?
However, writing it like this
basically means that in the same folder
that we are currently in, go into the image folder,
and then choose the image, eating, right?
However, inside of the CSS folder, there is no image folder.
So it works this way with this path in the HTML
because in this file, we are actually in the root folder.
And so, in this folder, there is indeed an image folder
where the browser can reach into, right?
But here, again, it is not because we are in the CSS folder.
And so, first, we need to basically move out
of the CSS folder into the main root folder,
and then from there, we can reach into the image folder.
Okay?
So what we have to do is to write dot, dot,
and then slash.
So the dot, dot basically means to go to the parent folder.
So moving one level up in the file tree.
And so then, once we are back in the parent folder,
then of course we can go into image
and then this one here.
So let's see.
And here it is.
All right?
So hopefully that wasn't all too confusing,
but just remember that whenever you need to go one level up,
just use the two dots here
before writing the rest of the path.
And in case you need to go two levels up,
you can just do this, dot, dot, slash, dot, dot,
and then slash whatever comes next.
All right?
But anyway, let's now size the background.
So background size, and here we use cover again,
which will basically ensure
that whatever is the dimension of this element,
the background image will always cover it entirely.
And so, now that looks perfect.
Right?
So this here is the element,
and without background size cover,
it just looks wrong, right?
Now, we can also position the background.
So that's something that we haven't done before.
So background position.
And here, for example, we can try top,
which I think is the default, or we can try bottom as well.
Well, here, nothing changes actually
because the image is already stretched as high as it can.
But if we put it to the left,
then apparently nothing changes.
But in some situations it can be helpful
to play around with this property.
So let's just set it
to center here, all right?
Now, we can try something else.
So if this one here was really small, like just 10 rem,
then, of course, there is not a lot of space for the image.
And so then, here, this property might become helpful.
So without it being centered,
it will automatically be aligned at the top,
as I just said before,
but at the center, it then moves here,
and we can even put it to the bottom as well.
And so that then only shows this last part here.
Okay?
But anyway, I will just put it here to center.
And so that is how the image looks like in this situation.
Now, the image like this is way too bright
and it takes up too much attention
because it doesn't blend in very well
with this side here of the container.
So there needs to be a little bit more harmony, let's say.
And so what I'm gonna do is to overlay this same gradient
that we already have here also on top of the image.
All right?
And again, we did that before actually.
And so let me just explain it quickly again.
So in the background image property,
we can actually define multiple backgrounds
which will then be layered on top of each other.
And so here what I'm gonna do is to grab this one here,
which remember, is also defined on background image.
So it also counts as a background image.
So I can put that here first and then add a comma.
And so, now we have this image,
and then below that we have this one.
Now, if we check it out like this,
then of course our original image is completely covered
because the image that is on top is not transparent at all.
And so let's change that here.
So I just hover it here,
and then when I click here, it becomes this RGB value.
And then I can simply move this one down.
So for example, let's try,
let's start with 50%, maybe even?
So clicking the title bar here,
and then dragging this one down.
So starting with 0.5.
And so, now this is transparent,
and so now the second background image
that is underneath should be visible, and indeed it is.
Now, this maybe is a bit too much color on top.
Let's try 0.4.
And maybe let's go even more down to 0.3 or 35.
Okay, so like this.
I think we're good to go.
So that is very beautiful.
Now we just need to get rid of this text right there.
So here we don't need any text.
And so basically, here we will end up
with this empty div element, which has no content at all.
However, the problem with this is that visually,
of course, this element still contains an image,
but it is now completely inaccessible to screen readers.
So this image right now is no content in our HTML,
but instead only here in our style,
which means that the image is really just aesthetical
and really not a piece of content right now.
And so that's why in screen readers,
it will then not appear.
We can and should, however, fix that.
So we can use a new attribute
that we haven't talked about before, which is called role.
And so, here, we can now say
that this div element acts as if it was an image.
So the role here of this element
is to be like an image, all right?
And then we can also describe it, but not with the alt text.
So this one here, alt, is only for images,
but instead we can use the aria label.
So this is like a newer attribute
that is all about accessibility.
And so here, we can now describe that.
So woman enjoying food.
All right?
And so, now screen readers will be back
to understanding this as an image,
and then they will read this text here to, for example,
blind users or users with reduced site.
And yeah, we should never forget these users
when we are building our sites, all right?
And so that's why I'm placing some focus here
on accessibility.
Now, okay, now just one last thing here,
which is, as you probably have noticed,
these annoying bars on the side.
Well, it's just one bar,
but in reality, you can also see it here.
So let me inspect that to show you where it is coming from.
And indeed, it is coming from the container,
which by default has this padding applied
to both of the sides, right?
That's also the reason why
if we look here closely and it's easier to see like this.
So you see that now the image box
actually touches the sides here,
and that this content is kind of aligned with this content.
However, what we really want is for this box
to be aligned with this content here as well,
so that it appears to be in line
with the other centered elements
that we have on the rest of the page.
So right now, it appears to be a little bit wider
than this content and this, and so we want to fix that
to make it look as though it was exactly as wide.
So that is actually not so hard to do.
We will just have to create a small trick which,
yeah, actually, it's just this section here yet.
So what we need to do here
is to create another element
which is inside of the container,
and we will then have that element be the CTA.
So let me show it to you.
So this is now the CTA,
and no longer this, okay?
And now once we reload this, then that fixes the problem.
So let me show you.
Of course, the container still has
the same padding as before,
but now the CTA box, which is the box
with the background color is inside of that container.
And so the padding of the container
is then no longer affecting this box right here.
And so, right now, it is actually aligned
with the previous content.
All right?
So this is a lot better.
It just creates this very small problem
that this image here is overflowing the container.
But once again, this is fortunately easy to fix.
So here in the CTA element
which is now the new grid container,
so this is where the image is overlapping
while we can just get rid of that
by saying, overflow, hidden.
Right?
And so with this, it disappeared.
Now, for some reason we have this small gap here,
like there's like a pixel or something there,
and I'm not really sure why that is.
So probably it has to do
with some rounding issues here in Google Chrome
because this one is 0.66 pixel, so 378.66.
And this one, this first one is 757.33.
And so this might just be an issue of alignment.
So you see that, as I scale it here,
there are some situations in which it doesn't happen,
and in others it does.
So you see that it's kind of flickering.
And so this is not a problem with our code
but with the browser.
So there's nothing we can do about that.
And actually, right now it looks correct again.
So I'm not really sure why that is happening.
But anyway, we just need to ignore that.
Great.
So now we have this basic layout here finished.
We have our background colors
and our image here nicely aligned.
And so now in the next lecture,
it is time to finally fill this box here
with some real content.