We finished a style of the header.
Now it's time to style our main section of our website.
For this, I would like to get started
with our h1 element here.
So let's close the header part,
going through the main element,
some referring to the h1 part,
what we should change here is probably the text alignments.
So the text should be centered.
We could add a different color,
and to maybe also increase the font size a little bit.
For this, back in the code,
we'll first select our h1 element.
We'll select the main element.
And in there, if we want to target the h1 element,
and there we'll first use text align center
to center the text content of an element,
which is the case for this h1 element.
Then for the color,
we'll add an RGB color of 238, 164, 80.
We used this already earlier here in this project up here.
So it's the same color that we applied to our logo.
And finally, we'll increase the font size here.
We'll use a temporary value.
We'll update this unit later
when we dive deeper into responsive design.
But for the moment, I'll go for 38 pixels here.
With this, if we go back,
we see that the header, well, looks a lot better.
This was step one.
Now we'll dive deeper into the main element.
And here I want to refer to the section
with the ID latest products,
and then dive deeper there to see how we can style our
unordered list, the corresponding list items,
and also the article that contains the actual content of
each individual cards that we want to create right here.
Let's get started with the section though.
Here, I first want to define a specific width
for the entire section, so it should not occupy
the entire space as it is the case at the moment,
should only be well, less than 100%, maybe.
And we'll also center the section here.
We'll learn how this works.
So let's go back to the code and refer to our latest
products ID here.
First we'll limit the space.
This element will occupy with the width property,
and here I'll go with a percentage value of 80%, maybe.
So this is step one. Let's see. Yeah.
Now the content only occupies the 80% of the space,
now we only have to center this element and, you know,
centering block elements can be done with our
margin auto property value combination.
For this, back in the code,
we'll add the margin property and set it to, well,
let's maybe even add a top and bottom margin,
because this distance here is a bit close.
And also at the bottom here,
we might want to add a bit more space.
So let's say we add a top and bottom margin of 50 pixels,
and for left and right, we'll go with the auto property,
which will then automatically center our block element.
Let's see if this works. Well, apparently it doesn't,
but if we look at the section, we see it does,
we just have the problem that the styling of the image here
is not perfect yet.
So we have to fix this, but generally for our section,
the styling is working as intended.
To fix this issue though,
we'll continue with the unordered list right here,
because besides the fact that the images are
way too big from a width perspective,
we also have the problem that these images are displayed
below each other and not next to each other.
As we saw in our overview of the finished website,
we want to display the cards next to each other,
at least in the desktop view.
Now to achieve this, we have multiple options.
This case here, I will not use Flexbox,
which would be possible,
but I want to use the grid, because theoretically,
we might have more than two cards right here.
So if we have more cards and if you want to keep the
structure of two cards being positioned next to each other,
then the grid is the better approach.
As you learned, Flexbox is the better choice
for one dimensional layout.
Grid here is better for two dimensional layouts.
Therefore, in our case, I would go for the grid.
Now to apply the grid here, I'm back in our code.
And I'll refer again to the latest products ID here,
and there to the unordered list.
In this list now, we will use the display grid property
to create the CSS grid.
And additionally,
we'll use the concept of our grid template columns.
Also something we've learned throughout this course already,
therefore, I will not dive too deep into this.
With grid template columns, we can basically define
how many columns our grid should contain,
and what part of the existing space of this 80%
in the end should be occupied by each column.
We want to have two equally sized columns
from a width perspective, therefore, I go
with one fraction and one fraction for each of the
individual columns.
With this in place, let's see.
Yeah, we kind of have the grid layout, but still our images
are kind of destroying the enter a page.
So let's fix this now to have
a better view of our grid that we created.
For this, we have to tackle our images.
So the images inside the list item inside the article.
So these images here,
and we have to add a specific height to these images,
well, to fix the sizing issue we have right here.
For this, back in the code,
we'll select the food item class.
So here this class right here,
or actually to be more precise,
we could actually rename this to food item,
as it is a single item, actually.
So let's change this now.
So the class should be named food item
right here and right there.
And then back in the code,
we could refer to this class and to the image
inside this element, which has this class applied.
And there we'll now set a default height of let's say,
240 pixels. Let's see what this looks like.
Yeah, I think this is okay.
And now we have the problem that the images
are not both equally sized.
When it comes to the way these images
fill the space inside the container.
You see this image here is only 335 pixels wide,
the other image is well, almost 400 pixels wide.
Therefore what we can now add back in our code
is the width property,
which can now be changed 100% to fill
the entire width available, like this.
Now it looks bad already.
The problem here now is that
the images don't keep their aspect ratio.
So especially the cheeseburgers image
is significantly distorted,
but this can also be fixed with a property
we learned about so far in this course.
Here, we can use object fit now
to perfectly position the image in the predefined
width and height dimensions that we set here.
For this, we go again to the food item, image rule here,
and set object fit to cover.
With this, both images are positioned correctly
with the right size and are not distorted.
Next, we could add a bit more distance
between our two images or to be more precise,
between our two list items.
As we used a grid structure here,
we can add the gap property.
So here in our latest products, U L rule with the gap,
we can, well, define the gap between
our different grid columns in this case.
And here I'll simply go for a gap of 16 pixels.
With this, we have that space between our two columns,
which improves the look of our page.
Again, to finish this rule, if we hover over
our unordered list,
you can also see that the elements are not perfectly
centered due to a default padding to the left and due
to a default margin top and bottom, the orange part.
So let's also set these properties equal to zero
to remove any of these default values.
So once again, back in our latest products, U L rule here,
we'll set the margin to zero,
and we'll also set the padding to zero.
If there's some place, if we go back, this looks all right.
Next, we'll work on our individual list items
here with the food item class.
There is not a lot to change right here.
I actually see two main things that I would like to adjust.
The first thing is I want to have
a different background color, which has an impact
onto the lower part of this card of this element in the end.
And additionally, I would like to have rounded corners
as we had previously in our project
with the border radius property.
To change these things,
we have to select our food item class.
So I'll add this rule above
our food item image selector here.
So we'll go again for the food item class.
And in here, I'll first add a background color
with an RGB code of 228,
206
and 182.
Then we'll add a border radius.
So for the rounded corners around our card of six pixels,
and if you go back, yeah, you see, we improved the look.
But if we zoom in a bit,
we see that we have the rounded corners at the bottom,
but not in the top corners where our image is placed.
And this is also an issue that we had earlier in our course,
so you might remember how this can be fixed.
It can be fixed with the overflow property.
If we add this property here to our food item class,
so, overflow hidden,
this simply means that the elements
inside this element kind of adjust
to the predefined layout to the predefined way
this element is styled. This means in our case,
the image will end with the rounded corners and not with the
end of the actual image corners that the default image has
because the image doesn't have rounded corners by default.
So if you go back, you see,
now we have these rounded corners also around our images.
With this, we are almost done with our styling.
There are actually only two more things we have to work on.
The first thing is the food item content,
so the lower part of this card.
And then of course also the button, the add to cart button,
which doesn't have any kind of button look at the moment.
Let's first get started with the
food item content class here.
There, I simply want to well, align the texts in the center.
And I want to add some padding to increase the gap
to the border here that we have.
So for this back in the code we'll first go with
the food item content class,
and here, as I said,
I'll add some default padding of maybe 16 pixels.
Let's see. Yeah.
Now it looks better already,
especially here at the bottom also.
And as a second step, we'll add the text align property
here once again, with a value of center to center the text.
Yeah. This also works nicely.
With that, our cart looks almost okay.
The distance here is not perfect yet,
but we'll work on this throughout this module.
So the last styling I would like to tackle now is
our button. So the add to cart button down here,
which we have inside our article,
and they're inside the food item content class.
So this anchor tag here is this button
when we added the class button to it,
therefore we'll just add some background,
color, some color maybe,
and also changed the border radius to our rounded style
that we previously have. And with that,
the default style should look all right.
So let's go back to the code maybe here to the bottom
and there, I'll now select the button class.
And first we'll add a different background color
to this button.
Here, I prepared a value of
228,
157,
and 44 for the color.
We'll go with a plain white text here,
so I just enter white as a full vert here,
and then we'll apply the border radius property
for our round corners.
Here, I'll use four pixels only maybe,
to make it a bit less over-rounded corner.
So let's see what this looks like.
Yeah, this looks almost good.
What is missing now are two things:
first, a hover effect,
and secondly, some more padding here
between our actual content and the border of the element.
Let's first add the padding.
So down here, we'll add a padding of maybe eight pixels,
top bottom,
and 24 pixels left.
Right? Let's see.
Yep. It looks better.
And besides this, I also would like to have a hover effect.
So for this we'll select the button class here once again,
but now with the hover pseudo selector,
we also learned about already, and here we'll just add
a slightly changed background color with an RGB code of
221,
134,
and 34.
So let's see what this looks like now. Yeah.
I think this looks good.
With this, our initial styling is finished.
It's not perfect yet, of course, but we'll work on this
throughout this module, and with this optional part
being finished now, in the next lecture,
we'll now finally dive into the responsive design
aspect of this module, because at the moment,
if we decrease the width here, well,
not a lot is happening by default, right?
This doesn't look good.
So this is what we will work on in the next lectures.