‫Hello, everyone.
‫And in this video, we're going to be breaking up with this particular section and we're going to be
‫implementing this on our website.
‫So this is edited elementary.
‫I want you to click on it on your homepage and you will be taken to the elementary page builder.
‫So now let's start with this design.
‫Now, first of all, what I want you guys to do, I want you guys to Brint brain map, like what is
‫happening.
‫Basically, we are adding a section and then inside that we have a column, then we have a heading and
‫then we have inner sections right here.
‫All right.
‫That's it.
‫But before doing that, I just want you to install a chrome add on.
‫And what that chrome add on is, is that that chrome add on just when you will just use that, it will
‫just get the color code and that add on is actually color.
‫Zillah, so you can see that.
‫Let's suppose that I want to get the code of this particular color.
‫What I'm going to do is that I'm going to click on it.
‫I'm going to click pick color from the beach.
‫I'm going to bring them out of this.
‫And now you can see I just click on it and this color is actually copied on my clipboard.
‫So now I can just go out and I can just press control of the Bastet.
‫So I want you to go ahead and I want you to go to color.
‫Zila and just that just right here, colors are the extension and it's going to just give you that particular
‫page.
‫You're going to want to have to click on it and it's going to take you to the Chrome Web store.
‫And now you have to just install that on your chrome and you should see it right here.
‫So now whenever you click on it and then what you have to do is to just click Bechler from the beach
‫and you will be able to pick the colors from the website that we have.
‫So I want you to go to it.
‫Manziel dot com, get the color and then you can go out and you can work with it.
‫So first of all, what we need to do is to go and create our first section.
‫Now, this section will contain one column so that we can add the heading in the center.
‫So we're going to add this column and then we're going to do we're going to add the heading right here.
‫This heading is going to say about us.
‫Or about me now, what I want you to do, I want you to just align this to center and then just go into
‫the style and choose the colors.
‫So I'm going to be choosing a color to be not full black.
‫All right.
‫I'm going to be using it to be a little bit shade of gray.
‫That's it.
‫And now I'm going to increase the size of it.
‫So I'm going to set the size to be just like fifty five.
‫And now you can see that this is matching this, but we want to just said the boldness of it to be a
‫little bit less.
‫So what we will do is that we will change the way to 300.
‫And you can see that this is not that much bolder.
‫So now once you're done with that, then what we need to do is that we need to add an intersection so
‫that we can add a paragraph into it and then we can add our skills right over here.
‫So what we would need to do is to click on it and then we need to get intersection.
‫Now, I want you to drag this intersection and drop it right here and in here.
‫You will be needing a text editor.
‫So just add it over here and then in here you will be needing to add your skills.
‫So where is the skill?
‫We're just going to uncheck the pro over here.
‫We're going to go down and here is the progress bar to just drag this progress bar and drop it right
‫here.
‫Now, in the title, you can see that I'm not using a title, but I'm just using the title inside this
‫skill.
‫So what I will do, it's my skill.
‫I'm going to get rid of this title so that we do have this only and then we can use HTML six JavaScript
‫and whatever your skills are, you can just showcase them over here.
‫So what I'm going to do is that I'm going to quickly go ahead and I'm going to add that I'm going to
‫add HTML and I'm going to add this to 92 percent.
‫So I'm going to increase this to 92 percent.
‫All right.
‫So that is what I wanted to do.
‫Now, what I'm going to do is that I'm going to go into this website.
‫I'm going to choose my colors, Zillah.
‫I'm going to pick the color from the page and I'm going to choose this color.
‫And now what I will do is that I will go into this style and I will just use the color that I just copied.
‫All right.
‫And this color is now being used.
‫So now what I will do is that I will quickly duplicate this particular one and I will achieve this design
‫HTML to assess JavaScript, BHB, WordPress, UKCS, UI.
‫So I'm going to go ahead and I'm going to duplicate it.
‫And I'm going to duplicate it and I'm going to duplicate it, duplicated until I have.
‫Like six progress bars and I'm going to go ahead and I'm going to now quickly change these.
‫All right, so now you can see that we have got this design and we have added this now what we need
‫to do is that we need to add some of the text.
‫So what I want you guys to do, I want you guys to add your about yourself right over here.
‫So what I will do is that I will come up here and I will just go ahead and I will just add the text
‫that I want to add.
‫Now, what I will do is that I will go to this style and I will said this to black color.
‫So that's it.
‫Now you can see that we have achieved the design that we were looking for.
‫Now, what we need to do is to add this.
‫This is the breaker that is coming between this and this.
‫So how you're going to add that now?
‫This is basically added using the section.
‫So what I'm going to do is that I'm going to go into the edit section and then what you need to do is
‫to go into this tile and just instead of using a classic color, go into the gradient.
‫All right.
‫And now in the first color, just get the color code from this website.
‫So just click pick color from page and copy the color code.
‫All right.
‫And then what you need to do is to just add that to be your color.
‫And the second color that you want to do is to choose this to white.
‫So this is how it should be looking.
‫Now, what you need to do is to just set the location to be 50.
‫And said this location to be 50 is about.
‫So now once you're done with that, you can see that what we are getting is that this is 50 and this
‫is 50, and now what you need to do is to set your angle to ninety degrees.
‫And now you can see that this is how it's looking.
‫So if if this is this blue line is coming over there, then what you can do is that you can set this
‫to 180, 180.
‫And you can even increase this, so that just it just comes up right here like 270, but since we need
‫it on the 90, so we will just add it right here.
‫And now you can see that we have got a perfect spot like this is a gradient.
‫And this is actually said to White and this is how it's looking like this.
‫Now, you can see that we have some spacing from the top and right here we do not have spacing.
‫And what we need to do is that we need to give the spacing from the top.
‫Now we want to give the spacing inside the section.
‫So when we want to give spacing inside, then what we use, we use padding.
‫We don't use a margin.
‫Let me show you, if I just add a margin and if I just add margin from the top like hundred pixels,
‫you can see that it just goes down a bit.
‫But if I just get rid of the margin and then I want to add padding.
‫So if I just add 100 from the padding, you can see that how it's coming.
‫So what I'm going to do is that I'm going to choose the padding to be, let's add 30, let's increase
‫it.
‫And I think it's fine.
‫And now if you just come up here, you can see that now we are done with our this particular design
‫for the About Me page.
‫So that's it for right now in the next video now we're going to be breaking up with this section and
‫then we are going to be breaking up with this particular section.
‫Stay tuned, guys.
‫And let's just go ahead and let's it update page.
‫Let's go to localhost and let's hit enter and let's see if everything is coming.
‫And yes, everything is coming.
‫Stadion Guys, in in the next video, we will be working up with our service section by.