For the HTML part,
we go back to the index HTML file and
scroll down to our footer element,
which we created at the beginning of this module.
And in this photo, we follow actually
kind of the logic we had up here for our highlights.
Again,
we have some kind of content which can be grouped together.
These are our links here containing the images, the icons.
Therefore,
I would get started here again with an unordered list.
We know it, the order doesn't matter here.
And this unordered list now contains what?
Well, it contains two list items,
item one and item two.
And each of these items now contains an anchor tag, right?
It should be a link.
And this link now should refer to well,
Instagram and Facebook.
Let's get started with Instagram first here.
So HTTPS://ww(w.)instagram.com.
So we simply add the entire URL right here
in our quotation marks.
And now the content for this link is not a text like,
well, Instagram or anything like this,
here we'll now add the path to our icons
that we just unzipped.
Therefore,
what we have to do now is
we have to leave the full screen mode for vs code
like this maybe.
And now we take the Facebook image
and open the images icons folder here in vs code.
So we take this image drag and drop it right there.
Now we can also see the image
and we do the same thing with the insta image here.
With that, we can,
if you want to go back to full screen mode
and, maybe, close these two images here,
and now we are back in the index HTML file.
And now we can refer to the image.
For this we have to enter the image element here
and refer to our source, which will be images.
Then here we go to icons
and then we select the Instagram image.
And let me quickly bring this into the next line to improve
the readability and here as texts for screen readers or
in case the image doesn't load correctly.
We simply add maybe Instagram logo here
and with that, our first list item looks all right.
Let's now apply the same logic to our second link here.
So we go to list item at the anchor tag.
Here we go to HTTPS://ww(w.)facebook.com.
And here we now add the image once again,
maybe also edit to that second line to improve the
readability here we go to /images/icons/Facebook.
And the text is Facebook logo.
Let's save this and format this quickly.
And this means our HTML part is finished.
If we quickly check this on our page, you'll see.
Well, nothing because the images are white
but if we go to the footer and open it,
you'll see we have our list items. And somewhere in here,
we should have our icons, but we'll see these soon
once we add some background color.
And that's exactly what we will continue with.
Now, it's time to style our footer.