1
00:00:02,280 --> 00:00:04,130
In this and the next lectures,

2
00:00:04,130 --> 00:00:08,173
we will turn this page into that page.

3
00:00:09,140 --> 00:00:12,010
And the great thing is that before we do that together,

4
00:00:12,010 --> 00:00:14,923
now it's your chance to try this on your own.

5
00:00:15,940 --> 00:00:18,760
Almost all changes applied to this page

6
00:00:18,760 --> 00:00:21,820
are concepts we learned in the last modules.

7
00:00:21,820 --> 00:00:24,470
There are two exceptions still;

8
00:00:24,470 --> 00:00:27,900
highlighting the date so the week day and the date year,

9
00:00:27,900 --> 00:00:30,060
is something which can be achieved with an

10
00:00:30,060 --> 00:00:32,140
element we didn't use so far.

11
00:00:32,140 --> 00:00:37,023
A so-called non semantic inland element a span element.

12
00:00:37,990 --> 00:00:41,100
So this is one new concept here, give it a try,

13
00:00:41,100 --> 00:00:44,580
and placing the image on the border,

14
00:00:44,580 --> 00:00:48,503
where the border cuts this image into two halves so to say,

15
00:00:49,570 --> 00:00:54,360
is something that can be achieved with negative margins.

16
00:00:54,360 --> 00:00:56,770
Two things here, negative margins,

17
00:00:56,770 --> 00:00:58,570
we never used it, so try it,

18
00:00:58,570 --> 00:01:02,960
especially the top margin is the important one here.

19
00:01:02,960 --> 00:01:07,070
And if you ask yourselves, "Why can I use margins,

20
00:01:07,070 --> 00:01:11,090
vertical margins so the top margin here on an image element,

21
00:01:11,090 --> 00:01:12,510
which is an inline element?"

22
00:01:12,510 --> 00:01:15,690
Well, then this is also something you can try here.

23
00:01:15,690 --> 00:01:17,930
I'll, of course, explain to you why this might

24
00:01:17,930 --> 00:01:20,193
be working here in the next lectures.

25
00:01:21,410 --> 00:01:23,830
So with that you can give this a try. Also

26
00:01:23,830 --> 00:01:27,180
don't forget about the HTML part of this project

27
00:01:27,180 --> 00:01:30,410
when it comes to the HTML layout. At the moment

28
00:01:30,410 --> 00:01:33,050
you only have the body which contains an image,

29
00:01:33,050 --> 00:01:34,870
h1 element, and two paragraphs.

30
00:01:34,870 --> 00:01:37,650
So all to think about these layout elements we talked about,

31
00:01:37,650 --> 00:01:41,140
and then in the next lectures we'll solve this together.

32
00:01:41,140 --> 00:01:42,483
Good luck and have fun!

