‫Hello and welcome, everyone.
‫So now we are fully done with the basics of elementary.
‫Now where are we going to be starting up with our this project?
‫So before starting up our this project, I want to tell you something.
‫If you think that I am going very, very slow, then you can control the playback speed right down in
‫the player where you can select it.
‫So it will be turned to fast because now, since you know basics, the designing part might bore you
‫guys or the designing part might interest you guys.
‫It totally depends upon your mind.
‫If it is interesting you, then you can set it to slow if you want to just do it that way, or if it's
‫boring you, then you can just set it to set the playback speed to do time so that the video can go
‫much more faster and you can just like understand what I'm doing.
‫All right.
‫So in this video, we're going to be designing this header right here and we're going to be implementing
‫it right on this website.
‫So make sure that you are on your homepage.
‫You go to the edit page and there you should see the edited element or all you need to do is to click
‫edit with Elementary and you will be taken to the elementary page builder.
‫Now, this is what we made in the previous video.
‫So we're going to just delete this and now we're going to start building up our page.
‫And then after that to people, just go ahead and hit update page to that.
‫That would be shown on our webpage.
‫Let's just go out and let's create it.
‫First of all, we need to create a section.
‫So what we will do, we will just go ahead and we will click this plus button over here and we will
‫just select a first column.
‫And now we will have to go into the height and we will set this to a minimum height.
‫So I will be now increasing the height and five twenty seven height is perfectly for me.
‫Now what I will do is that I will go ahead and I will drag this heading and I will drop it here and
‫now I will align this to center.
‫Now what I want you guys to do is to enter your full name over here.
‫And then what you need to do is to go ahead and drag an image and then just drop it right above here.
‫All right.
‫And now what I want you guys to do, I want you guys to get your profile picture and upload it over
‫here.
‫So what I will do is that I will click on Choose Image and I will drag the image I want and I will drop
‫it right here and now.
‫What I will do is that I will hit insert media.
‫Now, if your image is very much bigger in size than what you can do, that you can change it like how
‫much you want and you can even change this to a thumbnail so that it should be looking like this.
‫All right.
‫Some like this, you can go into this style and you can work with the width that we will be doing later
‫on after we have uploaded a background.
‫So now what I want you guys to do, I want you guys to get an image.
‫And for the image, the background image, there is a website that is called and splash dot com now
‫and splash dot com is a website that is going to provide you free license images.
‫So that means that you can use those images on your particular website without the need of a license.
‫All right.
‫So what we want to do, we want to get an image of a laptop.
‫So what I will do is that I will search for laptop images.
‫I will hit enter.
‫And you can see that I've got a lot of images that I can choose from and I can use them on my website
‫so you can decide which image you like the most.
‫And you can take a look at it.
‫Now, since we want to build a replica of this website, we have a laptop and a mug.
‫So people just search for a laptop mug and we will hit enter.
‫And now it should just show us all the website that contains a laptop and the mug.
‫All right, my dear students, upon reaching down, I do get this image that we have used in this particular
‫project.
‫So what I will do is that I will just click this download button and the image will be downloaded right
‫on my machine.
‫So once your image has been downloaded, if I just open this image, this image is really much bigger.
‫And that means that if I just upload it onto my server, this image will just load my server.
‫And every time when the website will be load the website speed will be like very much, not faster.
‫So what we would need to do is that we need to compress this image.
‫So for that, what I need you to do is to open up your Photoshop.
‫If you have it.
‫If you do not have it, then what you can do is that you can go to photo B Dotcom.
‫This is basically the website that is an alternative for Photoshop, where you can upload your image
‫and you can just like resize your image.
‫So what we would need to do is that we need to click on New Project.
‫Now, once you click on New Project, you will see that it will be set to one two eight zero by 720
‫pixels.
‫I want you to keep it the same way.
‫Don't go beyond that.
‫And the reason for that is because for websites cover images, the width and the height should be like
‫one two eight zero by 720.
‫Or if you want the image to be much more stronger, much more crispier, then you can use one nine two
‫zero by danity pixels.
‫But still one nine two zero by danity pixels would be much more bigger in size and it would just like
‫cost to your server much more speed.
‫So what I would recommend is to just said this to one two eight zero by 720 and then you need to hit
‫create.
‫So in the project name you can just said this to cover image for home.
‫All right.
‫And now you can hit create.
‫Now once this is created, you should see a white box over here.
‫Now, what you need to do is to drag your image from the downloads folder and then just drop it right
‫here.
‫And once you will drop it right here, you can see that the image will be added right here.
‫So now what you can do is that you can resize your image and how you can resize your image once you
‫will drop it.
‫You can see that here is this resizing options available to you to see what you can do, that you can
‫drag it and you can just like resize it this way.
‫So if I want to resize it, you can see how is it resizing?
‫But I would recommend you do is to hold your shift and then resize it.
‫So then the image will not be just like changed just like that.
‫How it has changed.
‫Right.
‫So when you will hold your shift key and then when you will resize it, you can see that the image alignment
‫is much more prettier.
‫All right.
‫And now what you can do is that you can just leave your shift, leave your mouse, and then you have
‫to hit enter.
‫And now this resizing options will be gone.
‫So now what you can do is that you can go into the file and now you can go to export.
‫And now what you can do is that you can export that as a J backfill.
‫Now make sure to export it as a JPEG file.
‫And the reason for that is because JPEG file is just like the least inside being is bigger compared
‫to the tube.
‫So now what you can do is that you can set the quality to like how much you want so you can do it like
‫that.
‫But I would suggest you to not go beyond 65 and now you can go ahead and you can hit save and now you
‫can see that the image has been saved.
‫So once the image has been saved.
‫Now, what I want you guys to do, I want you guys to come up here to your website, elementary, and
‫then you have to.
‫Right.
‫Click on it, click edit section, go into the style and then upload a background.
‫So what we will do is that we will select the background to be classic and then we will choose the image.
‫Now what we will do is that we will drag a laptop image and we will try it right here so that the laptop
‫image is right here.
‫Now, you can see that this is one two eight zero by seven pixels and it is also 53 CBIZ only.
‫Now, if I just show you what was the size before, so the size before was actually one point to me
‫and now it is only said to 54.
‫So like, this is very, very, very much smaller and it is not going to load my server at all.
‫Now, what you can do is that you can go ahead and you can hit insert media, all right.
‫And I can see that the media has been inserted.
‫Now, if you will click this arrow, you can see that the image is right here and the image is repeating.
‫Along with that, there are some things that we need to do.
‫So what I want you guys to do at first, just go into the repeat and said this to no repeat.
‫And I can see that this is how it's looking similar like this one I want you guys to do.
‫I want you guys to come up here and said the size to cover so that it just takes the full page.
‫So now you can see that how this is actually looking.
‫But if you take a look at this, if you take a look at this one, I just take my page down.
‫Then what is happening is that image is still fixed in the background and this is moving.
‫So how this is happening is this effect is actually called the parallax effect.
‫So what you need to do is that you need to just say it's in here.
‫Like you can see that when I just bring my page down, the image is also moving.
‫However, when I bring my page down, the image is fixed in the background.
‫And this is moving on this side.
‫This is not moving.
‫So what you can do is that you can set your attachment to be fixed.
‫And now if you move down, you can see that the image is still in the background and this is moving.
‫So this is actually a great thing that you can do for your website.
‫Now, what you can do is that you can go into the background overlay and you can go into the background,
‫said this the background classic color, and then add a color you want so you can just like like which
‫color you want.
‫You can choose it.
‫Since we want to use blue on our website, we're going to be using blue throughout this website.
‫So this is actually the color code that I want you to go ahead and copy and paste it.
‫This is actually double zero nine two.
‫This is the color code that I want you to copy and paste, and you should achieve the exact same color
‫right here.
‫Now, once you're done with that now, what we need to do is to work on with the styling so that we
‫can achieve it this way.
‫So first of all, what we need to do is to just go into the edit image.
‫And what we need to do is that we need to do some changes in it.
‫Now, this image is actually curved.
‫So what we need to do is that we need to make this image curved and this image can be curved using a
‫border.
‫So what I want you guys to do, I want you guys to go into the edit image, come to the style.
‫And in here you can see this.
‫We have border type.
‫Now, what you can do is that you can go ahead and you can increase your border radius.
‫So once you will increase your border radius, you can see how this image is getting curved.
‫And I just increase it, increase it until my image will no more be increased.
‫And now you can see how this is looking.
‫So now what I want you guys to do one more time is to apply a border that is going to be a black border
‫so that the image should look much more better.
‫So what you can do is that you can set it to be a solid color and then you can add one pixel border
‫and this border color will be actually black.
‫And I can see that we have achieved this design and this design is right here.
‫Seem like this.
‫If you just go here when I bring my mouse to this image, you can see that this image goes above.
‫So why this is happening is that if you go into this style, then we have this however effects.
‫I want you to come up here and this we have this hover animation.
‫So what you can do is you can send this to grow and you can see this image will be grown in size.
‫Seemed like this there are a lot of things right over here, and you can select the one you like the
‫most.
‫I want you guys to go ahead and try every of the one.
‫Just bring your mouse and see which animation you like the most.
‫Here is a number one tip that I want to give you over here, and that is make sure do not use the funky
‫animation as if you want if you want your website to be professional and use really sleek and minimal
‫animations on your website.
‫So for this one, I will be choosing it to be the float, so what I will do is that I will search for
‫it, float, I will hit, enter, and now you can see that my image goes above just like that.
‫All right.
‫Now, what we need to do is that we need to work with the styling for our title.
‫So what we will do is that we will right.
‫Click on our title.
‫We will click edit heading and now we will work with it.
‫All right, my dear students.
‫So now what I want you guys to do is to go into this style and then you have to change your color.
‫So we will be changing our color to white.
‫So that it is visible on our screen and now what I want you guys to do is to just go into this typography
‫and then just increase the size.
‫So I will be increasing the size till I get like a perfect spot.
‫And I think this is much more fine.
‫And this font family is actually just like like which font family you want to use.
‫So you have obviously use a Microsoft Word so you can just make that like which one you want to use
‫for this one so you can for your heading.
‫You can choose a bit funky one if you want to use.
‫I kind of like it this way, but this but since we are building a replica of this one, so we will just
‫choose our font to be ACMD.
‫This is the Acme font and we are using this one for our website.
‫But since you can see that this letter is actually very much they they do not have gapping over here,
‫but here we do have a little bit of gapping.
‫So what we will do is that we will just increase the gapping over here.
‫We will just add this to dewpoint.
‫Oh, all right.
‫And now the gapping is exactly the same as it was right here.
‫So now what we need to do is that we need to work with the next shadow so that we can achieve this.
‫So for that, what I want you guys to do is to just go into this text shadow and said the shadow color
‫to be black.
‫All right.
‫And just set the transparency to full black over here so that this is purely visible.
‫All right.
‫Just said this to full black.
‫And I can see that the dark shadow is visible a bit.
‫Now, what I want you guys to do.
‫I want you guys to click tech's shadow again.
‫And then for the horizontal, just bring it right here and for the vertical, just bring it right here
‫to the all right and decrease the blur a bit so that we can see the color.
‫So I'm going to set this the blur to this much.
‫And now you can see that the text shadow is much more visible, much more Crisp's, and we can see that
‫a shadow is actually applied on the website.
‫All right.
‫So now what you can do is that you can just add this heading that says WordPress developer, ANSTO expert.
‫So what we want what we want to do is that we want to click this icon over here and now we need to get
‫this heading and we're going to drop it right here.
‫Now, what we want to do, we want to align this descender.
‫So now what we will do is that we will write here WordPress.
‫Developer and SEO expert, and now I want you to change your HTML tag from H2 to paragraph, because
‫this is actually a paragraph, right?
‫And now what we want to do, we want to go into this style and now we have to choose the color and we
‫will change this to white and now in the font.
‫Then what we will do is we will increase the font size.
‫So I think 21 is fine.
‫And now what we want to do is that we want to just decrease its boldness.
‫So you can see this.
‫This is just like very much sleek in design.
‫So what we will do is that we will said the weight of this to be basically three hundred Aleksi.
‫And now you can see that we are actually getting this result over here.
‫So that's it.
‫Now our tagline is also done.
‫So now what we want to do is that we want to now work with these buttons over here.
‫The first button is going to be about me.
‫And if someone will click on it, he will be taking down the About Me page.
‫And this hire me will actually pop up a form that we will be integrating later on.
‫And I will show you how this works.
‫Everything works.
‫So we will be talking about them in detail.
‫But this button will do that.
‫So let's just go out and let's take a look at it now.
‫First of all, what I want you guys to do is to just get this button and then just drop it over here.
‫And now you can see that this button is added.
‫So now what I will do is that I will align this button to center it first and now I will change the
‫text to actually hire me.
‫All right.
‫And the link is going to be just like hash for right now, because when we will be integrating the up
‫functionality, then I will show you how to do that.
‫So we will be just sharing this to hash right now.
‫All right.
‫And now let's go ahead and let's go to the typography and let's just set the font size to be 16 pixels.
‫All right.
‫And now let's go into the color and the color code is going to be this.
‫The color code is actually six one C seven zero that you can go ahead and you can use it on your website.
‫All right.
‫For the Hayami button.
‫And then what we can do is that we can set the border type to be a solid border and we can set the width
‫of the width of the border to be two pixels.
‫All right.
‫And we can use a dark shadow of the screen over here.
‫So this is going to be the dark shadow of the green.
‫Now, what we want to do is that we want to curve this button.
‫All right.
‫You can see that how this button is actually curved.
‫So we want to curve this, how we're going to do that.
‫Now, first of all, what you need to do is to go into this border radius and then just curve it.
‫And now let's go out and let's increase it.
‫And now you can see that how this button is actually getting curved.
‫So now what we will do is that we will increase it, increase it till we actually get a perfect spot.
‫And I can see how this is actually increase.
‫And how this is working, but if you take a look at it, you can see that there are some spacing and
‫the spacing is not matching this button.
‫All right.
‫This button is OK, fine.
‫But this is not matching this one.
‫So what we want to do is that we want to just use our own spacing.
‫So for that, what we will do is that we will use padding.
‫So what I want you guys to do is to unlink the values together so that this is how it's looking.
‫And now just add 15 pixels from the top and 15 pixels from the bottom and then just add 25 pixels from
‫the right and 25 pixels from the left as well.
‫And I can see how is it working, so now you can see that this is how it's working and everything is
‫working fine just like that.
‫So now what we need to do is that we need to work with another button that is going to be about me and
‫for hire me.
‫You can see that when I bring my monster with the background, color goes away.
‫So how can you do that?
‫What you need to do is to go into the edit button, go into the style, and then just select cover and
‫uncover.
‫What we want to do is that we want to get rid of the background.
‫So what we will do is that we will just choose the background.
‫Type.
‫And the background type is actually a color and we will just transparent the color to it.
‫So now you can see that when I bring my mouse, the color it goes away and we get to see the background
‫image behind the button.
‫So this is how it's actually working.
‫And you can see how this is working.
‫But the border is still there.
‫So if you want to also remove the border, then you can set the border color to be transparent as well
‫if you want to do it.
‫So if I just do it like that, then you can see that the border will also be removed.
‫But we don't want that.
‫I'm going to clear that out so that the border should be there.
‫All right, now, what we want to do is that we want to work with this about me button, so the site,
‫that's what we say, the styling is going to be the same for this button.
‫So what I want to do is and I want to go ahead and I want to duplicate this button.
‫And then what I will do is that I will quickly change the title to about me.
‫All right.
‫And then I will go into this style.
‫And I want the background for the about me to be just like no background.
‫So what I will do is that I will change the color to actually no color at all and I will change.
‫The border colors to be black, all right, and now if someone hovers on my button, then I want to
‫change the color to actually black and I can see that I have achieved this.
‫Now, here comes the main part.
‫What I want you guys to do.
‫I want you guys to just bring this button here and bring this button here.
‫But in the previous video is we learned that elements can be stacked over one another.
‫You cannot bring this element side by side.
‫So if you want to do that, then you need to use columns for that.
‫So how are you going to do that?
‫We're going to have to add two columns in it.
‫And how do you add two columns in a column?
‫You add an intersection section, click on it, get the intersection and just add it over here.
‫Now, in the first one, drag the about me button.
‫In the second one, drag the higher button.
‫Now select the about me button and just bring this to right now, select the hire me button and bring
‫this to the left.
‫That's it.
‫Now, you are fully done with the About Me button and hire me button, and we have actually achieved
‫this design.
‫Now for this one, you can see that I am using a black border that is very sleek.
‫And for this this is much more thicker.
‫So what we want to do is that we want to make it sleek as well.
‫So what I will do is that I will click on it.
‫I will just select this edit button.
‫I will go into the style.
‫And in here, instead of using two pixels, I will choose one pixel and add one pixel.
‫Looks perfectly fine.
‫Now, once you are done with your header or heroes section, then you can go ahead and you can click
‫update.
‫All right.
‫And now when you will go to localhost Colan eight zero eight zero, you should see your page just like
‫that.
‫So that's helpful.
‫Right now, in the next video, we will be breaking up with designing this page.
‫Stay tuned, guys and baby.