1
00:00:00,630 --> 00:00:02,300
So here I'm going to type the phone number.

2
00:00:02,310 --> 00:00:05,250
I'm going to here type A phone number.

3
00:00:09,160 --> 00:00:12,330
And then let's also display something else.

4
00:00:12,340 --> 00:00:14,730
Let's display the email address and phone number.

5
00:00:14,760 --> 00:00:19,330
I'm going to copy this and then going to pasted below and then I'm going to display the email address.

6
00:00:20,290 --> 00:00:21,100
I'm going to send here.

7
00:00:21,100 --> 00:00:24,220
Email, email.

8
00:00:26,450 --> 00:00:28,790
And then here I'm going to type an email.

9
00:00:35,120 --> 00:00:35,630
Next.

10
00:00:35,630 --> 00:00:40,190
What I'm going to do is that I'm going to display a few images from customers.

11
00:00:40,580 --> 00:00:42,890
And this section is going to be called Instagram.

12
00:00:43,310 --> 00:00:50,390
So below this, there, below this, Dave here is specifically here.

13
00:00:51,260 --> 00:00:56,780
We want here to create again this with me.

14
00:00:57,110 --> 00:00:57,770
Copy this.

15
00:00:59,090 --> 00:01:00,390
And this is the end of this.

16
00:01:00,400 --> 00:01:02,240
So Peter should be here.

17
00:01:05,240 --> 00:01:07,010
Here, let me raise this.

18
00:01:07,670 --> 00:01:13,490
And then we make laws, the tag, and then inside what I'm going to do is that I'm going to display

19
00:01:14,090 --> 00:01:14,870
images first.

20
00:01:14,870 --> 00:01:21,320
I'm going to here say it's five and I'm going to again say margin.

21
00:01:22,920 --> 00:01:27,450
Glass batting bottom two.

22
00:01:28,260 --> 00:01:29,820
And then I'm going to say Instagram.

23
00:01:35,500 --> 00:01:37,400
And this section is going to contain images.

24
00:01:37,420 --> 00:01:39,250
I'm going to display a few small images.

25
00:01:40,000 --> 00:01:41,590
So here I'm going to say them.

26
00:01:42,400 --> 00:01:45,790
And then these images are going to be displayed in rows and columns.

27
00:01:45,880 --> 00:01:48,970
Therefore, I'm going to create another class called Draw.

28
00:01:50,080 --> 00:01:53,410
And inside that class, I'm going to create images.

29
00:01:53,450 --> 00:01:56,200
I'm going to say image here, image.

30
00:01:57,370 --> 00:02:02,530
And for the first image, I'm going to say source is equal to.

31
00:02:04,610 --> 00:02:13,490
And then assets for slash image images for slash future one the IGP.

32
00:02:13,580 --> 00:02:16,070
However, I don't have the image yet.

33
00:02:16,130 --> 00:02:19,040
Therefore, I'm going to keep this up like this.

34
00:02:19,040 --> 00:02:22,880
And then later I'm going to add the image and I'm going to give this image a class.

35
00:02:24,550 --> 00:02:33,010
So the class is going to be much fluid and fluid and I'm going to give it width 25.

36
00:02:35,020 --> 00:02:43,090
And height 100 and margin to margin, too.

37
00:02:43,630 --> 00:02:46,200
And I'm going to copy this image and then I'm going to paste it many times.

38
00:02:46,210 --> 00:02:50,650
I'm going to copy it and then I'm going to set one to.

39
00:02:51,770 --> 00:02:52,220
Re.

40
00:02:53,490 --> 00:02:54,050
Four.

41
00:02:54,330 --> 00:02:56,730
So we need like four or five images.

42
00:02:56,730 --> 00:02:57,840
Let's keep it five.

43
00:02:57,840 --> 00:02:58,800
One, two, three, four, five.

44
00:02:59,580 --> 00:03:00,810
So this is for this section.

45
00:03:00,810 --> 00:03:02,550
Lady Save a Lady.

46
00:03:02,550 --> 00:03:04,500
Show you how this is going to look like.

47
00:03:04,980 --> 00:03:10,560
So if I refresh, as you can see here, we will have this is the first column and then this is the second

48
00:03:10,560 --> 00:03:10,980
column.

49
00:03:11,020 --> 00:03:12,960
The first column which contains the information.

50
00:03:13,380 --> 00:03:15,600
And then the last column which contains the.

51
00:03:18,410 --> 00:03:23,960
Which contains these small images, small images that are that have been taken by customers.

52
00:03:25,310 --> 00:03:36,320
Lastly, I'm going to display the the the copyright section, which is which which normally comes at

53
00:03:36,320 --> 00:03:39,920
the at the bottom at the very bottom of the webpage.

54
00:03:39,980 --> 00:03:45,620
Therefore, here below this, I'm going to create a new desktop that's going to display the copyright

55
00:03:45,620 --> 00:03:45,950
area.

56
00:03:46,340 --> 00:03:47,300
So below this.

57
00:03:47,510 --> 00:03:48,470
So below this.

58
00:03:48,500 --> 00:03:49,010
Below this.

59
00:03:49,400 --> 00:03:50,570
Let me show you this.

60
00:03:50,570 --> 00:03:53,990
This this belongs belongs to this role.

61
00:03:54,020 --> 00:03:59,540
However, this is going to be outside there on the outside, this all outside here.

62
00:04:00,530 --> 00:04:03,470
But inside the future, we need to create a new device.

63
00:04:04,490 --> 00:04:09,570
You know, I'm going to say this and for this there first I'm going to give it a class.

64
00:04:09,570 --> 00:04:11,810
So I'm going to say here, class, copy.

65
00:04:12,410 --> 00:04:12,890
Right.

66
00:04:13,940 --> 00:04:20,420
And I'm going to give it a class called Empty PHI, which is margin top by inside a div.

67
00:04:20,420 --> 00:04:23,780
I want to create a row dance.

68
00:04:27,690 --> 00:04:29,730
And then I'm going to sit here last.

69
00:04:30,710 --> 00:04:31,160
Raul.

70
00:04:32,960 --> 00:04:40,730
And then I'm going to also give it to container, container and margin right and left auto.

71
00:04:42,800 --> 00:04:47,780
And inside that, Dave, I want columns, I want to display three columns.

72
00:04:48,080 --> 00:04:56,660
So for the first column, I'm going to see Dave here then and I'm going to say class is equal to column

73
00:04:57,650 --> 00:05:00,610
large free for for large screens.

74
00:05:00,620 --> 00:05:03,140
It's going to take three columns for medium screens.

75
00:05:03,140 --> 00:05:07,580
It's going to take six columns or small screens it's going to take.

76
00:05:08,610 --> 00:05:09,570
Small screens.

77
00:05:09,580 --> 00:05:14,070
It's going to take 12 columns and I'm going to give it also margin bottom four.

78
00:05:16,050 --> 00:05:23,220
So inside this this first column, I'm going to display an image and this image will display the payment

79
00:05:25,650 --> 00:05:26,490
payment image.

80
00:05:27,210 --> 00:05:31,860
So I'm going to say here source and then assets and then images.

81
00:05:32,370 --> 00:05:33,690
And then I'm going to say payment.

82
00:05:34,830 --> 00:05:36,630
Payment, that GAAP.

83
00:05:37,950 --> 00:05:42,360
Again, I don't have the image yet, but later when I have the image, it is going to look amazing.

84
00:05:43,020 --> 00:05:48,510
Next I'm going to display I'm going to copy this and then I'm going to basically be in law and then

85
00:05:48,510 --> 00:05:52,800
I'm going to display a copyright copyright text.

86
00:05:53,100 --> 00:05:55,350
So instead of image here, I'm going to remove this image.

87
00:05:55,830 --> 00:06:03,390
And instead of this image, I'm going to say P for paragraphs and then I'm going to see here e commerce

88
00:06:04,440 --> 00:06:06,150
and then I'm going to display the copyright.

89
00:06:10,590 --> 00:06:11,280
And then.

90
00:06:20,760 --> 00:06:21,420
Finally.

91
00:06:23,270 --> 00:06:25,850
Let me first name and show you this before we continue.

92
00:06:26,390 --> 00:06:30,890
So if I save and refresh, you'll find that you will have here.

93
00:06:30,890 --> 00:06:31,640
This is the image.

94
00:06:31,640 --> 00:06:32,270
It's empty.

95
00:06:32,600 --> 00:06:34,130
And then we have this copyright.

96
00:06:34,610 --> 00:06:38,180
And here I'm going to display another part that's going to display.

97
00:06:40,610 --> 00:06:48,080
Font awesome icons a lot about social media icons so be built on this I'm going to copy first first

98
00:06:48,080 --> 00:06:48,860
I'm going to copy this.

99
00:06:49,870 --> 00:06:52,990
And then I'm going to basically be like this.

100
00:06:53,920 --> 00:06:56,470
However, now I'm going to be using font.

101
00:06:56,470 --> 00:06:56,800
Awesome.

102
00:06:57,310 --> 00:07:01,960
So for this, I'm going to remove this paragraph and then I'm going to add font awesome icons and these

103
00:07:01,960 --> 00:07:03,720
icons that will be inside a text.

104
00:07:03,730 --> 00:07:09,490
So I'm going to create that first attack and the address is going to be hashtag empty, which means

105
00:07:09,490 --> 00:07:09,900
empty.

106
00:07:11,640 --> 00:07:19,710
And then I'm going to explain the I'm going to sleep Facebook icon and Instagram and Twitter, all these

107
00:07:20,040 --> 00:07:22,160
social media platforms.

108
00:07:22,160 --> 00:07:23,280
So I'm going to take your class.

109
00:07:23,820 --> 00:07:26,490
And the A class for Facebook is.

110
00:07:27,660 --> 00:07:29,880
If a front assembly.

111
00:07:31,170 --> 00:07:34,010
And then it's a Facebook, a book.

112
00:07:35,160 --> 00:07:42,990
And then I'm going to copy the same exact link, and then I'm going to be sent here one and two.

113
00:07:43,800 --> 00:07:46,140
And let's keep it simple.

114
00:07:46,140 --> 00:07:46,830
Two, one, two.

115
00:07:47,310 --> 00:07:49,620
So the first one is going to display Facebook icon.

116
00:07:50,100 --> 00:07:52,050
The second one is going to display Instagram.

117
00:07:54,690 --> 00:07:56,460
And the last one is going to display Twitter.

118
00:07:58,630 --> 00:08:01,420
Let me now save and let's head on over to the browser and test.

119
00:08:02,290 --> 00:08:05,740
So as you can see now, we will have these icons being displayed here.

120
00:08:06,310 --> 00:08:09,340
However, I don't want this text to be divided.

121
00:08:09,340 --> 00:08:10,270
I want this page.

122
00:08:10,420 --> 00:08:16,090
I want this text to take two to be displayed in one line rather than rather than two lines.

123
00:08:16,390 --> 00:08:20,230
And to do this, we can here give this a class called text.

124
00:08:21,040 --> 00:08:21,490
No.

125
00:08:23,530 --> 00:08:26,770
This is going to make the text displayed in one line.

126
00:08:27,340 --> 00:08:28,800
So let me here showing you this.

127
00:08:28,810 --> 00:08:33,640
If I refresh, as you can see, the text will be displayed in only in one line.

128
00:08:33,640 --> 00:08:36,580
It's not going to be divided into two lines.

129
00:08:38,390 --> 00:08:45,240
And also what we want to do is that we want to give this a margin.

130
00:08:45,260 --> 00:08:53,570
I'm going to say margin be two and the margin for we are good with this and that's it for this section.

131
00:08:53,570 --> 00:08:54,740
Let me just one more time.

132
00:08:55,280 --> 00:08:56,780
So I think this section is complete.

133
00:08:58,220 --> 00:09:00,040
And I'm going to work on the success of this action.

134
00:09:00,060 --> 00:09:04,220
But before I do this, let's walk through here a little inning and fix a few things.

135
00:09:04,550 --> 00:09:09,350
First, as I told you here, we need to add some space up to add some space from the left and right.

136
00:09:09,890 --> 00:09:16,220
We can here go back to this section, to the future section at the top of the future.

137
00:09:16,730 --> 00:09:23,720
And remember I told you that I'm going to tell you about a very important thing about the design, which

138
00:09:23,720 --> 00:09:28,310
is the container class here for this role which represents this area.

139
00:09:29,000 --> 00:09:39,950
If I give this are a container class container and if I give it also margin right and left auto and

140
00:09:39,950 --> 00:09:48,170
if I give it margin top five, guess what's going to happen now if I refresh the design is going to

141
00:09:48,170 --> 00:09:48,680
look amazing.

142
00:09:48,680 --> 00:09:53,630
First of all, a space will be added here from the left and also from the right.

143
00:09:54,140 --> 00:10:01,730
And also space will be added at the top because I say the margin top five and here margin right and

144
00:10:01,730 --> 00:10:06,950
left will be auto, which means that this section will be displayed in the middle of the screen.

145
00:10:07,430 --> 00:10:09,020
So this is exactly what happened.

146
00:10:09,680 --> 00:10:16,430
And now this section now in terms of this said, in terms of the female, it's complete and we just

147
00:10:16,430 --> 00:10:18,200
need to work on this piece as part of this.