‫Hey, there.
‫Welcome back.
‫Now let us continue our task with our current items.
‫For now, I need to get back here with my items because I need to start working with the individual
‫elements like this image.
‫Name, description, title and other things.
‫So here we need to play with this and this structure is fine or the current requirement.
‫Let me get back here and I need to start working with my items.
‫So let me remove this fix and head.
‫I simply need to add my first item, which is going to be my image, and then I need to add names.
‫I'm going to create new paragraphs for each one of them.
‫So this is going to be our name, and then I'm going to have phyto, which is going to be about the
‫review title.
‫And then I'm going to have our description, which is going to be the reviewer description.
‫So for now, let me take some sample values.
‫I have all the images and the reference part.
‫Well, which is our testimonial one, two, three, four and five, which are the profile images that
‫we are going to utilize here.
‫So let me get back here and jump onto my media and then select the first one and also make sure you
‫add this alternative attribute value whenever you are working on a real project.
‫The second thing is let me add a name on now.
‫Let me take some sampling, which is going to be this random name.
‫I have no idea.
‫So let me organize this name itself.
‫And the second thing I'm going to do is title.
‫So let me add last autumn five title, and then let me take a short description, maybe 20 and save
‫this one.
‫So this is the sample structure that we took currently.
‫Now remember, we need to follow some type of very tight on our image and also about this one size.
‫So let me get back here, jump onto my style now I can remove this one size three because we are not
‫going to work with it.
‫The intention was to just have a decent display of this whole section, so I'm not going to follow the
‫three of them.
‫The other thing I'm going to do is add some words to our image, so I'm going to select my items and
‫then I'm going to select all the images inside my item.
‫So let me out of it, as well as height, which is going to be a pixel as well as served up except.
‫Saved us one get back here.
‫OK, this looks fine, pretty much better than the earlier version, but we need to add some foreign
‫science because this is too small.
‫So what I'm going to do is I'm going to jump here.
‫And individually create fear for our name, for our title as an as description, the consequences for
‫all three of them are different.
‫So what I'm going to do is I'm going to OK this year, I'm going to create a new park, which is going
‫to be a dumb name.
‫Remember, this is common for all to I can say, item IMG, I can say name I as well as description,
‫so maintain my items, which is likely, then I'm going to select name.
‫Similarly, I need to follow something similar for my title as well as description.
‫Now here, I need to name which is going to be about one size.
‫Let's take one point REM.
‫Similarly, let me add on my data, and let's try read maybe one point eight because spider.
‫The next thing is about our description, how that description needs something smaller than a title
‫because title is something that should get the maximum attention.
‫So here I'm going to utilize maybe 1.6 Adam, save this one and get back here.
‫OK, much better, much better than the previous one.
‫Now, what I'm going to do is I'm going to convert this items, that means all these individual element
‫into grids so we can arrange all of them, all of these items.
‫So I can say, OK, this is here.
‫This is here.
‫You can follow something similar.
‫So the first thing I'm going to do is I'm going to add border with our image, so I just need to jump
‫her head.
‫I need to connect or the radios, and I'm going to go with 50 percent.
‫So we have us for our personal goal.
‫And if you jump here, you can see our images so good, but I need both of these items in a single bag.
‫So what I am going to do basically is if you right click here and go on to the inspect box.
‫Just click on the item part items.
‫Click on to the screen.
‫Now what I'm going to do is I'm going to call this as a grid and then divide them into three column.
‫The first column is going to contain our image.
‫The second column is going to contain the name, the second and third column.
‫And then what we are going to do is and the next row, we are going to have a description on the title.
‫Everything else.
‫So we basically need to convert this whole items and low grade and we call this has great excel.
‫Now, since this is great, that means it is going to take certain certain settings like our column
‫and row, and we have information about this with these included in the previous lecture.
‫So if I jump here with our current structure, we are currently following great remember.
‫So you can see this is a major.
‫Now we are following the rule structure.
‫This is a major name.
‫Ezra's description.
‫So the first thing I'm going to do is instead of the rule of law, I'm going to change the flow.
‫I'm going to change the flow towards column.
‫I'm going to say a grid.
‫And remember, that is auto loans, and I'm going to say a column.
‫If I save this one now, everything is followed in the almost column.
‫But now we can restrict things.
‫Now we can say, OK, I provide our own structure.
‫Let the force say they need for this column is about the size of our image.
‫So if I jump parents effective acceptance because that's the size of an image and then say one at five.
‫Wonderful and wonderful.
‫And if I saved this one, you will get a structure like this.
‫You don't need actually three columns.
‫You can see two columns only because in the first one we are going to have an image.
‫And then in the second one, we have our name, which is this one.
‫Now, the next thing we can do is we can utilize this powerful thing, which we have been utilizing
‫from quite a few lectures now, which is area.
‫And what I can say is the first 50, because that is going to be our image.
‫And then the next all space will be a low band name, and we need to do something similar for the next
‫row.
‫So the first story is going to have our image as well as our name.
‫And then the second one is going to have our title and description, then the next one.
‫So the next one is.
‫Going to have our title now, remember, I need both columns here and then the next one is going to
‫have our description and our description that looks fine.
‫All I have to do is now provide these names to these respective section.
‫So I just need to see a grid area.
‫And this is going to be imaged.
‫And similarly, for name, I just need to provide grid name.
‫And then I'm going to provide grid.
‫This is going to be tighter.
‫And then the next one will be about that description.
‫Save this one.
‫Get back here.
‫OK, this is great.
‫We have divided things according to our requirements, if I just jump on to our items and remember we
‫are inside the container, so this is a.
‫This is container.
‫This is items now had.
‫If you click on this great part, what we did is we first created a 50 percent bar, which is going
‫to container image.
‫Then we have the next part which is going to have information about the name, then our title and then
‫description.
‫The next thing we need to do is add some gap if you see some gap here.
‫We can do that with the help of padding itself, but we have option.
‫We have option about Gap here.
‫So inside out items, let's utilize the gap.
‫But remember, I don't need grab for column itself, so I just need to up.
‫So let's roll gap.
‫And let me go with one point five rim.
‫Save this one and get back here.
‫You can see now we have some gap.
‫The other thing is, I need this this name to be at center.
‫So we have property, we have several properties that can help.
‫So either we can jump onto this whole column thing about our name and utilize our line self and see
‫a center.
‫You can see this is working fine or we can utilize again, padding margin, few other things, but we
‫are utilizing Flexbox grade this type of layout to avoid the extra headache.
‫Now the other small thing is the gap between this image, as well as the specs you see.
‫So what I'm going to do is I am going to add some padding here, but simple, just add some padding,
‫which is going to be left and I'm going to send one the same.
‫This one get back here.
‫OK, great.
‫This is looking great enough to start our journey with other items as well.
‫So I hope this lecture was helpful.
‫In the next lecture.
‫Let us continue and also discuss about this utility, not success.
‫I hope this lecture was helpful.
‫Thank you for following, and I see you guys in the next one.