1
00:00:00,000 --> 00:00:01,200
Welcome back.

2
00:00:01,200 --> 00:00:03,800
Let's continue with
building the homepage.

3
00:00:03,795 --> 00:00:05,825
And as you can see,
I've switched back to

4
00:00:05,820 --> 00:00:08,730
the traditional
background image.

5
00:00:08,730 --> 00:00:10,020
But like I said, if you want to

6
00:00:10,020 --> 00:00:11,550
use the video, that's fine.

7
00:00:11,550 --> 00:00:13,800
The next section we're
going to build out will be

8
00:00:13,800 --> 00:00:16,080
the two columns
section that will have

9
00:00:16,080 --> 00:00:18,990
some texts on the left,
an image on the right.

10
00:00:18,990 --> 00:00:22,530
And then the third section in
here is very, very similar.

11
00:00:22,530 --> 00:00:24,450
It's just the columns reversed.

12
00:00:24,445 --> 00:00:27,325
In the third section, we
have the image on the left

13
00:00:27,320 --> 00:00:30,080
and then the text on the right.

14
00:00:30,080 --> 00:00:32,750
So how exactly are we
going to achieve this?

15
00:00:32,750 --> 00:00:34,760
This is very, very,
very straightforward.

16
00:00:34,760 --> 00:00:36,650
We're gonna go to a homepage.

17
00:00:36,650 --> 00:00:38,000
Let's edit.

18
00:00:38,000 --> 00:00:39,560
And you can see right now it's

19
00:00:39,560 --> 00:00:41,420
basically two columns, 5050.

20
00:00:41,420 --> 00:00:44,200
So very easily we're
gonna come down here,

21
00:00:44,195 --> 00:00:47,455
create a new section
with two columns, 5050.

22
00:00:47,450 --> 00:00:48,800
I'm going to edit the section,

23
00:00:48,800 --> 00:00:50,600
makes sure it goes full width.

24
00:00:50,600 --> 00:00:53,780
And then the columns GAAP
are going to say no gap.

25
00:00:53,780 --> 00:00:57,520
All right, so the
first section in here,

26
00:00:57,515 --> 00:00:59,625
it's going to have some texts.

27
00:00:59,629 --> 00:01:02,179
Let me draw the text
editor in here.

28
00:01:02,180 --> 00:01:05,360
Lambda squiggly copy the
Lorem Ipsum dummy text

29
00:01:05,360 --> 00:01:06,830
I have over here.

30
00:01:06,830 --> 00:01:09,560
Let me just go ahead
and paste that.

31
00:01:09,560 --> 00:01:12,080
And then we also
have the header.

32
00:01:12,080 --> 00:01:15,370
Let me drop that by
dare. It's an h2.

33
00:01:15,365 --> 00:01:16,105
Here.

34
00:01:16,100 --> 00:01:17,840
I didn't actually create

35
00:01:17,840 --> 00:01:21,830
any actual header,
any real title.

36
00:01:21,830 --> 00:01:25,240
So let me just type in.

37
00:01:25,235 --> 00:01:30,915
We'd love to travel.

38
00:01:30,910 --> 00:01:34,880
Just something. That's that.

39
00:01:34,880 --> 00:01:36,940
And then for the
second column in here,

40
00:01:36,935 --> 00:01:38,905
we're going to add the image,

41
00:01:38,900 --> 00:01:42,460
and I'm going to add this
image I took in Istanbul.

42
00:01:42,455 --> 00:01:44,455
This were a group of
our college students.

43
00:01:44,450 --> 00:01:45,710
I was walking around
and I said, Hey,

44
00:01:45,710 --> 00:01:47,480
would you like me to take
a picture of this idea?

45
00:01:47,480 --> 00:01:48,850
So I took the picture.

46
00:01:48,845 --> 00:01:51,785
So make sure you set
this image to fool.

47
00:01:51,785 --> 00:01:53,755
Because again, we want
the image to occupy

48
00:01:53,750 --> 00:01:57,160
the full width and
height of its column.

49
00:01:57,155 --> 00:02:01,105
But then we also need to
add the Learn More button.

50
00:02:01,100 --> 00:02:02,750
So what I'm gonna do of course,

51
00:02:02,750 --> 00:02:04,640
is to go back in here,

52
00:02:04,640 --> 00:02:07,120
drag button, drop it in here.

53
00:02:07,115 --> 00:02:14,255
And then I'm going to
say learn, learn more.

54
00:02:14,255 --> 00:02:17,845
Then this link can go to
maybe the about page.

55
00:02:17,840 --> 00:02:21,840
So I'll just simply say
forward slash about.

56
00:02:22,030 --> 00:02:24,200
And there it is.

57
00:02:24,200 --> 00:02:25,590
I'm going to align
to the center.

58
00:02:25,594 --> 00:02:26,604
Let's make some changes.

59
00:02:26,600 --> 00:02:28,630
Style typography.

60
00:02:28,625 --> 00:02:32,515
I'm going to say
transform to uppercase.

61
00:02:32,510 --> 00:02:37,060
The declaration on non
within what an integration.

62
00:02:37,055 --> 00:02:39,655
And then the text color.

63
00:02:39,650 --> 00:02:42,490
I'm going to switch
that to black.

64
00:02:42,485 --> 00:02:45,085
Now for the actual button
itself are gonna go with

65
00:02:45,080 --> 00:02:48,380
a background color of white.

66
00:02:48,380 --> 00:02:52,220
Background typing here is
going to be color white.

67
00:02:52,220 --> 00:02:54,260
But then we will set a border of

68
00:02:54,260 --> 00:02:57,590
solid so we can actually
see the button.

69
00:02:57,590 --> 00:02:58,940
And if you wanted, you could

70
00:02:58,940 --> 00:03:00,440
add some border videos as well.

71
00:03:00,440 --> 00:03:02,620
But I'm not going to do that.

72
00:03:02,615 --> 00:03:05,485
One final thing to do would be

73
00:03:05,480 --> 00:03:08,680
to align our content
in the middle.

74
00:03:08,675 --> 00:03:11,375
So I'm going to click on
the Edit Column button,

75
00:03:11,375 --> 00:03:13,855
comments, Vertical
Align, sets middle.

76
00:03:13,850 --> 00:03:15,980
And then one more thing we

77
00:03:15,980 --> 00:03:18,200
doing to have some
space on the left

78
00:03:18,200 --> 00:03:19,940
and right is against
right now the text isn't

79
00:03:19,940 --> 00:03:22,670
exactly right off the
edge of the column,

80
00:03:22,670 --> 00:03:23,900
so we need to add some spacing.

81
00:03:23,900 --> 00:03:25,220
So I'm gonna go back in here.

82
00:03:25,220 --> 00:03:27,790
What we're gonna do
is very, very simply,

83
00:03:27,785 --> 00:03:30,305
we are going to go to advanced

84
00:03:30,305 --> 00:03:32,875
for the same column. Right here.

85
00:03:32,870 --> 00:03:35,210
We're going to unlink the
values for the pattern.

86
00:03:35,210 --> 00:03:38,440
And then I'm going
to give 50 pixels

87
00:03:38,435 --> 00:03:42,025
by 50 pixels on the left.

88
00:03:42,020 --> 00:03:43,130
And there it is.

89
00:03:43,130 --> 00:03:47,930
We have built out our
second section very easily,

90
00:03:47,930 --> 00:03:50,390
since the third section is very,

91
00:03:50,390 --> 00:03:51,980
very similar in design,

92
00:03:51,980 --> 00:03:54,200
what we can do is to
simply right-click on

93
00:03:54,200 --> 00:03:57,190
the edit section protein
and then duplicate.

94
00:03:57,185 --> 00:03:59,855
And now what I'll simply do

95
00:03:59,855 --> 00:04:02,605
is I'm going to drag this
first column in here,

96
00:04:02,600 --> 00:04:06,200
drag it all the way in
here, switch the columns.

97
00:04:06,200 --> 00:04:07,490
And now very simply,

98
00:04:07,490 --> 00:04:09,290
let's go ahead and
edit this image.

99
00:04:09,290 --> 00:04:13,220
I'm going to choose this one
which I took in Argentina.

100
00:04:13,220 --> 00:04:16,670
Mount fits in L, color fatty.

101
00:04:16,669 --> 00:04:20,029
And then of course,
for the texts in here,

102
00:04:20,030 --> 00:04:21,560
did I add anything traveled to

103
00:04:21,560 --> 00:04:23,300
the best places as
the header, okay,

104
00:04:23,300 --> 00:04:27,350
so let me just switch
that header in here and

105
00:04:27,350 --> 00:04:34,210
say travel to the best places.

106
00:04:34,205 --> 00:04:38,035
There you go. All right,
let's go ahead now updates.

107
00:04:38,030 --> 00:04:41,610
Let's say what the
page looks like.

108
00:04:41,920 --> 00:04:45,180
Come on, let's go.

109
00:04:46,210 --> 00:04:49,780
Do bear with me.
Unfortunately, these are

110
00:04:49,775 --> 00:04:54,485
the occupational hazards of
an instructor, a teacher.

111
00:04:54,485 --> 00:04:57,205
Sometimes you incident begins

112
00:04:57,200 --> 00:05:00,320
to mess up and
finally it's updated.

113
00:05:00,320 --> 00:05:03,560
Okay, thank you. Now,
let's view the page.

114
00:05:03,560 --> 00:05:07,310
Let's scroll down
and there it is.

115
00:05:07,310 --> 00:05:08,920
Okay, one more thing.

116
00:05:08,915 --> 00:05:10,285
Just as a bonus,

117
00:05:10,280 --> 00:05:11,960
we could add some animation

118
00:05:11,960 --> 00:05:13,130
so that the images maybe like,

119
00:05:13,130 --> 00:05:14,690
you know, this slide in
from the left and right.

120
00:05:14,690 --> 00:05:17,000
So what we can do
is to simply go

121
00:05:17,000 --> 00:05:21,160
back and check this allegory
for the first image,

122
00:05:21,155 --> 00:05:22,915
the one with the
students in here,

123
00:05:22,910 --> 00:05:24,460
I'm going to edit the image.

124
00:05:24,455 --> 00:05:26,635
Go to Advanced lighter,

125
00:05:26,630 --> 00:05:27,740
you have motion effects.

126
00:05:27,740 --> 00:05:29,800
I'm going to say
entrance animation.

127
00:05:29,795 --> 00:05:32,425
Let's slide in from the lights.

128
00:05:32,420 --> 00:05:33,740
Okay, so slightly
in from the right,

129
00:05:33,740 --> 00:05:35,150
so slicing from the right.

130
00:05:35,150 --> 00:05:37,010
And then for this
image was simply do

131
00:05:37,010 --> 00:05:39,750
the opposite slide
in from the left.

132
00:05:39,745 --> 00:05:41,545
Motion effects.

133
00:05:41,540 --> 00:05:44,700
Slowed, informs or loved.

134
00:05:46,240 --> 00:05:49,940
Okay, that was kind of weird.

135
00:05:49,940 --> 00:05:50,930
I'm not sure exactly
what they did.

136
00:05:50,930 --> 00:05:53,180
Let me just do that again.

137
00:05:53,180 --> 00:05:53,660
Okay.

138
00:05:53,660 --> 00:05:55,280
For some reason the image window

139
00:05:55,280 --> 00:05:56,420
over to the second column.

140
00:05:56,420 --> 00:05:57,530
I don't know why that happened,

141
00:05:57,530 --> 00:06:00,570
but alright, I'll just
go ahead and update.

142
00:06:00,790 --> 00:06:02,180
There we go.

143
00:06:02,180 --> 00:06:05,620
Let's view the page.
Let's scroll down.

144
00:06:05,615 --> 00:06:07,235
It makes sliding from left,

145
00:06:07,235 --> 00:06:09,805
misled and delight,
and there it is.

146
00:06:09,800 --> 00:06:12,090
And just like that, our homepage

147
00:06:12,094 --> 00:06:14,274
is beginning to take effect.

148
00:06:14,270 --> 00:06:16,490
So join me in the next
video where we'll now

149
00:06:16,490 --> 00:06:17,660
take a look at how
we're going to

150
00:06:17,660 --> 00:06:19,150
build out the next section,

151
00:06:19,145 --> 00:06:23,795
which would be the
unique travel design.