Voiceover: Welcome back to Part 2 of Building the Header.
In this video, we'll format the content
of the hero text blocks,
so this heading and those buttons.
Let's start by looking at the main heading.
We should probably make it wide, right?
So let's go back to the h1 style here,
and continue to define how it should look like.
So color, I will make it right,
and I will specify its font size, as well.
Now, the basic font size
of our html document is 20 pixels.
Now, in responsive web design,
we want everything to be relative.
So we can say that our font size should be 200%,
and then, this means
that our heading element
will be 40 pixels,
which is exactly 200% of 20 pixels, right?
So, if we later want to change this size,
we can just change the
html global font size,
let's say to 18,
and then this size will automatically decrease as well.
And we will use this method
for all other elements on the webpage,
so it will all be defined relatively to this
base size of 20 pixels.
Then, by adjusting this, all other elements
will automatically adjust their size.
And 200% looks good to start with.
Or maybe 240%
because we really want this to be big.
So let's check how it looks like.
Okay, much better.
Now, you probably remember that I said
in the design section,
that when we use very big headlines,
we should decrease the font weight.
And we will do that right now.
And we should also
maybe set this to upper case
because I think it looks much better.
So let's go back here and do that.
And with this, I can show you many ways to format text.
So let's decrease the font weight
to 300,
'cause usually the h1 elements come with bold formatting,
and that's not what we want.
And we will make it an upper case.
For that, we use the text transform property.
So, let's say upper case.
And another thing we can do is the letter spacing,
so it's not so compressed.
And also, a word spacing,
so some space between different words.
All of this makes a big headline like this
look much better.
I can go with three pixels here, for example, or maybe four.
Let's see how it looks like.
Okay, much better now.
But now we have this ugly line break here, healthy meals,
and we don't want that.
So let's just break it here,
so that we have goodbye junk food,
and then on the next line, hello super healthy meals.
Right, this will be much better.
So you remember how we do that?
Easy as this.
Just a br element.
Much better now, right?
So now let's format these buttons here.
First, we should
attribute some class to this one.
And I usually call them button,
and now we will have two kinds of buttons.
The first one will be a orange button
with a full orange color,
and the other one will be a so-called ghost button,
which will have just an outline,
an orange outline,
and then be transparent in the inside.
And what I'll do now is to
create a class for each of those buttons.
Let me just show you.
Button one will be called full
and button ghost.
So I will put the common styles,
like the font size and the font color and the button size,
I will put these inside this button class,
and then I will create a button full class,
which is specifically designed for the full button,
and a button ghost class,
which will be specifically designed for the ghost button.
All right.
So let's go back to the style file down here.
So button.
Now, in the lecture about the box model,
I told you that there were
block elements and inline elements, right?
Now there is also a mix between those two elements,
which is called the inline block,
and the inline block is just like an inline element,
but that can have heading and margin.
So the difference is that
it doesn't force a line break,
but you can attribute it some heading and some margin
unlike a normal inline element.
And so, a normal a
element like this
is an inline element,
but we want it be an inline block.
So we can change that by using display,
and then say inline block.
And now, we can
give it some heading.
And, let's say we want the top
to have 10 pixels,
and on the right and the left sides, 30 pixels.
Now, do you remember if we just put 30 and 10,
then this will mean that we have
10 pixels of heading
on top and bottom
and 30 pixels left and right, okay?
Now another thing is we also want
the font weight
to be 300 here.
So let me check.
All right, so you see, we have some heading here now,
and it looks good.
We also have this text underline here
that we need to get rid of because
it's kind of ugly, you know.
So we use text decoration,
and we want none of it.
Very well, so this is the common button style.
So both buttons have this in common.
And now let's start with the,
sorry, now let's start
with the full button.
And now let's choose a color.
As I told you before we will use the Flat UI tool.
Right here.
Flat UI colors.
Okay, that's the one we want.
So we have some oranges down here,
and to me, it looks like
this one is the best to use in this case.
So I'll just click here.
And now the color is selected.
So I will say that we want
the background color of this button to be this color.
Here we see, it's a nice orange,
and
let me go back here.
And here it is.
Now it's a nice orange button.
Very well, now, we maybe want some
border-radius here, right?
So we want this to be round
on both sides.
So we can just put a ridiculously high
border-radius here.
Like, I don't know, 200 pixels.
Very well, now, the text should probably be white
for this button, right?
Actually, for both of the buttons,
so put it right here,
color FFF is white.
So very well.
Now, the style for the ghost button.
We want the border to be orange,
so we did this before, at this border,
we want it to be one pixel, solid line, and then the color.
And we will use this color here.
Now you see this button is slightly
bigger than this one.
And there's a reason for that.
If you remember from the box model,
the height and the width of an element
is the content plus the heading plus the border.
So this element is higher
because it has that one pixel border.
So in order to make these two the same height and width,
we just add that border to this button as well.
And we also want some distance between this, right?
And probably the best way of doing this
is to add some
button margin to this h1 element.
Let's go back, and as I said,
we will add this border here
so that they look the same
and then some margin bottom.
So this one is the margin top, right?
And here we want margin bottom, like 20 pixels maybe.
Now, I actually don't like this white color here so much
because of the color of the line.
So let's make this text here orange
because it looks kind of weird,
the orange line and the white text.
So this here
will go to the full button
so that the full button is actually white,
and this button down here will be orange,
like the line color.
All right.
So we defined how the buttons look like.
Now, buttons or links in general in CSS
can have different states,
link, visited, active, and hover.
Now link is just how the element looks in the normal state.
And how do we specify this?
We just put it here.
This is called pseudo-classes.
So I just write link here,
so this means the,
the a element in its normal state.
Then, we have the visited state,
which is how the element will look like
after it has been visited.
And maybe sometimes you notice that some links
in some internet websites
look different after you have clicked them.
Now, we don't want this to happen,
so we say that the visited links should look
just like the normal links in their normal state.
So, we do this here.
So we say button visited.
So button link and button visited
have both the same style,
which means they will both look the same.
And we have to do the same thing down here.
Button link
and button full visited.
And the same thing down here.
Button ghost link.
All right.
Now there are two different states, which is hover,
when we put our mouse over a button
and the active state,
which is when we click on a button.
And we can specify that in CSS here.
So we can say what will happen
when we put the mouse on the button.
And in order to do so, we say button and then hover,
and we want the button to look exactly the same
when we hover it or when we click on it,
so when it's active.
So we say button hover and button
active.
And what we want our buttons to do
is to have a darker orange tone,
so that we can see some change there, right?
Do you remember the tool that we use
to get darker shades of a color?
It is the 0to255 tool.
Let me just copy this.
And we'll use this tool, 0to255.
So this is how it looks like.
And I will paste our orange tone here.
And this.
Alright, this is our original orange tone
that we're using on our website.
And now we want a darker shade.
And this is very similar, so let's use this.
I'll just click here, and now it's copied.
So what I do now is
that I say that
when I put I put my mouse on the button,
I want it background color to be
this one.
All right.
Let's just put this code
down here.
So that we have the normal declarations
like link and visited before
and then the hover and active states.
Here, it's actually visited.
And now, let's check this out.
Okay, so now our buttons change their color.
Now we have some problems here, as you see.
First is the text color here,
and second is the border color.
You see in both,
that there is still the lighter orange color
still showing here.
So we have to change that as well.
And in order to do so,
we will have to change these classes.
We'll just copy these and change the things that I want,
so that I don't have to write everything again.
So it's hover here and active...
and hover and
active.
So I don't need this and this.
So the button full should not only
have this background color here,
but also its border should have that color.
All right, and same thing here for the ghost button.
Difference with the ghost button
is that we also want the
font color to be white,
so FFF here.
And now it should work as we want.
Great, now this looks great, right?
Now, one thing, and this is a little more advanced,
is we want to have a little transition
from one color to the other.
So this gets just orange instantaneously,
but we want to see a nice transition.
And we can actually do this using just CSS,
and I will just show you how.
So all we need to do here is,
in the button class,
just add the transition property.
And this is actually CSF three already,
so what we want to say here is
that the background color
should change
with a transition.
We just write it, background-color.
Now we'll say,
0.2 seconds.
So what happens now is that when we hover over a link,
over one of these buttons,
the background color will not change instantaneously,
but over a period of 0.2 seconds.
And we want not only the background color to change,
but also the border
and also the font color.
So that is all a nice, smooth transition
from one state to the other.
So we can specify more than one property here.
So we want background color to change.
We want border to change.
0.2 seconds as well,
and we want color to change over a period of 0.2 seconds.
Right, let's see how this works.
But last thing, we also want
some margins between the buttons
'cause they are glued together right now.
So let me just change here the full button.
I will add a margin to the right.
So when I say, for example, 15 pixels to the right
then
the button will show this nice distance.
And as you see, the transition works
exactly as we planned it, right?
In both buttons.
So this looks much better than it did before,
and yeah, you just learned how to do this.
Great, right?
And this closes part two of Building the Header.
In the next and last part of building the header,
we'll just add a simple navigation and the Omnifood logo.
See you there.