1
00:00:02,440 --> 00:00:06,063
So, let's continue with our H1 element here.

2
00:00:07,270 --> 00:00:09,630
Very important in our shared.css file,

3
00:00:09,630 --> 00:00:11,990
we defined a style for H1 already,

4
00:00:11,990 --> 00:00:13,470
so the font-family,

5
00:00:13,470 --> 00:00:15,930
but here I want to specifically some things

6
00:00:15,930 --> 00:00:18,870
for the H1 element on our landing page,

7
00:00:18,870 --> 00:00:21,190
therefore let's add this selector

8
00:00:21,190 --> 00:00:25,030
and first, I want to add a fixed font size to it,

9
00:00:25,030 --> 00:00:27,570
because at the moment we have the default font size

10
00:00:27,570 --> 00:00:30,813
for H1 elements and I want to have a fixed one,

11
00:00:30,813 --> 00:00:35,393
so let's say font-size of maybe 30 pixels.

12
00:00:36,330 --> 00:00:38,980
And, besides that, I want to add a color to it,

13
00:00:38,980 --> 00:00:42,180
because at the moment it's not perfectly readable.

14
00:00:42,180 --> 00:00:45,613
So let's add a color with an rgb code of 31,

15
00:00:49,096 --> 00:00:52,493
25, and 25.

16
00:00:54,380 --> 00:00:55,654
Yep!

17
00:00:55,654 --> 00:00:57,854
See, it's a bit darker now so we can see it.

18
00:00:58,940 --> 00:01:03,910
And, besides that, I also want to work on our span,

19
00:01:03,910 --> 00:01:06,340
remember, it's the element we introduced here

20
00:01:06,340 --> 00:01:08,060
for our day and date

21
00:01:08,060 --> 00:01:10,100
and I want to give this a different color

22
00:01:10,100 --> 00:01:11,830
to highlight it a bit.

23
00:01:11,830 --> 00:01:15,482
Therefore, let's add the span element here

24
00:01:15,482 --> 00:01:20,387
and this should have a color of, again, rgb 66, 2, and 2.

25
00:01:28,950 --> 00:01:30,330
Now it's a different color.

26
00:01:30,330 --> 00:01:33,730
You can hardly see it, but it shouldn't be too aggressive,

27
00:01:33,730 --> 00:01:37,840
so to say, but this is darker and that's a bit lighter.

28
00:01:37,840 --> 00:01:39,800
I think that's a nice look here.

29
00:01:39,800 --> 00:01:41,450
Of course, you can add different colors,

30
00:01:41,450 --> 00:01:44,072
but I think this is totally sufficient here.

31
00:01:44,072 --> 00:01:47,330
What is not working anymore is also the color

32
00:01:47,330 --> 00:01:49,010
for our today's challenge because,

33
00:01:49,010 --> 00:01:51,350
well, this is basically unreadable.

34
00:01:51,350 --> 00:01:56,083
So, let's change the rgb code down here to 75, 59, and 59.

35
00:02:03,030 --> 00:02:04,788
Yeah, looks a lot better,

36
00:02:04,788 --> 00:02:08,603
and with that we are almost done with this page.

37
00:02:10,949 --> 00:02:15,240
To be a bit better inline with our very subtle highlighting

38
00:02:15,240 --> 00:02:16,100
of the date up here,

39
00:02:16,100 --> 00:02:17,840
I also would like to apply this to

40
00:02:17,840 --> 00:02:20,460
our full week link down here.

41
00:02:20,460 --> 00:02:24,671
For this, we'll add an anchor tag here

42
00:02:24,671 --> 00:02:27,230
and very important we have the anchor tag

43
00:02:27,230 --> 00:02:30,040
already here in our shared.css file.

44
00:02:30,040 --> 00:02:32,396
So I'm overwriting this property now

45
00:02:32,396 --> 00:02:36,200
for our specific anchor tags on the daily challenge page

46
00:02:36,200 --> 00:02:41,053
and this should have a color of rgb 73, 29, and 50.

47
00:02:46,030 --> 00:02:46,863
Yeah.

48
00:02:46,863 --> 00:02:48,735
I think this looks better.

49
00:02:48,735 --> 00:02:52,730
With this, our daily challenge page looks all right,

50
00:02:52,730 --> 00:02:54,963
so we're done with the styling right here.

51
00:02:56,030 --> 00:02:59,340
One thing I want to quickly check is if we have anything

52
00:02:59,340 --> 00:03:02,123
to clean up in our shared.css file.

53
00:03:03,340 --> 00:03:07,210
Well, maybe we could, yeah,

54
00:03:07,210 --> 00:03:08,060
we could do this.

55
00:03:08,060 --> 00:03:11,360
We could add a fixed font-size here for our paragraphs,

56
00:03:11,360 --> 00:03:12,630
in general.

57
00:03:12,630 --> 00:03:17,350
Maybe of, 24 pixels,

58
00:03:17,350 --> 00:03:18,580
not a must, as I said,

59
00:03:18,580 --> 00:03:20,560
otherwise you have the default font size,

60
00:03:20,560 --> 00:03:23,610
but this now increases our size of the paragraph down here

61
00:03:23,610 --> 00:03:24,870
for example.

62
00:03:24,870 --> 00:03:26,960
It makes it better, readable in the end,

63
00:03:26,960 --> 00:03:28,530
so I kind of like this.

64
00:03:28,530 --> 00:03:31,373
But besides that, I think this looks all right.

65
00:03:32,530 --> 00:03:35,070
So, this is what our website looks like now.

66
00:03:35,070 --> 00:03:38,860
We have created two good looking pages,

67
00:03:38,860 --> 00:03:42,194
so landing page and the pages for all of our challenges.

68
00:03:42,194 --> 00:03:45,170
By the way, as I said, if you zoom out,

69
00:03:45,170 --> 00:03:48,490
this is what the page looks like on a 100%

70
00:03:48,490 --> 00:03:50,880
zoom level here, but I stick to this one here,

71
00:03:50,880 --> 00:03:52,460
to make it better readable.

72
00:03:52,460 --> 00:03:56,720
Well, and with that, you've created your first website!

73
00:03:56,720 --> 00:03:59,790
That's awesome and, to make sure you don't forget

74
00:03:59,790 --> 00:04:02,510
anything you learned in this module, I'll summarize

75
00:04:02,510 --> 00:04:05,163
the core concepts in the next lecture.