1
00:00:00,570 --> 00:00:01,230
Welcome back.

2
00:00:01,710 --> 00:00:05,340
Now, what I'm going to do is that I'm going to work on the check out page.

3
00:00:05,340 --> 00:00:06,930
So I'm going to create here a new page.

4
00:00:07,920 --> 00:00:09,030
I'm going to get it here.

5
00:00:10,560 --> 00:00:11,850
Here in this area.

6
00:00:11,850 --> 00:00:15,990
I'm going to give you a page called check out that email.

7
00:00:16,800 --> 00:00:23,900
And then we need as usual, we need the header and the future and the basic goods from the index.

8
00:00:23,930 --> 00:00:26,790
So I'm going to copy the code from here.

9
00:00:28,260 --> 00:00:33,870
Then I've got basically the check out and then I'm going to copy again the footer part, which is this,

10
00:00:34,950 --> 00:00:36,120
and then I'm going to base this here.

11
00:00:38,100 --> 00:00:40,650
And then we need the navigation bar as well as the footer.

12
00:00:41,070 --> 00:00:44,190
So I'm going to copy the navigation bar first, which is this.

13
00:00:45,420 --> 00:00:47,070
Then I'm going to put it in the checkout.

14
00:00:49,400 --> 00:00:50,460
Then I'm going to close it.

15
00:00:52,560 --> 00:00:54,330
And then I'm going to get again the.

16
00:00:56,650 --> 00:00:57,220
The footage.

17
00:00:57,230 --> 00:01:00,130
I'm going to get it with her and then I'm going to use it in this regard.

18
00:01:00,820 --> 00:01:02,610
Now let's work on the chick outreach.

19
00:01:02,620 --> 00:01:09,340
So the chick outreach should contain a forum that will let the user chick out, fill out the information

20
00:01:09,340 --> 00:01:10,600
in order to place the order.

21
00:01:11,350 --> 00:01:14,190
So to do this, we need to create a form.

22
00:01:14,200 --> 00:01:17,560
So here I'm going to say chick out.

23
00:01:20,180 --> 00:01:20,750
Shake.

24
00:01:22,710 --> 00:01:23,160
Out.

25
00:01:24,500 --> 00:01:25,880
And then we need to create a form.

26
00:01:26,390 --> 00:01:31,460
So instead of you think the form from scratch, we already have many forms.

27
00:01:31,470 --> 00:01:34,700
I'm going to get a form from the registration page.

28
00:01:35,270 --> 00:01:40,130
So from the registration page, remember we have this section, I'm going to close it and then I'm going

29
00:01:40,130 --> 00:01:40,670
to copy it.

30
00:01:40,970 --> 00:01:45,590
I'm going to just copy it and then I'm going to paste it into check out here below this check out.

31
00:01:46,160 --> 00:01:47,630
But we need to fix many things.

32
00:01:48,110 --> 00:01:49,280
First, we need to change here.

33
00:01:49,280 --> 00:01:51,050
This register to check out.

34
00:01:53,930 --> 00:01:56,030
And we need also to

35
00:01:59,510 --> 00:02:06,950
gear to change the ID from register to check out form and we need to change also the inputs.

36
00:02:07,280 --> 00:02:12,200
So the inputs that we need are the name, the city email, the phone number.

37
00:02:12,530 --> 00:02:13,520
So I'm going to start with the name.

38
00:02:13,940 --> 00:02:20,900
The name is going to be the same, but the idea is going to be here is going to be check out me trick

39
00:02:20,900 --> 00:02:23,840
out name and the name is name and here name.

40
00:02:24,320 --> 00:02:29,750
The second input that we need is the email I'm going to say email and then here, check out email.

41
00:02:32,390 --> 00:02:34,730
The third input that we need is the phone number.

42
00:02:34,730 --> 00:02:36,440
So I'm going to say phone.

43
00:02:40,060 --> 00:02:41,770
And the type is going to be.

44
00:02:43,630 --> 00:02:45,580
He's going to be number.

45
00:02:46,690 --> 00:02:55,150
Or we can see the actually and the idea is going to be check out.

46
00:02:56,810 --> 00:02:59,600
Check out check out fun.

47
00:03:01,560 --> 00:03:05,940
The name is foreign and the place holder is foreign.

48
00:03:07,260 --> 00:03:09,060
So this is for the for the phone number.

49
00:03:09,510 --> 00:03:12,570
They are the fourth input that we need is the city.

50
00:03:13,020 --> 00:03:14,400
So for the city, I'm going to say.

51
00:03:15,990 --> 00:03:16,440
City.

52
00:03:18,440 --> 00:03:20,330
And then type is text.

53
00:03:21,440 --> 00:03:23,330
It is Siri.

54
00:03:23,900 --> 00:03:24,710
Check out Siri.

55
00:03:30,540 --> 00:03:31,410
Name a city.

56
00:03:33,380 --> 00:03:34,700
Leaseholder, a city.

57
00:03:37,510 --> 00:03:39,490
Lastly, we need to see.

58
00:03:41,300 --> 00:03:41,950
Address.

59
00:03:41,960 --> 00:03:44,300
So I'm going to copy this lady and then I'm going to basically be law.

60
00:03:45,650 --> 00:03:47,930
And then instead of saying, I'm going to say address.

61
00:03:49,220 --> 00:03:49,880
Address.

62
00:03:51,280 --> 00:03:53,650
And the type is text.

63
00:03:54,370 --> 00:03:58,960
The the ID is check out the address.

64
00:04:00,310 --> 00:04:01,690
The name is address.

65
00:04:04,050 --> 00:04:05,800
That leaseholder is also at.

66
00:04:08,710 --> 00:04:10,780
Lastly, we need the button.

67
00:04:10,780 --> 00:04:13,120
So the button is going to be.

68
00:04:14,740 --> 00:04:24,550
Submit glass, be an I.D. check out the button, checkout button and the value checkout or placeholder

69
00:04:25,810 --> 00:04:28,450
place or order or check.

70
00:04:30,210 --> 00:04:34,000
Out, and we don't need the last link.

71
00:04:34,020 --> 00:04:35,280
I'm going to remove this last link.

72
00:04:35,850 --> 00:04:38,640
So what I'm going to do is that we're going to hit the number two CCS.

73
00:04:39,450 --> 00:04:41,970
And in CCS, I'm going to do something amazing.

74
00:04:42,930 --> 00:04:43,950
I'm going to create.

75
00:04:45,110 --> 00:04:45,920
Do classes.

76
00:04:46,520 --> 00:04:47,480
I'm going to say you're.

77
00:04:50,050 --> 00:04:51,040
Check out first.

78
00:04:54,150 --> 00:04:55,530
And then I'm going to get two classes.

79
00:04:56,280 --> 00:05:04,140
The first class is going to be is going to name it, check out small element and the before I gave the

80
00:05:04,140 --> 00:05:07,740
classes let me add these classes to the check out for.

81
00:05:08,970 --> 00:05:10,020
I'm going to give the.

82
00:05:10,800 --> 00:05:12,360
The name here.

83
00:05:12,660 --> 00:05:13,170
This name.

84
00:05:14,620 --> 00:05:21,130
I'm going to give it and I'm going to give you the the the day itself, not the not the input, but

85
00:05:21,130 --> 00:05:24,670
the level that contains the the input.

86
00:05:24,670 --> 00:05:28,120
I'm going to give it a class called check out Small.

87
00:05:29,050 --> 00:05:29,710
Elements.

88
00:05:34,170 --> 00:05:40,440
Eliminate the battery be the same thing for the for the email check out.

89
00:05:43,480 --> 00:05:47,740
Small elements similarly for the fine.

90
00:05:57,860 --> 00:05:58,490
For the city.

91
00:05:58,490 --> 00:05:59,330
I'm going to do the same.

92
00:05:59,330 --> 00:06:01,670
I'm going to say here, check out small element.

93
00:06:02,390 --> 00:06:07,580
Lastly, the the the address.

94
00:06:07,580 --> 00:06:13,580
I'm going to give it another classic old shake out large element large.

95
00:06:15,710 --> 00:06:17,930
A limit for the Baron.

96
00:06:18,710 --> 00:06:21,380
I'm going to give the Baron.

97
00:06:22,010 --> 00:06:23,460
I'm going to give the death.

98
00:06:23,480 --> 00:06:24,530
That contains the Baron.

99
00:06:25,400 --> 00:06:26,840
That contains the Baron.

100
00:06:27,350 --> 00:06:29,570
A classical check out.

101
00:06:30,440 --> 00:06:31,640
Beauty and container.

102
00:06:32,120 --> 00:06:34,460
Beauty and container.

103
00:06:36,620 --> 00:06:37,730
And these are ideas.

104
00:06:37,740 --> 00:06:39,170
Therefore, let's work on them.

105
00:06:39,560 --> 00:06:45,860
And remember, the the big I.D. that contains all of these is is called check out war.

106
00:06:46,130 --> 00:06:48,620
So we need to start with the idea with this check out form.

107
00:06:49,400 --> 00:06:52,190
So I'm going to say here, check out form.

108
00:06:53,570 --> 00:06:57,350
Check out for.

109
00:06:59,490 --> 00:07:04,000
And then I'm going to start with the check out chick.

110
00:07:04,980 --> 00:07:06,900
Our small element class.

111
00:07:07,410 --> 00:07:09,900
Small element.

112
00:07:12,060 --> 00:07:12,390
Class.

113
00:07:12,390 --> 00:07:12,930
This class.

114
00:07:13,380 --> 00:07:14,440
And be careful here.

115
00:07:14,460 --> 00:07:15,870
The check out form is an ID.

116
00:07:16,590 --> 00:07:21,090
Whereas this small element, this small the check out small element is a class.

117
00:07:22,970 --> 00:07:28,730
So for the small element for reaching out small element, first I'm going to change the display to be

118
00:07:29,210 --> 00:07:37,850
in line block and the width, the width is going to be only 48%.

119
00:07:38,780 --> 00:07:43,310
And below I'm going to say here margin, I'm going to give this I'm going to give them margins.

120
00:07:44,090 --> 00:07:52,250
The margin is going to be ten be X or let me now say let me show you how this would do what this would

121
00:07:52,250 --> 00:07:54,170
do to the do the form.

122
00:07:54,170 --> 00:07:59,540
So as you can see, the name of the email will be will be displayed on the same row, whereas in the

123
00:07:59,540 --> 00:08:02,180
phone number and this will be displayed in the same row.

124
00:08:02,570 --> 00:08:08,270
Now the address will be alone here, but we still need to work on the B class for the address, which

125
00:08:08,270 --> 00:08:10,970
is the last check out form.

126
00:08:12,110 --> 00:08:23,210
Check out form that check out check out small check out large, large element.

127
00:08:23,960 --> 00:08:33,110
So for the for the address and I'm going to give it a with only 95%, a little less than 100%.

128
00:08:33,680 --> 00:08:39,020
Lastly, I'm going to work on the check out button and the button container.

129
00:08:39,350 --> 00:08:40,580
So let's start with the container.

130
00:08:40,590 --> 00:08:52,730
I'm going to say check out form and then dot check out button container, check out by the end container.

131
00:08:53,540 --> 00:09:00,800
So for the for the check out the button container, I'm going to first give it a margin of ten b x.

132
00:09:02,630 --> 00:09:09,380
Ole, ole, ole dimensions and ticks align, right.

133
00:09:09,380 --> 00:09:15,020
Because they want to display they want to display the button and instead of on the left side, on the

134
00:09:15,020 --> 00:09:15,530
right side.

135
00:09:16,670 --> 00:09:20,300
And they also want to give to give the board an imagine.

136
00:09:20,690 --> 00:09:21,320
Right.

137
00:09:23,340 --> 00:09:30,840
40 weeks to push the button a little to the left side and for the button itself, I'm going to say check

138
00:09:30,840 --> 00:09:31,200
out.

139
00:09:33,650 --> 00:09:36,200
Form and then check out where.

140
00:09:40,770 --> 00:09:43,650
By the way, this this is an IED.

141
00:09:45,990 --> 00:09:49,530
So the color as you will, I'm going to be using the brand colors.

142
00:09:50,130 --> 00:09:53,220
The color is white and the background color is orange.

143
00:09:58,530 --> 00:10:02,160
Let me see and let me test this in the browser.

144
00:10:03,030 --> 00:10:05,250
So we should have now a complete design.

145
00:10:06,030 --> 00:10:07,860
So as you can see now, it looks much, much better.

146
00:10:08,760 --> 00:10:10,110
So it looks amazing.

147
00:10:10,500 --> 00:10:16,470
The last thing that they want to do is that they want to cut this extra area from here.

148
00:10:17,670 --> 00:10:20,790
So here we have the check out form.

149
00:10:21,570 --> 00:10:23,640
So here I have a problem, I should say.

150
00:10:23,640 --> 00:10:27,360
Here, check out check out form.

151
00:10:28,290 --> 00:10:29,370
This is going to fix it.

152
00:10:30,090 --> 00:10:34,110
So if I refresh, the extra area should be removed.

153
00:10:34,110 --> 00:10:37,860
As you can see, it has been removed or you can increase this a little.

154
00:10:37,860 --> 00:10:44,910
So you can you can say 97% and this is going to make it equal to other inputs.

155
00:10:45,750 --> 00:10:53,010
So the the address is going to be equal to other almost equal to other other inputs.

156
00:10:53,490 --> 00:10:55,530
And the design is responsive.