Guess not that we got our basic set up out of the way, we can also standing off to actually not just
both on creating our head section.
So let's go back into the demo and one more quick thing.
So I have here are finished actual running project, going to take it out and I'm going to place it
right.
On the right side.
Where did you go from the right side of our tax return?
I had to do this because we are going to now switch to a a phone format.
So let's go in here.
Let's I'm going to also change this to go down.
Let's touch this one down and stretch this one down my case.
Now I'm going to say I am already on the phone with my.
But I think I'm a bit too much something, so let's go here from 150.
Let's change this to one hundred now that's much better.
Or 125, let's see how this looks that kind of stretches down here, but we don't need this part.
I just need to see the format.
So in order for me to know that, yes, we are in a phone format, so we're under four hundred pixels,
OK, for a width.
So let's go back into our header section and let's create our e-mail.
The header section is actually pretty simple, we don't have the tag right here, we're just creating
a div with a class of header text.
And the Danish text.
And within Iraq had a hashtag, so this would be just a general continuing to create two more things.
One would be the head, a text content.
So create a narrative with a class of and the text and underscore content
within hearing and create in each one.
So we could actually delete this one.
And now within our each one, I just want to type my name, you can type yours if you want.
It doesn't matter.
Just it's just going to be the title.
Each one, Norburg B.
M and underneath of this integrated each to which we have the title section of the company naming media.
Around underneath our H2O.
We're not going to create a button.
So guten tag with a class of PTM.
And in the end, I'm going to include the icon tag and it's going to be now from Pontoise and this would
have the classic FS dot f eight dash.
Book and open book.
Oh, you go.
So as soon as I do this, well, that's actually less safe, there should be.
It is.
There's a button with our icon, and I still need to type in between them right after I contact the
anchor, text a anchor tag with an atrip of this is going to go to the idea of contact.
So as soon as we click on this button, this should bring us down to this contact section.
This is what I'm going to use, hash and contact.
This just means as soon as I click on a button, which I can see right now, somewhere down here.
There we go, and that's also type in here contact.
OK, now, so as soon as we click on a button, it should take us down to our head to our contact section.
Not after we finish with this and we're also outside of this text, Heather, so I had a text class,
but still remaining within.
I had a tag we've got now going to create another div with an idea of header image, and this will contain
our image.
Now, for this other image, we need to take control of it and access.
And I'm going to go now to Intercessors and Estaban, who also comment of had section.
Let's take an idea of the image, the image.
And now I'm going to use the background property.
With no background property, I'm going to use art, you are out.
So this is actually where we are going to go, actually, because this is a traditional we need this
ATRA.
We need this link right here.
It's going to carpet.
Go back into our success and pasted in, and as soon as we do this, we can see it right now.
We still need to do a bit of studying.
So we need to set our background.
You tell it need to tell, first of all, where the position is.
And for this, I'm going to use a..
First of all, this is the composition center background size cover contained cover and the background
repeat background repeat we're to set and no repeat.
So we don't want our image to repeat.
Now we can do it either this way.
And it was an image.
And the hype, so we're going to set this image to a height of 50 viewport heights, and I'm going to
do this no to have.
Let's go back to e-mail and let's delete or comment out.
What are we going to do this this time right here?
So we only have one image.
So there's an image from our Heather Tesche Image ID.
And what we did right here, I'm not going to comment out and to show you the short answer, this is
B actually center, then cover and then no repeat.
And this should do exactly the same thing as this did right here.
So I'm going to leave them in here.
But I was going to also leave them comment about.
Now they're in dire need to do a couple of things, for example, when we reach then a a larger format
than a phone.
Wanted to be displayed as flex zero one and 60, viewport with anger to see what what will happen when
we're going to leave our form format.
Now it's going to set us to a margin zero, though.
We already had everything set to zero.
And within our image, I'm also going to include the animation now, the animation we still need to
create this.
I'm just going to type in animation, come out and we're going to come back to this a bit later on.
But now let's continue on styling this spot right here.
So I'll text.
So first of all, I'm going to take a header tag and tell it that everything that is in this had a tag,
it's all of the text that will be created should have that shadow.
And this shadow would be one pixels, one pixel spent on pixels in the Ojibwe.
A tree be a.
Of a dog collar, so zero for the red, zero for the green, zero for the blue and zero point five for
the alpha game, you can always see that we have here a bit of a tech shadow.
Now, let's take care of each one more title, so let's take the H1 tag and a Serita position relative
has changed color to red
and I'm going to increase his font size to the font size to two point five RAM.
Now for H2O, it's actually just a simple styling, just going to increase the font size font size of
one point three RAM.
And I'm going to transform the text, though, to uppercase, so text transform uppercase.
Well capitalized on pokies.
OK, there we go.
Now, let's take care of the entire head of textiles, so I want this to be displayed as flex centered
in the page, I'm going to use this to target the header
text class.
And within our Creditex class, we're going to set this was thought to be displayed as flex.
Going to have a definition for the Flexner's zero one and 40, we will put it, when is going to change
from form format to a much larger format.
And now we can just because you said it, this Fleck's do not justify the content center, align the
items to the center.
So hit save can see the change already happening up here.
And I'm also going to do a text aligned to the center so even the text would be in the center.
Now let's do a bit of a padding.
So I want to have zero left and right, but I do want to have a bit of a padding top and bottom.
So one ram would be enough.
The last thing I want to change its height, so this should occupy a height or image already occupies
a height of 50 viewport height.
So let's look this also 250 viewport height.
And this should now have here 50 viewport heights.
And down here for the image, you also have 50 viewport heights.
And the last thing we need to do is to, well, include our animation, because, as I said, we have
here in our image animation and also for the text.
I also want to have an animation let's type in here animation and going to leave it open right now because
you need to create the keyframe.
So let's get keyframes and keyframes and we're going to tell this to go from zero percent.
And then we had zero percent of it up here, wanted to have a opacity of zero.
And when the animation reaches 100 percent, it should have a capacity of one.
So that's all the animation is going to do now.
I'd also need to give it a name.
So let's see anime.
And now we can include this animation also going to the shorthands.
So the animation name is anime.
You're going to use the key thing is going to take up two seconds and is going to have a curve of easing
out here.
So there's animation for our text and we need to do this for our image also.
So right here, we had an animation just going to copy this and it's both of them animated at the same
time now and have the same type of animation.
Also not want to change this color right here.
So let me target the.
The H2 within our tax, or actually I could set it here is the H2 should have a color.
Let's give it the evil color of six six six.
That's actually just a great color.
The last thing we need to stand out here is this button right here, so let's grab onto a button.
We actually could give it a give it a class of Betty.
And so now let's give it a bit of padding of one round, top and bottom to wrap them.
Right.
Now, I got to change the borders.
You have this black border.
I don't like them.
So let's change the border to one pixel and hash DDT and also solid,
decent work, solid that will.
We keep I'm going to take out now the outlines of the outlines are you see when you click on it, but
this signing right here and the understanding which will actually take more of an effect, for example,
the outlines to none, which is where you click on it, it has its outline, but not with when we would
do this in.
In a tabloid format and not in the best of all, that you would see the click but right here in a phone
format or in a tablet form.
We were just happen to one scene that we won't see it.
But I just because I already have it here, I we have grabbed onto the the class.
I want to set the standard.
So outline.
None.
OK, now let's give it a bit of a margin, I want to push the button down from the top, so I'm going
to use margin.
Jen.
Top off to read
the stories again, top.
And now I'm going to change the border, so give this.
Take up the sharp edges near the border radius.
All 50 pixels, OK?
Now, a couple of things, a chateau.
Of zero zero five pixels and one pixel spread and order to be a color with the opacity of free.
And the last thing I want to do is change his background, color to background, color, hash, and
and go with free, free, free, say, Dockray.
Now, because we have within here a any anchor tag.
We need to know Target, and I only want to target this, too, so if I would have you know, we will
have we will have other attacks within here, not within here, but within the Web page.
We will have done in our contact section we have our icons don't want to start them.
So going going specific style between our Betty and class.
The anchor tags and once again, we better in class the eye contact, so only those that are in the
better class and the bottom class.
So let's change the color, first of all, to a white collar.
Going to increase the font size, font size.
The one point to run and I'm going to give them a pen to write.
In order to push this black book, I come there to zero point five.
OK, and there we go.
There's a button, so that's pretty much it for a header.
We have all had a textile, then we have an image and also we have animation, not so soon, the next
one.