1
00:00:02,250 --> 00:00:04,640
With the landing page being finished,

2
00:00:04,640 --> 00:00:08,039
we can now continue with another page we need

3
00:00:08,039 --> 00:00:09,990
on our website.

4
00:00:09,990 --> 00:00:13,690
This page can be reached via two different links,

5
00:00:13,690 --> 00:00:15,210
either in our Nav bar,

6
00:00:15,210 --> 00:00:17,900
by clicking onto this destinations button

7
00:00:17,900 --> 00:00:22,350
or by clicking onto our discover places button right here.

8
00:00:22,350 --> 00:00:25,720
At the moment, no matter what we do, if we click it, though,

9
00:00:25,720 --> 00:00:29,170
we end up on this empty page.

10
00:00:29,170 --> 00:00:31,220
The reason for this is quite obvious.

11
00:00:31,220 --> 00:00:36,220
In our project at the moment we added the places.html file,

12
00:00:36,330 --> 00:00:39,030
but it's an empty file at the moment.

13
00:00:39,030 --> 00:00:41,030
We'll change this in a few seconds,

14
00:00:41,030 --> 00:00:44,823
but first let's see what this page should look like.

15
00:00:46,300 --> 00:00:48,570
And here I have the finished page.

16
00:00:48,570 --> 00:00:50,970
And if you closely inspect it,

17
00:00:50,970 --> 00:00:53,410
you see some things that we have already

18
00:00:53,410 --> 00:00:55,140
on our landing page.

19
00:00:55,140 --> 00:00:58,100
For example, up here, our navigation bar,

20
00:00:58,100 --> 00:01:01,050
here we have changed colors,

21
00:01:01,050 --> 00:01:03,250
but the general idea is the same

22
00:01:03,250 --> 00:01:05,500
that we saw on the landing page.

23
00:01:05,500 --> 00:01:09,290
We again have a main part with all these different images

24
00:01:09,290 --> 00:01:11,340
and the corresponding description here,

25
00:01:11,340 --> 00:01:13,380
just some dummy text of course,

26
00:01:13,380 --> 00:01:15,940
and a link named explore,

27
00:01:15,940 --> 00:01:18,730
which can be clicked and which redirects us to

28
00:01:18,730 --> 00:01:21,653
the Wikipedia page of the corresponding city.

29
00:01:22,610 --> 00:01:26,340
And at the bottom, we have our footer again.

30
00:01:26,340 --> 00:01:28,920
Now to speed things up a bit,

31
00:01:28,920 --> 00:01:33,520
we can immediately see what we can take from our existing

32
00:01:33,520 --> 00:01:37,430
index.HTML file, and that's the header and the footer.

33
00:01:37,430 --> 00:01:38,940
We have to change the colors a bit,

34
00:01:38,940 --> 00:01:40,350
but that's an easy thing.

35
00:01:40,350 --> 00:01:43,120
But to get started as fast as possible,

36
00:01:43,120 --> 00:01:44,800
we can do this right here.

37
00:01:44,800 --> 00:01:47,320
So this means we go back to our code

38
00:01:49,150 --> 00:01:51,750
into the index.HTML file,

39
00:01:51,750 --> 00:01:54,723
and now first take our entire head,

40
00:01:55,610 --> 00:01:59,670
including the doc type HTML part at the top.

41
00:01:59,670 --> 00:02:03,590
Copy this entire code command C or control C

42
00:02:03,590 --> 00:02:05,190
on Windows machines.

43
00:02:05,190 --> 00:02:09,070
And now go to the places.HTML file and paste the code

44
00:02:09,070 --> 00:02:12,770
command V or control V on Windows machines.

45
00:02:12,770 --> 00:02:14,840
So this is the hat.

46
00:02:14,840 --> 00:02:19,840
Then we go back to the index.HTML file, scroll down a bit,

47
00:02:20,130 --> 00:02:21,350
take the header,

48
00:02:21,350 --> 00:02:25,710
including the opening tag for the body element,

49
00:02:25,710 --> 00:02:28,883
copy this and paste it here.

50
00:02:30,020 --> 00:02:33,760
Now we add a main element.

51
00:02:33,760 --> 00:02:37,610
This will be filled with content by us in the next lectures,

52
00:02:37,610 --> 00:02:40,770
but we know that we have some main content in here.

53
00:02:40,770 --> 00:02:42,830
And below our main element,

54
00:02:42,830 --> 00:02:45,780
we go back to the index.HTML file,

55
00:02:45,780 --> 00:02:47,343
scroll down,

56
00:02:48,500 --> 00:02:50,720
up to here.

57
00:02:50,720 --> 00:02:55,720
So sort of bottom basically, and go up like this.

58
00:02:56,290 --> 00:03:00,550
So including the opening tag of the footer element,

59
00:03:00,550 --> 00:03:05,550
copy this and paste it below our main element.

60
00:03:05,890 --> 00:03:07,920
With this, we are almost done.

61
00:03:07,920 --> 00:03:11,350
Our relative links to the images are the same,

62
00:03:11,350 --> 00:03:12,770
so this is all right.

63
00:03:12,770 --> 00:03:14,490
What we have to change though,

64
00:03:14,490 --> 00:03:18,380
is up here in our head element,

65
00:03:18,380 --> 00:03:23,380
the reference to the styles.css file because our styles

66
00:03:24,570 --> 00:03:28,420
for the places page will either be part of the shared file,

67
00:03:28,420 --> 00:03:32,920
the header and the footer, or be part of a new CSS file,

68
00:03:32,920 --> 00:03:34,480
which we have to create, of course.

69
00:03:34,480 --> 00:03:38,420
So let's do this quickly clicking right here and call it

70
00:03:38,420 --> 00:03:41,113
places.css.

71
00:03:41,947 --> 00:03:43,983
Which is empty of course now,

72
00:03:44,890 --> 00:03:47,330
and then we can change the name of the file here

73
00:03:47,330 --> 00:03:50,927
from style CSS to places CSS.

74
00:03:54,430 --> 00:03:57,910
But besides that, I think this looks all right.

75
00:03:57,910 --> 00:04:00,000
So if you now go back to our page

76
00:04:00,000 --> 00:04:01,833
and quickly reload it here.

77
00:04:03,120 --> 00:04:06,060
You see, we have some styling issues,

78
00:04:06,060 --> 00:04:07,750
but that's of course due to the fact

79
00:04:07,750 --> 00:04:11,470
that we don't have any content in our main element now.

80
00:04:11,470 --> 00:04:15,050
But if we click onto destinations, we stay here.

81
00:04:15,050 --> 00:04:16,959
If we click onto travel goals,

82
00:04:16,959 --> 00:04:19,220
we are redirected to our landing page,

83
00:04:19,220 --> 00:04:22,170
and now also this link here works.

84
00:04:22,170 --> 00:04:26,250
So with this, we are ready to get started with our project.

85
00:04:26,250 --> 00:04:29,060
As I showed you, this is our goal.

86
00:04:29,060 --> 00:04:33,560
So we want to create our main part of the website now.

87
00:04:33,560 --> 00:04:37,120
And the look you can see right here is a pretty common look

88
00:04:37,120 --> 00:04:39,210
for modern websites by the way,

89
00:04:39,210 --> 00:04:42,110
it's called Card Look because well,

90
00:04:42,110 --> 00:04:47,000
each city here with the image looks like a separate card

91
00:04:47,000 --> 00:04:49,270
displaying the individual content.

92
00:04:49,270 --> 00:04:52,180
Therefore that's also something you will typically

93
00:04:52,180 --> 00:04:54,270
create in your own projects.

94
00:04:54,270 --> 00:04:58,120
The great news is to create this card look here on the page,

95
00:04:58,120 --> 00:05:01,160
we will use another CSS technology.

96
00:05:01,160 --> 00:05:03,610
More about this in the next minutes.

97
00:05:03,610 --> 00:05:05,680
Let's now continue in the next lecture

98
00:05:05,680 --> 00:05:09,733
by creating the HTML code of our page here.