1
00:00:00,360 --> 00:00:00,990
‫Hey, there.

2
00:00:01,080 --> 00:00:01,830
‫Welcome back.

3
00:00:02,070 --> 00:00:04,610
‫Now in this lecture, let us design some banner.

4
00:00:05,550 --> 00:00:07,920
‫So I just took this day randomly.

5
00:00:07,930 --> 00:00:10,380
‫I'm going to call a class name and call.

6
00:00:10,380 --> 00:00:11,370
‫This has a banner.

7
00:00:11,850 --> 00:00:14,550
‫And inside this, I'm going to add one.

8
00:00:14,850 --> 00:00:17,940
‫And let's just say hello, boys.

9
00:00:19,530 --> 00:00:24,840
‫And then inside this, I'm going to add a block on this room, maybe 50.

10
00:00:24,900 --> 00:00:25,440
‫That's it.

11
00:00:26,040 --> 00:00:29,470
‫Or I can take five 10, but this is this is done.

12
00:00:29,500 --> 00:00:31,440
‫So this is just sample content.

13
00:00:32,130 --> 00:00:34,920
‫Now here I'm going to get inside my div.

14
00:00:37,510 --> 00:00:40,750
‫On, I should say I do with the colossal banner.

15
00:00:41,720 --> 00:00:47,770
‫And then had I'm going to add some background color as well as align my decks towards the center.

16
00:00:48,840 --> 00:00:56,400
‫So first, let me jump onto this gradient, Ioannidis gradient or dial, select this background color,

17
00:00:57,390 --> 00:01:03,450
‫jump on to see save this background color and that should work fine.

18
00:01:04,830 --> 00:01:10,530
‫So this is some content right now, we have this content on we have this content, that tech.

19
00:01:10,980 --> 00:01:14,070
‫But what if I want to have this web design on?

20
00:01:14,070 --> 00:01:15,350
‫Are there?

21
00:01:15,810 --> 00:01:16,650
‫What we can do?

22
00:01:17,070 --> 00:01:21,060
‫So what you can do is you can turn them wisely.

23
00:01:22,530 --> 00:01:28,350
‫I hope you got the IRA, this blue part is going to be visible, and then this white part will be the

24
00:01:28,350 --> 00:01:35,850
‫background color, actually, so you can turn them as you want and you can copy them with the help of

25
00:01:35,850 --> 00:01:36,430
‫this button.

26
00:01:36,450 --> 00:01:42,930
‫So let me select this part and which we are going to have this whole wide thing like this and looting

27
00:01:42,930 --> 00:01:44,580
‫will cover our own space.

28
00:01:45,390 --> 00:01:45,960
‫Click here.

29
00:01:46,500 --> 00:01:47,910
‫Copy that as we record.

30
00:01:48,390 --> 00:01:50,790
‫Jump on to our Dave on here.

31
00:01:50,850 --> 00:01:56,250
‫We can add after rugby that if I can save this one.

32
00:01:58,900 --> 00:02:01,630
‫And you will see some type of design here.

33
00:02:02,140 --> 00:02:02,470
‫OK.

34
00:02:02,500 --> 00:02:03,790
‫This is blue right now.

35
00:02:04,030 --> 00:02:09,730
‫So what I'm going to do is I'm going to change the fill color and I'm going to get it in the form of

36
00:02:09,760 --> 00:02:10,150
‫white.

37
00:02:12,130 --> 00:02:13,000
‫Save this one.

38
00:02:13,150 --> 00:02:18,160
‫Get back here now you can see we have some type of design here.

39
00:02:18,640 --> 00:02:24,550
‫You have to remember this that we are copying this part and then changing the color from blue to white.

40
00:02:24,820 --> 00:02:28,900
‫Remember this if I choose white here, it will be a bit confusing.

41
00:02:28,900 --> 00:02:33,760
‫So I just selected blue and then I'm going to recycle them or change the color.

42
00:02:34,480 --> 00:02:36,610
‫Now this is the part that we are copying.

43
00:02:36,880 --> 00:02:43,990
‫You can try a different shape, maybe in the form of like buildings, maybe some other design, or maybe

44
00:02:44,110 --> 00:02:48,340
‫the web part, or you can change them multiple times.

45
00:02:52,860 --> 00:02:54,280
‫Maybe this one for now.

46
00:02:54,300 --> 00:02:57,900
‫And let me copy this one, copy this code, get back here.

47
00:02:58,320 --> 00:03:02,710
‫You place my sweetie, save this one and change the color again.

48
00:03:02,770 --> 00:03:06,960
‫So let me go where the white save this one, get back again.

49
00:03:07,290 --> 00:03:09,770
‫So this is the part that we are correcting.

50
00:03:10,230 --> 00:03:12,060
‫Now remember if I right click here.

51
00:03:12,540 --> 00:03:17,520
‫So this is the part that we are currently working with and we can change anything.

52
00:03:17,880 --> 00:03:19,950
‫Whatever we want, we can control things.

53
00:03:20,760 --> 00:03:25,470
‫The first thing I'm going to do is I'm going to change this SPG into block one.

54
00:03:26,190 --> 00:03:31,080
‫So I'm just going to select the 3D and going to see display block.

55
00:03:31,230 --> 00:03:32,100
‫Save this one.

56
00:03:33,030 --> 00:03:35,640
‫Now you can see it is not covering this piece.

57
00:03:35,850 --> 00:03:39,000
‫So this is how we are designing some type of shape.

58
00:03:41,850 --> 00:03:47,880
‫Now you can do something similar on the top, like you did here, so we can define different type of

59
00:03:47,880 --> 00:03:48,210
‫shape.

60
00:03:48,510 --> 00:03:51,180
‫And when you are copying for the top, just replace it.

61
00:03:51,720 --> 00:03:52,110
‫OK.

62
00:03:52,500 --> 00:03:54,930
‫So let me try to take some good shape.

63
00:03:57,990 --> 00:04:04,260
‫OK, let me try to copy this one and remember, you can always draw any type of shape here, so let

64
00:04:04,260 --> 00:04:06,060
‫me copy this one and get back here.

65
00:04:06,360 --> 00:04:08,430
‫And this is going to be on water.

66
00:04:09,960 --> 00:04:13,290
‫I'm going to have a white color.

67
00:04:16,280 --> 00:04:19,800
‫Save this one and something in the reverse park.

68
00:04:19,880 --> 00:04:21,290
‫I will have bought it up.

69
00:04:21,770 --> 00:04:24,800
‫So just change the reverse part.

70
00:04:25,040 --> 00:04:25,670
‫Copy.

71
00:04:27,010 --> 00:04:28,630
‫And get a little.

72
00:04:32,800 --> 00:04:34,990
‫And again, charity cannot provide.

73
00:04:36,420 --> 00:04:37,360
‫Save this one.

74
00:04:37,410 --> 00:04:38,220
‫Get back here.

75
00:04:38,940 --> 00:04:41,670
‫OK, so that's how our current banner is looking.

76
00:04:41,820 --> 00:04:46,570
‫Now remember inside our there we added to as we define it, this is Dave.

77
00:04:46,590 --> 00:04:47,940
‫This is a big one.

78
00:04:48,480 --> 00:04:52,680
‫And then we have our H1 B dog and then as we do too.

79
00:04:53,010 --> 00:04:55,080
‫So that's how we are currently designing.

80
00:04:55,110 --> 00:04:56,610
‫You can control a lot of things.

81
00:04:56,640 --> 00:05:03,330
‫I just took a basic example that how you can draw things that are multiple type off shape that you can

82
00:05:03,330 --> 00:05:04,080
‫opt for.

83
00:05:04,380 --> 00:05:10,080
‫But remember one thing there are chances that you will get maybe some type of species or some type of

84
00:05:10,080 --> 00:05:10,860
‫background here.

85
00:05:11,280 --> 00:05:15,270
‫So you're going to win them by converting your vision to the block form.

86
00:05:15,570 --> 00:05:20,580
‫And then you can also change the words height with the respective size here.

87
00:05:20,700 --> 00:05:24,120
‫So we have this view block now.

88
00:05:24,180 --> 00:05:27,660
‫Other thing is you can change that varsity whatever you want.

89
00:05:27,900 --> 00:05:30,120
‫You can utilize multiple languages.

90
00:05:30,900 --> 00:05:37,110
‫And remember one thing that we are trying to capture only this part of this shape.

91
00:05:37,260 --> 00:05:40,410
‫So whatever be visible blue, here we are adding.

92
00:05:40,440 --> 00:05:44,310
‫So at this point of time, we captured this blue added at the top.

93
00:05:44,610 --> 00:05:49,830
‫And then in the reverse part, we captured this blue and added here.

94
00:05:51,100 --> 00:05:57,640
‫So only the blue part is taking space, the white part will be covered by the color, so currently we

95
00:05:57,640 --> 00:05:59,440
‫are utilizing our gradient color.

96
00:06:00,500 --> 00:06:02,060
‫That is why we have this design.

97
00:06:02,720 --> 00:06:07,730
‫Now you can change the font, size, color, whatever you want, but the aim is to understand how to

98
00:06:07,740 --> 00:06:09,850
‫design stuff with the help of 3D.

99
00:06:11,540 --> 00:06:15,110
‫Now, one model you can utilize is Bob Maker, not app.

100
00:06:15,500 --> 00:06:18,350
‫And then you can change different type of shape here.

101
00:06:18,620 --> 00:06:21,540
‫You can see whatever the shape that you want.

102
00:06:21,560 --> 00:06:23,530
‫Again, you can do this similar process.

103
00:06:23,540 --> 00:06:27,950
‫You can download or copy the code and add it with your HDMI by.

104
00:06:29,230 --> 00:06:34,420
‫Similarly, this same divide that is also going to work fine, I have to criticize her, and that means

105
00:06:34,420 --> 00:06:40,630
‫I'm zoomed out so I can show you the complete website, so there are few more things that you can do.

106
00:06:40,660 --> 00:06:42,250
‫There are multiple options.

107
00:06:43,270 --> 00:06:46,390
‫Maybe you want this part, or maybe you want triangle.

108
00:06:48,050 --> 00:06:49,240
‫Maybe you want this.

109
00:06:49,250 --> 00:06:53,780
‫There are the friendship that can be done, and that's how this whole thing is going to look.

110
00:06:54,840 --> 00:06:59,940
‫And you have full information how this is going to work because of this information, that how this

111
00:06:59,940 --> 00:07:00,630
‫is moving.

112
00:07:01,200 --> 00:07:02,730
‫What is this al doing?

113
00:07:02,940 --> 00:07:04,200
‫How this line is drawn?

114
00:07:04,200 --> 00:07:05,640
‫So you have this information?

115
00:07:07,540 --> 00:07:12,760
‫Now, all of this is good, but if you realize at the time of download, they are giving you option

116
00:07:12,760 --> 00:07:14,770
‫to download speed you directly.

117
00:07:15,160 --> 00:07:21,130
‫Also, if you try to download any type of logo online, maybe for any big company, they give you option

118
00:07:21,130 --> 00:07:26,790
‫to download them in the form of a you directly how we can do that with our own images.

119
00:07:26,800 --> 00:07:28,870
‫I don't want to utilize discord.

120
00:07:29,290 --> 00:07:31,360
‫I want to utilize image directly.

121
00:07:31,660 --> 00:07:36,550
‫So what you can do is you can copy this code or shortcut this code from here and here.

122
00:07:36,550 --> 00:07:38,470
‫Let me try to create a new file.

123
00:07:38,470 --> 00:07:40,360
‫Maybe call this as big one.

124
00:07:40,720 --> 00:07:42,060
‫Not as with.

125
00:07:42,310 --> 00:07:48,940
‫Remember the extension as we do, and I'm going to utilize the sample name when it is on here.

126
00:07:48,940 --> 00:07:54,430
‫You can paste this code and now you can utilize the image directly that I saw in my source code.

127
00:07:54,730 --> 00:08:00,580
‫And you can use BJU one dot sweetie, since currently they are in this same folder.

128
00:08:00,730 --> 00:08:08,650
‫And if I get back here, you can see this is still working now that our chances that you might see some

129
00:08:08,830 --> 00:08:10,240
‫hair and their values.

130
00:08:10,540 --> 00:08:16,930
‫So what you can do is you can also convert this whole image you tag into a blog because this am in nine

131
00:08:16,930 --> 00:08:17,440
‫function.

132
00:08:17,860 --> 00:08:25,270
‫So you can see for this specific, you can give a class or you can say maybe not banner EMG.

133
00:08:25,270 --> 00:08:29,470
‫And here you can go display as blog.

134
00:08:29,470 --> 00:08:30,430
‫Save this one.

135
00:08:30,760 --> 00:08:37,540
‫And this looks fine to me, but you can also do this here and there with the help of these values so

136
00:08:37,540 --> 00:08:42,010
‫that if I go ahead, maybe 35, save this one and get back here.

137
00:08:42,880 --> 00:08:43,240
‫OK?

138
00:08:43,330 --> 00:08:46,360
‫You can see there is some small part here.

139
00:08:48,450 --> 00:08:50,730
‫Some small part hair doctors weighs about.

140
00:08:53,300 --> 00:08:56,600
‫You can read these values to have other information.

141
00:08:58,280 --> 00:09:02,690
‫So I hope you got the idea, how do you realize you're a sweetie in the form of image?

142
00:09:03,090 --> 00:09:05,540
‫Now I'm going back with my -- with you for now.

143
00:09:06,080 --> 00:09:10,880
‫Let me delete this one, so I'm going to delete this because you are not a sweetie.

144
00:09:12,750 --> 00:09:14,310
‫Save the Swan, get back here.

145
00:09:14,430 --> 00:09:15,450
‫This is visible.

146
00:09:15,630 --> 00:09:17,090
‫Now one important thing.

147
00:09:17,100 --> 00:09:20,040
‫Let me try to inspect, see if this is a response to.

148
00:09:20,460 --> 00:09:20,940
‫Yes.

149
00:09:21,240 --> 00:09:21,480
‫Yes.

150
00:09:21,480 --> 00:09:22,350
‫As responsive.

151
00:09:22,830 --> 00:09:23,160
‫Yeah.

152
00:09:23,160 --> 00:09:29,240
‫The thing is, if I try to zoom, you can see every part of assuages response.

153
00:09:29,710 --> 00:09:31,290
‫So you don't have to worry much.

154
00:09:32,250 --> 00:09:33,600
‫That's all for this lecture.

155
00:09:33,600 --> 00:09:38,790
‫I hope you got the idea how to utilize, as we understand about their part, understand about different

156
00:09:38,790 --> 00:09:42,720
‫tools that you utilize and how to draw these type of banner.

157
00:09:43,470 --> 00:09:43,950
‫Thank you for.

158
00:09:44,460 --> 00:09:47,970
‫I hope this lecture was helpful and I see you guys in the next one.