So the next thing that we want to do is add in the text at the top so needs to look like this.
And fortunately this is relatively simple compared to making this image grid.
So the first thing we need to do is get the font.
This font is called Railway.
It's one of the Google fonts that we've seen so far.
So I'm going to go to Google fonts and look for real.
Here we go.
It's the top one here use and then I'm going to go ahead and grab normal.
And also let's do 800.
And then we'll include this
into our HMO.
So we now have access to that font and then all we need to do is add in the text.
First of all so up top I'm going to make it a paragraph and I'm just going to put my name which is what
I had here separated by a slash.
We can put you know put whatever you want here.
This could be Texas could be photography blog or walk into my blog but just some text I'm keeping it
simple and then save that and then we'll go over here.
Select paragraph and we'll just say font family real way and let's just see what we end up with.
OK.
So not the most exciting.
Not quite there yet.
It's too small and it's not spaced correctly.
We need it to move over 1.6 percent as well.
Just like this image so to move it in line we can start there.
All we need to do is go over to a paragraph and add in our margin left and that's just one point six
six percent.
We are fresh OK now it spaced correctly.
So one more thing that we want to do is definitely increase the font size.
So I know that the font size that I used here is 23 pixels and not only that but I used font weight
of 800 which is why I had to select that.
So in here will say font size 23 pixels.
I'll show you what that looks like.
So it's bigger but it's still not as bold.
So then we go back and add in font weight.
Eight hundred and save.
Now we were fresh in the fall.
It's looking close but we're still missing one thing which is the fact that I didn't use upper case
text so I can do that using text transform or I could alter the HDMI.
So I'm just going to do that here text transform uppercase.
Now we get all uppercase.
There we go.
So you can see just with a quick example why you would potentially use text transform because it's much
faster and easier just to add one to assess property rather than having to retype every single letter
yourself especially if you have a longer string of characters.
OK so now the last missing piece is this little line here.
I know it's pretty faint but there's a line right here and it goes in line with this first image so
it doesn't go all the way across.
It goes 30 percent of the way across.
So the way that we're going to do that is it's actually just a border on the bottom of it's inspected
on the bottom of this paragraph.
So you can see that the paragraph itself goes 30 percent the way across it ends here and then it just
border bottom that we turned on.
So let's go back to our C SS and under our paragraph.
Let's start by giving it border bottom and let's make it obvious to start so let's do like three pixels
solid red.
So we'll save and refresh and just see that the border goes all the way across.
And I guess it doesn't look too bad.
We definitely want to fix this here.
But rather than do that I'm going to change the width so that it only goes 30 percent of the way across
.
So we'll start with that.
So that's just a matter of setting the width to the paragraph 30 percent.
OK so now it ends there then the next thing is making the color match so the color that I use is very
very faint.
Just going to change this here.
It's a hexadecimal color.
EF 1 EF 1 EF 1 looks like that.
You can see it's very faint and I think I had it at two pixels rather than three.
So very minor change.
Change that to be two pixels and the very last thing is the spacing.
So here you can see we have some space between the text and the border.
And here we don't so remember space between an element and its border is padding.
So if we inspect you can verify that I can see that green padding there.
So we just need to get padding going here as well.
So in RC SS We're just going to do padding bottom
20 pixels and we'll go back refresh.
And now we have a little bit of space there.
Now of course feel free to play with this however you like if you preferred that line going all the
way across or no line at all.
You want to make the text bigger if you want it to make it get rid of the padding or add more padding
if you want more images going across the screen rather than just three.
There's all sorts of things you can do.
All right so I hope you enjoyed making something that looks somewhat OK.