Original subtitles

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 Omnifood.

So we will have a field for the name, the email,

how they found Omnifood, 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

like 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 a 100% of the Viewport width.

But here, I just like to keep it centered,

like the rest of the sections.

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 had drawn 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-img-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 like one third

and then this other box here about two thirds

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,

.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 flexbox, but while,

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 flexbox for the small stuff.

So grid-template-columns.

Now, so as I said, I want this first box,

so the first grid item here,

to be two-thirds and this one, one-third.

And so that's very simple.

So the first one needs to be 2fr, and the second 1fr.

And so together, they make up 3frs,

and of those, 2 out of 3 are for the first one,

and 1 out of 3 for the second one.

And so that's then exactly one-third and two-thirds

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

two-thirds and this one here, one-third.

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 50rem.

And so let's see now.

And, well, you can very faintly see the shadow here.

Maybe in the screen cast, 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 11px as in the meal.

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 orange here

to use it on one side of the gradient.

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 we're 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 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 90deg here, for example.

And so then it will flow from the left to the right.

Okay, and if we say 180deg,

then it will be again from top to bottom,

which is basically the default.

And then with 360deg, 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.

As 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 Omnifood,

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 /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 the 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 this 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 like 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 .. and then /.

So the .. 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 ../..,

and then / 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 10rem,

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 .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 .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 sight.

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 less thing here, which is,

as you probably have noticed,

these annoying bars on the side.

Well, there'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 is 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 containers 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.

Well, 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 this, 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 .66 pixel,

so 378.66.

And this one, this first one is 757.33.

And so this might just be an issue of, like 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.

(chuckling) 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 or image here

nicely aligned.

And so now in the next lecture,

it is time to finally fill this box here

with some real content.