1
00:00:00,600 --> 00:00:06,790
So the next thing that we want to do is add in the text at the top so needs to look like this.

2
00:00:06,960 --> 00:00:11,020
And fortunately this is relatively simple compared to making this image grid.

3
00:00:11,370 --> 00:00:13,550
So the first thing we need to do is get the font.

4
00:00:13,770 --> 00:00:15,360
This font is called Railway.

5
00:00:15,360 --> 00:00:18,130
It's one of the Google fonts that we've seen so far.

6
00:00:18,390 --> 00:00:22,950
So I'm going to go to Google fonts and look for real.

7
00:00:22,980 --> 00:00:23,590
Here we go.

8
00:00:23,620 --> 00:00:32,430
It's the top one here use and then I'm going to go ahead and grab normal.

9
00:00:32,520 --> 00:00:37,090
And also let's do 800.

10
00:00:38,220 --> 00:00:40,410
And then we'll include this

11
00:00:44,370 --> 00:00:46,170
into our HMO.

12
00:00:46,560 --> 00:00:52,710
So we now have access to that font and then all we need to do is add in the text.

13
00:00:52,710 --> 00:00:59,760
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

14
00:00:59,760 --> 00:01:01,820
I had here separated by a slash.

15
00:01:02,160 --> 00:01:04,390
We can put you know put whatever you want here.

16
00:01:04,410 --> 00:01:10,650
This could be Texas could be photography blog or walk into my blog but just some text I'm keeping it

17
00:01:10,650 --> 00:01:17,100
simple and then save that and then we'll go over here.

18
00:01:17,410 --> 00:01:26,760
Select paragraph and we'll just say font family real way and let's just see what we end up with.

19
00:01:27,470 --> 00:01:27,950
OK.

20
00:01:28,260 --> 00:01:30,490
So not the most exciting.

21
00:01:30,630 --> 00:01:31,960
Not quite there yet.

22
00:01:31,980 --> 00:01:36,160
It's too small and it's not spaced correctly.

23
00:01:36,210 --> 00:01:38,900
We need it to move over 1.6 percent as well.

24
00:01:39,000 --> 00:01:43,030
Just like this image so to move it in line we can start there.

25
00:01:43,260 --> 00:01:52,620
All we need to do is go over to a paragraph and add in our margin left and that's just one point six

26
00:01:52,650 --> 00:01:55,190
six percent.

27
00:01:55,520 --> 00:01:59,750
We are fresh OK now it spaced correctly.

28
00:01:59,880 --> 00:02:03,340
So one more thing that we want to do is definitely increase the font size.

29
00:02:03,780 --> 00:02:10,020
So I know that the font size that I used here is 23 pixels and not only that but I used font weight

30
00:02:10,020 --> 00:02:12,980
of 800 which is why I had to select that.

31
00:02:12,990 --> 00:02:17,240
So in here will say font size 23 pixels.

32
00:02:17,460 --> 00:02:20,030
I'll show you what that looks like.

33
00:02:20,190 --> 00:02:23,500
So it's bigger but it's still not as bold.

34
00:02:23,520 --> 00:02:27,660
So then we go back and add in font weight.

35
00:02:28,080 --> 00:02:30,750
Eight hundred and save.

36
00:02:31,260 --> 00:02:33,610
Now we were fresh in the fall.

37
00:02:33,610 --> 00:02:39,810
It's looking close but we're still missing one thing which is the fact that I didn't use upper case

38
00:02:39,810 --> 00:02:47,800
text so I can do that using text transform or I could alter the HDMI.

39
00:02:48,230 --> 00:02:52,470
So I'm just going to do that here text transform uppercase.

40
00:02:52,590 --> 00:02:54,880
Now we get all uppercase.

41
00:02:54,970 --> 00:02:55,960
There we go.

42
00:02:56,370 --> 00:03:02,790
So you can see just with a quick example why you would potentially use text transform because it's much

43
00:03:02,790 --> 00:03:08,400
faster and easier just to add one to assess property rather than having to retype every single letter

44
00:03:08,400 --> 00:03:12,380
yourself especially if you have a longer string of characters.

45
00:03:12,990 --> 00:03:16,690
OK so now the last missing piece is this little line here.

46
00:03:16,820 --> 00:03:22,980
I know it's pretty faint but there's a line right here and it goes in line with this first image so

47
00:03:22,980 --> 00:03:24,940
it doesn't go all the way across.

48
00:03:25,230 --> 00:03:28,160
It goes 30 percent of the way across.

49
00:03:28,170 --> 00:03:34,390
So the way that we're going to do that is it's actually just a border on the bottom of it's inspected

50
00:03:34,770 --> 00:03:36,560
on the bottom of this paragraph.

51
00:03:36,960 --> 00:03:43,500
So you can see that the paragraph itself goes 30 percent the way across it ends here and then it just

52
00:03:43,500 --> 00:03:46,000
border bottom that we turned on.

53
00:03:46,500 --> 00:03:51,360
So let's go back to our C SS and under our paragraph.

54
00:03:51,480 --> 00:03:58,380
Let's start by giving it border bottom and let's make it obvious to start so let's do like three pixels

55
00:03:58,830 --> 00:03:59,830
solid red.

56
00:03:59,880 --> 00:04:06,370
So we'll save and refresh and just see that the border goes all the way across.

57
00:04:06,490 --> 00:04:08,420
And I guess it doesn't look too bad.

58
00:04:08,430 --> 00:04:10,460
We definitely want to fix this here.

59
00:04:10,800 --> 00:04:16,260
But rather than do that I'm going to change the width so that it only goes 30 percent of the way across

60
00:04:16,260 --> 00:04:16,790
.

61
00:04:16,830 --> 00:04:18,170
So we'll start with that.

62
00:04:18,390 --> 00:04:24,220
So that's just a matter of setting the width to the paragraph 30 percent.

63
00:04:25,250 --> 00:04:32,730
OK so now it ends there then the next thing is making the color match so the color that I use is very

64
00:04:32,730 --> 00:04:33,810
very faint.

65
00:04:34,080 --> 00:04:36,090
Just going to change this here.

66
00:04:36,150 --> 00:04:38,950
It's a hexadecimal color.

67
00:04:39,000 --> 00:04:44,780
EF 1 EF 1 EF 1 looks like that.

68
00:04:45,630 --> 00:04:51,140
You can see it's very faint and I think I had it at two pixels rather than three.

69
00:04:51,450 --> 00:04:53,030
So very minor change.

70
00:04:53,070 --> 00:04:59,520
Change that to be two pixels and the very last thing is the spacing.

71
00:04:59,520 --> 00:05:04,540
So here you can see we have some space between the text and the border.

72
00:05:04,590 --> 00:05:12,200
And here we don't so remember space between an element and its border is padding.

73
00:05:12,450 --> 00:05:18,720
So if we inspect you can verify that I can see that green padding there.

74
00:05:19,320 --> 00:05:22,190
So we just need to get padding going here as well.

75
00:05:22,200 --> 00:05:25,470
So in RC SS We're just going to do padding bottom

76
00:05:28,370 --> 00:05:33,500
20 pixels and we'll go back refresh.

77
00:05:33,570 --> 00:05:35,740
And now we have a little bit of space there.

78
00:05:35,760 --> 00:05:40,350
Now of course feel free to play with this however you like if you preferred that line going all the

79
00:05:40,350 --> 00:05:42,360
way across or no line at all.

80
00:05:42,400 --> 00:05:47,610
You want to make the text bigger if you want it to make it get rid of the padding or add more padding

81
00:05:47,910 --> 00:05:51,350
if you want more images going across the screen rather than just three.

82
00:05:51,360 --> 00:05:53,430
There's all sorts of things you can do.

83
00:05:53,430 --> 00:05:56,770
All right so I hope you enjoyed making something that looks somewhat OK.