Voiceover: Welcome back to this project.
I am really glad that you're still with me
on this amazing journey, and I hope
that you're enjoying this course so far.
You see this at the end of every lecture,
but I still want to tell you again that it's so important
that you ask your questions in the course forums,
if you have any, of course, because interacting
with other students or with me is the best way
to learn and to succeed.
So now let's move on to the next section.
This one is the How-it-Works section.
This is our pictures, the section where
we explain how ordering food works.
With the app screen on the left side,
and the three simple steps on the right side.
Very simple, but efficient in showing
potential customers how Omnifood works.
In this lecture, we'll use a lot of the techniques
that you're already familiar with.
We'll also learn how to draw circles with CSS,
a cool technique to make separations between sections,
and how to incorporate buttons for the
App Store and the Play Store.
Who knows? Maybe one day you'll make a website for an app.
So as always, we start by adding a new section,
right here after the last one.
So section, and I'm going call this one section-steps.
Alright.
This section will have a title such as the
second section that we designed.
So < div class, and so we need a row now
in order to send there.
As you hopefully remember, a h2 element
where we will put the heading for our sections.
And now you gotta know what text to put here,
so let's get back to our content file.
And here it is.
I'm going to copy all of it, as always,
and put it down here.
So the title is this one,
paste it here,
and just as the last time, this will be an &mdash.
Alright, simple as that.
Now in this case, we don't have a paragraph after this,
and we'll start it showing the iPhone in the app on the
left side, and on the right side the three steps.
So this time, we have two columns and not four.
So again, we need to start a new row.
So class=row*.
Now, we have, as I said,
two columns.
So as always, a column needs to col class
it's a span-1-of-2,
because we will have two columns.
And in the first column, we want our iPhone
with the screenshot on it.
So it's an image, of course, and we already know
it's very easy to put an image on our site.
So in the resources folder and image folder,
now let's see where it is.
App iPhone, I guess.
And we also need an alternative text,
which can be Omnifood app on iPhone.
Okay.
And let me just give this a class called maybe app-screen.
Alright, so this is the left column here.
And now as for the right column, let me just
put another column here.
And again a span-1-of-2.
It's to actually start with three containers,
which will then contain the number of the step
and the corresponding text.
So this we'll call works-step.
So step of how-it-works section, alright?
Now, the number itself will also be a div element.
We don't need a class name here for now,
so we will then make just < div rounds.
Then for the text, as usual, we will
put the text inside of paragraph.
And the text down here.
Alright.
Now I will just copy this and
paste this down here two times,
because I don't feel like writing it all again.
And then just copy the actual text,
right into these paragraphs.
And the third step.
So we don't need this anymore.
Now all that's left to put here are those
buttons for the App Store,
so we also want them inside of this column here.
So we can put them right after those three steps.
So some space here,
and we will take care of the formatting later in CSS.
So the buttons are very simple.
It's just a link, as you could have imagined,
and again, which points nowhere.
And put a class, which I will call bttn-app.
And now, instead of putting some text here,
we will put an image.
Then that image will serve as the button.
So < img src =,
we actually already have
those images in our folder, but they are
really easy to get from the internet.
For instance, the button for the App Store,
you can just get it from the Apple website.
So in the resources folder, image,
and then it should be down here somewhere.
So it's Download App.
Let's see if that's right, yeah.
Now we need an alternative text here, as well.
This is App Store Button.
Okay, and that's it, actually.
That's all it takes.
Now I will duplicate this with Command D,
and down here just change it.
It is app-android.
And then here it's Play Store.
And that's all it takes.
So this is the content of our how-it-works section.
So let's save this and go to our browser.
And here it is.
Unformatted, as you can see,
so the title already looks nice,
because we already formatted it before.
And we have those two columns here that we have defined.
And our two buttons, and now we need
to go back to CSS and style the whole thing.
So let's do that.