Voiceover: Hi there.
Let's build the third section of our website,
the favorite meals section.
For this section, we will use beautiful photography
and a nice transition effect
to show the favorite meals of Omnifood's users.
I planned the section, like you can see on that sketch
that I did on the left side.
And on the right side, we see how it will look like.
Notice that this section has no title
and uses 100% of the browser's width.
So, no row class here.
I choose this design so that those beautiful images
have a bigger impact.
In this lecture, you will learn
how to make a grid of beautiful images
and how to make a nice "zoom-in" transition
just using CSS.
This is really powerful CSS3 stuff.
And we'll also learn a way to make <img> elements darker.
It's all super easy and fun.
So, back to our html file.
Now, how are we gonna build this grid?
First of all, we need to make a new section.
So, section,
and again I will call this "section,"
and this time, it's "meals."
Now, we want two rows
with four images in each row.
As I said before, we will not use the row class here
because we don't want a centered row with some images.
No, we want the images
to occupy 100% of the browser's width.
And it is actually a good practice to use an unordered list
to do that; in fact, two unordered lists.
We will use one for each line.
Just as I did in the navigation,
it's better to put some stuff in unordered lists;
for example, those four links in the navigation,
or these images that we're gonna use now,
than just throw the images onto that website.
So this is what we're gonna do now.
<ul> class, and I will call this "meals-showcase".
Alright, and, you remembered it:
we will have that <li> element inside of that.
Now, inside of this list we can put anything we want.
In the navigation, we put links in here.
Now we will see a new html element called <figure>.
And <figure> is also like a container
which can contain an image
and also a caption for that image.
In this case, we will only put
an image inside of this container, and no caption.
Because I don't wanna make things all too complicated here.
But, just so you know,
there is an element called <figcaption> and you can use that
to put some caption in here.
So, image.
As you remember, we have to specify the source attribute.
And now, where is our image?
It is probably in /resources/img/
and now let's better check what's inside of that folder
so that we're completely sure.
So, resources, img, and yeah, you'll see here
these are our meals.
So, one, two, three, four, five, six, seven, eight.
This is the order of the images.
And actually, in the text file,
we have the name of the meals,
and we can put
those names
in the alt description of the image.
So here, we just want this image.
Let me paste those names here, again,
with a comment,
as I showed you before,
and close this comment.
Okay, so this is the alternative text,
as you already know, in case that the image
cannot be displayed for some reason.
And that's it.
So I will copy this three more times,
so that we have four images here.
So this is number two, number three, and number four.
And just copy these alt texts.
"Chicken breast steak,"
and "Autumn pumpkin soup."
Wow, this sounds really good.
Makes you feel hungry, right?
Okay, this is the first four images.
The first row of images, and now the second row.
So, we will format all of this in a second
in CSS, don't worry.
And number six, number seven, and number eight.
And now, the descriptions.
So it's really important that you
fill out this alt attribute
in order to make your website valid html.
We will see later in the course how we can check
if we actually have valid or invalid html code.
So this is really important.
Alright.
So, let's see what it looks like on our webpage.
Of course, these images are so big,
and look nothing like we want so far.
But we're gonna fix that with CSS right now.
So, remember, this is called "meals-showcase."
I will just copy this
so you don't have to write it all again.
So, meals-showcase.
We copy this.
Again, I'm really worried about the structure here,
so this is to Meals.
As before, since this is a list
and we don't want that bullet point,
we say list-style: none;
and another thing, since we want this
to be the entire browser width,
I will say width: 100%;
So I hope you are already getting familiar with all of that
and that you can follow exactly what I'm doing here.
Now the next thing is to format the <li> elements
inside of the unordered list.
So, .meals-showcase li,
as we already know.
So, we want to display them as a block.
So you see, this display property here
is a really important one.
I'm using it all the time, and you will, too,
once you develop your first websites.
And the next thing is that I want to float
these elements to the left,
so instead of showing one-after-one,
I want them side-by-side.
And another very important thing is their width.
So, I'm having a list with 100% width
and I want four elements inside of this
to show side-by-side with the full width.
So, I have four <li> elements, and therefore,
each of them has to be 25% wide, right?
Because four times 25 makes the 100%.
Now, let me just do one thing, here,
and let me
give this <figure> element a class.
I will call this "meal-photo."
And I will do this with all of these eight figures.
And
one, two, three, four.
What I want to do now is to format these.
So, it's .meal-photo
and what I gotta do now is to say this:
width: 100%;
Now, saying that this element with the class "meal-photo"
has a width of 100%, means just
that it has the exact width of its parent,
which is .meals-showcase li.
And we have also to say that it has a margin: zero.
I know that we already did this in the beginning, here,
so maybe what you are wondering,
what is with the <h1> element?
This "normalize" file
defines some margin for that element
and so we have to overwrite that specifically.
And now, I need to format the actual photo,
the actual image inside of the photo container.
And the most important thing I have to do is,
again, width equals 100%.
And this will do exactly the same thing as before:
it will assure that the image
is exactly as wide as its container,
which is this element.
And the height will then be set automatically.
So, what does it look like?
Alright, this is exactly what we want, right?
This looks great!
The images are already here,
but we're not quite done with this,
because, as I said in the introduction of this lecture,
We want to add some cool transitions here.
And that's what we're gonna do
in Part Two: Building the Meal Section.
See you there!