1
00:00:00,000 --> 00:00:01,130
All right, so we're moving on.

2
00:00:01,125 --> 00:00:02,735
And the next section
is going to be

3
00:00:02,730 --> 00:00:05,460
the unique traveled
design section,

4
00:00:05,460 --> 00:00:07,800
which will look a
little bit tricky,

5
00:00:07,800 --> 00:00:09,660
but it's not that trickier.

6
00:00:09,660 --> 00:00:11,880
We basically have
one very big section

7
00:00:11,880 --> 00:00:13,460
with multiple columns.

8
00:00:13,455 --> 00:00:16,445
One column will hold the header.

9
00:00:16,440 --> 00:00:18,510
Unique general design
and we're going to have

10
00:00:18,510 --> 00:00:20,790
the divider element will

11
00:00:20,790 --> 00:00:22,440
have some texts and
then we'll have

12
00:00:22,440 --> 00:00:25,350
an inner section element
with three columns,

13
00:00:25,349 --> 00:00:27,389
with three different headings,

14
00:00:27,390 --> 00:00:29,130
diagrams, and some texts.

15
00:00:29,130 --> 00:00:34,090
So let's go ahead and edit
the homepage one more time.

16
00:00:34,090 --> 00:00:39,530
And I'm going to scroll
all the way down here.

17
00:00:39,529 --> 00:00:41,329
And the first node
is simply do is just

18
00:00:41,330 --> 00:00:43,310
to drag the header in here.

19
00:00:43,310 --> 00:00:46,910
And I will add the
edit that says all

20
00:00:46,910 --> 00:00:54,670
unique, unique travel designer.

21
00:00:54,665 --> 00:00:58,465
Of course, I'm going to
align this one to decenter.

22
00:00:58,460 --> 00:01:00,920
Since we now have
content in our section,

23
00:01:00,920 --> 00:01:03,170
I'm going to go ahead
and edit this section.

24
00:01:03,170 --> 00:01:08,580
We're going to set the
width to 1240 pixels.

25
00:01:09,190 --> 00:01:12,500
Then style, we're going to add

26
00:01:12,500 --> 00:01:19,550
a background color
of FATF eight.

27
00:01:19,550 --> 00:01:24,410
So it's this sort of
grayish white color.

28
00:01:24,410 --> 00:01:27,830
I really don't know the exact
color, what it's called.

29
00:01:27,830 --> 00:01:30,610
But the point here is that
we're trying to differentiate

30
00:01:30,605 --> 00:01:33,265
the section just above it

31
00:01:33,260 --> 00:01:35,600
from the new section
we're creating.

32
00:01:35,600 --> 00:01:36,880
So one of the best
ways to differentiate,

33
00:01:36,875 --> 00:01:38,465
differentiate sections is by

34
00:01:38,465 --> 00:01:41,065
adding different
colored backgrounds.

35
00:01:41,060 --> 00:01:42,680
So I think truffle design,

36
00:01:42,680 --> 00:01:44,810
I'm gonna go back
to advance as well.

37
00:01:44,810 --> 00:01:46,370
Add some padding.

38
00:01:46,370 --> 00:01:47,840
So 50 pixels top,

39
00:01:47,840 --> 00:01:50,990
50 pixels bottom as well.

40
00:01:50,990 --> 00:01:52,580
And there it is.

41
00:01:52,580 --> 00:01:55,520
The next element will
be the divider elements

42
00:01:55,520 --> 00:01:58,780
which are drop just below
our unique travel design.

43
00:01:58,775 --> 00:02:01,015
Look into Atlanta
center and then

44
00:02:01,010 --> 00:02:05,350
the width here would be
about, let's go with 50%.

45
00:02:05,345 --> 00:02:09,085
I'll maybe that's a bit
too much. How about 40%?

46
00:02:09,080 --> 00:02:11,060
All right, so for the percent,

47
00:02:11,060 --> 00:02:14,230
next is going to be
the texts in here,

48
00:02:14,225 --> 00:02:16,855
locks where it's not about
the stars actually stole

49
00:02:16,850 --> 00:02:19,790
this texts from some website.

50
00:02:19,790 --> 00:02:21,740
I don't remember,
but I didn't come

51
00:02:21,740 --> 00:02:23,720
up with this with this text.

52
00:02:23,720 --> 00:02:25,760
Okay. I'm not too,
I'm not that smart,

53
00:02:25,760 --> 00:02:28,520
so I'm going to drop the
text editor all just beneath

54
00:02:28,520 --> 00:02:32,360
the divider and paste
that text right there.

55
00:02:32,360 --> 00:02:35,030
And of course we are going
to align it to the center

56
00:02:35,030 --> 00:02:37,580
are then last but not least,

57
00:02:37,580 --> 00:02:40,340
we do have our three
columns section in here.

58
00:02:40,340 --> 00:02:43,940
So we're going to use
the ina, section.

59
00:02:43,940 --> 00:02:45,950
We're going to walk smart again.

60
00:02:45,950 --> 00:02:48,980
Basically, each column has
the exact same design.

61
00:02:48,980 --> 00:02:50,130
You have a diagram,

62
00:02:50,134 --> 00:02:52,224
you have a header, and
then you have some texts.

63
00:02:52,220 --> 00:02:54,530
So we'll simply do is,

64
00:02:54,530 --> 00:02:59,750
we'll design the very first
column Jabbar image in here.

65
00:02:59,750 --> 00:03:01,220
And it's the image with

66
00:03:01,220 --> 00:03:05,650
the world plane can
offenders one right here,

67
00:03:05,645 --> 00:03:09,455
insert that media,
make it a full size.

68
00:03:09,454 --> 00:03:12,654
Then we're going
to add a header.

69
00:03:12,650 --> 00:03:16,210
Just move the image. We're
gonna make this one an h3.

70
00:03:16,205 --> 00:03:18,835
I do have some text in
here and it's called,

71
00:03:18,830 --> 00:03:21,070
this one has got to be featured.

72
00:03:21,065 --> 00:03:23,425
Destinations, that will be

73
00:03:23,420 --> 00:03:26,230
the headline future
destinations.

74
00:03:26,225 --> 00:03:27,835
Let's make a change. Okay, I'm

75
00:03:27,830 --> 00:03:29,000
going to align to the center,

76
00:03:29,000 --> 00:03:30,350
but then for the style,

77
00:03:30,350 --> 00:03:32,570
we're going to change the
typography from uppercase

78
00:03:32,570 --> 00:03:36,110
to just normal light.

79
00:03:36,110 --> 00:03:37,250
And then last but not least,

80
00:03:37,250 --> 00:03:39,640
we'll have the text edit tool.

81
00:03:39,635 --> 00:03:41,215
Let's drag that in there.

82
00:03:41,210 --> 00:03:44,350
So let me just grab
this text right here.

83
00:03:44,345 --> 00:03:47,075
Similar them Ipsum dummy text.

84
00:03:47,075 --> 00:03:49,535
I'm going to go ahead
and paste that.

85
00:03:49,535 --> 00:03:50,995
I think it's actually
the exact same texts,

86
00:03:50,990 --> 00:03:52,150
different, silly me.

87
00:03:52,145 --> 00:03:53,705
Okay. Well, his style,

88
00:03:53,705 --> 00:03:55,955
This aligned to the center.

89
00:03:55,955 --> 00:03:58,435
There it is. So what was

90
00:03:58,430 --> 00:04:00,940
simply needs to do now
is to come in here,

91
00:04:00,935 --> 00:04:03,145
right-click on the
Edit Column button

92
00:04:03,140 --> 00:04:04,780
and simply duplicates,

93
00:04:04,775 --> 00:04:07,595
and then duplicate
one more time.

94
00:04:07,595 --> 00:04:12,325
And then we'll come in here
and delete the fourth column.

95
00:04:12,320 --> 00:04:13,490
It is.

96
00:04:13,490 --> 00:04:15,310
So this is going to
come in here right now,

97
00:04:15,305 --> 00:04:19,315
change this image to
the mall with the map.

98
00:04:19,310 --> 00:04:24,980
And I do have the texts in
here that says travel guides.

99
00:04:24,980 --> 00:04:27,980
So in addition to being able

100
00:04:27,980 --> 00:04:31,700
to feature a certain
destinations to their customers,

101
00:04:31,700 --> 00:04:36,110
passport travel also offers
are travelled guides as well.

102
00:04:36,110 --> 00:04:38,030
And then the last one in here,

103
00:04:38,030 --> 00:04:39,410
I'm going to switch the image

104
00:04:39,410 --> 00:04:42,500
to the one with
the plane tickets.

105
00:04:42,500 --> 00:04:47,800
I do have the header here
that says affordable.

106
00:04:47,795 --> 00:04:49,885
Further bool.

107
00:04:49,880 --> 00:04:53,670
To get it is.

108
00:04:53,665 --> 00:04:54,715
There you go.

109
00:04:54,710 --> 00:04:58,460
So I'm going to go ahead
now and simply update this.

110
00:04:58,460 --> 00:05:03,300
And let's view the page.

111
00:05:03,310 --> 00:05:07,550
And voila ionic travel design.

112
00:05:07,550 --> 00:05:08,860
There you go.

113
00:05:08,855 --> 00:05:13,235
So hopefully you enjoyed
this particular lesson,

114
00:05:13,235 --> 00:05:14,545
Jimmy, in the next one,

115
00:05:14,540 --> 00:05:16,210
where we'll continue
to build out

116
00:05:16,205 --> 00:05:18,995
our homepage. I'll see you then.