The Mega Webflow Course for Beginners - Learn to build a Portfolio Website from scratch in Webflow.

1. Course Overview: What if I told you that you can build a fully functional website from scratch without using a single line of court and completely for free? You can design it the way you want. You can add animations. You could have interactions. You could make a responsive for other device, big points and even hosted come to me for free. Hey there, I'm champion and welcome to my Magal. But of course, for bigness in this course I'm gonna teach you how to take this one page portfolio website that I designed from scratch in fig MMA and build us inside. Well, flow completely from scratch again. Feel free to use his design for your own four for your website. Go ahead and make changes. As you wish, if you need to. All right. So let's talk about what I'm gonna teach you in this course in the score's gonna teach you the basics and fundamentals off development. And what is it that you need to know before you start building a website and I'm gonna teach you things about box Modern responsiveness, grids, layout, elements, animations, interaction, stabs components and so much more and want to upset is ready you could even hosted completely for free, but even attached it. Custom domain. But end of the scores. You know everything that you need to know to go ahead and build any sort of Web site from scratch inside. So hope you are excited and ready to learn their flu. If you are a suit, guys in the next video. 2. Downloading Assets and Preview Links: Alright guys. So before we actually get started, just one toe share a couple of things before hand and let you guys know some information. Now, this is the final website that I have designed inside. Where, Flo And what I'm gonna do is I'm gonna share a preview link in the description where you can actually check out this website inside workflow. Now you will not be able to make any edits or changes because, as you see over here, it says it's only as you can see. It says only read only more changes will not be saved. But feel free to go or how Go around and check out how I built this. You can check out my entire structure that I have better. You can check our information about classes, every single thing that you need to know. If you ever get stuck, go ahead and come back with this and kind of verify. If you get stuck anywhere, that's the prevailing. So if you even if you go ahead and make any changes, it will not effect because this is only the previewing. And if you really want to see the website in all its glory fully functional. You can check out this. You are again. Link will be in the description where you can scroll and check out and play around. We've got a lot of interactions. I've got a lot of animations that we're gonna do super fun stuff. You can check this out as well. And last but not least, I have designed this entire website on Fig MMA, so you can go to the Lincoln the video description and check out and Donna the assets which is going to have the images which is gonna have the icons on it is going to have the stigma file, which has designed and we really referencing that figure file. And then we will be building that design inside workflow. So three things is the preview link, and then you got the actual website itself, and then you've got the assets that you need to download, so make sure to check out all these so that you're ready. And in the next week, we're gonna get started. So I see you guys in the next video 3. Understanding the Box Model: all right, guy. So it's finally time to get started. Now, before we jump into Web float and start building it, there are a lot of basics and fundamentals that need to be understood. So what I'm gonna do is I'm gonna break up these fundamentals into different parts and explain them when the need arises are when we're building a certain section off the upside . So first of all, in this video, we're gonna talk about something called the Box model, which is the most basic and fundamental concept that you need to understand about web design and web development. Alright, how are websites actually built? Alright, How are they structured? Is that is there some particular fashion or is it just a random or how does it all work? And we've got so many different types off device wits. We've got Mac book pros. We have got retina displays. We have got or windows laptops. You've got tablets. We've got mobile have got Foca monitors. How does the website work in all these three different sizes? We're gonna talk about that. So in the figment, filed as a page called is the box mortal. And if you click on that, you're gonna see something that looks like this. All right, so let me explain what we have. You someone to come over here to this, um, frame, which is for 14 40 pixels wide. And the general industry standard is to always design and interface on the smallest screen size. All right, And when you're designing a website, you always want to start with the smallest screen size, which is pretty much mostly the Mac book pro this place. So if I actually go and you know, click on the frame icon, you can actually see that we've got 14. 40. We've got a Mac book, which is 11 50 toe. Got a Mac book pro bitches. 14 40. We gotta sell Facebook, which is 1500 more on I'm averages 12 80 Now, Even though the Mac book and the Mac are smaller than 14 40 it's always a good standard to actually design on a 14 40 pixel with dimensions, because it's not the big it's not a small, it's the optimal size, all right. And that's one basic you need to understand. The next thing is this structure off a website. All right, so if Look over here, we have tree colors, we've got this orange, and then we've got this lighter orange. And then we have got a yellow color. Same thing over here and something over here. But the differently note here is that this orange is actually wider on a to display, which means it's taking up the entire Brit. But this content that's inside. Let's say this one, this is 1311 pixels wide. This is 1311 pixels while. And this is 131 on pixels while. And that pretty much means that the content is going to stay in the center of the screen, no matter the size off the monitor. All right. And to do that, we need to define a particular wet. So here I'm actually defining aware off saying 1319 pixels wide and respective, off the screen size, the screen is going to be 1311 fixes. All right, now, what about the other screen sizes? That we had the 1152 and 120 Now these are smaller, you know. Then 1311 Yes, that is true. So how is that good look, Is it gonna look weird? Well, no. If you ran your building, your website, you can define saying that. Look, I want a maximum. Were to be 1311 But if the skins has get smaller, you can go ahead and shrink the wit. All right, but maximum. I wanted to be 1311 I do not want it to go beyond 1311 All right. That is a condition that you can define when you're building in weapon. And that's how pretty much have developing books. So let me actually come to the left side and we can see some sort off and index. So the orders thing that we see this call is a section which means it takes up the entire screen worth alright. It touches the edges off the screen. And then we have something called as a rapper which defines these final size off our content, the and final word off our content. All right. And the next one is the inner blocks is where we have content which can be text or images, and they can be structured in any way that they want and these are going to fit inside the rapper, All right. And finally, we've got an image, and this is for the second example. So let's say, for example, you have an image or you have some texture. You have some information that you want to display, but you want to take up the entire worth off the screen, right? You can do that. You can definitely do that. You would want to put it in a section and you don't. And you don't have to put it in a rapper because if you put it in a rapper, it will end up confining itself. The work that you have given so you can actually not use the rapper and the content will span the entire world. All right. Now, there is another thing that you can do in this case, if you have Look, this is 1035 which is smaller than 1311 Now you can have multiple bets, right? Let's say that you don't want to this to take up 1311 space. Maybe you won't shrink this a little bit. Well, you can definitely do that so you can actually have multiple Ritz to multiple elements. And no matter what the screen sizes, that is always going to be the same. 1035 over here, 1035 here and 1035 over here. So that's how websites a bit. So just to recap, you always have a section that's the outermost container, and that's gonna take up the entire world of the screen. And then you have something called a rapper, where you define a certain Brit and the next thing you have inner blocks where everything is inside that rapper and that cut and that defined with all right. And if you want to change the world for another rapper, you can definitely go ahead and do that. So that's pretty much it about the box model. In the next week, we're gonna talk about the three main types off layout elements, which we will be using for building all our content inside weapons. So I'll see you guys in the next video 4. Types of Layout Elements: Hey, guys, welcome back. So in this video, we're gonna take a look at the three main types off layout elements. That weapon Oh, provides. Now there are quite a bit more. I will say that are 6 to 7. But these are the ones that we kind of have to pay close attention to, because this is what we're gonna be using most of the time now, there three main things section container and a deadlock. So as I mentioned in the previous video that the orange part off the screen that takes up the entire width is called as a section and that exactly is this section. It takes up the entire with off the screen. The next one is a container. Now, the second step was to create ah, container or a wrapper off some sorts which kind off provides a define with in where, Flo, You have an element quality container. But the problem is, the container restricts itself to a maximum read off 9 40 pixels on desktop and and for other break points, that s tablet mobile landscape and more reported. It takes up the 100%. So it's pretty much acts like a section. Now we'll have another element called as the death block. Now a div block, if you will know, you know, considered in really terms. It's sort of like a balloon. All right, when you look at a balloon, you know, when there is no air, it just feels like, you know, a completely flat object. But the more amount off air you blow inside the balloon, the bigger the balloon is going to be. And you can actually define how much ever size it wants to be. If you blow more, it's going to become bigger. If you blow less, it's gonna be smaller, right? So don't look, is something that's really, really flexible. Um, when you're building a website, so my personal preference is to never use a container, which is why I don't. I have put an exclamation mark beside the container. Now there is nothing wrong and using a container, But I think container just takes away that complete control from you as a designer and as a person who is burning on where flow. So I prefer to stick to sections and develop because you have complete flexibility. Right now. There is also another element call is the link block. Now, the link block is basically the same as the death block. But the difference is that you cannot click on a diff block, but you can click on a link block, right? So this world mark point out as well. So now that we kind of understand the box model and we know what are the three main element types, we can now finally start building our website and who wept float. So as you guys in the next video 5. Webflow Pricing & Hosting Information: our guys one last thing before we actually jump into that flow, I kind of want to explain how the pricing works at where, Flo. So obviously you're gonna build a website and you might want to hosted later. It's gonna be a portfolio or your company website, our landing page, whatever it is I thought would be interesting to kind of explain how the pricing works. So when you start off and creating a Canada flow, you get do free projects, and that's what you can see here. It says you start off with two free projects, all right? And you can do whatever you want with these two projects. Now there are three options. One, you can either host it on Web flows sub domain, which ends with the Florida Ohio, and this is completely free, all right. The 2nd 1 is you can actually host it with your own custom domain on a Web flow Silverware flow uses Amazon Web services so you can hosted, completely unravel and is pure, and it and its friends. And it's a very safe so you can link your custom domain. But that requires a paid plan. And the 3rd 1 is, you can actually export the Web flow cord that you have and hosted on another different platform or together. So let's actually take a look about. Take a look at this in much more detail. So there are two types of plants. One is the site plan, and one is the account plan. Let's start off with the account plan. So, like I said, the starter plan is the free plan, where you get to three projects and if you want more than two projects and when I say project, I mean individual website and if you want, if you want more than two, you can upgrade that to 10 projects with $16 USD per month if you build annually or $24 per month. If you choose. Like a monthly wise, you can also go ahead and export cord, all right, and if you want to export it to a different hosting platform, you can actually export beautiful Cordoba. Flow provides. You can do project transfers and pretty much it. And if you want to go for more than 10 projects, you can go for the pro plan. All right, now let's move in to the are paid, decide plant. And when I say side plants, this means the plan for each individual website or each individual project in your account . All right, so let's actually see what the difference is. Now if you go for the basic plan and when you get to the basic plan, obviously you can costly link your custom domain that you purchase from another hosting platform, and you can connect that domain. To do that, you will have to use a paid plan that you can have 100 pages. You can have monthly visits off 25,000 and you can have zero CMS items. Alright, seem a sense for content management system, which is pretty much an advanced or an intermediate level thing where you create some sort of a back in dashboard off. All your content and wet flow automatically takes that content and puts that on to your website with less effort on Ben, you've got a business level if you if you want your website. If you're If you're upset, has more than you know one million visits or you want 10,000 CMS items or you want on the Madrid form, submit since you might have to check out these plans depending on yard websites requirements. All right, so this is how the differentiation is between site plan on account plan. So hope you guys have a basic idea. But for this course, obviously you can start completely for free without any restrictions. So now that we know this, let's go ahead and set up a reptile project in where Flo and get started. So it's you guys in the next video. 6. Setting up your Webflow Project: All right, guys. So in this video, we're gonna set up our flow project. Make sure we have everything that we need before we start actually building each element inside web flow. So obviously you can create a new account about what flow, and you're gonna get two free projects that you can work with. And once you have those 23 projects, where you can do is you can start with the new project. And I'm gonna choose this blank when you also have a lot of free templates and pay templates that you can choose. But we're gonna start off. It's a big blank one, because we obviously want to start it from scratch. So I'm gonna go ahead and choose on select, and you can choose any name you want. A buffalo gives you a very cool and a quirky name. I'm gonna call this, uh, school share. I'm gonna call this board for you. Of course. All right. Just in random name. Ah, All right. There we go. Ok, so now we're inside. We're full now. They interface does look quite intimidating and scary. And that a lot of options, but we will kind off. Look at this one by one as we progress through the course, and hopefully you will kind of understand every element that off it. But for now, we just want to go ahead and set up our project. Just make sure we have everything, right. So the first thing to do is I'm gonna go here on the top, left. You have the weapon logo, and I'm gonna go ahead and choose project settings. All right, so we're going to revisit this a little bit later towards the end of the course is well, but there are just a few things that we want to set up. So the first thing, obviously the name of the course, this is the sub Dominion where you can host it on web flows, free sub domain. And, you know, just do It's gonna be like a staging area where you can just check how the upset. Look, I'm just gonna remove this extra bet, because it's gonna be easier. All right. Um, and we can say portfolio course, um, 01 or something like that. Um, the next one is. You have these Farrakhan my country, Israel. Put later. Anything is you want to choose your time zone. Make sure that is that, um and yeah, that's pretty much it. The next thing is, we want to go to the, um, funds section because we're gonna be using a front Now we're gonna be using now, there are three ways you can have phones. You have a Google funds, you've got custom phones and I've got adobe phones. If you've got an adobe subscription, you can obviously get the FBI token key. It's gonna be there in your account settings. All you can come over here and figure out how to get that and just put the A P I key and you are in start phones is gonna be that in Buffalo. Next ones you can upload custom font files. You know which. You know, bacon upload TTF ot f d r profiles, and they should be working pretty fine. The next one is using a Google phone. Now for this course, we will be using a Google phone. It's a very nice phone call. Ascent and all have to do is just go to the drop down. You've got all the rule phones available. Alberto is just search for the 40 want we want something called a scent. So s e n all right. And that's the fun. This has only three billion. So we're gonna choose all the tree just for now. Um, and you know the language on the skip. If you don't include that or not, I'm just going toe Leave it. I'm just gonna choose the one without Latin extension. Whatever. And shoes at four. Okay, so now you can see that these are the funds that have been added, and that's pretty good. The next thing is, we want to go into custom court. Now, Veteran also gives you the ability to act some sort of a custom court. If you want to really customize some elements, which bed floor does not allow you to? Now, this is quite for advanced users, so we will not be using any custom court at all. But the one thing I will note fix over here is that in the advance settings, I would be I want to add the language car, so I'm gonna say e en for English. Well, that's what's gonna happen is when somebody opens his website in the region that such as Germany or any foreign country. Your browser's going to identify that this is an English website, and it's going to ask if you want to translate it from English to the respective language of that country. And you want Google to provide that sort off a functionality. So you want to just check that and we'll choose save changes, All right. And the next thing gonna do is we're gonna go back into our designer and designer is our workspace where we're going to design and build the website, All right. And what I'm gonna do is I'm gonna go to this navigational panel, which is the navigator where we have a whole lot layers. What I'm gonna do is I'm gonna choose this element calls the body and body is the huge parent element which, which kind off since everything is since everything is inside a box and everything is in a container body is a paid into most element, or I'm going to do is I'm gonna click on body and I'm gonna come down into the phone section and I'm gonna go ahead and choose the font that we picked out, and that's going to be sent all right, and that's it. So every time we upload up, every time we input a text inside the canvas area, the font is going to be chosen to send. So we don't have to change the phone every single time. All right, so that's one thing that you want to do. So now that's pretty much it. In the next minute, we can finally go ahead and start building our first component and will be starting by building the navigational bar. So I see you guys in the next video. 7. Building the Navigation Bar: All right, so we finally ready to start building off first component, and we're gonna start creating with the knave bar, the navigation bar that we have right over here in this video. All right, so that's actually jumping to FTL and see how this thing books. All right, So, as you can see, the first thing we've got is this big white screen that's the body off the entire website. So does only scroll down until we find the background section and from the background section, I'm gonna change that from from white to black. And don't click on this plus icon, which is going to add a global swatch, which means that any time I apply the scholar to an element, I can change the color off all the elements that have the same color applied, right? I'm gonna go ahead and click on create. And now every element that I that I added has a black color is going to change to the respect of color. If I change the color off the global swatch. Okay. Great. Now where Flo only gives you some sort off pre defined elements, all right? And you condemn finitely, use them the way they are, all you can customize it to your liking. So if I click on the plus icon, you can see that these are all the elements. That proprietor. And as I told you, we have this section. We have a container and we have the block. Now we also have things like link block and buttons and columns and great, which will probably take a look a little bit later. But for now, what we want is an element call as the navigational bar. All right, we've got the knave bar over here. All right. Now, in the left section, you also have some sort off a pre defined elements such as sticky bar here, over lake main content call to action stuff. Leather bird. For this kid course, we're not going to use any of this because we want to build everything from scratch. But if you want, you can definitely go ahead and use thes custom layouts. All right, so when you come down and I'm gonna go ahead and choose this Nabbout element, and I'm gonna track that and I'm gonna drop that inside, okay? Now, always you want to do is pay attention. to this navigation that we have on the left. All right, Now, if I open this up, you see, we have a couple of items. All right? We've got, like, a big list off items, so let me explain. Explain how this is what's happening now. Well, you see, over here is the body, and then inside that we have an element colors didn't have but and inside the knave. But we have something called the container. And inside a container, we have three elements. We've got the brand. We've got the navigational menu, and you've got the menu bottom. And inside the knave menu, we've got three elements, which is the knave link. Want knave Ling to knave Link three. And we also have a menu icon. All right, so where Flo uses this terminology cause the parent and child, in this case, the body is the parent, and the knave bar is the child. The container is a child off the nab. Our on the knave bar is a parent off the container. Now the container has three Children brand navigation menu and many but right. The knave menu is apparent. That has three Children. All right now There's another thing that you could look at brand knave menu and many buttons are all siblings because they are Children off the container and siblings is actually a term that is used when you're building things entire web flow. So, parent child and Sibley, these three things that you need toe be attention, toe. So, as I mentioned before, the first thing that we want to do is create the section right which takes up the entire right off the screen. And what do we see here is this knave bar is taking up the entire work off the screen. All right, so the now. But if you see if I click on it, you can see that it's taking up the entire worth off the screen. So what you want to do is you can play around with this number which is basically defines. You know how a particular design will look on a particular screen work. So if I change this to 14 40 you could see that everything is in the center as we discussed , all right, but everything but the knave bar, which is acting like our section, is taking up the entire world. If I change this to 1920 you can see that this stays in the centre, but the section is taking up the entire worth. Let's change it to 38 40 which is our four K resolution. This is how it's gonna look and this is in the center. So you always want to stick this to 14. 40 so that we have a good visual representation off how it matches with our design and fig MMA. So because we have designed it on 14 40 it's fair enough to always keep this in 14 40 as well. The thing is, we have this container like a cell which has a rapper, and this is having a week off. 940 picks is and we do not want to use that, because if you see, we have a maximum work off 1920 pixels, all right. And we have a parting off 40 and 72. So what I'm gonna do is I'm actually going to go ahead and create an element caused the death block right now, when you kidding elements, make sure that you select the apparent element so that the child element that you're creating falls as a child off the parent element. So look, like on the NAFTA, And I'm gonna press control E which is a shortcut or command e on a Mac to clear the search bar where you can search elements. Or you can actually just click on the plus icon and search for the elementary work. I want to be using these sharp cuts, so it's much easier and much faster. So impressed. Control E. And I'm gonna choose their block, honey. And we have this deadlock, and I'm gonna put this death block inside, okay? And I'm gonna take this brand element. I'm gonna put that inside the death block I want take the navigation menu. Put that inside the death block and the menu button and put that inside the death block. All right, So make sure they are all chillin, so you can collapse them to see if it's all inside the parent. I don't take the container and delete it. Okay, Now we have a look. You can see that everything is moving on to the left and the right. They're stretching. All right. So if I change this to 1920 you can see that They're kind of touching the edges of the screen because we have not defined that maximum grit. All right, so let's go ahead and do that. So what we do is I'm gonna send this back to 14. 40 fixes, all right? And I'm gonna choose this deadlock that we created. You can also click over here in the bottom navigation and the first immunity is gonna give a class. What exactly is a class? All right. Ah. Class is a name that is given, and you can actually call any element anything you want. But what happens is when you give a particular class to something, you can assign certain properties to it, and that class will be named on that class will be special because it has a certain amount of properties. And what does this all mean? Well, actually, create one, and we kind of understand this one by one. Okay, So what I'm gonna do is I'm gonna call this as a rapper, okay? You can call this anything that you want, but I'm just gonna call it Rapper for now. Okay? And in the work, what I'm going to say is, I'm gonna say 100%. Okay. What does that mean? I tell you, and also in the maximum worth. I'm going to say 1920. Great. Now what's happening here is that I am telling workflow that Hey, look at this rapper. All right? I want this rapper to take up 100% off the width. All right? 100% off the wet, off the screen size. But I want you to restrict it to 1920 picks is which means if I goto 12 40 pixels, alright, it satisfies both conditions. The work is 100% which is why the elements are touching the edges of the screen and the maximum with his 9 20 Which means if I go to 38. 40 you can see that this is kind of restricted or, you know, let's say that to 2000 to make it easier to understand. All right, you can see that this is touching the left edge of the screen, but here, this is confined to 1920 pixels. We have this extra gap off 80 picks is right to answer the question off redesign in 14. 40. But how is it going to look on smaller break points. We use this condition. So we're gonna say, take up 100% of the wet, but restricted to 1920. Now, I know what you're thinking. We have this extra space on the left and the right, even on the 14. 40 pixels. How do we get that? It's quite simple. So let's go to 14. 40 fixes. Okay. And what is with the rapper selector? I'm going to add spacing on the left and right. So if I select this element, you can see that you can actually selected the element You can hold on control and click on an element if it's inside a group and also hold option or art and just hovered over to see the distance. So we've got 72 pixels on the left, all right, And 72 picks is on the right. So what we do is I'm gonna select the Knave bar, which is acting as a section, and I'm gonna give it a class. Carlos de Navarre. All right. And I'm gonna give it an inner padding. So what? Padding this? It kind of pushes elements inside. You always want to give padding to the parent element so that it pushes elements inside. So the planning is going to be 72 pictures on this. So you can see that if I hover over, you can see that green section, which is kind off the padding, which is the distance between the left and the right element. And also, I could do the same thing on the right side and say it 72. So that pushes this as well. So you can see we've got this inner spacing that we wanted. So how is it going to look on a smaller screen? Let's look at 12. 46 is all right. You can see that. That's basing off 72 picks. Us is respected on a smaller screen size as well. Now, if you go to 1920 how's it gonna look? It's got a 1920 on 1920 as well. We've got that extra 72 picks a party. Okay, if you go to, let's say 2500. All right, we've got that 72 pixel padding on the left and the right. But here, really, it does not matter because our wit was restricted to 1920 pixels. Now you see, we have a problem here where the elements are kind off towards the left, but they're you know they need to be in the center. How do we do that? Very simple. So let's elect the rapper. All right, why do we have to select the rapper? All right, because we can select the rapper only because we can define this to be the center. So if I click on this button, you can say that center element horizontally requires a fixed work. So we have actually defined a fixed worth off 1920 pixel, which is our maximum with so all after do is click on this button, and that's gonna center this to the entire screen. So if I said this to 2000 pixels, you can see that it's in the center off the screen, all right, and that's what we want. So this button can be applied on Lee when we have defined a certain width. Fantastic. So let's go back and said this to 14 40. Great. Now let's go ahead and customize these links. But before that, let's actually select this navigation. But because we want to make this transparent because right now it's You can see it is transparent. This navigation bar is transferring. I'm gonna come down and here in the background settings, it's got some sort of random color actually. Gonna go ahead and click on this button Do make it transparent so we don't see anything. Okay? And now we've got these three elements. So what I wanna do is my son in the 1st 1 All right? I'm gonna give it a class and call this knave link. This is a name that I'm giving it, okay? And now you're gonna understand the significance off what a class meets. Okay, so let's go ahead and actually customize this with our settings. So they come here, you can click on one of the element that we have, and you can see that we have a certain value of here. Someone click on this button toe link, and ah, I kind of forgot to install the phones because I was working on the Mac Book Pro, So I will anyway do that in the next video. So But for now, you can see that the font size is 16 and we have ah, height off 1 50%. All right, so we're gonna do is I'm gonna go ahead and change the font size to 16. Okay, The height is going to be 1 50% to make sure you add in the percent value, and then we're also going to change the color of this to white. But it's got a 70% capacity, as you can tell here. So I'm gonna click on this button and then click on this to make it white. And I'm also gonna click on Plus to make it a swatch and then click on Create. And then we'll change the Alfa, which is eight, which is also called capacity to 70%. So now we have something. Looks like this. And obviously, this is experience. We've got to work, We've got photography and you've got contact. So we will do. Is I want to double click on this and just change this to experience. Okay, great. Now you can also see that we have this sort off distance, which is 24 pixel on the top, and Tito pixel study 24 pixels on the left and right, and 32 pixels on the top. So I'm gonna add the spotting someone come over here. And as you can see, we want to set this to 32 on the top 32 on the bottom, 24 on the left and 24 on the right. Okay, so now if you can see that we have kind of structure the way it really looks like this. Okay, great. Now we've also got is these two elements. What do we do with us? We also obviously have to make them look like this. So what I can do is you can see we give it our classical is knave link. I'm going to sell it this knave link and just give it a class called Knave Link and you can see the existing classes. We also we have the classes that we name with your press enter. And that's gonna apply that. It's the same thing over here. Knave link and fantastic. Let's go ahead and rename this so working for geography, so work and photography. Okay. And then I'm going to go ahead and duplicate this, okay? And this is going to be contact Greater now. As you can see, contact looks different, right? So if I go ahead and change the color off this to be something else. All right, so if you go to the background, every are some background color you consider it applies this other color as well. But that's not what we want so hard. We do that two ways, we can either create a brand new class. All right? So I can actually remove this class, and I can create a brand new class, but that's gonna take a lot of time, right? It's gonna take a lot of extra steps. So what I can do is I can And you can press control Z, by the way to, you know, to undo and redo control. Why is toe redo control Z is two under? What I can do is I can add something called Is it combo class? So if I click here, I can add something that has a new combo class. And what? I'm gonna say it. I'm gonna call this button, all right? Any name, what you want. You can call it anything else. So when I'm gonna click on bottom, what's gonna happen is I'm gonna come down to the back around colors and let's actually pick this color that we have this purple color. I'm just gonna copy the color court, Okay? And, um, a couple here, and I'm gonna beast that. Okay? And also, I'm gonna just add this to a swatch, and it's called Blue here, but whatever, that should be fine. Okay, Now, what happened here is that because of this combo class, you can see that these three the narc, it affected only this Carter factor. And if you see the color over here, this is orange. And this is blue. Because this combo class has only this property off this extra color value that we added. So if I goto expedience and probably let's say I change the foreign size, you can see that the font size changes for this as well, because this has that based class called knave link. All right, I'm gonna go ahead and just set this back toe 16 right? And because it has a base link, it's changing. But because we added a combat class, which is an additional effect, it's it's affecting only the element that has this combo class. Now, the other thing we need to note here is that this is actually in boy rxf a look over here. It's in Boyd. So what I can do is here for the button. I can change the font. Wait. Also to be bored, all right? And this is going to be pure white. I'm gonna change this also to pure white. Okay, so this is Element, actually, has three new properties are different. Weight are different color on a different background colors as well. So that is the significance off a combo close. All right. The next step is we're gonna go ahead and add in other logo which we have over here, and what you can do is you condone, or the assets that are there in the asset in the project files and you can come over here and click on the assets, and you can actually import all the asset. So I'm gonna do that right now. Okay. So as you can see, I've gone ahead and imported all the images on all the assets that we need. Now, what we're gonna do is that's kind of observe this section, right? So we got something called as the brand, and the brand has this link like on, which means it's a link block right. As you can see, it's it's a block. It's a link block. So it's gonna go ahead and call this brand. Okay? Now, what we'll do is we'll go ahead and select this logo that we have, which is an SVG and were dragged that, and I want to drop that inside the brand. All right? It should be inside the brown. Okay? I don't know. Call this logo. Okay. Now let's defy the height and the width. Now, this over here is 24 pixel stall. And over here, you can actually see that the values that define which is 79 pixels with and 24 picks of style, which is exactly what we need. And this is anyway and svg so we don't have to worry too much about scaling, so we'll leave that as it is. Great. Now, the problem is, he here Is that this Everything here is kind of in the center, but this is kind of aligned to the top, So hurry, kind of center, Linus. So what we can do is if you see or hear, we've got a top margin off 30 toe. I can actually go and add a margin off 30 toe. Do this particular element. Now, you will be careful about which element you're adding, displacing to write. Because what we want to do is, you know, add it. Do this link block right? We want added to the link block because that itself contains that entire Robin local. I'm gonna go and add a margin on the top and call it 32. So now the brand, all right and at the logo are inside on the logo is inside the brand and the brand, The study two pictures away from the top. And this looks pretty much, you know, in the center. And it looks pretty good. So that's pretty much it about how we create this navigation bar. If you go and change it to a different break point, such as 1920 you can see that it kind of expands, but maintains that 72 pixel margin that we had kept. And that looks fantastic. Great. So in the next video, we're gonna go ahead and actually add some hover interactions to this and maybe even make this responsive for tablet and mobile brake parts. So it's you guys in the next video 8. Adding Hover Interactions to the Navigation Bar: right. So in this video, what we're gonna do is we're gonna go ahead and add a bit off fun hover interactions to each of these elements. We go outside a bit more playful and lively. So how do we do that now? They're two types off interactions in Napa. One are simple interactions, and one are complex interactions. If you were to create complex interactions and animations, you will probably have to go to the interaction, stab and do it over here, which we will do a little bit later. But for now, what we're gonna be creating is a very simple hover interaction. So we don't have to go to the step. How are we doing this is by using classes and let's see how to do that. I'm gonna go ahead and select the first knave ling that we have, and I'm gonna come down to this drop down that I have, and I'm gonna choose an state college. The hover state. Now you've got four different states hover, pressed, focused and visited ST Now, Sometimes you would want to use this for input boxes or buttons or stuff ladder. But in this case, we just worry use hover, click on hover. I mean, if you can have what's gonna happen, is it gonna create a combat plus, Which means that any effect you create our ad is going to be affected only on this combo class, right? Just the way we created a combo class for this navigation link button, someone come down and we're gonna do is in the color settings. I'm actually going to clear a new color, are into physical, you know, like harvard a little bit and probably pick a nice color and maybe said the capacity to 100%. Right now that looks like a very nice bright color. And maybe you could have something pours on the blue side and I'll go ahead and create a color swatch, right and correctly can create. Fantastic. And now what I'm gonna do is I'm gonna come back to the non state so that we make sure it's to default and our directly check whether this work what we can do is you can click on this preview bottle which kind off reviews how our website were actually look. And if I hover, you can see that the color changes right and I can also hover on this. But how is it working for this? It's working because these three have the same class. Right? And how will he over here? It really does not work because there is a comma class. That's kind of replacing it. Okay, So Right. And the thing is, No, this is working fight, but we can have want to have some easing. We don't want it to immediately change. We're gonna have some saw. Small transition between the colors. So how do we do that? So I'm gonna selected this. And in the non state, I'm gonna come down to the section where we have something called Transitions. And where you this is where you can add easing. So the first gonna do is I'm gonna selected the property, which is two, which is the font color. And the second on is the duration. Now, some. I usually prefer a range between 304 100 milliseconds. So for now, I'm just gonna choose 350. You can also to the easing type. And you've got a lot of different types of easing. I preferably usually go for the one that says he's out court. That's some style. And I like what you can definitely choose whichever you want, and you can play around with it, and that's pretty much it. So now if you go and check that, you can see that, you know, you can see the slight transition between the old color and the new color. All right, and that's much more better. Okay, now, what do you do for this one? So what we can do is we can do a couple of things I want to do is I'm gonna go ahead and add in a hover. And this time I'm just going to go to the background, and I'm gonna make this a little dark, all right? Just a little dark, all right. And then I'm just gonna leave it as it this. We're gonna come back to the non state and and we can add a new transition. And here in the transition, I'm going to choose the background color and set this to 350 milliseconds. And also, the easing is going to be easily court. All right, so now let's take a look. All right, you can see that looks pretty good. fantastic. So that actually what we're gonna do is we're gonna go ahead and make this a responsive for other break points such established more byline scape and mobile portrait. So it's you guys in the next video. 9. Making the Navigation Bar Responsive: Alright, guys. So in this video, we're gonna go ahead and learn how to make this naff bar responsive. It could be pretty fun because the responsiveness is quite a very important topic on the concept that you know when you need to learn when you're building a website, so it's likely is how to do that. Now we've got three different break points. You've got tablet, you've got more by landscape and you have got mobile Portrait little tablet first. Now what we see here is that we've got this new menu icon that's there. So where is this money I can actually coming from? If you actually look at the navigation, we've got the brand. All right, we got the naff menu. I never got the menu button. Now, on the desktop break point, we had the knave menu and the the menu button was not there. So if you actually look at what here in the displaced setting, you can actually see the display is actually set or not. But I need another tablet break point. We can see that the menu button, all right, is actually in the block. Display on the knave menu is actually hidden. All right, so that's happy that buffalo has done automatically. Now, if you really want to make sure that you want to have the navigation links on the tablet as well, how do we do that? It's pretty simple. If you select the knave bar and we come here to the Elements panel, which is the second top, you can see that we have the option to show the menu icon for tablet and below. What I'm gonna do is I'm gonna say show many icon for landscape by mobile landscape and below. Okay, which means that when I go to mobile landscape, we have the menu icon. When I come over here off the knave licks All right, great. Now you can see that there's that. We feel that this is there's too much space or here on the desktop. I looked fine, but on a tablet, it feels that, you know, it looks off and you can also see that we've got multiple break points over here, right? And when I say break point, I mean in this context break point for different tablet devices. So we've got iPad Pro, which is 7 68 and then we've got 808 34 then, you know, 912 and you know so on and so forth. So we're gonna start with the smallest one because it's gonna make sense. Now I'm gonna do is I'm gonna come over here and select the NAB our and we added 72 or I want to do it already. Is that to 40? Okay, so it looks much better. We changed, the 40 were here. But when you come back over here, you can either. It still remains 72. How does that work? Because this is what a CSS cascading style sheets. What's happening here? Is that any changes that you make cascade downwards in the break point? So which means the 72 is going to be applied toe this this and this. But now, once we made a change to tablet off 40 this 40 is going to be transmitter to the landscape as well, where you can see it's 40 and not 72. And for mobile portrait, which is 40 which was not 72 before. So we actually have this control where we can change the properties off a break point and not affect the other break points. And that's fantastic. And that makes it much easier to design and build stuff right now. Let's goto the landscape break point. But it now, if you actually see that we have the design for the mobile as well. Now the mobile portrait and mobile landscape pretty much behave in the same way. So we can actually use the same settings for mobile portrait. Right? So if you see or hear, I've gone ahead and change the distance off. The elements are to be 16 picks is on the left and 16. I'm pretty for okay. This actually needs to be 20 on. This needs to be 20 as well. So I'm gonna make sure that I got the right numbers, okay? And on the top, you've got 24 he had also in the top of car 24. We can see that the top here is 24 picks is our margin. So I'm gonna set that. Is that two of 24? Okay, Looks good. And bottom. Also bottom. You can leave it as it is. Um, and then what we can do here is for this many, but And I was gonna call this a menu button. Okay, Now, since we already have this 2020 pixel on the left, what I wanna do is wonderful enough, but I'm going to remove it on the left side, on the right side. So the way we're going to create 20 pixel spacing is by adding 20 pixel padding to the menu button and also 20 over here and 24 on the top and 24 on the bottom. All right, so now this pretty much looks far. Now, the next thing is here that we have actually a different icon over here, All right, And here we have a different icon. Now, this is the default. I conduct airflow gifts and we can call this menu icon, and you can actually go ahead and play around with this by adding your own custom settings . So if I go, I can change the color off this to be white. And what's gonna happen is it's going to change it. The white. Now, the next thing is, how do you actually see the menu item? If you go to a target preview, you can actually click on it and thats gonna open up this sort off A You know, many where you can actually go through and tap on each of the links. This is where our navigation links are. This is the naff menu, All right, But for now, what I'm gonna do is I'm gonna go ahead and replace this icon that we have. So I'm gonna import this menu icon that I have from the assets so you can actually see that I have the icon over here, so I don't want to go to the Navigator, actually, and we're gonna open up this menu button now. This is the menu button that we have. I'm gonna go ahead and drag this and put that inside this many, but And I can actually go ahead and delete the other one because we do not need it. Okay? And now this is in a great and this looks pretty good. All right. If you look at more by landscape, this is pretty much how it looks in the design. And when we click on it, it opens up this menu. Fantastic. Now, obviously, this menu also needs some work, so we're gonna fix that. So let's come to the mobile landscape on. Do you can actually toggle that by choosing this select in menu button, and you can choose naff bar settings and you can choose open menu. And now you have this. And now any changes you make to this, it's kind of going to effect of the visual style. So the first thing to do is I want to make this menu button and the background. I'm going to change that to be black, right? That's number one. The next one is the nav link are actually transparent. But the knave menu is the one that has some sort of colors. I'm gonna first of all, I'm going to give this a class and call this naff menu, all right? And I'm gonna change the color off. This to be, um, one of the colors that we have in the figment file, Which is this one. All right. The sort off a dark purple color. I'm just gonna copy that color code. Okay. And I'm gonna come back over here and just based that, and then I'm going to go ahead and add this to the color swatch, and I'm gonna call this level one. All right. This is this is this is that's because we're pretty much calling this level one, all right? And maybe what we can do is for the knave menu for 30 for the knave link. What I can do is add in a sort of a bottom border. So I am going to click on in the border section and click on this button, which is going to add a bottom border. And I'm gonna set a word off one, all right? And that I'm gonna change the color from black to a sort off. Ah, you know, like a light. Or let's actress editor white. And it is the opacity to, like, 12% or something. Yeah, that looks much better. And, ah, that's pretty much how it's gonna look and the contact. But it is gonna be full word, so that looks great. So if you open the sub, this is what we get. Looks good. And we can close this up. All right, let's see for mobile Looks fantastic. Great. Now that another thing that you can do now, you can also choose to open the menu as a drop down or overwrite or over left If you choose over. Right, Onda, we open this up. You can see it comes from the right there a lot of different ways that you can keep this where I prefer to choose a drop down. And if you're looking at another link, you can play around with the easing, right? A couple of features or functionality. So here. But we're gonna keep this simple. So if you check our landscape look, things looks pretty fine. And yeah, that that's looking pretty good. All right, great. So now the only thing we left the studio is to kind of add links to each of these, because anyway, these are links. How how can we are? Thinks we're gonna kind of understand this link settings option that we have here. So as you guys in the next video 10. Adding Links to Link Elements: all right, So there's gonna be a very short video because they're just going to quickly understand how to add links. Now, when you click on a link element and how do you know whether something is link or not is by looking at this link icon. If it has something like this, that means it's a link element. You can apply properties to it. So you can either click on this gear icon really have, like, six properties. All you, you're do you have, um, you know, you can check it out in the elements setting spanning over here. So a couple of things one is obviously each element can have a link to an external website . And you can click on the check box if you want to open it in a new tap. All right, then you've got a page. So if your website has multiple pages or you can do is you can you can kind of link it, do that paid. So in this case, we do not have multiple pages. So what I'm gonna do is I'm gonna leave this as it is. We're gonna be using the next one, which is a section but coming to the speech where we can actually do it. If you select this logo and we can choose the brand element, right, if you select the brand element, we can actually go to the page and in the page. You can choose the homepage. So anybody who taps on who clicks on this robin logo is gonna kind of land on the homepage , and we can make sure to have it only on that top. Let's not open it in a new tab coming back. So here we have something that is a page section. This is something that we will implement a little bit later. But basically what's gonna happen is when I click on the experience section, it's kind off the page is going to scroll to the experience section off the website so we can actually define that. It's gonna be pretty cool. The next one is if you want somebody to kind off, um, milieu. So when you click on this button, it's going to open up the email client off that particular person, and you can have ah, you can. You can enter your immunity and also, you know, at the prefix subject if you want. Next is a phone number, as you can see foreign links phone links, only working devices that can place phone call. So this is something that you can do only on a mobile mobile break point. And the last one is attachment, which means that you can attach any image that you want from the assets panel, and when you click on it, it's going to open up that image. You know, either on a new tab if you click on the button or it's going to open up their that where America's right. So that's really what's it about navigation links? The thing must do it. Any link item is going to have these options or whether use a link block, it's going to have these options, so that's pretty much it. And in the next week, we're going to jump into the heater section and build out the hero section. So I'll see you guys in the next video 11. Building the Hero Section: Alright, guys. So in this video, we're gonna go ahead and build the hero section, which is this section. And before we do that, we always kindof understand how elements are structure and the way they are built. So what we're gonna do is look at how many elements we have. You So little image on the left. We've got to text elements and then we've got this background border decorations or something. Right? So how do we builders? So I created this sort off a simple box model wire frame where we can kind of understand how it works. We're gonna start by creating a section which is the Orange Party, right? Gonna create a big section and then inside that I'm gonna create a rapper. As you can see here, this is our wrapper color on there on the left, we have an image, and on the right, we're gonna create a de block which is going to hold do next elements. So this is how you cannot want toe structure, everything and a lot of components. Now we can see that this text is overlapping the image which which is fine. But this is just to explain how to structure and what components to use. And how does it really look in the back? It right. And the other thing of note written down over here is that the image height is gonna have Ah, height off 45 v hetch on the imagery is going to be 55 www. All right, so we're a little mean. So let's actually jump in the wet floor and then see how this all works. All right, so here, I mean rep low and what to do it again. I'm going to start off by creating a section and make sure you select the body because the section needs to be a child of the body. I'm a press controlled eat and search for section. And that is the element that we were. So we've got a section element. I'm gonna drop that insight. And the first thing you always wanted to is given a class. So I'm gonna call this heat or section. Okay, That's a Now what we want to do is add in a rapper, so I'm gonna create another div block, okay? And this is going to be our wrapper. Okay, You're We already have a class that says Rapper, so we can add that, All right. And if you see or hear that, there's pretty much nothing on the left and you know, the tax or here has expensing off 40 pixels on the right side. So we're gonna do is I'm gonna go to the section because if you look at the knave But we added that in a margin on the Nabaa, which access the section we added 72 because pixels on the left and 72 pixels on the right . I wonder the same thing for this heater section is, but so let me go and grab that here section and for the hero section, I'm going to add a padding off 40 pixels on the right. All right, that's it. Just 40 picks is on the right. Now. The reason we actually currently anything is because the moment we are properties, the kind of collapse because there is no content inside off it, right? So let's actually add some content. So we added the section we added the rapper, and now we have to add these two elements, right? So, ideally you would want to add a de block for this and a deadlock for this, right? But before we do that, we're gonna do something new. And something different one gonna do is I'm gonna go ahead and select the rapper that we have, Okay? And I'm gonna add a combo close. All right. And why am I hearing this comma class? Allow me to explain. So I'm just type in grid, all right? Which now means that any changes I make effect, only this combo plus and everything else remain the same. What I'm going to do is every look, come over here to the display properties, and we've got six display properties, all right? And we were kind of going to understand what these +21 by one. But for now I'm gonna do is I'm gonna click on the 3rd 1 which says Good lets you place items of it in rows and columns. I'm gonna click on that animated. You can see we've got this grid structure that we have. Okay. And we're gonna do is I'm going toe choose and customize the grids off harmony columns and rows. I want obviously I need only one dro, so I'm gonna delete over here by just hovering over here and you can believe. And we need to columns, which is fine. That's what we need. All right, great. Someone go ahead and click on. Done. So now we have sort of this great layer, and all we have to do now is input elements. All right, so we'll start off by creating a de block for the image and a deadlock for the text. Okay, so I'm gonna press control E, and I'm gonna bring in a element caused the block, all right? And what actually happens if you look at the navigation, we've got the heat or section, and then we've got the rapper, which is now in the form of a grid, which was previously a dove block. And now inside that we have this one block. Okay, I'm gonna duplicate this by pressing control, Say country. And what that's going to do is this is going to go into a second cell because this is the second child. And the 1st 1 is going to occupy the first because the first trip, I'm gonna save the 1st 1 and I'm gonna add a class, and I'm gonna call this hero image rapper Okay, Well, we could just call this hero image box. I think that would be a better name. Okay. And for the 2nd 1 I'm gonna leave it as it this and a lot of class later, and I'll tell you why. So let's start with this hero image box. So now that we have created this heater image box, what I'm gonna do is I'm gonna go and grab the hero image, which is over here, okay? And I'm gonna select this, and I'm gonna go ahead and drop that inside. Now, the problem is, it's not gonna drop exactly into the element that we want. So the best way to go is to actually go here into the navigation on. Drop it over there. Okay. Now, it still did not walk quickly pretty well. So we just make sure that we did it the right way. So what I'm gonna do is I'm gonna select this image and put this inside this hero image to block right there. Go Now. This image is quite big and huge, right? So what are you gonna do? One weirdo is the first thing is click on the gear icon and I'm gonna go ahead and don't on this image. It says image is H I D p. I will kick on that. Okay, And nothing changes. And I'll explain what this h I v p I means in the next video. So then you have context. But for now, let's just don't on h I D p I Okay, And that's great. And now we'll do is we'll have this deadlock, and I'm not gonna give a classy yet. I'm going to go. And I didn't do text elements. All right, so one is going to be this heading, and one is gonna be this. So we have a couple of next elements. If you look at the elements panel in typography, we have heading paragraph, text link, text block, block quote, and rich text. So in this case, we're gonna use and 11 quality heading. All right, I'm gonna drag that and drop that insight. And why do we have to use a heading? So the thing with Web sites is that the way they get ranked on Google is through the fact that if your website has words that match the search of description made by the user browsing on Google, then you're upset is going to get ranked up. So how do you kind of define those keywords in a website? And that is by using this element quality heading tax. So I click on this gear icon. I've got six different help heading tags, and these are to be placed based on the level off hierarchy. In this case, we've got Robin Williams, a product designer based in Italy. This is quite big, and this is the most important information on the website. All right, that is the most important in terms of hierarchy. So that's gonna be each one. Okay, So what I'm gonna do is I'm just gonna go ahead and call this H one, all right? Um, or we can just call it Do you know, heading and underscore. Um, and we've got given some values, like 76 picks is so I'm going to say, heading under school 76 pixels. All right. And let's go ahead and actually add these values. So we've got Oh, I forgot to install the phones. I'll do that again. So we've got sen bowled 76 100% line height. Okay, so let's go do that. So we also have this margin on the top. I'm actually going to remove that and said that 20 at the top in the bottom because we don't need that. Um, 76. All right, height is gonna be 100% color is going to be white. Okay? And, uh, I think I'm gonna set this 210%. All right, That should be okay. And it looks good. All after news is gonna copy this. So I'm going to say I am Robin Williams, it product designer based in Italy of it. Now, this looks ready, different than the way we have it. So the first thing you do is gonna set this to 14 40 pixels. So now you can actually see this, and then we're gonna do is I'm gonna select, you know, the grid element, which is the rapper in this case. And if I click on this icon, we can edit the great. What we'll do is first of all, I'm going to remove the column gap and said that zero because we want them to be cut off, touching each other. And that looks pretty good. Now what don't happen here is that this image is actually quite long. All right? This is, like, quite a big if you look at it, it's it's it's crawling a lot. Right? But over here, it's gonna restrict her to Ah, height off 45 v hatch. Okay. And that's something that we can define, right, Because we don't want it to be so huge, and you might have an image that is longer than this, or short of it is. And how do you How are you going to make it work? Right. So what we do is I'm gonna selected the first of all, Let's give this a class, and I'm gonna call the image the hero image, okay? And I'm gonna choose the parent element, which is the hero image box. And I'm going to say I want you to take up a height off 45. We hatch. All right. Now, we could still see that pretty much nothing has happened, and it's aren't making any difference. So, like, so the first thing to do is foster fall against that this back to 14. 40. All right. And then what I'm gonna do is since this is overlapping. What I can do is I can actually select the Dev Block. Okay? Which is over here and in the death block. I'm going to actually now, give it a class and call this hero text block. Okay? And I'm gonna give a negative margin. Surgical off overlaps this one. And how much do we have to give it? I think I'm gonna give it somewhere around 64 pixels. Right. So I'm gonna say margin negative. 64 picks is so now that's kind of overlapping. It's not yet entirely overlapping the image, because image is actually not taking up the entire width. All right, so if if you look at the hero image block all right, you can see that this is how much it's taking up, but the image is not actually taking up that much. Right? So we're gonna do is I'm gonna actually delete the hero image. Let's believe that. And I'm listening the hero image box. And rather than adding an image element, what I'm gonna do is I'm gonna come down to the backgrounds and image ingredient sectional here, and I'm gonna click on the plus and I'm gonna choose choose image and then I'm gonna go and choose my heat or image. So now this acts as a background. Now, the next thing gonna do is I'm gonna set this to cover, and I'm gonna set it toe Thailand none. And also the position of more to center. So now what that's going to do is that's going to go ahead and gonna put the image in the center. Now, you can obviously play around with these values to see what you want, but this is looking pretty good right now. It still does not look perfect. It looks quite big and large over here. But, you know, we're gonna fix that slowly. The next thing to do is let's add in this image. Sorry. Let's add in this text element. So now I'm gonna go ahead and copy this, so I'm gonna create this paragraph 18 pixels, a copy. That And now, Now this important, this information might not be very important because it's low important in terms of hierarchy, you know, if you look at the entire page so I'm going to use an element called as the paragraphs and repressed control deep and search for a paragraph. Okay, and I'm gonna double click and paste that in sight. And we're gonna call this PATA graph underscore 18 pixels. Because this is our paragraph 18 pixels. If you look at the setting, we've got 18 regular and 1 50%. Okay, so I'm gonna go and set the font of color to white. All right, um, eating picks is and 1 50%. Okay, so that's how it's gonna look. And we also have some spacing, you know, below deep hito the heading. So that's around Toledo pixels. So what we do is going to select this hero heading and in the bottom margin. I'm going to say 32 mixers and that looks pretty good. Now, things are still not perfect the way they are supposed to be. So what we'll do now is I'm actually going to go and select, actually, let me put this right way over here, and I'm gonna adding another line, and I'm going to say this section hide is 100 Veatch. Okay, So what does this mean again? Let's have a look. I'm gonna go to these section, all right? And in the hero section, I'm going to say, take up a height off 100. We hitch. Okay, so now if you can see that I'm able to scroll because it's taking up 100 off the view port height. Where does that mean? Hold on. Let me kind of explain this one by one. Now, the only thing happened is that the height changed. But, you know, this is still at the top, you know, it's not in the center. So what I can do is if I select the rapper, All right. And what I'm gonna do now is I don't want to make any changes to this hero grid rapper. So I'm going to go and click on this which says, inheriting three selectors, and I'm gonna choose the lower level one, So I'm gonna click on only the rapper. So now any changes Emmick is affecting only the rapper. And here in the height, I'm going to see why don't you take up 100% right? 100% off the parent and 100% of the parent is 100 v hatch. Now, the reason I'm not saying 100 V hedges over here is because we're gonna be using this rapper multiple times and I don't want everything to be 100. The hedge, All right. Only in this case, I wanted to be 100 v hedge, so I'm actually applying it. Toe repair and element, which is this section. Okay, so here I'm going to say 100%. And now that's going to you can see that the rapper also is taking up, you know, the entire space. But if you see things are not aligning properly again, we need them to be in the center. Right? So why are they not in the center? That's because we're fully automated, pushes everything towards the top and the top left side. And to think that we would have to manually make some changes. So the first gonna do is here in this deadlock, which we're calling the heat or extra block. When you create a great when you create a great you can actually define how the child elements will look. So this is a great child, right? So I'm going to say a line center for this and we do the same thing over here, which is hero Image Block is a great child, all right, because it's a child off the grid, okay? And I want to say alliance center. So now this is pretty much how it looks. All right, But if you look at it, it really does not, you know, look exactly like this. So I can do is here for this hero image box, rather than setting a height of 45 which I can change it to something bigger. So something like 65 years all right, on that looks much better. All right. And now this value can be changed. So from 45 you could make it 65 years, depending on how you want it to be. Now, let me explain what's actually happening. If I go and click on this published project and I can choose published to select the domains, I can click on the actual website and see how that looks. All right, So now this is how it kind of looks all right. And we've got this section taking up 100% off the view port height. And in my case, my view port height is since I'm on a windows display, it's 10 IGP. But how do you How do you check it for other break points, right? So you What you can do is you can right click. And she was inspect, okay? And I were gonna get this sort of thing. And what to conceal here is, as I increase the height, you can see that the height off this is also changing because we defined a property saying 100 v hedge, which means it's staying of 100% off the view board height. All right? And we see that we have this so much gap and space on the top. So why is that happening? That's because, first of all, I think the hero image height is too small. So maybe we could make this seven TV hedge and also the section rather than saying 100 we hit. That's actually really use that down to 90 v hedge, right? And that brings it a little bit closer to how it looks in our design. I think we might have to do a lot more so rather than saying 70 we head, I'm gonna go for 85 we hitch and that this looks little better. Maybe I think a TV hedge would be a good job, so I'm gonna go ahead and set this image height to be a T V hatch. Okay, that looks good. And this looks pretty much closer. Do what we have. We can actually click on Publish the selected domains again. That's gonna publish it to our sub domain, which is for free. And I can go ahead and just reload this and you can see it looks a little bit better. Like I would say, quite much better if he said this to 14. 40 fixes. Um and, you know, let's set this back to 25%. This is how it's gonna look. All right? 14 40 pictures. This is looking pretty good. All right, fine. Now, the last thing we want to do is to add this, you know, background element. All right? And I'm gonna add a couple of properties to that here as well. So, you know, just create a copy, okay? And I'm gonna call this hito BG Oh, we've got to duplicating an elite one hero BG and wondered who is for the height. All right, I'm going to say 100 v hatch. Okay, maybe we'll change that a little bit later, but we're not very sure. And for the image worth armed for the world, I'm going to say 65%. Okay, which is 65 VW and we'll remove these section height. Okay, this is what we're gonna do. So let's go ahead and do that. So now this itself is an element. It's it's a de block because it's just a random shape. So what we're gonna do is I'm gonna go ahead and make sure that we are inside the hero section, all right? And I'm gonna press control e anyone. Adam ate the block. Now this deadlock, I'm going to call it he Keitel BG Okay. And I'm gonna added this color that we have. All right? We already have added that color. So I'm gonna go to the heater BG and in the Grady in settings I'm gonna choose scholar. And here in the color settings would choose this one, which is our level one. And because that looks pretty good. Great. Now, how are we kind off make this fit to the top, right? How do we do that now? Here we define 19 900 by 900 which which, which looks ok in design. But it might, but we actually wanted to follow these properties, which is 100 v. Hatch and 65 VW. So I'm gonna start off by seeing Tito. Why don't you take up 100% off the view port height and I'm gonna say 100 V hatch, Okay. And now that's going to take up 100% of the view port height and for the But I'm going to say 65 we w right, And that is 65%. Now, this actually needs to go grow on the top. Now, here is a new functionality that we're gonna understand about. We're gonna understand something about absolute and relative. Now, when we have elements that are overlapping each other, like as you can see or hear, this is on top. This is at the bottom, but then we have the text and image on top. But you know, this element is at the bottom. So we have layers, hardly set layers in websites. So we're gonna do is going to like this hero, B g, and I'm gonna come down here to position, okay? And I'm gonna choose position. Absolute. Okay, now, nothing happened, but if I actually hover on it. You can see there's some text that says absolute positions an element relative to the closest position parent, do the body if no parent is selected, So what does this all mean? So if I go and choose one of these presets and I'm going to say this place, that which is the top, right, it's going to go and hang itself to the top right side off the entire website, which is the entire body in this case. OK, but the problem is, you can see that it's overlapping everything. So what I'm going to do is here we have something called Z index, which kind of defines a number, and that number is the level off hierarchy are overlapping or disease space. And we'll go ahead and just said this to minus one. Okay, so now that I've senator minus one, it's behind everything else because everything starts that level zero. I am going one level back and setting it to minus one. Okay, great. Now, one more thing that I would want to explain is about here. The position is set to absolute and it is relative to the body, which means it is being positioned to the top right off the body. All right, now let's see what happens when I change it. Does something else. What? I mean the same is that here. If I come to the hero section, which is the parent, and if I go ahead and said the position off this to relative, you can see that this box All right, which is this hero B g is an absolute position which is positioned to the top right off the hero section. Okay, now, that is the difference between relative and absolute, and you want to go ahead. And if I change this to top left, it is going to go to the top left off the hero section because right now it is relative to the hero section. So if I want to remove that and make it default, what I can do is I can come back to the hero section, which is the parent, and in repair it, I'm gonna set that static keeper default. So now it. So now this element, which is the BG hero BG is relative to the body and we want it to be to be to the top right . So I'm gonna said that the top right. And now let's go ahead and quickly give this a publish and see how that looks. All right, let's go ahead and close this and refresh. All right. I just reloaded. And this is how it looks on. This is looking pretty good. Now, you can also see here that you know the space over here. It's quite large. Play around with this values a little bit more so here we said, the height of 100 v hedge or I can do is probably said this to 100 10 v h. All right, maybe that looks good. Let's give it a shot. Let's see how that looks. We can select the background image that we have. Ah, hero BGE. And here in the Heideman said that 110 v hitch and that gives a little bit more space. I think this looks pretty good. It looks fair enough. Um, so let's quickly take a look. All right? And let's reload this. All right? And we go, Yeah, it looks much better. We've got this extra space at the bottom, all right? You can also see that this text over here is kind off, you know, moving away to the right side. Eso what we can do You no good way to fix that is we can actually just, uh, section 40 and 40. And what we can do is we can actually break this into another line. All right, So now if he said this do in 1920 All right, you can see that it kind of breaks into another line we could do. The same thing are here as well, you could say, based in Italy in a different line. All right, so, you know, it kind of looks better. Great. Now, one last thing we want to do is if you see or hear the text that says based in Italy is kind of in a lower opacity. So how do we go ahead and do that now? Obviously, you can go ahead and create another text element itself and give it a different class and change the color, but we're gonna make this a little bit simpler. So what we do is I'm gonna come back here to 14. 40 and I will go ahead and select this whole section that says based in Italy. And when we select that, we get these five options, which is bold italics, link span and clear formatting. What we want to do is choose rapid with span. Okay? And once you choose the rapid span, let's see how it looks in the navigation. So we started off with the heat. Oh, section. And then we had a hero rapper. Alright, which was our grid? And inside that on the left, we had the hero image box. And on the right side, we have this de block, which is called heat or text block. I'm not quite sure why it's not updating that name over here. Ah, good. He toe text block. All right, anyway. And inside that hero text block, we've got one heading, which is the main one, and then we've got a paragraph. Now, the heading, which is a text element, has another child, which is Carla's text span. All right, now to this, I'm gonna give a class, and since this is actually 50% capacity, I'm we'll just call this white fifth underscored 50. Okay? And then I'm gonna go and radios the font off this to font color of this to 50% capacity, so it just changes the font color. Now, everything else remains the same. If I increase this or decreases to 24 you can see that it also decreases to 24. But the only thing is that because we added a different class to this, all the properties remain the same except the font color. All right, so that's pretty much how we do it. Great. So in the next video, we're gonna go ahead and make this a responsive for mobile break point. Another break points, and it's gonna be pretty fun. So I'll see you guys in the next video. 12. Making the Hero Section Responsive: alright guys. So it's now time to make this responsive for the break points. So let's see how to do that. If you look at the design in fig mob, I have actually made you know, the break point only from Mobile, right, because pretty much mobile landscape on mobile portrait are similar and desktop and tablet are quite similar. So that's why I decided to make only two and not more than two. So let's go to do that. So let's actually jump into the tablet break point and we see we've got something that looks like this and if you play around with it, it kind of looks like this. And honestly, I think this looks OK. Doesn't look all that bad, but one thing we could do, which I would probably you know, such is doing is kind of radios the phone size off this a little bit. All right, so what we can do is probably just insert making the 76. That's what we reduces down to something like 56. All right? And that should, you know, look much better. Maybe we could also go and radios down the spacing. So from 40 we could set that to be 32 on the left and 32 on the right so we could do the same thing over here in the section here as well. Front of radios. That 32 maybe it's gonna make a difference. Maybe not, but I think this is looking pretty Okay, Um and I mean, it looks much better, you know, if we look it on a wide display, but, you know, the short ones also, you know, look pretty fine, in my opinion. All right, Now, let's go to mobile landscape. All right? So, immobile landscape, this is what we have. And what I've done here is actually changed the entire layout off this to look different, right? So we've got the image and top, and we've got some information here at the bottom. So the fertility does not change the font size of this to 32 someone to select the heading . And I'm gonna set that to 32. Okay. And that should be pretty good on even the distances. 16. I'm wondering, is that from 32 to 60. Great. Now, the next thing that I'm gonna do is I'm gonna actually select the background BG the hero BG element that we have, which is this OK, and what I'm gonna do is I'm actually going toe hide this. All right? I don't want to see this on the landscape break point. So to do that, what I can do that can click on this icon which is hiding the elements which display set to none. All right. And when I do that, that's totally gone. But when I come back to tablet break point, it's still there, and we come to desktop break point. That's still there, right? So that make sure that, you know things are working Fine. So here, what I'm gonna do is I'm gonna go and now select the hero or rapper, and now we're going to change the structure off the grid. Okay, so what we'll do is I'm actually going to go and click on edit. All right? And now enter off making this two columns and one drop. We're going to make it one column and kudos, all right. And the second automatically gets auto generated, so that's fine. And we click on done. We also have the spacing on the left, which we do not really need. So I'm gonna set that toe be zero, okay? And this is pretty much looking how we want. Okay? And the next thing is this element. Now this I've given a height off 288. Now, what we can do is we can give it I'm height off 50 picks, 50 Veatch or for TV Hitch. We can actually define that. So I'm going to go to the heater image here. We had given 80. I'm probably that is gonna go already. Is that to like 50? Um, or maybe even 45. I don't know. Whatever works, all right. Looking good. The next thing that we're gonna do is for the hero section. We said nine TV Hitch. I'm actually going to remove that and said that to auto because I don't want it to take 90 v hedge. I'm gonna set that toe auto, and that looks much better. Okay, then. The next thing here is that we have a little bit of spacing on the left and the right, all right? And the spacing is 20 picks is so I'm going to go and select the death block, which is the heat or text block. And here we had given a margin off negative. 64. I'm gonna said that to be a Zito, okay? We wanted to be normal. And next, I'm gonna give an inner padding toe this off 20 pixels, so it pushes things, you know, like, so. All right, there we go. What's next? So we have a distance of 48 pixels on the top and 48 pixels on the bottom. So what I'm gonna do is if you look at the grid. All right, we've got this bottom throw off 16 fixes. I'm gonna go ahead and set that to be zero, because I want them to be touching each other. I don't want any gap. And to give that 48 pixels gap, I'm going to go select. This did block, and on the top pounding, I'm gonna say 48 the bottom padding, I'm gonna say 48 all right? And the next thing is, we also have this background image, background color, so I'm gonna go to the background section and just Adam, that one color that we had rituals level one, all right. And this is pretty much how it's gonna look, Let's go back to tablet to see Everything is fine and it looks perfectly fine. There's nothing wrong with the same thing over here, but for landscape, it looks much different, all right. And if I want, I can go ahead and showing this to see how it looks on other break points, which which looks fine. All right. And now let's go to mobile. And it looks pretty good on mobile as well. It adapts perfectly and looks fantastic. So we descended on a 3 60 resolution screen. So this is pretty much how it's gonna look. And I think it looks pretty great. All right, let's check if everything is fine. We click on the drop down, we get this drop down, just school, and, yeah, they're looking pretty good. All right, so that's very much about how you make the hero section responsive. If you guys did get confused, I recommend you watch the video again and I see you guys in the next video 13. Building the Experience Section: Alright, guys. So in this video, we're gonna go ahead and create the next section. This should be very simple and very straightforward to do. It's not complicated at all. And I'm going ahead and just creator, like a wire frame to kind of explain how this works. So obviously we start off with the section rich, takes up the entire space, and then we have a container inside that's going to follow the same properties as this Where we have either 40 or 72 picks is patting on either side and they're gonna margin off 1920 pixels, the same thing that redid for the naff but and the heater section as well. And then we've got two sets of elements. One is the top section, and then we've got one is the bottom section. So I'm gonna create a de block for the top on gonna have to text elements. Let me actually just duplicate this right now, so there's gonna be our text element number one and is gonna be our text element number two and makes quite big. So this how it's gonna look and then we have one for the bottom and this is going to be This gonna hold three they've block. So the block one block to block three. So this is basically the structure of how this is gonna work. So let's go ahead and do that. So here we are in Buffalo and Leicester by creating a new section. So every time you want to create a new section, select the body element and then press control e and at a section So now that the section is a child of the body so you can actually see now we have the nab our we've got the hero section and then we've got this section. So for this section, Ramadan, go ahead and call this work section car. Let's say expedient section, okay, that makes more sense. Expedient section uh, on God's call, this section first of all, the 14 gonna do is gonna add in this spacing on the left and right, which is around 72 pixels on the left and 72 pixels on the right. I'm gonna go to the section and say, padding 72 fixes and padding 72 pictures. All right, there we go. The next thing that I'm going to do is to adding a are rapper somewhere at in new develop, and we'll call this rapper, alright. And just to make sure that a rapper settings we have 100% with and a maximum with off 1920 pixels, I'm gonna go ahead and said this to 14. 40 All right? And now we also want to add this margin on the top of the bottom. So 1 20 pixels on the top and around 1 20 pixels on the bottom so I can go and select the section, All right? And in the section, I'm gonna say, padding 1 20% on the top and bottom 1 20%. All right, so it kind of looks like this, right? This looks good. And now we have the inside. We have the rapper. Okay, as you can see, that apple is sitting in the middle off, you know, the 1 20 on top and 1 21 bottom. All right. And let's all by creating our first deaf block, right, And this de block is going to hold our to text elements, so I'm gonna start by creating a deadlock, right? And I'm just gonna not name it at the moment because I want to start giving a new type off naming structure. Two elements. So we look at how to do that. The 40 minute was inside. This day Block. I'm gonna create a text block. This is a new element that we're adding. All right, Now, Text Block is something that I use when it's not a paragraph, but it is just a single line of text. And here it's work experience. I'm gonna copy that. And I'm gonna come over here and based it. Now, let's go ahead and give this a close. So this is this is overlying 16 pixels so we can see the properties. 16 pictures, 1 50% boy. All right, so I'm gonna go ahead and call this overline underscore 16 fixes. All right. And let's go ahead into the properties so the size is going to be 16. Height is going to be 150%. The fund rate is going to be bold, and the color is over here. Is it? The color here says light grip on the light green? Is this new color courts? I'm gonna copy that. All right. And, um, I'm gonna come over here to the color, and I'm gonna piece that in. All right. And we can also add this as a color swatch. So we have this light Great. You know, you know, just click on create and has been pretty good. Okay, so now I feel see or hear that this overlying 16 pixels is kind of taking of these entire great right, But that's not what we want. What we can do is if we go here to the display properties, we have something called in line block, and we have something colors in line. I will click on in line, blocked, and all that's going to is that's gonna kind off restrict this to be to take up only the space off the element Already the space, the length off the text in this case. Okay. And now, introducing, You know, add in this next section. Now, this is going to be a heading because this is the second most important information in terms of hierarchy. This was each one. This would be hte too. So I'm gonna press control, eat and get a heading, okay? And I'm gonna click over here, which is going to make it and hedge to. And this again, I'm gonna go ahead and at a class and call this heading. Um, underscore. There's gonna be 55 picks is So let's go call this heading. Underscore 55 fixes. Okay, Now we've got this top and bottom padding. I want only the bottom padding, which is 40. I do not want the top padding. Okay, Now that that's going to mean that this is going to stick together. So rather, I'm going to add the bottom padding margin to this, which is eight pixels. So we come here and say Margin it. Okay, so now that gives that spacing. And let's go ahead and copy this information, this text and base that we're here and let's go ahead and see the settings. So we have got 50. We've got 55 pixels and board. That's very much right. So let's go ahead and set the font size to 55. Height is going to be 100% and we could go ahead and set the foreign toe color up to be white. Right? That's full. Think Great. Now what we want to do is you can see here that this is kind of restricted to a certain limit. And I'm gonna actually go ahead and grab this information and make a copy. I'm gonna call this tighter with all right, and I'm gonna say worth to be 60%. Okay, So what I mean, is that this text. Okay, so now I'm gonna go ahead and said this to be in line block, which kind of means that it takes up the entire space and the read of fixed. This is we're gonna use flex. All right, So what is flex? So if I select the deadlock, All right. And what I wonder going to do is I'm gonna click on this second display option that says flex. And when I click on that, something happens. All right, we've got this new set of properties and flex allows you to organize elements in any way that you want very flexibly. So let's actually look at 33 property that we have with your direction. We've got alignment and we've got justified, or I'm going to do is I'm gonna say I want the element, Toby one below the other. And one thing you need to notice here is that the property off. Assigning two flasks needs to be to the parent element. All right. And as you can see, De Block here is the parent element, and we've got to text elements inside. When you flex the parent, you can then reorder the arrangement off the Children, all right? And that's what I'm gonna do. I want the direction of the alignment, all right, to be vertical because I want elements to be one below the other. So I'm gonna take on vertical, okay? And I've got a couple of setting. We've got ah, line left. Ah, line center aligned, right. If I click on a line center, this is how it's gonna look for click on a line drive. This is how it's gonna look if I choose space between this, how it's gonna look. All right, So what I'm gonna do is I'm going to the one that says a line left or right, because we kind of want elements to be aligned to the left. And also, we can say, justified to the top, like you can choose, justify in the centre, justify the bottom. In this case, it's really does not matter because there is no space enough for it to more. So we're just gonna leave it to justify top and hear. What I'm gonna do is I'm gonna give this door block if a new class and I'm gonna call this flex vertical, all right? And I'm gonna see underscore left and underscore Top. All right, So this is the class that I'm gonna give now is gonna happen. Is every time I want to flex elements in this certain way, I can just apply this class that we have and that makes it easy for organization. When you're building a website, we actually have this bottom off value off 40 that I give Mexico to remove that for now. Right, because this heading might not always have 40 pixels spacing between other elements on which is gonna said that zero for now. All right. And now the problem here is that you can see that here the with is actually 60% off the entire work that we have. So what we do is going to select this heading 55 fixes and in the work, I'm going to say 60%. Okay, so now it won't happen. It's going to go ahead and restricted to 60% off the View port with All right, So if I said this to 12 40 it's going to be 60% of that. And if he said this to a smaller number, let's say 1100 it's going to be 60% of that. They said this to 1920. It's gonna be 60% of that now. Obviously, this does look a little weird because on 1920 it's taking up 60% but it's not looking good . So what we can do is, you know, rather than having this to be 61st person, let's actually click on this and reset. What we can do is actually weaken. Break the line right over here and we can get rid off this. So let's go ahead. And, uh but I say cos I have look, I can remove the line for and put in a separate line. Okay, this looks much better now, I think for the heading, I would want to add a little bit off Heizo Nets 110%. Sometimes the line height in Web development works at liberty than in Fig Marceau on fig. My If it looks fine. We might want to increase it a little bit over here. Great. Now you can see that we have a problem now in this experience section, even though we added a top parting off 1 20 All right, it's are actually starting from the end off this line, because over here it's actually starting. This section is starting from the end of this, but here it's not. And the reason is because this body BG that we creator is actually behind everything else. It's not affecting the spacing between the expedient section on the heat. Oh, section the heater section and experience sections are, you know, close together. They're touching each other and this body background that we creator is not having any effect. So the only way to fix that is we can actually click on this on it and hold or to see the distance. And that is around 245 picks is because this section is kind of ending over here. All right, so we can actually select this and rather than 1 20 maybe we could say 240. I think that's probably a good number or 200 we might not know the exact size because of the fact that this section is based on 90% view port, Right? And you know, that differs from each break point do the design because we have designed it at 14. 40. So what I can do is let's like, the experience section and give it a number off, Let's say, 265 and I think that looks off fairly good. So let's set this back to 14. 40 and Yep, that looks pretty good. All right. Okay, So the next step is to go ahead and create Thies second day block and inside that we're gonna have three elements. So what we do is I'm gonna go ahead and make sure that we have selected the rapper. I'm gonna press controlled eat, and I'm gonna say the block. And this time I'm actually going to get a grid element. So I'm gonna just directly get a great okay and let's define So we want three columns and wonder. Oh, so remove andro and let our three columns We've got three columns. Fantastic. And we can also see that here that week added a grid search click on the frame and, you know, toggle look great on you can see that we have. Ah, great spacing off 24 pixels. Right. So we want to make sure that we add that. So I'm gonna go ahead and in the column gap. I'm gonna say 24 picks is and that should be good. Now, this guy is touching the top section, so I'm going to add a top margin off 40. And here in this great. Now, we might not be reusing the scared my deeper times, so we can just give it a class, and we can call this experience great. Okay. And good. So now all we have to do is we have to Adam it developed for each box and then start adding the elements inside. So I'm gonna create a block, Okay. And here inside this de block, I'm gonna call this. We can just give it a different name later. All right? I'm gonna start up by adding this one. Now, this is again not important for hierarchy, but this is just sorrowful label, so I'm going to add in a text block, all right? And I'm gonna call this number okay. And let's see the properties. Its 117 and 1 20% line height. So I'm just gonna double click on this. Change this 201 Alright. And here in the properties, the size is going to be 117 The line height is going to be 1 20%. All right, are You know, we could just said this to 100%. In this case, it should be fine. And we could probably said this too bold. All right, are I think it's regular. So let's stick to regular. So I'm gonna go ahead and make this a regular, and the color is going to be our light degree. Right? Great. The next thing is, we have this. Now, this is going to be our h three, right? Because we have each one h two and it's gonna be on Eighth Street. All right, so I'm gonna add in a new heading element, okay? And here in the heading element, I'm going to say I'm actually gonna go ahead and copy this. All right? And paste. And let's make sure that this is an each three, okay? And I'm gonna see heading underscore And this is 24 picks of rights or 24 bold. Okay, so this is going to be heading underscored 24 fixes, and that should be good. So let's go ahead and change the size to 24 which already is line hide. Weaken said that do. Maybe 1 20% really should not matter, because it's just one line and the color is going to be white. And yet that looks pretty good. Now, if you go ahead and select the number and radios that to be in line block, it looks fine. All right, are we could leave it to block in this case. Really Does not matter. Okay. And now for this to block, let's go ahead and give it a class, and we can call this experience block, okay? And now we're gonna go ahead, and we have a lot of spacing here at the top in the bottom. So this is First of all, we have no spacing. And on the bottom, we have, like, 16 pixels. So over here, what I'm gonna do is I'm gonna radios this from 22 b zero. All right? And maybe we could get a little bit, even though it looks a little bit different. And the design we could probably add in eight pixels on the top. On the bottom, you can see 16 pictures. Okay, I think I'm gonna do is I'm going to remove this margin on the top Century Said that And for the number, I'm gonna give it a bottom margin off it. I think that should book. And for this gonna set this back to CEO. Okay, this looks much better. And now we're gonna add in a paragraph and this is 16. Fixes some ardent in new paragraph. Okay? And copy this and paste. Now, do we already have a paragraph 16? Fixes? No, we don't have. We have an 18 pixel paragraph. So what we do is insure your new trick. I'm gonna actually apply this 18 pixel paragraph, okay? And then I'm actually going to come here on this drop down. I'm gonna choose duplicate class. So now it makes a copy off that class, and it has the exact same properties, but a different name, all right. And then I'm actually going to go ahead and rename this to 16 picks is and all the properties are already there. So it just saves me a couple of clicks, and I can go and set the bottoms margin to zero. And also, I can change the font size to 18 to 16. All right, that looks pretty good. Now, we also have the word Google, which is in green. So how do we do that? Like I mentioned that we change the color over here by using a rap span. We can do the same thing over here, someone or double click on Google. Select that change to span. And we can select this. Apply a class coalesce green, and we can apply a simple green color that we have. So gonna copy this color cord, All right. And I'm gonna come over here and just change the color from this to be green. And, you know, we can add that as a swatch if we weren't. And it looks pretty good. Great. Now what we can do is we can select this experience block and I will press control C control V and control we to paste it two times. And that's what we're gonna have. And what I was going to select this and said this to to and select this and change this to three. And we can go and quickly. Go ahead. Copy these elements. All right, beast and ah, Copy Beast and copy Beast and copy and pieced. Wait. But the problem here is that you know, we have applied a different class tickets. So if you look at the navigation, we kind of see that things are a little messed up. So what I'm gonna do is I'm actually going to go ahead and delete this and delete this. And we can select this heading 24 that we creator and waken pace that over here. So we don't have any confusion, and then we can just go ahead and change this to prod duct designer. And now here we can call here and we can say graphic designer, okay. And this we can change our to dribble. And here we can change this to B. Facebook. Okay, Now, the next year or two is here. We said green, right? So rather than seeing green, we can apply this new color court. So I'm gonna copy this color cord. All right? And I'm going to remove this green tag. I'm gonna call this blue, and I'm gonna come here to the color. And at that blue collar animals do the same thing over here for dribble. I'm going to delete that class, and I want to say I think, okay, And one copy this pink color core that we have. And I'm gonna come here to the color and change that pink and also maybe at a swatch. But I don't think we'll be using these colors against so we can leave it as it is. So now that's pretty much how it looks. Okay, The next thing that I want to do is if you see or hear, even though the distances 24 I have added a little bit off spacing over here, which is off 48 fixes, All right? And that is something that I did intentionally. Because if I push it over to the right, you know, it looks a little weird because there is very less distance. So I intentionally added that 48 pixels. So I'm gonna select this experience, block that we creator, and I'm gonna go ahead to the biting and said I almost 40 it. So what? That's going to lose that's going to go ahead and our that 48 pixel pounding. And that's going to apply to all the other t as other two as well because they have the same class that says Experience Block. So 48 0 here as well And this is looking pretty good. This is exactly kind of what we had in mind. Ah, weaken, want think we can go to 1920 pixels and see how that looks on and this looks pretty good. Now in the next video, we'll go ahead and make this responsive, so I'll see you guys in the next video. 14. Making the Experience Section Responsive: all right. So there should be a fairly simple video and a very quick radio way. We're just gonna make this responsive, So let's see how to do that. Let's like to go to the tablet break point and see what What's happening? Mini tablet, Brick Boynes. Things look OK. They seem fine. But the problem is we can see that. You know, the spacing is often it looked. Doesn't look perfect. So we fix this now. What we did here was we broke this line over here, right? So we moved the word far in the past in a second line. And that's the reason is that when this is shrinking, you know, since for in the past is already on a second line, we have this unnecessary space. So how do we go about fixing this to make it look good? Now, the first thing that you tried was to actually add a fixed worth off 60 v hatch or something other would rather what we can do is let's actually go ahead and, you know, make sure that this is in one line, and to make this a bit better, we can actually go. And in the figment file. You can actually define a certain value. So I've defined value off 778 fixes. I can round that off 7 80 All right? And we can actually define a worth off 7 80 pixels like a maximum worth off. 7 80 picks is So now what's gonna happen is that if I go tablet break point, it's going to be 7 80 picks is The problem is you can see that I'm able to kind of scroll to the left because off this so what we could what we should do is not set it to 70 fixes. We're gonna set a worth off 100% and a maximum worth off. 7 80 picks is all right. So now the maximum it is gonna be 7 80 pixels, all right, but it's going to be restricted to 100% off the space. And over here, you can see that, you know, the space is a bit too much. So from 70 to Mexico, bring that down to something like 40 on the left and 40 on the right. And also, the space on top is also quite too much somewhere. Radios that down to a little bit smaller. Say something like 150. That looks pretty good. And the next thing here is that we added this inner padding off 40 It, I would say Just make it zero, because it should be fine. And that's also looking pretty good. Doesn't look really that bad. And now this is the smallest coincides with the scale of it, you look even better. So yeah, I think what we can do is instead off radiated completely. Maybe we could give it a small value of 16 picks is on DA. Yeah, I think that should be really good, Right? Looks pretty good. Now let's go to the mobile landscape in the mobile landscape. I'm gonna go for a completely different approach. First of all, this spacing that we have on the top in the bottom is going to be different, and that is actually 64 pixels. So that is the margin or departing that we will be using all across one said the top to 64 the bottom also to 64. And as you can see on the sides, we have set it to 20. So I'm gonna set this to be 20 and the windy. And the next thing here is that this foreign size also is to be reduced to 32 pixels. So I'm gonna select this. This is going to become from 55 radios. This to 32 picks is all right. That looks pretty good. And now for this grid, I don't want this to be one beside the other. I want them to be one below the other, so I'm actually going to go to remove the columns, all right? And that automatically creates automatic grids for us. All right, so it kind of looks like this, and then we're gonna do is we're gonna come over here and this spacing, we're gonna increase that to 40. We can see that the spacing or hear this 40. So the Ro Ro Gap is going to be 40 pixels, and this looks much better. Let's go to the mobile portrait view, and let's set this to 3 60 All right? And I think this looks pretty good. Kind of liking it. Yeah, it's interesting. Let's check it out. And yet, this looks This looks pretty good. And I think another thing that we can do is we added this sort of a padding on the left off 16 mixes. I kind of already is that 20 cause I wanted to take over the entire space. All right, so I think this looks pretty good, and we're here as well. What we can do is, um yeah, we could so that zero gets carried photo here, and I think I think this looks really good. All right. Um, yeah, I think this looks really interesting. So that's pretty much it for this video based. And I'll see you guys in the next one. 15. Building the Middle Section: right in this video. We're gonna go ahead and create this section, and that is gonna be very simple and straight forward and ah, a couple off spat omitted that have defined. And these are designed decision that I've taken. But I'm saying I want the height off this to be 600 pixels on. I want the with off each element to take up 50% you know, very simple. So let's go to read, flow and do this. It's gonna start off by clicking on the body and create a new section and call this section and we've got a section over here, and what we do is gonna call this mid section. And as I mentioned, I want the height of this to be 600 pixels, so I'm gonna give it a height off 600 fixes. All right, so we've got a big height. Next thing, I just want to clear the rappers on a press controlled eat and adding a hoops and and obviously the next episode at a rapid someone press control e and 1/2 block and added, The rapper class that we have created, so maximum of 1920 height is 100% And with those 100 person. Fantastic. All right. Now, we also want to add a great over here. Okay? Now, the thing is, if you go now, if you remember, we added a comma class call is great. And what we can do is apply the same one, all right. And even the number of columns and the rules and everything that we want is pretty much the same. So this is perfect, right? So we're gonna do now is I'm gonna add in a deadlock. All right? One for this one. And the other one is going to be for this one, which is gonna be there for the images. So for the 1st 1 the first of block, I'm gonna give it a class a little bit later because I want toe apply a flex property to this. But first we're gonna do is I'm gonna add in a background color. So I'm gonna go ahead and add a color, which is this color that we have the speech color with a copy. That All right, on my face that over you? Fantastic. Next, we're gonna add in three elements. 12 and three the 1st 1 is gonna be our H two, which is same in terms of hierarchy. Has this during a press controlled eat, we're gonna add in heading. We're gonna change this to age two, all right? And then we're gonna add in the heading that we class every creator, which is heading 55 pictures. All right, Now, the problem is that because this was used over here, I mean, over here, where it was on a black background and the textures right, that same thing is happening over here because they have the same class. So what we can do is we can add a combo class, and we can just call this black, all right? And only the only thing to do is we can change the color off this, and we'll choose the level one color that we creator. And now both of them have the same properties. But this has an extra comma class of black, which is why it's in black. So just go ahead and copy this philosophy and values Go ahead and based that. All right. The next thing is, we have this text, this paragraph, so I'm gonna go ahead and actually copy the same one because it's pretty much the same thing. Will copy that. And paste over here with a problem here is that this is a different color. It's a dark gray color. And again, what we would want to do is going to sell it this and add a new combat class. Call it dark, great, or it and we'll copy the skeletal that we have. Copy. And we're gonna come down here to the color and a paste. All right, so now we can also add this watch. I think I've already added that, so we can add that. So we've got this over here, and this still remains white. Fantastic. Um, I'm gonna copy this text on base. That insight. Now, the thing is, we have this spacing, which is off 24 picks is now. Either we can add a bottom margin to this, or we can add a top padding or a top margin to this. What I wanna do is I want to add it to the heading itself. So I'm gonna go and add in new combat class. We can add 1/3 comma class and we can call this 24 Fixer dump. Okay, sorry. 24 pixel border. And in the bottom, I'm gonna add in new value off 24. So now this newly of 24 applies to only 24 pixel bottom. Dicle a black is only for this comeback. Plus and everything else is to heading 55 fixes, right? Great. Now I'm gonna go ahead and selected this and then we're gonna add in a speak. We're gonna add some spotting inside because, as you can see, it's 1 20 pixels from the top and 72 pictures from the left and right, So let's go ahead and do that. I'm gonna go ahead and in the margin in the padding for this did block. I'm gonna go ahead and say 1 20 on the top, 1 20 on the bottom, 72 pixels on the left, and so you're pixels on the right. Right? I was in pretty good. Now we have this element, right? And this is gonna be a very cool element because we're gonna This is gonna be a very nice, beautiful animator element. So what we're gonna do is we're gonna go ahead and create a text link, OK? So we're press control and create a text to link because we want this to be animator on this And because we want this to be a link which you can, which can be clicked on so basically can't enter. And that's gonna add this small text link, OK, and I'm gonna call this animated link bottom. Okay, Now let's go ahead and add the settings. We got 16 picks is, um you know, and black color and you know, the regular aesthetics. So I'm gonna go and select this text link. I want to set the font size to 60. Uh, I'm gonna set the height to something interesting, but let me kind of explain what I'm gonna do with her. We want the color to be this level one black color, which is kind of like a proper And since it's a link where for automatic adds this underline. But we can remove that by coming here in the decoration settings on. We can set that to none. All right. Looks pretty good. Fine. And the next thing is that we want to add this sort of an underlay. So what I'm gonna do is they want to set the height to a big number. All right, so let's say something like, you know, 40 right? And also, I'm gonna come here or here to the top and in the display options. I'm gonna choose this one that says in line block, right, block value. And maybe I could go ahead and said this to even something like 50. Okay. And then I can come to the bardos section and make sure you check the bottom border first. Okay? And then you add in a color value off the one that we want. All right. And it order are automatically sets of it to one. So this is pretty much what we have now, maybe 50 is too much, so I can probably reduce that to 40. I think 40 is a pretty decent number, all right. And we can go ahead and call this. What do you want? We can call this ah, more about you. And the best part is that the line changes according to the height off the according to the with off the text. Now, the next thing is that this is actually not black. It's a dark grey. So I want to quickly change the color off that to level one to dock, grape. All right, that is fantastic. Now this button is actually towards the bottom. Right now, the ideal way is to actually select this element and, you know, move it. 133 pixels below at the bottom. Margin on that comes in here. But you want to do something different, Okay? Now, the reason is, because if I go ahead and change this to probably two lines, I still want this to be down below over here. All right? I want this to be touching the bottom edge. Now, when I say about image, I'm saying, after we added this 1 20 pixels off margin. As you can see, we've added 1 20 pixel margin on the bottom. I wanted to stick to that bottom. All right, So how do we do that? Quite simple. What we gonna do is gonna go ahead and create select this deadlock, and I want to add a flex property. Okay. Now, obviously, we do not want things to be horizontal. We want them to be vertical. Someone choose the direction to be vertical. Today on the next thing is that we want everything to be aligned to the left. Similar. Choose a line left on. The next one is I want to choose this one coil as space between. Okay, Now, what's gonna happen is that that's going to space, these three elements equally. But that's not what I want. I want these two to be together, and I wanted this to be a way. So what we're gonna do is let's select this day block, and first give it a class and we can call this mid left mid left bloc. Okay. And inside, the someone are in New Dev block, right? And this deadlock is going to contain this heading and this subheading. All right, let's actually fixes in the navigator, okay? And we want the top the block to be on top and this one to be on the bottom. So now if you see what's happening is this mid block, which is the parent is spacing. The first developed to the top off the container on the animated one to the bottom off the container. We actually put these two. We put these two elements in a developed because we want this to effect these two items as a separate these two elements because we want these two elements to be effected as, ah, one single block. And we want this to be as a separate block. All right, so that's how we did it. And for this the block. I can just call this normal rapper because it's just adding as a container or a normal trapper. And we are not defining any values to this, right? It's just gonna be like that. And that's pretty much how you do this. Now, the next one is this one where we're gonna add the image some ad in D block, all right? And that the block is gonna sit over here and I'm gonna call this mid image, okay? And we're gonna do is gonna go ahead and select a background image. Okay, so we go to cover and then choose image and we're gonna do is we are going to add in the image, which is this all right? And well said the position to center and that's looking pretty good. Great. So now how does this look when we go to 1920 fixes? All right. This I would look pretty good. Let's see how it looks when it go to 38. 40. All right, this also looks really good. Like, this is the kind of look that we are going for, right? And that is looking pretty good, in my opinion. Great. So now this is done. We're gonna go ahead and animate this bottom to make it look super awesome. So I'll see you guys in the next video. 16. Creating an Animated Link Button: Alright, guys. So in this, me or what we're gonna do is going on, mate this button to make it super fun and interesting. So let's see how to do that. Now, this is gonna be a simple interaction again. So we're gonna be sticking everything. We're gonna stick toe this section, and we're not gonna go to the foot tab yet. So what I'm gonna do is obviously we want this to be triggered, and I hover on it, right. So I'm gonna go, and in the drop down, I'm gonna choose hover. And now we're in the hover state. So any changes we make affect only the hollow state. Okay, so what we want to do its first go to started by adding a background color and the one on one choose Is this sort of a public alert that we have? All right, now, you could choose this to any color you want, but I'm gonna set this to purple for now, because be using because we're using purple for all our other buttons. And that's our primary color. And the next thing to do is I'm gonna change the color off the text to be white Okay, now it looks quite off, right? And ah, want to do is to give it a little bit of spacing on the left or right. I'm gonna come here to the batting, and I'm gonna say a parting of 24 pixels on the left and 24 pixels on the right. All right, And then we can actually come back to our none state. Right? Make sure back in the non state and let's see how this looks. All right, so it can looking good, but it really does not look nice. I mean, the interaction works, but it kind of does not look nice. So how do we do? That we're gonna do is obviously we're gonna come down here to the transition section, and we added three properties. One was the text color. One was the background color, and one was the padding on either side. So we're gonna apply properties to each to start over the transitions, and the 1st 1 is going to be the background color. And I'm gonna set this do 3 15 milliseconds, and that we're gonna choose is our court. All right. And let's select another one. Let's go. And choose the font color this time 3 50 milliseconds and easing is going to be easy out court. Let's go another word. And this time it's going to be the batting goto padding, and we're gonna choose 3 50 milliseconds again. And easing is going to be easier court. Right? So now we have taken all the three properties and also added the same easing animations, so it should look pretty good. All right, There you go. All right. And that looks super cute. Now, I think the padding might be too much. So what I can do? Uh, too much like I can do that. Let's go back to the hover state and maybe reduce it from 24 to 16 and you know 16 so that it looks good. And now, let's go ahead. Come back to the nun state. All right, let's check over here on right, that's that is looking pretty good. All right, so that's pretty much it about how you cleared this beautiful button. It's very fun and interactive to play around with. So in the next week, we're gonna go ahead and make this a responsive. So I'll see you guys in the next video 17. Making the Middle Section Responsive: All right, so in this video, gonna go ahead and make this responsive. So if you could look at the design for the mobile break point, how it looks is pretty much simple like this, And he would have defined is I have defined, Ah, height off 450 picks is so that's the height that we are going for. And we want this all to be for pretty pictures, and we want this also to be 4 50 pixels. All right, so that's the value that we are designing and actually can go ahead and quickly get this. And, you know, put that over here as well so that we have context, all right. And I'm gonna say height is for 50 Xers each. All right, go ahead and that we can rule this section. So let's jump into a weapon and let's go to the tablet break point. Now, the Taliban break point is it's fine, I would say, Um, not much of an issue over here looks looks. Okay. All right. Now we do have a problem where, you know, because even though we said 50% we have too much spacing on the left and right, and that's the reason this is kind of getting shrunk. So what we can do is for these, for the left bloc are inter of having a padding off 70. We can probably reduce that to 40 on the left and a funny on the right. And now that should make it. You should give us a lot more breathing room, and you should make it look much better. And maybe even on the pounding on the topic of probably is that down to, like, 80 and uh, 80. I think that's a number that works pretty, but we're gonna go go by landscape. So in the moment landscape, we kind of want to change it. And it's already changed, all right. It's so weird that it's already changed because of the fact that we had use that same great element, right, because if you look over here, you know, we have added the rapper and he added the grid and that that Grid Orderly is in this format , and it looks pretty great already. Now we obviously want to set the height of these two for 50 pixels. So I said the high two for 50 pictures and that looks pretty good. All right? Like if if I let's go to mobile landscape an urgency, it kind of looks fine. But here, we won't know. Kind off. Make sure that this is also for 50. But before we do that, I'm gonna go ahead and make sure that departing on the left and right is 20. All right. And on the top is, um, it is around 64. It's on 46 picks. Is I think that needs to be 48 anyway. So when I set the top padding to 48 the bottom padding to 48 all right. And you on the height to be 450 pixels were the height and said that do 450 picks is and that looks pretty good for 50. Yep, that looks good. And let's go to mobile portrait. And that looks fantastic as well. Looks looks looks great. So if you go ahead and said this do 3 60 Um, all right, this is how it's gonna look. And I think it looks pretty great, right? And you know, the same interactions work here as well. So nothing to worry So in the next week, we're gonna go to the next section of the website and we gonna learn something new. So as you guys in the next video, 18. Building the Skills Section: Alright, guys. So in this video, we're gonna go ahead and create this section. We're gonna learn a new concept with regard to grid. It's going pretty simple. Now, how do we build this? Very simple. We start off with a section as usual and then we start off with a rapper and insider up. But we have a grid and we're gonna have one to three columns and will have do does one and two, right, If you look at it that this section, which is the school shirt, the skill set and the description is kind of taking up this entire column. But these two are taking up, you know, are four by four columns. So how do we actually organize this in Buffalo? It's going pretty interesting. Let's jump into web slow. So I'm gonna start by setting this to 14 40 pixels. So we want to start off with that. Let's create select the body and that's a new section. So let's select in your section and here we're gonna go ahead and we're gonna call this skills section, and we're gonna go ahead and add in some padding on the top and bottom. So on the top. We've got, like, 1 20 pixels. Same here on the bottom 1 20 pictures and 72 on left and right. So with the Senate with the section selector, I'm gonna go ahead and say, batting off 1 20 pixels of the top on 20 pixels on the bottom and 70 door pixels on the left and 72 pixels on the right. Okay. I seem to do a press controlled Ito. Add a diff block. And this is where we're gonna add a rapper. So I'm just gonna go ahead and choose Rapper. Okay, so our default rapper settings are their 100% with 1920 pixels, max with and a height off 100%. Pretty simple stuff. All right, Next we're gonna do is you create a great Now we already have a comma class called Grid. Now, that is fine, but the problem is, this great is only two column, but we want a three column grid, so I'm gonna create a new class and call this grid three column. All right. I'm just gonna say good. Three C o l soft. You know, three column, I would say maybe underscored. Do make it look better. Okay, so this is my new class. And now I'm gonna turn this wrapper into a grid by clicking on this button. All right? And now we're gonna have three columns and I'm gonna have to rose, which is what we have. All right, great. So now we pretty much can't see anything because there is no content, but we're gonna start adding content one by one. Now, the other thing I want to do is make sure that the margin is 24 pixels because it's kind of aligning. Do the 24 picks of margin that we have on our great Someone said this to 24 we can set the bottom also to the bottom is actually so the row gap is actually 40 it. So we can set the bottom row gap to be 48 pixels, and that should be pretty good right from the start of it, a normal deaf, some press control e and created the block, and that's gonna take up, you know, the first section. And we could just call this nominative normal rapper, I would say, because it has no properties assign. What we're gonna do is gonna go ahead and press control, Eat and added are heading all right. And it's gonna be the same heading as this skill set. So I'm gonna select this. She was this to be a story, and we're gonna say Sorry, each do not each three. And I'm gonna say heading 55 picks is okay, and we'll go ahead and call this skill sect. Next we're gonna add this paragraph, which is 18 picks is someone select the the normal rapper because we want the text insights on a press control eat, and we're gonna choose a photograph, okay? And we're gonna go ahead and choose paragraph 18 picks is the one that we have, Creator. Alright, Looks good. So gonna copy this and I'm gonna sell like this and beast. Now, the color of this is different. It's actually a light agree. So I'm gonna go and add a light gray comma class. We have a doctorate, comma close. We don't have a light gray complex. Someone create a new comma plus and call this light. Great. So we can add only that light gray color. So I'm gonna go ahead, copy the value and come over here and we're gonna go ahead and change. Oh, really? Have the light gray. So I am. Just replace that. Now we've got some margin of the bottom, which is 24 picture. So what I can do is for the heading. I can add a new combat class are for the paragraph. I can add a newcomer Close. So I think gonna go with the heading. All right? And I'm gonna say 24 pixel. Um, bottom margin. Are you going to stay? 24 picks of border. Okay. And all you have to do is add this 24 pixel to the bottom. So it affects only this particular element. Because this is the only element that has this class quickly changes to be X great looking good, could you? The next thing is gonna create this block, so impress control, Eat. We're gonna add a block, and we'll call this again normal rapper. Okay. And here we're gonna add in icon, you're gonna add a subtext. Anyone at a paragraph, right. So we're gonna go to the assets panel, and we have our icons, so I'm gonna start off with the 1st 100 days. The product design icon I'm gonna track that and drop that inside. Okay? Now, if you look at the width and the height, they are pretty much the same. That is 70 do pixels by 72. And I have exported them as an SPG at this format itself, so it should be totally fine. Oh, the next thing is, we're gonna call this, um, skill icon, okay? And we're gonna add a bottom margin of 24 pixels, so it's like the icon and gonna say 24 pixels. Okay. And now we're gonna add in our element, which is the each three small press control E. And at a heading, there's gonna B e r h three. Okay. And this is gonna be what this one we have is 24 picks is I think this is a new one. So we're gonna choose h three and will say heading or we only have ah, heading 24 pixels. So that's good. All right. And we're gonna go ahead and copy this and weaken Feaster and ah, here, the distances. 12. But here we've already got the bottom margin of 16 and I think it's OK. We don't have to change it to 12 you can keep it as it is. So I'm gonna copy this, and we're gonna create a new paragraph 16. Right? So create a new text. Oh, we can call a paragraph itself, Okay. And I'm gonna pace that information, and this is going to be paragraph 16 fixes, and there's gonna be light agree. So I'm gonna add a new combat class, and I'm gonna call this light. Great. Just for the color. I want to change the color off this to be lightly. All right, on. That looks pretty good. Right now, we also have this inner margin off 48 pixels. We can do that as well now. But the problem is, if I do that to the normal rapper, it's going to add it all across. So what I'm gonna do is I'm actually going to go ahead and remove this class, and I will create a new class, and I'm just gonna call this skills. Ah, box. All right. And do this. I'm gonna add an inner pounding off 40 it Great. Now what I'm doing, I'm gonna copy this and paste it and we can go ahead and change the information. Visual design visual design, and you can copy all this information and cases over here and also gonna change the icon so you can actually click on the icon itself and click on the gear icon and choose replace image. And you can click on this to replace the image, all right. And great. So now what we can do is if he duplicate the second, that's gonna goto this box, all right? And we can't kind off move this away to a different box, right? And that's because you can see here that the position is kind of set, toe or toe, and we can set up the manual. But what we're going to do is gonna delete this. What we do is we must select this normal rapper that we have, okay? And I'm gonna actually scale this so that it picks up two boxes. All right, so now if you actually look at some values over here, the column span is one, which means it's spanning one column, but it's taking up two of the rose. All right, so if I click on this icon, you can actually see that now. You still can't see it. Sort of seeing What we're gonna do is go select this, gonna copy and paste it. All right, So now this sits in the third box. But over here, you can see that this normal rapper is actually taking up this entire block. So this is a very cool flexibility that workflow gives you. Okay. I'm gonna copy this and based it again Over here. And all we have to do is just go ahead and change the text over here. All right, Copy that. And paste and copy that Pieced. Copy that and based. Right? So And also, obviously, we want to go ahead and change the icon. So we're gonna go ahead and change this to be motion design. We're gonna change this one to be photography, and okay, this one did not get changed. For some reason, someone will copy that, beast Copy and based. And this we're gonna go ahead and change this to be this one. Right? So now this is how it kind of looks, and it looks pretty good. Now, we also have an inner a parting off 48 pixels. So what I wanna do is now this is the normal evaporate. So what we can actually do now, since we will be using this multiple times, I'm gonna add a combo class off 48 pixels. Okay, um, party, it fixes, right? And then we're gonna add a, you know, normal padding off 48 pixels so we can do the same thing over here. So rather than using the skills box class, we can actually add the same one which is our normal rapper and also at the Kama class off 48 pixel. Right. And we could do the same thing. We're here so we can call this normal rapper and 48 pixels combo class to move that to the right call this normal rapper and 48 pixel common class to the right. Same thing. Over here we call this normal rapper and at a 48 pixels parting to direct. All right, so this looks pretty good. Um, yeah, that's pretty much it. In the next video, we're gonna go ahead and make this a responsive for other break points. So I'll see you guys in the next video 19. Making the Skills Section Responsive: Alright, guys. So in this video, we're gonna go ahead and make this part off the web side, the section responsive. So let's get started. So surely super simple. That's out of the tablet view. And in the tablet, you everything looks fine. And we just want to make sure that we use the same settings. So we've got 80 pixels on the top. Um, and ah, all right, so we got 1 51 20 I think I'm gonna go ahead and set this down to 80 as well, just to make sure that everything is consistent and what do the same thing we're here. We're gonna make this 80 and 80 on the bottom and on the left are gonna set this to 40 and on the right side, also to 40. All right, this looks pretty good. Now, one thing we can do is we can play around with the lay out a little bit. And what I really want to do is change this up quite a bit. What I want is I want the top section to take up. You know, this entire section for the skill set and this paragraph and then we want one too, and want to. So basically I'm trying to say is if I go to this, I'm gonna have only two columns, all right? And we'll have three rows, right? So 12 and three and want to do is I want to select this normal rapper, which is now spanning two rows. I wanted to spend two columns, but span one dro. All right, so, knife, look at it. We kind of have this set off a nice layout and the roll gap is 48 pixels, which is totally fine and has kind off the style that we're going for. And I think this looks pretty good up next. Let's go up to the landscape and things here. Look a little weird, but we're gonna try to fix it. The first gonna do is I want to make everything into one row. I do not want to columns, so I'm gonna start off by reducing the top and the bottom padding to be 40 due to be 64 because that's the number that we're using. So 64 on the top and city from the bottom and 20 on the left and 20 on the right, Right on going to select the normal rapper and here we're gonna do is gonna set this to be one column each, all right. And we wanna go to the grid and we wanna make sure that we just have one single column. So now everything kind of looks like this right now, the problems. We can see that something is wrong. We see something is overlapping. So if you want to check, what's the problem? What we can do is let's actually start by hiding these sections. So if I select the midsection and kind of hide it for now, we can actually see that everything is working pretty fine. Everything looks great. Um, but everything looks great. So something is wrong with the midsection. And if he actually start by looking at these parts one by one, we can see that the midsection actually has a height of 600 pixels. But that's not the case Over here. 600 pixels waas for the tablet break point. So we're here for the section we're going to remove this height by setting it to auto. Okay. And when we do that now it gets fixed, right? Because we were defining 600 picks is off the section, Toby that. But this content was actually more than 600 pixels. So that's a small change that we had to make. All right. And that is looking a pretty good start off liking it. We can go to the, uh, break point far the mobile on the one thing I want to do is I want to change. Um, you know, this section over here, which is this extra, you know, in that fort 48 weeks of fighting that I cannot want ready. Is that to zero? All right. And now everything looks pretty good. Let's come back over here and check. And ah, this looks This looks fine. All right, so that's pretty much it for this video. And in the next video, we're gonna go ahead and design this cat is er up this horizontal bar off logos, and we're also going to add a supercool interaction and animation to this. So I'll see you guys in the next video 20. Building the Logo Carousal: our guys. So in this video, we're gonna go ahead and create this section off the website, which is this logo bar and off to find a couple of values over here. So I have defined that the height off this is going to be 140 pixels, and the wit is actually going to be 24 VW. Now. I could have used, you know, the with and said that Toby 3 40 But the reason I started toe 24 VW, you know, which depends on the view port work is because the interaction that we're gonna create does not really work. Well, if we add pixel values, all right. And you cannot explain why when I go ahead and on the interaction. But for now, in this video, let's just go ahead and build us up in web flow. So here I'm in Ruffalo, and I'm gonna start off by creating a new sections on Select the body and impress Control Eat and I'm going to add a section. All right. And now that we have a section, I'm gonna call this section the logo bar section. Okay. Now, in this case, I'm not gonna be using a rapper because there is. We don't want anything to be constrained to the weight off the view port. What we kind of want to do is to just make sure that it touches either off the edges. So I'm just gonna go ahead and start by creating a grid element because we want all these to be in a great and I'm gonna have six columns. So because we have six locals, So when I click on this and I'm gonna choose six, um, six columns and wonder. All right, here we go. And I'm gonna call this reading one dreams. Good. I'm gonna call this logo. Great. Okay. And we're gonna start off. Another thing that I want to do is I want to reduce the column. Gap said that to zero because we want them to be touching each other. I'm gonna start off by creating my first grade. All right, I'm gonna add an A d block, and, uh, inside this, I'm gonna call this local box. All right? You can call it whatever you want and only started by giving it a height off 140 pixels. That is the value that we can have defined. And the with is going to be 24 v W, which is 24 view Port Worth. All right, sir, said 24 b W. Which is view bored with it. All right, that's looking pretty good. Now, I'm gonna grab the logo from our assets panel. Someone got grabbed the first lower. I'm gonna put that inside the logo block, okay? And we just We could just call this client logo. Okay? Now, in order to make this in the center, we can select the parent element, which is the local box, and ah, there. We're gonna go ahead and choose display to be flex, and then I'm going to say a line center and justify middle, so that logo comes into the exact center. Now, what I'm gonna do is I'm no copy this and it's this all right, And we can go ahead and select the client logo. Or one thing that we wanted to do was I'm going to select the local box and you could see that we have this sort off of border, right? Someone go to come down and here in the border section, I'm just gonna change the color off this to be the one that we want, which is level one that is the color and the doctor. America. We make sure that the width is one on the style is, you know, with the solid line. All right. A nominal copy this and basis and one Select the logo. And here I can click on this gear icon where I can go ahead and replace an image, and I'm gonna choose the 2nd 1 Copy this again. All right, select the logo and change it to this one. Copy paste. Select this one. Change the logo to another one, and then copy based. All right. And now you can see that we're kind off able to scroll away and, you know, outside the actual zone off our of uber. And that's a bad experience. But we're gonna fix that. I'm going to select this choose replace image, and we'll choose this one and one last logo. Copy paste. It must select this the place image on this one. Okay, so if you cannot have a look that our website cough scrolls horizontally, which is never a good experience, you should never be doing this So what we're gonna do is when we add a new property, right, So we're gonna do is I'm going to select the local bar section, right? The lower bar section takes up the entire wet off the view port. All right, so it's taking up. If he said this to 14 40 it's actually taking up. 14. 40 picks is right now. There is a property colors overflow, and right now the overflow is set to visible, which means visible shows the content that overflows its container. Okay, so now the child element, which is this logo great, is kind off overflowing the local bar section because they the overflow sector visible. But if you go ahead and set this two hitter, which means hidden hides overflowing content without adding a scroll bar, it's gonna click on that. And now, if you try to scroll horizontally, you can't do it because whatever is being overflowed, its kind of hidden and it's being must and cut off right to the vet off the screen. So if I go ahead and said this to 1920 you can see that it's being cut off, and the it's taking up the size off, and each element is taking up the size off the view port. It's calculating the work based on the size of the view port. So we said 24 VW. So this is basically 1920 into 24%. All right, credit for person of the view port with all right. And yet so that pretty much about how you build this in reference and in the next video, we're gonna go ahead and at the interaction to make it very fun and entertaining. So I see you guys in the next video. 21. Animating the Logo Carousal: Alright, guys. So in this video, we're gonna go ahead and animate this beautiful looking bar and it's gonna be super fun. And it feels very nice when you interact with it. So are super excited. So let's get started now. The thing to note that is this is a complex interaction it needs. It's not as simple as you know, going over here and doing any of these because these really do not help. We have to use the interactions tab. Okay, Now you want to do is when you're starting off, you have to identify what trigger you want to have the animation with. When I say trigger, I mean, what kind of action is going to start or begin the animation? And if you see here, we have two types. We have element trigger. And on this page, trigger now in the element trigger, we've got a couple of options such as most stop, almost click, Most hover. Most move over element Moskal interview while scrolling in view, you know, so on and so forth. And we also have things like page triggers and page Lord page moving Vieux Port paid scroll and wild pages scrolling now depending on what kind of animation or interaction you want to create. You have to choose the appropriate trigger. In our case, we're gonna choose this one that says, most move in view port. If you look at the information that you know that it says animate while the mouse moves over the view port along the X and white access, so gonna happen is begins. Click on that and we're going to start by creating a new animation. Okay, so I'm gonna click on start A new animation will choose play mouse animation. All right. And now, I already had created once I'm going to believe that. So we're gonna create one from scratch, okay? And we'll start off by creating the plastic by clicking on the plus second, and I'm going to say logo bar animation. Okay, so now basically, we have four properties that we can define. The X axis has two properties. That one towards the left and want is on the right and why access is one on the top and one on the bottom. In our case, we just want to make the animation move along the X axis. We don't really care about the Y axis in this particular animation. So what I'm what I'm gonna do is I'm gonna click on plus right, and I'm gonna choose which property do I want? Two enemy do I want animate the movement, the scale, the rotation, the capacity, the filter. What is it that I want, Animal? In this case, I want to animate the move property. So click on move. All right. And now we see we have sought off these two key frames. The other thing note is that we have this exclamation mark right now That isn't getting the exclamation mark is because we have not yet defined any values to this. How much should it move? Right. That's the thing that we want to. But before we do that, the first thing that you want to do is gonna make sure that you are moving the right element. In this case, we don't want to move the element box. We want to move this logo grid right. This entire grid, we want us to move, you know, from outside and inside of the screen. So what I'm gonna do is since in this case, we have chosen local box. That's actually wrong. So what we can do is we can right click, and we can say change target and I'm coming. I'm gonna come over to the navigator and I'm gonna choose the logo grid. Okay, so now you can see that the local great is now the element that's going to be moved when I add some values will do the same thing over here, right? Click change, tiger and logo grid. So sometimes, if it doesn't work, what we can do is we can actually close this, and we can select it over here, someone click on this, and then that's gonna apply to this, right? So there two ways of doing it. And here, let's start defining the values Now, at a zero point when them when the mouse is over the left of the screen, we could have wanted to look exactly the way it does know. So I'm gonna go and set a value off the X to be zero. All right? Because we wanted to be whatever that we don't want any movement. Where did you move? When we move the 100 when you come over the side, we wanted to change, so I don't know is I'm gonna go ahead and set. Move this slider. All right, So now you can see that the whole logo great is moving. But how much do we move it? Right? Because if I set a pixel value, what's going to happen? Is that inspector off the screen worth? It's going to move only 500 pixels, and that might not be right. All right, let me give you an example. So let's go ahead and keep increase. So let's say this to minus 800. Okay, so now it's on the proper edge off the screen, right? So if he actually go to 14 40 picks is all right and you look at it, all right, and let's play this one out. You consider it on the left. Looks good, but under write it quite does not, you know, because we have this extra space because the whole thing is moving 500 pick 800 pixels, irrespective off the screen wet. So how do we make sure that it properly aligns itself, you know, to the west off the screen. So here's a cool trick. What I wanna do is, rather than seeing 800 pictures. I'm going to define a percentage. Alice, I'm going to say, let's a minus 30%. Okay, It's election scrolled out. I'm gonna increase us a little bit until ice until it kind off aligns perfectly. And I think at 44% it looks pretty good. Okay, Now, the other thing we need to do is you can see that the exclamation mark is still there, even though we define values. And the reason tapping is because one is in terms of percentage on the other one is in terms of pixels. So this one, I'm gonna set it to percentage. Okay, great. So now let's take a look. All right, so let's sort of withdrawal 40. The smallest screen size and all right. He looks pretty good, right? Looks great. You can see that. It it's respecting the percentage values. All right, let's move this to 14. 40. All right? Yep. Looks same. It looks it looks. Looks very good. Let's try in 1920. All right. And yet this also looks pretty good, and it works very well. Awesome. So that's pretty much it. Now, if you want, you can go ahead and change this to 38 44 2 seed Ana, Focus. Resolution on DA. Yeah, it's gonna look pretty pretty good. So right. Um, yeah, that looks great. Awesome. Right. So let's go back to 1914 40 like so That's very much it on how you go ahead and create this beautiful interaction for this local bar And for this local, but and it's super simple. If you didn't get it, I would suggest you watch the video again slowly, one by one. And ah, it's gonna work for you guys. So that's pretty much it for this video, and I'll see you guys in the next video. 22. Making the Logo Carousal Responsive: Alright, guys. So in this video, we're gonna go ahead and make this logo bar section risk responsive for other break points . Now that we will think about it is if you actually look at it, the interaction that we created in the previous video was actually happening, you know, because we were using a mouse and a cursor, right? And that's why I was working. But on a tablet and on a landscape and a portrait mobile portrait, break point, this kind of interaction would not be possible. So we would unfortunately have to remove this interaction for the other break points. But you can still have it on the desktop because it's super fun to have, right? So let's go ahead and do that. What I'm gonna do is here in the animation settings. Does it trigger options right there? I can choose. Do decide trigger on the stopping above tablet for landscape Important. I'm gonna uncheck for the other three because he wanted only for the desktop and above, right? That's what we want. Now if I go to the tablet break part, what we're gonna do is gonna go ahead and change this and we'll make it similar to what we have here. All right, so let's go to that. So we're gonna take on the logo. Great. And here in the lower, basically. But we want is to columns. All right, I'm going to remove all the extra columns, so make sure I'm sure that we just have to columns, all right. And, um, you know, we can just go ahead and we can also add Ah, so the gap can be zero on even the rose. We can say that to zero and conduct. Now, the reason is not taking of the entire space is because of the fact that we had set a, um were it off 24 we w What I'm gonna do is I'm gonna go ahead and just said that to or do all right, So that takes up the entire with that it's given. So this is pretty much how it's gonna look, and this is pretty much the style that we're going for now. If you look at the landscape break point, it should pretty much look the same. And I think this is looking pretty girl and for tablet break and for mobile break point, it's gonna look something like this. And I think this is also looking pretty good, right? They go, so that's pretty much it. But if you go back to our deaths Tropic Point, we can still have the animation effect that's happening on. It looks fantastic. So that's pretty much it for this video. And in the next video, we're gonna go ahead and create the next section off are upset, so we'll see you guys in the next video. 23. Building the Projects Section: All right, guys. So in this video war, Granado is going to create this section. Now, this looks a bit complicated to build, and you can see that officer guard some sort of wire from here to explain how it is. But it's fairly simple, to be honest. So let's to kind of understand how this works. The first thing is, you wanna start up obviously, by creating a section that's our usual step. We started with a section, and inside that section, I'm gonna create one rapper, all right? And this lap it is going to be my grid, all right, because I will have to column grip. And as you can see, I've created one Did block, which is this yellow color the block for the inner left want, and it's gonna be for the inner right one. So we've got two columns now in the first column, I'm gonna add Wonder Block for this text, right? And for this image and the subtext, I'm gonna create another develop and put the image over here and the text elements. Or here. Right. So basically, we've got 1232 blocks on the left one, and we got 123 on the right side, and this one is going to be for our button. And this is gonna be for our text, and you've got an image text, image, text, image, text and image and text. I think maybe it would be much easier if I go ahead and change the color off this to another color there. Go. I think this much makes much more sense. So that's how we're gonna go ahead and structure. So let's get started. So here I am in Buffalo. I'm gonna go ahead and close this up, and we're going to select the body and we'll start off by creating a brand new section press control and type in section. And there's gonna be a new section where we're gonna call it our projects section. All right, now here are gonna start off, obviously, by creating a piling on the left and right off 72 pictures and 72 fixes, all right? And their nuclear a div block, which is gonna be our rapper, gonna create a deadlock, and we'll call this robber right rapper has the same properties as usual with the with off 100 height off 100 Maxwell off 1926 is right now. We want to create a grid. We want to turn this rapid integrates and type in. Great. Now we already have two types of great this one grade. All right, is a two column bread, but I think is this might be different when we make it responsive. So preferably what I'm gonna do is I'm going to remove this great, and I'm gonna say projects. Great. I'm gonna create a brand new class, and I'm just gonna make it a brand new grid item so that we don't make any mistakes. And I'm gonna go ahead and click on great, and we're gonna go ahead and we're gonna have just two columns and wonder. Okay, I don't pick on down now. We still can't see anything because we defined values and to everything, its kind off, you know, collapse together. But that's okay. We're gonna start off by creating our first text element, which is this developed. So I'm gonna create a developed first, and we could just call this normal block. All right, because we have no properties assigning to this. It is just to act as a container for all the other items that we have in here, right? So normal rapper. Okay, now, inside this, I'm gonna create a new de block, okay? And this is also going to be normal, trapper. Okay? And there's gonna be for the stop next area money and we're gonna do is we're gonna go ahead and ah, search for this section that we created, right? So we're gonna copy this overlying text. Copy that and based out over here, and we're gonna copy this and based this over here. All right, so now it's gonna look like this, and all I'm gonna do is going to go ahead and double click and copy this and paste. All right. Pretty good. Now, with regard to the great, the other thing we wanna do is gonna said the column gap to 24. Sorry. Not to 40 24 dog African. Leave it as it this. Now we're gonna go ahead and said this to 14. 40 pixels. Eso now that we can actually see how it looks in the design, and it looks pretty much like this. I've gone ahead and given some distance on 48 pixels from the left. Now here it's a 72. But this 72 is after considering the 24 pixel pounding over here. So 70 to 70 to minus. Trainee four is 48. So I'm gonna add No, we already have this calmer class, but we have 48 pixels to the right. I'm gonna apply that. So now it looks perfect. And also, you can see that, you know, we have some distance on the top, which is around 1 20 picks is and here we don't have any distance. So I'm gonna select the section projects section, You know, the patient most element. And for the section I'm going to say under any fixes on the top and 1 20 pixels on the bottom. So we give this, we get this nice spacing. Perfect. Now, for the normal rapper just find. And are we gonna have a bottom padding off 80 pixels? About the margin off 80 picks is so we're gonna do is I'm gonna create a new calm across, all right, Because we don't, because we're adding multiple new properties that the same existing class, So we create a new one. Call s 80 picks a bottom and I will say underscore M for margins. And I will come over here and I'm gonna put this to a deep, okay? And you can actually rename this from 48 pixels, right to 48 Picks is right beat for patting. All right, so it's much more understandable. All right, and great. So now what we can do is we're gonna create another de block, which is going to be our work. Block some repressed control. Eat adding a block. Okay. And just to make sure that this is the block is the child off this normal rapper So this one is for the whole left block. This is for the text, and this is for, you know, the work area. Right? Great. So what we do is I'm gonna go ahead and again call us in normal, rapper. All right? Because we don't have any property that we're going toe assigned to this. Okay, Now I'm gonna bring in the image some go ahead and start off by getting in our image element, So I'm gonna go ahead and grab an image. Now, until now what? We saw that we used a background image to be created a Duke block, and we added an image. Do that. Now, that's definitely one way of doing it. But there are multiple ways of doing it. This ever going to use an image element. So a press controlled E and search for image. You can see that image is an actual element. So that's what I'm gonna do is I'm gonna go ahead and add in the image so it's gonna be called as Project One will drag that and drop that insight. All right, pretty good. Now I'm gonna turn the turn on this option A says h I D p I. And what this is going to do is this is going to prevent picks. Elation on a writing are displaced. So if you got a figment file, what we have defined here is that we've gone but self, a certain height off 626 is all right, I I'm gonna go ahead and make sure that speaks it perfectly. But later, But now the height is set to 620 pixels. So what? It was gonna sell this image, and I'm gonna call this Project one project image, and I'm gonna go to the height off. 610 fixes 620. Okay, If you see, we hear the problem is that it's kind off pixellated, right? It's It's kind of stretching, and it looks weird. So the real fix that is we have an option of here. Call us fit. Right now. This is super helpful. What we can do is right. Click on it. I have five options I got, Phil, I've got contain. I've got cover I've gotten done on. Got scaled down. I'm gonna go ahead and choose cover. What cover is gonna do is it's going toe. Go ahead and cover up the entire space off the container in anarchist. It's the height of 6 20 pictures, all right. And the work that is defined based on our wrapper. So whatever space it has is gonna go ahead and cover it. So it's gonna kind of scale up, but it's gonna make it look beautiful. All right? It's gonna crop it, making sure that the proportions are the same. But that's how it's gonna work. Great. Now this is done. So the next thing you do is you want to create another de block for this one Okay, so let's go ahead and create a new block. So I will press country e say they've block. All right? Now for this, I'm not gonna give it a normal class. We're gonna give it are different class because we have some people adding and we go actualize interactions on animations to this eso Let's actually go ahead. And with this to block, um, I'm gonna give it a class, and I'm gonna call this project description. Alright? Project description. And let's go ahead and start off by adding in some padding on the left and right. So we got 40 pixels on the top. We've got 32 on the left and right, so I'm gonna go and start off by adding 32 pixels on the left. 32 picks is on the right. 40 picks is on the top, and 40 picks is on the right. Okay, so this is what we have Now. The next thing is, women added a background image for the background color. So I'm going to select the sculler, and I'm gonna choose the level one. So we have this color. The next thing is gonna add in this, which is gonna be our H three element. So I'm gonna press control. E. I'm sorry for heading right now. We want to use heading because this is our the title off the website title of the project. And that might be important for Seo purposes. So go ahead and said this to each three and here. I'm gonna choose heading 24. Right. Looks great. Someone copy this on your head and face this. All right. Now let's see the distance between these two we've got around 18 picks is I think they should be 16. All right, so you really get changed at 2 16 all right? And ah, right now we have 16 picks, is at the bottom, which is perfect. And fantastics on a press controlled eat. All right. And I'm gonna add in a paragraph, and this paragraph is gonna be our description, so there's gonna be 18 pixels paragraphs. I'm gonna copy this and based it. So over here. But we can do is apply the paragraph 18 fixes That looks good. And the font is also the phone color is light. Great. So let's add that as well. So we already have the existing combo class that we used so in applique on that on. That's it. And that looks pretty good right now. All we have to do is let's go ahead and select this normal trapper or eight, which which contains the image. So basically, I'm selecting the one that contains the image and the project description. I'm going to select this, all right? And I'm gonna add a bit off padding at the bottom, which is which is around 24 pixels. So I'm gonna add a bottom padding off 24 now, because this is the normal rapper. We cannot want to be careful with this because we already have too many combo classes. So I'm gonna add a new combat plus and call this 24 fixer, block him M for margin. So we have a new combo class for this, and I want to say 24 pixels of the bottom. All right, so now I'm gonna go ahead and select the normal rapper. I'm gonna make a copy of pressing control, see Contrave, and that's gonna bring it down. Now the only thing we gotta do select this image. We can click on the gear icon. We can choose. Replace image and we can choose our project number two, which is over here. All right, all right. And we could just quickly go ahead and change the details. Copy that and pieced. Now, I did not go ahead and change. I know I did not change the texts off these, but when I when you have the new file, you will have the new descriptions so you can refer that in my version. I don't, uh it's it's the same thing, so I'm not made any changes. All right, this looks pretty good. Right? Okay, so the next one won't is Oh, here we have this extra padding off extra margin of 24 now, we don't want it for this block. All right? We wanted it only for this. So I'm gonna come and select the normal rapper for this section, all right? And I'm going to go ahead and believe that, right? Because we don't want it for this element. We just wanted for this element, right? We just wanted for this for this. We don't need that bottoms. I'm going to remove that combat class A Z can see there's just normal rapper, right? So I'm gonna select this the whole not normal rapid, which acts as a which is the one which is on the left. I'm gonna copy that, and I'm gonna taste it so it comes onto the right. Okay, now, very simple. What I'm gonna do is I'm gonna select the stop normal rapper and delete it so that this star to the beginning and want to sell it. This I'm the same Replace image, and I'm gonna go come down and choose project number three, OK? And I'm not gonna go ahead and change Thetacticsroom. Copy this and go ahead and pissed this and ah, we grow, select, copy and paced. I'm gonna change the image of this as well so you can get icon, choose, replace image and we'll go and choose project number four, which is over here. So let's quickly look at this. How this looks on mobile on other break points. So that's how it looks on 1920 picks is and I think that looks fairly good. Doesn't look really that bad on. I'm kind of liking it. Great. So let's go back to a 14 40. Awesome. Now we have another one, which is the view. All projects butter. So we're gonna do is I'm gonna go ahead and create a new de block, okay? And I'm gonna call this button rapper. Okay, so we have a button, trapper. What I'm gonna do is in this bottle. Drop it. I'm going to say, why don't you take up 100% off the height, Okay, that you that you that is left. All right, so now it takes up 100%. But the problem is, it takes up 100% off the entire page, which is not what we want. So rather than saying 100% I'm gonna go ahead and actually calculate that manual I'm gonna press are on my keyboard to grab, um, the doctor anger door, and I'm gonna quickly go ahead and just kind of trying to find out the height. So we got out on 244 picks is height, so I'm gonna say this button rapper. I wanted to be 244 feet x for pictures, and we have something. Looks like this. Maybe you want to shrink this down a bit. All right, so it looks perfect. Um Yep. All right. I think that looks pretty good. Now, obviously, this will be pixel perfect when you guys have the design. But for now, I have to make sure that it's pixel perfect. I made a few mistakes, uh, when I was designing it. Anyway, this is our button rapper. Now, in this, I'm gonna add this button so that it's going to be in the center, off the screen, in the center, off this box, no matter board. So located in new component on a new element collars buttons on a press country and type in button. So you have three types of weapons in normal, but a radio button on the farm bottom will choose the normal. But in this case, all right. And I'm gonna call this CD, right? This is gonna be our the name off our bottom, which is gonna be called to action. All right. And what I'm gonna do is I'm gonna select the bottom trapper. And since we want the child element to be in the center, I'm just like the parent, and I'm gonna flex the parent, and I'm gonna say our line center and justify middle. So now it's in the center off this area. Okay, let's go ahead and check out the properties. So the 1st 1 is that Let's look at the front. It's button 18 pixels and its boat. All right, so I'm gonna set increase the size of the stoop. 18 pictures started to boil. Ah, the font color is going to be white, black on white, and we don't want an any background. So I'm gonna remove that and said that 20 the capacity or the Alfa is gonna be zero. Rather, we're gonna have a worth, and the color is going to be level one. All right, let me just check on the color. Oh, it's it's bubble. So we're gonna select this and change the color off this to the purple color that we have. All right. And now let's look at the spacing. So if we select the the box element, we can see that it's got 2032 pixels on the left and right and 24 in the top and bottom. So we'll add that padding over here on a select the city and here instead of 15 analysts at the study, too. And that you do and 24 and 24. And now we can go and save you all projects. So I'm gonna double click on this and call this view. All projects, right? All right. So now if you go and look at this in another break point, let's in 19 training. You can still see that, You know, it's kind of in the center, and it looks really nice. Oh, maybe you, let's go to 38. 40 right? Things are looking pretty good, and I'm really liking it. All right, so that's pretty much it for this video. In the next video, we're gonna go ahead and add some hover interactions to the elements. So as you guys in the next video 24. Animating the Projects Section: All right, so in this video, we're gonna go ahead and add a few nice and fun interactions do these elements now, there is pretty much anything that you can do, but I'm gonna show you just a few of them so that you guys get an idea off. What is it that we're looking for? So we're gonna start with the city now. The animation we're gonna do this is gonna be on the hover State is gonna go ahead and don't on hover, which is gonna be a combo close. Now, here are a few things that I want to first things. I want to change the color So it's gonna be bubble. The next one is I want to go ahead and add a bit off drop shadow were turned on this box shadows setting. And here I'm gonna set the direction to 1 80 so that the shadow is towards the bottom. I would change the color off. This to be bubble. All right. Animals said the distance to be something like 50 and maybe that's too much. Maybe we considered to 20 and the blood we can say that to 60. Now, this looks quite strong. So what we can do is we can go to the color and reduce down the opacity to say some, like 50% maybe even more maybe, like, 30%. I think that's a good number. The other thing that I want to do is I can I want to move it up a little bit when I have it on it. So what we can do is here we have the transformed properties effect. Locanda. We have four properties move, skill, rotate and skill. I'm gonna go ahead and choose White, which is the white position, and I'm gonna give it a negative number of saying negative, Fife. All right. And that's gonna move that up. Five fixes, and that's pretty much it. So what we need to do is make sure that we apply the transitions which is easing, do the color box shadow and transform. So let's go back to the non state. Right? And here we go to the transition's gonna start off by choosing the transform. All right, when I said this to 3 50 milliseconds, we're gonna say he's out court and they're gonna go ahead and choose the next one, which is the background color, the background color set this to 3 50 and easing is going to be These are court. And the next thing is going to be, um, the box shadow. All right, so I'm gonna set that also to 3 50 and easing toe is our court. So if you go ahead and take a look at most hover Oh, no. So now if you go ahead and take a look at the interaction, we can see it looks pretty good, right? Looks nice. Yeah. Great. Now I'm gonna go ahead and add some interactions. Do this section as well. All right, do these sections. So we're gonna do that now. One thing that I forgot to do is I wanted to make each of these items linked block because right now, you can see that normal rapper like this is a div block, which means I can't actually click on it right now. That's gonna be a problem for me because I want to click on each of these actives. So what I'm gonna do is a Mexican or right click, and I'm gonna change, say, this convert to link block. All right, so now this normal rapper is now actually a link block that I can click on, right is the same thing. We're here, we'll select the normal rapper. I'm gonna right click, and I'm gonna say convert to link Block. Okay. Under the same thing over here. I want to say normal rapper. I'm gonna like click and I must say, converted link block on the same thing or here selling the rapper. Okay, right. Click and say convert to link block. Great. Now what I want to do is I kind of want to change the name of this. I kind of want to remove it and give it a different class because only these four elements are going toe have that are gonna have a particular interaction on. I'm gonna do it based on the class. So every class, every element that has a particular class is going toe have on animation. And we have used this class normal rapper in so many different places, so I don't want to affect all those different elements. Someone remove this and I'm gonna create a brand new class number. Call this project block our project rapper. I think that's a good name. So it's gonna be Project rapper. All right? This one is also going to be project crapper. Okay, here. What we have done is we have a combat class, so I'm gonna delete both of these. I want to see Project drop it and I'm going to create a new combat class, and I'm gonna call this 24 fixer bottom underscored m for margin. And I'm gonna say 24 fixes or here So we have this 24 picks is And the other thing that I wanna do is selected This one, the normal rapper. Get it off this call this project rapper and was 24 pixel part of march. Right now they want to do is you can see that we have these sort of underlying right. And if you look at the actual text right, we don't. We have the sort of for decoration, and if you click on it, you can say that it's saying that value is being inherited from all links. Now, if I uncheck this, it still does not remove it. Alright? Because what's happening is this is actually not coming from this. If I select the link block our religious project rapper that has this underline and that is being forwarded over toe the chili element, which is the text. So I'm gonna go to the parent itself, which is the project rapper, and I'm gonna unchecked off. And now that goes ahead and remove that are on the line every single other place gonna set us back to 14. 40 pixels. I think one thing I really want to do is I think I would already was the size of this. I feel that 620 pixels is quite long. So we're going ahead and change this. Do something like 400. I think that's easier for the ice to scan and look at. I think, yeah, that's a better number. All right. Could So you have no, Let's go ahead and add the interaction. So we're gonna start off by selecting the project rapper because when I hover on the project rapper I want some interaction toe happen. I'm gonna go to the interaction stuff and I'm gonna click on element bigger and I'm gonna choose most hover. So we have to define what happens when we choose on hover. And what happens when he chews on hover out survey choosing what happens on hover. I'm really going to start an animation clear in new animation, and I'm gonna call this project hover. Okay, So one thing I do is I want to scale this entire block. That's gonna be number one. And the cycle interaction is I want to change the color off this. That's number two. And number three is that I want to move this slightly to the right side. All right? Just to give, like, a nice fun effect. All right, so let's go ahead and do this. It's gonna start off by choosing the property that we want to move. So we want to scale because we want to scale the project. Rapper. Okay, now, here we have three properties selection, element class or interaction triggered in this case. The class and the interaction trigger are pretty much the same thing, because the interaction trigger is Project Rapper And the class also is project Rapper. Because we want this animation to be applied to all the other three classes as well. Okay. And we'll choose interaction trigger. Okay. And what I'm gonna do is I'm gonna go ahead and just increase the scale by 1.2 Okay, Now, scale obviously is in fact, us off one. So it doesn't start with zero. It doesn't start. It fixes itself in the form of for port positive. So one is our normal, and 1.2 is, you know, 2% bigger than what of it. So we're gonna leave that as it is. The next thing we do is going to go ahead and choose text color. And now we don't want to change the text color off the project of rapper because there is no text. We want to write, like change, target anyone to choose heading 24. This is the mobile dashboard. Now we want to go ahead and say effect class, okay? And you also want to say effect only Children with this class. What? I mean to say that when this becomes a trigger, all right, we don't have to create a new animation. We can apply the same animation to this, and it will go ahead and animate this heading because it is a child off this particular element that were hovering on. Right, So we're gonna say only chillin with this class, okay? And now we have to define color. So I'm gonna choose this sort off a cyan color that we have. Okay, you can see that over here. The next killer does gonna go ahead and choose move. Okay. And now I'm going to go ahead, right? Click, change target and choose it to this. And here in the move, I'm just gonna move it across the X by a few pixels. So let's say just buy 10 picks is okay? And now what's gonna happen is that if we play this, you can see that they all happened are three different times. Okay? But we want all of them have to happen at the same time. So what I'm gonna do is going to select this one you could have dragged and combine it with that one. Select this one and combine it to tackle. Now, you can also see that you can add a deadly to each of the elements. And you also have an option where you can start with or start after a previous action. In this case, we want this to start with the previous action. We also wanted this to start with the previous action and we do not want led late. Okay, So if I go ahead and say after previous action, you can see that it kind of pushes this outside because this is starting after the previous action and not with the previous action. So we want to send this to with previous action, all right? And you can select all these three by holding down shift, and then we can come to the easing and you can say he's out court. I'm gonna I cannot want toe make this cedar point fourth seconds. Now let's take a look. So when I hover, you can see that it scales and the color changes. But when a hover out, nothing really happens. Okay, so we have to define that as well. So here we did define the hovered in. I'm gonna choose hovered out, and I'm gonna say it start in animation and we already have this project covered in. What I'm gonna do is I'm gonna come over here and duplicate this, okay? Because I don't want to go ahead and create and start from fresh. I'm able to duplicate this. I'm going to select the 2nd 1 so inhabit. Are you selling the 2nd 1 and on Hovered in. You said Agree. 1st 1 Okay, I want to select this. And I'm changed the name just to make sure that we don't get confused. I want to say, however, out OK, and now let's send back the values. Two of the original. So this is going to be one. The text color is going to be white, and the movement is going to be zero. Okay, so there you go. So now if you take a look right, you can see that we have this beautiful habit animation and, you know, because of it now, it doesn't work for the other ones. All right, because I'm not actually defined it. Now. We don't have to go ahead and make it for each off These. All we have to do is if you go ahead and select the parent project rapper. Okay, we can actually come down here to the trigger settings and say trigger only on the selected element, right? This is what is happening. We want to say trigger the class. And what is a class project rapper? Okay, so now every element that has the class called Project Rapper is going to start the animation. So if I have it on this, this works over on this. This works same thing over here, right? Pretty cool. And that's very much about how you create this beautiful fun interaction. Hope you guys enjoy it. And in the next video wouldn't go ahead and really next section. So I'll see you guys in the next video. 25. Making the Projects Section Responsive: Alright guys. So industry, we're gonna go ahead and make this a responsive It would be super fast, super easy and super fund. So let's go ahead and do that. I'm gonna go to the tablet break point, and then the tablet break points thinks are seeming to look a bit crammed. The father gonna do is I'm gonna go ahead and set this to 80 on the top and 80 on the bottom. No changes to 40 on the left and 40 on the right, right? And 40 and right, this is what we kind of going for. Now, this does look OK, but I think in my opinion, it would be much better if he put these out separately. So what I'm gonna do is I'm gonna go ahead and we have the rapper, right? And the rapid isn't a great I'm gonna go ahead and remove two columns so that it becomes single column and now this looks much better. So you know, we've got a good distinction and differentiation theory thing that we can do is if you go ahead and select the trapper, we can go ahead and increase the grow gap to 48 or 32. Whatever you think. Looks good. Okay, um, I don't think we did that. Yeah, 48. That applies only for this. But we would want to increase it here as well, because right now, here in the Project Rapper, we has editor 24. We cannot want to increase this to 40. It and, uh, that is looking pretty good. And I think that's pretty much it right. And, ah, let's go to the landscape break point in the landscape break when we kind of want to radios this 2 42 64 on the top, 64 on the bottom and 20 on the left and 20 on the right. Right? Andi? Yeah, that's looking pretty good. All right, so that's very much it on how to make this responsive. And as you guys in the next video 26. Basics of Image Resolutions: right now in this very owner, explain a simple concept regarding image resolutions. All right, now, pay attention to this, because this is a very important concept to understand. So you don't have a screen, which is 1920 by 10 80 pixels on this is pretty much what you get on a windows laptop. And most of the screens are non retina. You do get monitors and Windows laptops, which have a retina screen. But let's take ah, situation where most of the laptop that are there out there have non return are displaced or a non retina screen. Now, here I have an image. And now the size of this frame is 1920 by Kennedy. And I have an image over here, which is 1002 100 by 600. Right now, this is how this image is going to look on this display. Okay, Now, what if I'm looking at the same image on a Mac book screen? All right, so if I come over here to the left, we see we have a Mac book pro. Just let me just move over to the side. All right? The Mac book screen actually has a side off 14 40 by 909 100 is the height, but the number of pictures are actually twice right. That's because it's called our retina display, which means it has to x the amount of pictures. Now, even though the size is smaller, you know, even the 14 40 is smaller than 1920. The number of pixels has is twice. So if we actually take this image and look at it on this, this is actually going to be the size of it. It's gonna be very small. It is not going to be the same size off 1200 by 600 because these have two times the number off pictures. This is actually going to be half the size, which is 600 by 300 the original one is 1002 100 by 600. But if you go ahead and we scale this to be this size, all right, we're actually stretching the pictures, all right? Because in reality, it can take up only these many picks is because that's how much is that. The number of pixels are actually double. So if you guys are understanding the point, so if I actually go ahead and make an art board, which is which is this big you know, which is 28 80 by 1800 which has all the pictures, then this image is going to be the same size, which is 1200 by 600. Alright. Retina displays always have two times the number of pictures. And that's the reason any image that is on a windows display is going to be half the size on a MacBook. Other retina display, right? So when you're always adding images, you want to make sure your turn on H I. D P I so that rep throw knows that this is supposed to be half the size on retina display. So in the end, the bottom line is any time you add an image, make sure that the image is H I. D P. I. Right. And if it does not work well or if it does not look good, that probably means that your image is not large enough. Your image is not, does not have a good resolution enough, right? So H I V p. I turned it on for every image, so that's pretty much it about what I had to explain about image resolution. And I see you guys in the next video 27. Building the Dribbble Section: Alright, guys. So in this city, we're gonna go ahead and recreate the dribble section. But we also have this instagram section, and the only thing we need to do is just make a copy based off this and it should work. So we can quickly finish that off and then go to the dribble section is gonna be, ah, very fun interaction. And I'm gonna show you how to do this because we kind of what we were gonna scroll this image is gonna have a very nice fun interaction as we scrolled the page. So So here I am in workflow. And, of course, obviously I am afloat. And what we do is I'm gonna go ahead and start off by duplicating this section, so make sure first of all, let's add this to 14. 40 okay? And make sure we select the entire midsection. I'm gonna copy that section, and I'm gonna come over here close everything and ah, that I would go ahead and just based it. And then I will take this midsection and kind of move it down to the bottom. So we have one over here, and we're gonna go ahead and just replace the text and images. So I'm gonna say, um all right, I'm gonna say copy this Double click on this instagram and I want to copy this and beast it . All right. And here we're gonna say Follow me on instagram. So I'm gonna say, Follow me on I G okay. And we'll change this image as well. Now, the thing is, what's gonna happen is let me show you what's gonna happen when you change the image, right? So they come over here to photography philosophy, and I choose change image on I go ahead and change the image to this one, which is the one that we want. You can see that it changes here as well, because technically, they both have the same class. And the background image is a property off. That So rather I'm gonna press control Z to reset it back. Okay? And this I'm actually going to go ahead and add a combo class, and I'm gonna say this instagram all right? Or you could go ahead and create a brand new class itself. All right? But I'm just gonna go ahead and Atacama class, cause it's a bit easier, okay? And Now I can go ahead and change the this and we can choose this, OK? And I'm gonna choose toppling, right, Because I cannot want to see this part. So if we scroll back up, we can see that this remains as it is. The other thing is that this has a different color. So I'm gonna go ahead and copy this color court, copy that and come over here and here. We're gonna add a new class, and I'm gonna call this Instagram because we changing the values again. So I'm gonna go ahead and pace that. Okay, they go. Don't. Now, let's go ahead and create the next lunches are dribble section. So I'm going to start off by selecting the body and a press controlled e. I want to say section. Okay, so we've got I don't want any pictures on the top, and we've got around 1 30 pictures on the bottom. Okay, so I'm gonna call this dribble section, Okay, so there's gonna be 1 20 fixes on the top and wonder any pixels on the bottom. All right, great. I'm gonna add in a rapper say a de block, which is going to be our rapid. Okay, so I want to say a rapper, and we know what to do. Now is this is actually, if you look at this, this actually has a different wit. All right, this is is a small container while is this is not all right. Now, this is the regular one, which kind of expands to 1920 72. But this is a section that I want to say and define saying that I want this section to be in the center all the time. I don't need to expand. I wanted to be this size. So what is the size? Let's actually check it out. This is actually 1076 sixes, and I'm actually gonna go ahead and grab, You know, the Colorado here, and I'm gonna say dribble. I'm gonna see with All right, What was the value? It was 1076 C one seed or 76 pixels. All right. Great. So what it means is that I'm gonna go ahead and duplicate this rapper, all right? Okay. I'm gonna go ahead and call this rapper version two, okay? And this is gonna be Maxwell off 1076 Okay. Now, irrespective off the screen size, this is going to be 1076 Now, this is some design decision that I have taken, and I have chosen someone Go ahead and do this. So now we're gonna have these three elements, and I think we already have this somewhere over here. So I think I could go ahead and just copy all that information. So let's start off by adding a the block, and this is gonna be for our container. And I'm gonna go ahead and call this normal proper. And here we're going to start off by adding our text are heading Ah, paragraph. And you know, the animator link bottom one started by adding the heading this is gonna be are heading to Okay. And I want to say heading our 55 picks is okay, and we'll just copy this and call this my dribble. The next is going to be this paragraphs and repress control E search for a paragraph. All right. And I'm gonna copy this and basis over here. And this is 18 picks is so we can add the 18 pixel paragraph class. So paragraph 18 picks us okay. And the other thing that we want to do is we want we want to have a spacing off 24 pixels on the bottom. So you select the heading, and we're gonna add this combo class that we already have. Creator. So that's gonna move that down. We also have this one, which is 18 pixels and lightly. So I'm gonna add the light. Great combo class. That looks fine. And we also have, like, 40 picks is riding on the margin of the bottom. So going to select this and we're gonna add a new class this time and we call this 40 fixer bottom margin. All right, I just am okay, And we're gonna said this to 40. Great. And now we need this animated buttons. So I'm just gonna go ahead and copy this and based it on, I'm gonna say, follow me on driven. Okay, Now, we can't actually see anything, you know, because it's it's on a black surface. So I'm gonna go ahead and add a new combat class and just call this white, all right, because we kind of want this to be white color, so we'll go ahead and just change the color off this to be white, All right? And that should be good enough. All right, that books. Now, if you look over here that this is actually kind off broken down into two lines so I can go ahead and over here, I can just move this on to a second line, okay? And that is looking pretty good. Great. We're only here now. The next thing is to create this section. Okay, Now, let me explain what's gonna happen over here. We've got an image. All right. You can see that this is an image. And we also have this sort off. You know, like this browser illustration. Right now we're going toe build this from scratch inside a weapon. Oh, okay. So how are we going to do it now? Not a condition that I want to. Ah, mention is about the height. Now, this is 6 40 picks is so I'm gonna go ahead and here in the with. Now you can actually add Ah, height based on the state like 77 TV, hedge or a TV heads are 50. We hatch. But in this case, I'm gonna choose something like this and you know? Ah, fixed value an absolute value. And I'm gonna go ahead and copy this, and I'm gonna say 6 40 picks is I'm gonna make this the height. Okay, so this is what we're gonna tow now for this. We're gonna go ahead and quickly build this inside workflow. We can add all these three buttons, all these three darts. It's gonna be fun. So let's go ahead and do that, all right? So when you start off by, we already have a normal rabbit. I'm gonna create a new de block, okay? And this is also going to be our wrapper movie, too. Okay, Now, we want to add some spacing over here, which is that 120 fixes. So I'm gonna select this normal rapid that we have. And in the I'm gonna create in new class and I'm gonna call this 60 pixel bottom underscore M for margin are Well, it was 1 20 Okay, so let's make this 1 20 and then we will go ahead and give a bottom margin off 120. Okay, so we got this and I'm gonna create now and now we have the second normal rapper that we have. So we've got a section we've got Rapper to, which is for this. And then we got another rapper over here, which is a rapper toe, and has going to hold this illustration, so we'll start by creating this. Now, this is a very simple block, and it's got a height off 37 pixels. So I'm gonna create a new de block, and I'm gonna call this browser bar, okay? And I'm gonna set the height off this to 37 fixes on day. We're gonna go ahead and change the background color to be one, okay? And we also add radius now with the latest. What I can do is I can click on this button toe individually add radius to the top left and the top. Right. Okay. So, knife electorate, we've got this nice surrounding, which which looks really nice. And we've got were added that rounding off eight pixels over here as well. So that's pretty good. And now you add these three dots, so I'm gonna create a new day block, right? And this deadlock, We're gonna call this dots. Okay? Okay. And here the dark sizes 12 pixels by 12 pixels. So I'm gonna go the width and the height and said that the 12 pixels by 12 pixels and I'm gonna go to the radius and given, like, a big number off 100. So it becomes completely around and we're gonna use the color light. Great. Someone go to the background and greedy int and that we could choose the color. Oh. Oh, sorry. We're gonna choose this color, and this is gonna be, like, Great. Okay, so there we go. All right, now for this. But I was about What I want to do is I wanna make this a flex item, and I want to say flex center all right. And justify left, right, so that we have everything in the center. Now, there is a bit of spacing on the left, which is around 16 fixes. So I'm going to give an inner padding to the browser bar off 16 pixels so that the doctors over here and also the dot has a spacing off six pictures, so I'm gonna give a right side margin off six pixels, and I want to duplicate this dot twice. So now it's gonna look like this and now, we kind of have this section perfect up. Next. We want to create this day block, and this de block is gonna be our container for the image. So what we're gonna do is going to create a new blocks. I'm gonna call this the block, okay? And this we wanted to be inside the rapper again. So we report it, make sure that it is inside the rapper. All right, so we're gonna push this in sight. Now it's entered the rapper. Now, this is going to be our dribble image. Okay? And now the height is 6 40 picks is so we're gonna go ahead to the height and say 6 40 picks is and this is what we have are right now. I wanna go ahead and important the image off this double shot. So if you go to our assets panel, we have our image, which is our dribble image. Now, there two ways. Either we can import this as an image element already could use it as a background image. What I'm gonna do is I'm gonna go ahead and click on this, and I'm gonna say, choose a background image. So when you say choose image, and I'm gonna choose Ah, the dribble image that we have. All right. And I'm gonna go ahead and say, Don't style. Okay, on. I want to say double. Okay, great. Now let's actually take a look and see how this works. All right? So when you scroll, it looks fine. It looks perfect. It looks absolutely normal, all right. It doesn't look different at all. One thing I want to do is select this bottom of the bottom double image did block. And what I want to do is I'm gonna go ahead and ah, give this a bottom rounding at the bottom. So make this, like, eight pixels and eight pixels on the bottom. So, you know, it's kind of 400. Nice. Okay. And now here's a cool trick. What we'll do is here. We have an option that says fixed. All right, I'm gonna click on that, okay? And when I do that, what's gonna happen is that you can see that it kind of gives this effect. All right, Street, it's gonna fixed. All right. And what we want to do is make sure that let's actually said this to 40 40 and we can actually go and said this to be top, so it aligns itself to the top. OK, but the only issue is that it kind of gets cropped over here on left and the right because it's being fixed to the entire page. And and this is also changing, depending on the screen size. So, you know, that's also gonna be a problem. So if I said this to 1920 it's gonna look a little bit differently. It's gonna look a little differently so that we will fix it is what we can do is over here . Rather than saying cover, I'm gonna say custom, and I'm gonna give it a fixed value. In this case, it's 1076 which is the worth. And I'm going to say I want you to be 1076 picks is white, all right? And I'm gonna say top so it kind off aligns itself to the top, or we can choose center or top whatever you want, right? In this case, we can we can set it to center if you want. That should be okay. And now if you take a look, all right. It looks much better. It looks really cool and interesting. Okay? And the other thing is that if you go ahead and change the size off, say, 1920 it's kind of goto adapt itself to one several, 76 pixels. Alright, it's going to change itself to 1076 If you go to probably 12. 40 you can see that it kind of adapts itself to that 1076 pixel with all right, and that's fantastic. Great. So that's pretty much it on how we create this very fun animation, right? And in the next video, we're gonna go ahead and make this a sponsor for other break points. So it's you guys in the next video. 28. Making the Dribbble Section Responsive: So in this video, we're gonna go ahead and make this responsive. So let's go to the tablet break point on in the tablet record, we can see that things off. So we're gonna start off by selecting the dribble section. I'm gonna reduce the height of this to 80 pixels on the top 80 pixels on the bottom and are also going to add padding on the left, which is around 40. Picks is and 40 picks is right Now. We do see a small problem is that you know, when you increase this, we are kind off. You know, changing this now. We actually defined a worth off, you know, 1076 But, you know, on tablet break points, they seem to be a little different. So I think one thing we could do is is set it to contain Andi. I think what that will do is kind off. I mean, contain does not really work again. We want to choose cover, and I think cover does a pretty decent job. I wouldn't say it's the best, but I think that's the best alternative we have. And maybe I think for tablet we could use the height of this because this might be too much . So from selects, setting it to 6 40 maybe you could reduce it down to 4 80 And I think that that looks Ah, a bit better. All right, that's looking pretty good. All right, let's go to the mobile landscape. Break point. And here in the mobile landscape, you kind of want to change this from our 80 to 64 on the top 64 on the bottom, Uh, 30 20 on the left and 20 on the right. And yeah, I think even this distance, I think might be too much. So Internet 1 20 we could ready is this down to 64. And I think that looks pretty good. Let's come back over here as well. And I think, um, you know, they should be fine. Now, that is really no perfect way to fix this. So I guess this should be decent enough. It should be. It should be okay. Not really that bad. All right, on. But that should be That should be fair enough. That should be pretty good. All right, so that's pretty much it for this video and see you guys in the next video 29. Building the Testimonials Section: Alright, guys. So in this video, we're gonna go ahead and create this section off the website and it will be a pretty fun on because what? Because what we're gonna do is we're gonna make this part stick to the top of the page while this one scroll so the left side off the page is not scrolling While the right side of the page is scrolling. It's a really fun interaction that we cannot see in many different types of websites. So let's go ahead and do that. Now. I've gone ahead and made a quick demonstration and a wire frame of how it is going to look , So we're gonna start off with a section as usual, and then I'm gonna create a rapper inside that's gonna take up the entire height over here and inside that I'm gonna make it. I'm gonna make this a wrap it into a great So we have two columns. So we've got one over here and one over here and in the first column. I'm just gonna make sure that it takes up the entire space and I'm gonna go ahead and add a block over here. This is for the text and the information on the links. And we're here. We're gonna create three block three D blocks, one for each. Compositions have got an image. We've got some text and you know it got him subtext or here. So this very much how we're gonna go about it. So let's jump into rep flow, right? Want to start off by selecting the body on, we'll start off by creating a new section, Press control e. And we're type in section. Okay. And I'm gonna go ahead and call this the Metro. What? This is actually this is all right. So this is a surfer like testimonials. Mr. Go ahead and call this, um, testy ammonia section on it, and we've got some padding in the top of the bottom. So we've got around 1 20 pixels on the top and around 1 30 in the bottom. So I'm gonna start off by creating a patting off 1 20 in the top, 1 20 on the bottom, 72 on the left, on 72 on the right. I guess we got this big section and I'm gonna start up by creating our first div block, which is gonna be a rapper, creative block. And I'm gonna say Rapper, so just get another rapper. Okay? And now what? Combo classes. So we've got great. We've got great three column and you've got projects create. I think we'll go ahead and create a new great for this because I'm I don't want to make sure I don't wanna make sure that I don't mess up anything. So we'll go ahead and, um, give this a class and call it, um, sticky. Good. Okay. So sticky. Great. So I'm gonna make this into a grid by clicking on this button. And now we're gonna start off by having a column gap off 24 on Just Wonder. All right, we just need one drop. Now we're gonna start off by creating a new de block, which is going to be our left rapper. So this is gonna be just gonna call this normal trapper, because it's gonna be on the left, and here we can create these three elements, So we've got an h two. We've got a paragraph, and we've got this. So I think what I'm gonna do is I'm just gonna go ahead and grab, you know, all the I'm gonna grab this entire block, which says normal rapper. I'm gonna copy that and bring over here and based it. Okay, Pretty good. That said this to 14. 40. Okay. And I'm gonna go ahead and just copy this information. Copy this and based and copy and based. And here we can see it. Says, See, all testimony's gonna copy that and paste. All right, so this pretty much don't Ah, this is fantastic. And what we are now going to select the next one, and I'm gonna create a div block, and I'm gonna call this normal rapper again because it's gonna be our right side off the block. And here what we're gonna do is we're gonna create Wonder Block for each of these. OK, I'm gonna create in New Delhi block and I want to give this on name specifically for this because I don't want to confuse it with anything else, and we can create our own class for this. Someone call this testi mony away block. Okay. And so let's see how to build it. So we've got an image, and then we have got another de block. So basically, we have two elements When is gonna be an image and when it's gonna be a deaf block with this information and what I can do is this high to set of 3 60 And this is something that I cannot want to define the summer. No, grab that brings down on this. Needs to be three letters, right? Right. Ah, I'm gonna call. I'm just gonna say image, and I'm gonna say image height is going to be 3 60 Picks is on recon because it's up. Okay, So hyped. Ah, you can see it is 3 60 fixes. So let's go ahead and import our image first. So we already created a dusty morning block on a press controlled or are We can actually just go ahead and grab it from the assets panel, so it's gonna be testimonial one. I'm gonna grab that, and I'm gonna drop that inside, and I'm gonna turn on h I D p. I Okay. And I'm gonna call this testy Monia image, okay? And I'm gonna add a height off 3 60 pixels. Now that's going to go ahead and squish this which we don't want to go ahead and set this to cover so All right, it kind of takes up 3 60 pixels of the height on it covers up how much of a space that has sort. That's pretty good. No, the next thing I'm going to do is remove this bottom margin that we have. So I don't want this because we're final. Doesn't soon. Go ahead and delete this class. Someone head backspace, and this should be it. Okay, Now we've got this testimonial block inside. I'm gonna create a new de block, and I'm gonna call this DST monia next. Okay? Now, what we have here is a bit off text. And if you look at this side, we have 64 pixels on either sites. So I'm gonna go ahead and add a 64 pixel padding on either sides. NYT 64 on the top. Left right, bottom on. Duh. Right. Okay, great. So now we're gonna add in this text. Now, this can be a text block because it does not have to, you know that it does not matter for issue, so I'm just gonna use a text block rather than a heading. And I think we have already have a heading to this So this is heading 24 picks Is, um right. There we go. I'm gonna just copy this, and, uh, paste it. Okay, We won't. We'll go ahead and make sure that this is 24. There was a glitch, I guess. Anyway, Onda, we want to go ahead and make this bowl. All right? So it looks nice and bold. Okay? And now if you kind of observe what we're doing here is that the distance between this is straight If 64 picks is and that's the kind of style that I'm following irrespective. So So what it basically means is that the height is changing based on the height of the container. It's not a fixed height, right, Because we're so to explain, in this case, right? This was You know, even if this is 56 lines, the height of this is going to be the same off 600 because I had defined it to be 600 pixels high. But in this case, I do not want it to be a defined height. I want to hide the change depending on the size off. You know this this text. So what we're doing is since we have like, 64 picks is Onda. We already have 16. I'm gonna create a new comma class and call this 64 fixer bottom Underscore m. Okay. And I'm gonna say this to be 64 pixels. So now we have 64. So the next time you are this this small piece of life So I'm gonna add in new text block, right? And this text block is going to be heading 18 pixels. I'm just gonna say heading, um we do not have a heading 18 picks is Okay, so that's a new class. So let's go ahead and create this one. Hardly 24 1 and then we're gonna duplicate class so that all the properties remain the same . And I'm just gonna go ahead and rename this to 18 fixes, and then I'm gonna really was the foreign size down to it in pixels. And are we also need a color. And I think this color, I believe iss light grape. So I'm gonna create a new class and call this light light grape, and they were gonna apply the light. Great class should be fine. Great. Now this is gonna be paragraph 16. So there's gonna go ahead and copy this. And this is going to be Ah, paragraph 16 picks is And again, this is gonna be, like, great color. Just go ahead and copy the information and beast on and a copy and beast. Now, the distance is pretty much very less, which is like four picks is. But here, this has around 16 pixels. So I'm gonna go to create a new comma class and call this four pixel bottom margin, okay? And what's going already is this down to, you know, for fixes? And here we also have nothing, which we have zero pixel margin. So that's pretty good. You can also see that we have this border, you know, and we kind of want apply that as well. So this border is actually darker gray color. So when it was going to select the testimonial text block and ah, I'm gonna come down to the borders section and I'm gonna choose these three the left, the bottom or let's to the left one. And I'm changed the color off this to be dark gray, which is this? Okay on. I'm gonna click on this as well and change this to Dr and I'm going to select the right one and sell that too dark. So basically I'm doing is I'm applying borders only on you know, these three sides, all right, and not on the top right now. You can go ahead and added on the top of your own, but I'm just gonna leave it as it is, right? And that's pretty much it. Now we need this spacing off 1 20 pixels. So what I can do is I'm gonna go and select the testimonial block itself, the whole thing. I'm gonna add a new comma class and call this 1 20 pixel underscore. I also wonder if fixes bottom underscore m for margin, and I'm gonna come down here and I'm gonna set this to 1 20 picks is all right. And now we have this 1 26 is. So the only thing I'm gonna do is I'm going to select this testimony of rock and based it three times. So 123 basic twice, actually. And I'm gonna come over here and quickly change this information will select this and paste and, as you can see because we did not define a certain height. The height takes up, the height is defined by the content. Okay. And I'm gonna start off by selecting this Emily Parker. Copy that based at all here. And it's gonna be company number two. Okay. And let's come down. Or here. Ah, let's copy this copy and pieced. And there's gonna be vin cent rod, and that is gonna be company number three. Okay. And now we're gonna go ahead and just change the images to select the image. Click on the gear icon, choose replace image, and I'm gonna come down and that choose, um, Testimonial three, which is over here. Okay. And that is gonna be testimony. Just one. Select that replace image and, ah, testimonial to All right, so that's very much. Now, let's take a look and see how this feels, like, all right, I'm gonna set just like 40 and 40 fixes. And now if I screw up, All right. Um, right. And it works. Fine. Now, the idea is to kind of stick this to the top. Now, before I do that, I just want to make sure that we got So as you can see, I've got some spacing on the left right over here and you know, because I don't want it to be so close. So and also the spacing of 64 actually. So I'm gonna quickly change that to 64. Select this. And in the Gapen said that to 64. Okay, so this is pretty much where we're looking for now. What we do isn't just selected this normal rapper that we have, okay? And actually, what I'm gonna do is I'm gonna go ahead and give this a new class, because this is the only element that's going to be stuck right There's gonna be sticky. And since a lot of other elements have the class normal rapper, we don't want to apply any properties. We won't apply only this. So I'm gonna go ahead and just remove this class and given a new class and call this test. The more Nhial sticky block, okay? And what we do know, I'm gonna come here. Don't do positions now. Here in the positions, we have static. We have relative. We have absolute. We have fixed and we have sticky. What I'm gonna do is I'm gonna say sticky. And if you actually look It says sticky fixes an element to the canvas only after user scrolls past a specific location on the page. Now what happens is when I play this all right, nothing happens. Everything is still the exact same, right? But what I want to do is if I go ahead and say sticky and set a value of zero. What I mean to say is that when the distance between this element on the top off the screen is zero stick. Okay, so what I'm gonna do is now you can see there's some distance. Right? But when that distance that uses 20 this gets stuck to the scheme, right? Because the distance is now zero. And now I can keep scrolling and keep scrolling and keep going on. The one of the left is going to stay right there. Okay, Now, I don't want to touch the entire top section. So what I'm gonna do is I'm gonna give it a bit off Spacing off. Let's 100 and 20 picks is Okay, So this 120 picks is from this distance of this distance, and now this is no. Now it initially is gonna look like this on when I scroll, it's gonna get stuck. And this is how it is going to look right now. We could reduce this to 64 or 48 or 18. I'm gonna set it to 64. I think 64 is a good number on. Yeah, that's pretty much it. Right. And that's how you create a beautiful, sticky effect. So the next we're gonna go ahead and make this a responsive. So I'll see you guys in the next video. 30. Making the Testimonials Section Responsive: All right. So in this really, we're gonna go ahead and make this a sponsor for other break points. So let's actually start off by jumping into the tablet view now in the tablet, you obviously want to start off by selecting, you know, the elements, and they're using the padding on top. This was over. 80 pixels are gonna do the same thing over here. 80 pixels on the top on, you know, 80 pixels on the bottom and on the left. And right here you can already is that to 40 and 40. And also the spacing over here is might be a bit too much. So we can radios that from 64 down to 24 that should be fine. Um, even the padding over here is a bit too much, so we probably won't ready. Is this to 32 32 32 and ah, 30. Do lead. This looks bad enough. Even the distance over here, mi might want toe, you know, change this. So if I said like the testimonial block, we've got 1 21 already. Is that down to 64? And I think that's a good number. And Yeah, I think I was in pretty good. Now, the problem is that when it comes to the landscape break point, it kind of does not really look good. So what we have to do is we have to get rid off the sticky element, the functionality. So what you do with the first of all is Cynthia's rapper is a two column. Great. Okay, I'm gonna delete that delete one column and make it a single column grid. So now this how it looks, and I'm also going to go and change the gap over here. The road gap from 16 to 48. Okay, so we have something. Looks like this, and ah, we can do is this is no more going to be a sticky blocks. I'm going to set the position of this too sticky from sticky to static. So it's normal and our normally scrolls And also we want the distance over here on the top to be 64 on the top 64 on the bottom and, you know, on the left and right. We cannot want this to be, um 20 fixes on the left and 20 picks is on the right and it's gonna be a very simple, straightforward block, right? Same thing applies for more by landscape, for mobile break point. And yeah, I think for mobile, poor plants, I think for mobile portrait or we can do is probably radios down this from 30 to 24 on the left hand. On the right on that we can keep 32 on the top should not be an issue. And I think this looks up pretty good, right? That's very much. Nothing too complicated. Are ah complex about it? So unless you guys in the next video 31. Building the Tabs Section: Alright, guys. So in this video, we're gonna go ahead and create this section and it will be very fun because we will be using a new component called a stab because we want this to be a tab structure and understand how taps old work. So before we get started, let's quickly kind of understand the structure. So we're going to start off with a section and then we will have a rapper inside, and then we're gonna have one def block, which is gonna be for the title and the text, and the other developed is going to be for the tabs itself. Right? So this whole thing is gonna be the tab structure, and that's pretty much it. And I've also defined the height off 420 picks is for each off these images. So let's jump in the air flow. So here I'm gonna I'm gonna start off by selecting the body, and I'm gonna start off by reading in new section Animal call this section tabs section because it stabs Aziz really wanna have piling off 1 20 pixels on either side to start off with padding putting with ah planning on the left and padding on the right. Right? So let's start off by creating a deadlock. And this deadlock is going to be our wrapper that we got so dot Ah, the next thing is gonna go ahead and created this section. So what does impress control e get in a the block? This is going to be my normal rapper. And what we can do is we can just pick up these things as well the same thing. Copy that. Based on copy and the best. All right, It should pretty much be the same. And I'm gonna go ahead and change this to photography, and we can have some Dexter here. I'm gonna copy that and one of baseball here and what I can do is I can kind of break the line and say while traveling so I can go ahead and break that into two lines, and that should be pretty good. Now we added this normal rapper inside, but I don't really think we need the normal upper. So what I can do is actually, let's let's close all this and we could actually have the heading on its own and the paragraph on its own and you know, weaken delete the normal rapper because everything is gonna be in a vertical line right there, because so and then we've got some batting margin over here and here. We kind of wanted to be 64. So what? It was gonna go ahead and duplicate this class, okay? And rather than call it 40 pixel bottom, I'm gonna call it 64 picks of Baden and changed this to be 64. Okay. And and now now we're gonna use a new element. Quite tab. So if you go to the elements panel, you can actually see that we've got. And Lemon called stabs wouldn't just take that dragged out and put it inside the rapper, right? So now this is what we get, and I'm just gonna go ahead and call it stabs, Okay. Now, before we edit or do anything that have understanding the structure off this Okay, so when you open the tabs, we see that we have, like, the main parent, which is called taps. And then so that we have two Children. One escort tabs menu. And when the stabs contact, where is it? A full green tabs menu and traps content tabs menu. Are these three buttons? Right? And if you look over here, if you open up, we see you have tab link block, and you have a tab. Text. You have a tab Link block, and you have a text, and then you have a link block, and then you have a text. Right? So this element or this parent, is basically the container for three taps, right? It just took have more top. So in this case, we would want more times because we have four cats when a copy descent based it. Right. And that adds a new top. All right, so this is what we have now. Tabs. Continent is the area where we have four Children. Okay, now, these basically define what's going Toby inside a particular tab. Right on. In our case, we have these four images. So are four images is what is going to be here in this cabin. Right? So that's that's what thats how its structure. So let's start off by customizing these stabbings. Okay? Now, when I click on the stop, what I'm gonna do is gonna go ahead and call this tab, okay? You can see that in order. It automatically adds a combo class call s current. All right? But if I come over here and I'm gonna go ahead and just call the stab, okay? Nothing is gonna happen. There's no comma class, but when I click over here, there's a comma class. The reason is because when you look at a page that has stabs some top is going to be automatically selected right, That is going to be sometime that is going to be selected. There cannot be an attack that is not selected, right. So that's the reason we're flow automatically adds a current state to this. Now, when you want to edit this now we know we obviously want to go ahead and edit the Stein because this looks completely different than what we have as default. So if you want to go ahead and customize this, do not start off with the tab that has this current state okay, do not, because any changes that you make effect the current state right, we want to start off with this, which is not in the current state, and then we want to go ahead and customized the current state. Okay, Now, if you go to these settings when you you can also see a lot of settings where you can decide which is the active tableau. Obviously, you can choose none also as the active tab. But that really does not make sense. So you can go ahead and choose stabbed one or tap to or tap three or tap for choose between . You won't be the first up. In my case, I'm just gonna set the first up to be the fourth stop, right? Quite simple. All right, so let's go ahead and actually rename this now, Renaming has nothing to do with class. So I'm gonna go ahead and call this Italy. I'm gonna call this Australia. Um, this is gonna be India and then God of Brazil, right? Correct. Now I'm gonna set the stab element. I'm also gonna get a class called a stab next, all right, because that is our top text, and I'm gonna start off with the last element and make sure that we apply the same classes to everything. So the parent is going to be the tab, and then the text is gonna be the tap text. This is gonna be tab and then the This one is gonna be dab next. Oh, Saudi when it would be this tab. Next, um, this is gonna be dab, and another one is gonna be dob next, and there's gonna be again dab next. All right, Now that so bisecting this, we've got the stab. And what you do is you can see that we have a border over here, all right? And it's purple, and it's just what? It's very simple. So let's go ahead. And with the top selector, you can see that we have this image and backer and it has a background color. I don't need any of that. I'm gonna go ahead and said the AL far to zero because we want the capacity to be zero right? And as you can see, it changes for all tabs except the stab, because this has a combo close. Are we gonna deal with that later and also the next inside over here. But first, let's go ahead and add a border. So go ahead and change the color of this two purple. So we get a nice border. That's good. And now we have the structure inside, which is 6 to 18 picks is so I'm gonna go ahead and change the font size to be to be 18 fixes. And I said this too bold. And also the color is going to be white. Okay, Now, we also have some amount off spacing on the top and bottom, which is Dr Pixels on the top and 16 picks is on the left and right. Even a select the tab on here in the padding. I will set this to 12 and twas and ah, you know, on the left and right is 16 and 16 once said this to 16 on 60. All right. Pretty cool. We also have a distance over here between two tabs, which is, like 24 picks is so I'm also gonna select the tab on the right side. I am going to give it a class. I'm going to give it a margin off 24 pixels, so that kind of pushes things out. All right, now, that's looking pretty good. Now we want to select this stuff, which has the combo class called current, and now we want to customize it to look how it's going to look when it is selected. When it's in the active state or they cut into state. We'll start off by going ahead and changing the background color off this to Papa. Sorry, not the text. Urban change, the background color to be purple, right, And that's pretty much it. So now if we go and preview, you can actually click on it of it, and you can see that you know, they have this effect and it looked at you. Look perfect. Now, if you want, you can also go ahead and take this to a next level. So let's say we have a tap. Let's go ahead and add a harbor state right in the have a state. I'm gonna go ahead and we have this color. I'm gonna choose purple, and I'm already is the capacity to like 20%. So we just get, like, a slight hover effect. Okay? On that, I'm gonna go back to the nun state, and obviously we want transition. So I'm gonna go do the up transitions and we're going to choose back around color, and we're gonna set the duration to 3 50 milliseconds and easing is gonna be easel court. All right, so now let's quickly take a look. So now you can see that when you have it on the tabs, you get this nice effect, and then you click your right, You can see that it kind of changes, and it looks pretty good. Yeah. Okay, uh, quickly want changes. Font spelling of this e l I All right now the tabs menu. We have, like, spacing off 40 pixels, going to select the tabs menu. Right? Let's go call this tabs menu, okay? And we're gonna go ahead and break at the bottom margin off 40 pixels, so that pushes the staff. All right, we'll go ahead and call this tab content, because this is gonna be our tap country. And what we will do is gonna go ahead and create a new did block, right? And this deadlock, we're gonna call this tab grid. Okay, So what we do know is I'm gonna go ahead and give this a hype, right? We want this to be a height of 4 20 pixels. Wanna go ahead into the high two for 20 pixels? Looks good. And I won't click on this to make it into a grid. Okay. And we're gonna go ahead and add 232 columns and delete wonder. Oh, okay, so it's gonna look like this. And also, the spacing is gonna be 24 between the two. So the column gap is gonna be 24 exits, and that's looking pretty good. Now, all we have to do is gonna go to the images, and you wanna grab our images so we can start off with the ones that have scarred travel. So there's gonna be traveled one, drag that and drop that insight. And you said it to h I D p. I okay, and will select the next one, which is gonna be over here, which is gonna be traveled. Do said this do h i d p i. And then the next one is going to be traveled. Three. Okay, except for H i v p i o. So we got the wrong image. I'm gonna go ahead and replace this with the correct one, which is, um, traveled three, which is over here. Said it H i d b I. And the next one is going to be travel image number four. And God said this to h i d. Be okay. Now the problem is that you know, it's not taking up the entire height. And also, the fact that decides is are different. So how do we fix this? Very simple. To go ahead and select the image. Gonna give it a class and call this stab image. Okay, Now, what I'm gonna do is we have already defined the height, which is 4 20 pixels. So here in the fit, I'm gonna change it from Phil. And I said that to cover. Okay? And it also said the height to be 100% so that takes up the entire height. If I controls the that, you can see that it's it's scaling while maintain the aspect ratio. So that's really good. So we wanted to maintain the aspect issue, and for the image will be Candle is we can call the same thing. So let's call this tab image So that skills and maintains the aspect ratio. Call this stab image. There we go and constructs also and call this tab image right. They've got a pretty good Now let's go ahead and take a look and see how this this and this is looking pretty good. And if I tap on Australia. You can see that it collapses because there is no content in the Australia top and Indian president. Thing happens. So what? We have Australia over here, and let's go ahead and see this. How it looks on a 1920 display looks pretty good. Looks nice and interesting. OK, now you can see that on a 1920 display, you can see that the height kind off, you know, it becomes like a square ratio almost. And while that is good, But But assuming that let's say that we always wanted to be, you know, like this vertical height. What we can do is we can actually select the tab. Great. And here we define the height off for 20 pixels. Now we want the high to change based on the view port with it. All right, view board. We're not view port height. Okay, so I'm going to see 30 v w. Okay, now what is going to do is it's going toe. Define the height based on the view port with, So if the view port weight increases, the height also increases. I'm gonna probably said this to 35 or maybe 30. 30 to, I guess I think that it was a good number. And now if you actually go ahead and look at this, let's go to 14 40. You can see that it is still vertical, you know, like the sport rate of you, because the height is depending on the view port Worth. Okay, if I come down here on preview, we can see that. And if I go to 1920 you can now see that the height stick is the height is based on the word off the screen, and that's exactly what you want. And if you go ahead and said this to 38 40 you can see that we get this, which is huge. So we don't want this right. We don't want the sort off thing toe happen. So what we can do is toe cap it to say, OK, I don't want you to go so big. I want you to know Max out at a particular pixel value. So let's say we say 500 fixes are Let's say be, say 600 fixes are Let's say we say 6 40 picks is or me 600 is a good number, so we're gonna say, Keep increasing the height, but stop when it reaches 600 pixels on, maybe considers to 620 0 R. 630. Okay, so this is what we kind of want to go with. I'm gonna go ahead and said this to 14. 40 again. So this is what we have, and this looks pretty good. Now, what we acted he can do is if I come over here to the images, started to the navigator, and let's go to the tabs content so you can see that in the tabs content. We have a tab. Good. And inside that we have. These four images we can do is we could just copy this and weaken based this in all the other ones as well. And we can go ahead and change the images later. And also, I'm gonna go ahead and quickly name these and call this dab content, job content and job conduct. Right. And it's going to review this. So if he see this, if you just click on the different tabs, you can see that the images kind of change. And right now all the images are the same. So it's gonna be the same, so you can go ahead and change it and it's gonna look really good. All right, so there's something that's looking really cool and really awesome. So now in the next video, we'll go ahead and make this responsive and show and see how this looks responsive. So as you guys in the next video. 32. Making the Tabs Section Responsive: right, guys. So in the previous video, where I went ahead and made this tab section and in this we don't go ahead and make this responsive for at the break point. So let's do that. Let's all over the tablet break point on def. You have local here. It kind of depends on how you want to showcase is now. Since these are images we would want to have Ah, good amount off space for this. So obviously going to start off by using the font size off this study? The in a parting of this to 80 80 you know, 40 and 40. Um, anything. What I would want to do is, since this is a tablet, I can I want to change the grid. So to make this into a two by two column grade, So to buy turo grades so kind off, set it up like this on DA You know, we could maybe even reduced increase the road gift gap to 24 done. And now this kindof does look weird. But think is that since we had defined the height study, let's look at the grid. The height off this to be 32 VW on a maxim it off 6 30 We kind of want to change this, right, because now the tablet is going to be smaller. It's not gonna be quite big, and so we can define a fixed value. So I'm gonna go ahead and remove the max wet. I'm just gonna say none. Okay? And for the height, I'm gonna set it in terms of pixels. So probably something like 3 60 fixes. Uh, maybe I guess we could bump this up to 6 40 picks is even if you wanted to be a bit more, we could go ahead and jump this upto, you know, 808 100 something. This is something that you guys have to decide. 8 40 Right. So this looks this looks pretty good and decent enough. We could go toe the landscape break point, and that will be Can do is use the top margin off this to 64. Bottom padding to 64. 20 on the left and 20 on the right on. And this is looking pretty good. Now, one thing we can do over here something interesting is that we can actually remove the batting that we had for each of these elements, right? So we can set the batting off this to auto. And now what we can do is since this is a tab menu, we can change this to a flex box, all right? And once I change it or flex box, I can actually say justify space between so that the elements kind off space these out. Now, the reason now, the reason it's not Brazil is not touching the edge is because of the fact that we set it to auto. We want to set that toe zero, and that is how it's gonna look. So we now have these tabs that are taking up equal space, and these images also look, But I think this looks a bit weird because it's doesn't I mean, it fits too spaced out. So I think when a press control Z just to kind of, you know, bring it back to its original state, Alright, Similar. Like this. I think this is what this was pretty looking pretty good. So I'm just gonna leave it as it this. Um we do have a small issue where this kind of moves on to the next line. So what we could do is probably reduce the with. I mean, the padding from 24 to 20 maybe even 16 are. Let's try it. I guess we got radios this down to zero. Does that work? All right, So it works with zeros of maybe, let's say to our full, I guess, um or six. Okay, we got set it to full. Yeah, pretty much like this. And, um, I think would be a good option is to select the tabs menu and actually said that into a grid. And then we've got to buy to collaborate, and this is what we get. And I think this is a much better way to represent that. And what we could do is this tab we could say flex on, we say a line center and justify middle so that the text is in the center. I think this is a much better representation. And if you go to mobile portrait, we get this. And I think this also looks pretty good to 40 is too small. So I think we can stick with 3 60 which is the default one. And we're due for the top grade is because this is too crammed up. I'm gonna go ahead and remove this two columns and make it a single column, and they should look pretty good. And we can kind off bump up the height off each off the items significantly and rather than , you know, adding a height to the tab grid. And here as well, I think we added a height to the tab grade. What I'm gonna do is I'm gonna remove the height for the tablet on said that auto and we're gonna do is I'm gonna come to each of the elements. That is the tab image and give that a height. Now, we had given it 100% but 100% off. What? Right now it's 100% of Zito, right? Because we don't have ah height given to the tab. Great. So we can say is we can say 840 picks us right? And maybe that's too much. Let's say 6 40 picks is right. Or maybe that's true, But let's say 6 30 pixels, right? I think this is a good number, and now we're giving a height to the individual tab and not the great. And let's come back to the mobile view, and I think this also looks pretty good. And I think it looks really nice. So that's pretty much it about how to make this responsive. I think one cool thing that we could do is maybe for the landscape. We could kind off remove the gap so that, you know, they kind of touch each other. All right. And maybe this is a cool direction that we can take. Not really sure, but I think I'm gonna go ahead and keep them as usual as it is. And yeah, this looks pretty good. So that's it for this video and a PSA. You guys in the next video? 33. Building the Forms Section: Alright, guys. So in this video we'll go ahead and create this form section. Basically, what happens is people who visit your website can actually enter the name, email address and a message and they can send you a form. And when this ended, you get an email and you get information about it. It kind of gets stored back in on the web flow silver, and I'm gonna show you where it's gonna be stored and how you can set it up and stop now. Once more thing to note here, is that the size off this the container is actually smaller than the one that we have used it similar to the one that we use on dribble, right, So he other with is 1076 That's the container with which is different from all the other ones that we have been creating so far, because all these have a bit of 1920 max, but this is limited 21076 So the form also is gonna be in that format, right? So let's go ahead and blood in blood flow, right? So first of all, let's go ahead and said this to 14 40. And I'm going to select the body and press control E and type in section and is gonna be the forms section. Okay. Gonna have a padding off 1 20 on the top, 1 20 on the bottom. Now the left and right patting. OK, let's go ahead and add that, But really would not matter. In this case, say 72. Okay. And what we can do is I'm in a press controlled E. We're gonna get a deadlock, which is gonna be a rapper. And I'm gonna say rapper V two because the V two has a maximum with a 1076 because that's what we want. Okay, so now, basically, it's very simple. All you have to do is create a great two column. Great. So there's gonna be column one and it's gonna be column to, and we've got distance off 24 pixels off the column. Sogard Spacing off 24 picks is between these two, so we can go ahead and use that as well. Right? So let's start off by creating. So what we can do is actually at a good and I'm gonna call this forms grid, okay? and I'm going to say, you know, turn this into a grid and we're going to remove two rows because we need only wonder and will have two columns. All right, Pretty good. And we're gonna go ahead and I'm gonna copy this normal block. Or we could just copy this heading. Copy that and our weaken lexical here and select the rapper. And ongoing, First of all, my creative block. Right, Because we need this to be the first left bloc and wanna call this normal crapper and impress control veto paste. So they've got that, and I'm gonna copy this paragraph text, and we'll go ahead and place that as well. So that's how it looks. All right, now we've got ah, lot of combat classes. I'm just gonna delete all this. We don't need all that. We just need the one that says like grape because the font color is likely. And copy this text, and I'm gonna go ahead and based it, and I'm gonna copy this and one go ahead and based this as well. Right? So the next thing is to make sure that we know is that the grid needs to be 24 picks is white. Someone say columns 24 column Gap pecan done. And here we're gonna go ahead and add in a new element college, the farms, reading press, country and research for forms. So we have some Nicholas Reform block. I'm gonna go ahead and just drag that inside, and now this is how it's gonna look. Okay, So the first thing is that let's go ahead and, you know, just call this farm block, okay? And we can go ahead and start customizing this immediately. So that sort of with the name and, uh, if you look at the settings a 16 pixel paragraph, right. So I'm gonna select the name and I'm gonna say 16 picks of paragraph. That's what way have been using We're gonna do the same thing for the email and message, so I'm gonna say email address 16 picks of paragraph. And the thing here is that the color is light grape, but we want this to be white. Gonna go ahead and add a combo class and called us white. Um, so we wanted this to be white. Go ahead and say this, Dwight, and go ahead. And I said this to wait. Right? Excellent. Now there is a little bit of distance, which is around eight pixels. So I'm gonna go and select the text field. I'm just gonna call each of these text field, and I'm gonna have a top margin off eight pixels. So we have some spacing gonna do the same thing over here. We call this text field, okay? And this text field has a different color off l one. So I'm gonna select this and added the color that we want, which is L one. All right. And that ultimately changes you. This also has a border. You can see that right here. Nothing is there so sometimes as a bug. So all you have to do is select the text field and add one and then just delete it so And, you know, we can set the width of this to be zero, So just remove that and it's looking pretty good. Now we have tea, which is name email, and we've got message and the distance between email and messages are 40 pixels. I'm gonna selling the text field, and I'm gonna add a bottom margin off 40 picks is right. This how it's gonna be and I'm going to select the ah paragraph. I'm gonna copy that and paste it. And when I move this down and I'm gonna select this one as well, copy that and paste it and we're gonna move this one up, okay? And there's gonna be message, okay? And we're text below here now with Gordon. Customize this and add the properties. So we've got a text field over here, and when I come over here in the settings, we have some options. So first of all, what is the name which we were going to leave this? We're gonna call this a person's name, Okay. And if you want to add a placeholder steaks, you can add that so you can see things like enter your name so that can be a placeholder text. And what type of text feel is it is It's a simple email password for number number. We could just say it's a spleen and you're you want to decide about their This is a required text field and you can say yes. We want this to be a required expert. Pretty simple. Let's go to the next one. Ah, here we can see enter yard email and we can go ahead and visibly require again. We can see the text type to be email. There's gonna be a message, and this is going to be message. And, uh, what we're gonna do is we're gonna go ahead and change this to a plain text because this is going to be, like, enormous and plain text where people can type stuff and we can actually go ahead and make this quite big, which is on 100 pixels. So I'm gonna add a comma class and say this 100 pixels just in case, and then we'll go inside the height of this 200 pixels, right? Ah, that's pretty much it. Now we've got this button, which is quite big and large, So we have the submit button and I'm gonna add the button class. I think we call it CD, and when I do that, this is what we get. But what I'm gonna do is I'm gonna go ahead and create a new class and call this form button because this is quite different from all the other buttons that are dead. Eso the 1st 1 I'm going said the with off this to 100%. So it takes up the entire wit, then we've got the text, which is 18 pixels. So I'm gonna select the text and we're gonna go and set this to 18 picks is we're gonna set the front weight boiled. And also we're gonna say, Let's get started so we can click on this. And when you click on the button, you actually have to in edit informational here. So we're gonna say, Let's get started And when When you plus on the button you can have some lording state and weaken. So right now, it says, Please wait, we can this thing like submitting all right. And the three dots that should work. And also we have some top and bottom padding of 24 so we can select the farm. Burton and Weaken say, 24 on the top and 24 on the bottom. Right. And also, the color, of course, has to be changed to our This one right now looks pretty good for this case. What I'm gonna do is I'm just gonna remove the placeholder text because the design does not have any, so I just want to go ahead and remove this for now. And that's pretty much how it looks. And if you go ahead and tap on the preview button and click on it, you can see that it says, please fill out the fields and it's gonna go ahead and randomly enter some text. Now, you can see that when I randomly until you can see that there is some text that's over here . So there's gonna go ahead and say Chilton, KBS And now we kind of formed edit this tech. So what you want to do is type in the text, then you wanna go back to Web flow. So what we're gonna do is we're gonna go ahead and just change the color of this do white. And this is the typography color. And now that should work. So we're gonna go ahead and just say Children, KBS and works. That's that in the email, I d right and not quite sure what that status and let's add in some message, I'm just gonna say hello now if you see here, the problem here is that this text feel its kind of starting from over here and what we want to do is we're gonna go ahead and use a new component which is coiled text area, right? We're gonna take that and we'll bring that inside over here. And I think this is a much better representation. And here we can see at a placeholder text and we can say it required. And we can delete this text field. And for this I'm just going to say, Ah, text field and give this a height off 100 pixels ritual dicamba class that we added. And this should be fine. And the placeholder text one go ahead and the leader that we don't need any placeholder text so quickly. Let's go ahead and add in some information. I'm just going to say even I'm gonna say abc at gmail dot com right? And I want to say hello is the message. And when I go ahead and tap on that get started, you consider it says try the form on your published side. So I did. I forgot to mention that Let's go ahead and publish this to Selected domains and its go ahead and preview this right. Let's go quickly for the subject. Going to say some random stuff ABC at the meal dot com on and we can say hi, right? So now let's go ahead and get started on to contain says submitting. And it says, thank you. Your submission has Bean received. Right now there's another thing. Couple of things that we can do is we can go select the form block and let's click on. So when you click on the gear icon, we get three states, we got normal. We get success and we get better click on the success it and we can kind of customize how this whole thing looks. So, for example, we can add a new class and call this success and what I would want to do with eyes that I kind of want to add a green color to the background. So it looks like this and even the text I can say success text. And we could go ahead and make this, you know, like, you know, like 18 fixes and you know, bold and that you can say whatever you want and even change the color to this like something like this should work now. We can also go ahead and go to the interstate and the interstate looks something like this . So here again you can go ahead and add the class customized the way you want. Maybe we could go ahead and do that. Let's select the editor message. And let's say we are like some sort of a dark red color. All right, something like this. And we can set the text and change the color of this to white. So something like this on now you can go back and come back to the normal state. And this is pretty much how it looks. So that pretty much it for this video in the next video, we're gonna go ahead and make this a responsive. So it's you guys in the next video. 34. Making the Forms Section Responsive: right. So in this video, we're to go ahead and make this form responsive, surely super simple. So let's get started. So go to the tablet view, and that's what we got. And, yeah, so start off. Obviously, by reducing the size of here. So I'm gonna set this to 60 or 80 on the top 80 on the bottom, 40 on the left and 40 on the right. I think this should be okay for the tablet view. I think this is the smallest, And as we increase, I think they should be pretty fine, I guess, in my opinion. So let's go into the landscape. And this is where we can. I want to change stuff around. The first of all, we're gonna ready is this to 64 on the top 64 on the bottom 20 on the left and turning on the right. Now, I personally want to make this a single column. Greatest. I'm gonna go ahead and remove the column so that we have everything in one drop. Are we gonna have a gap off? 48 picks is for the rose so that you know, we have some good distance and I think this looks pretty much great already. Always look a mobile portrait. And, um, I think this looks great. Nothing too much to worry about. That's pretty much it for this video on in the next future. When you go ahead and design, build the foot, so it's you guys in the next video. 35. Building the Footer: right, guys. So in this video, we're gonna go ahead and build the footer. Now, this is not the end of the course, because you're going to creating a lot of fun interactions and making this website feel very lively. So this is the last part we're gonna where we're gonna be building stuff and probably in the next few really is gonna go ahead and add interactions and animations and make the website look much more fun. So how do we structure this? Let's start from the basics. Obviously, we gonna have a section, and in this section we gonna have a footer And there's gonna be a rapper which is again gonna be our default rapper. And the other thing not here is that if you turn on the grades right, this has been structured in a certain way. Right? So we've got 123456789 10 11 12 We've got 12 columns now. Five of these columns are taking up space for, you know, the navigation links and the rest is for the name And you know, the icons and some textile here right now, we could go ahead and build this 12 column. Great. All right, which is totally possible. Or what we can do is you can have two columns but change the ratio if it right so we got 12 and five by 12 is around 40% right? It's 41.6, but it's kind of like 40%. So we can say that this can take up 46 40% and this can kit can take up 60%. So there are two ways of doing this. Either use 12 columns or use two columns and give it a different ratio, right? So let's go ahead and build our in workflow. So I'm gonna go to a Web float and let's go back. So let's say this to 14. 41st all right? And let's select demanding Osama pressing, creating a new section called this section, and I'm gonna go ahead and call this fota. Okay, Now, the other thing to note is that I've gone ahead and given this a fixed height or 422 picks is okay, so I'm gonna go and get a fixed tight off 422 picks is all right. And we also want some padding on the top and bottom. So it's 80 on the top. The same. It's not 1 20 It's 80 on the top. It's 80 on the bottom again. 72 on the left, 72 on the right on. Also, the color is different. The background color is, um you know this this off a, uh, level one color purple color that we have been using. And now we're gonna go ahead and create a rapper for the inner condoms. So you create a the block. Anyone call this rapper, there's gonna be our regular annulment rapper, right? Looks fantastic. And now we're gonna go ahead and turn this into a grid, right? Someone create a new class and call this photograph. All right, so in the foot, Agreed. I'm gonna go ahead and make this into a carrot, and we're obviously just want Wonder off Two columns and wonder And the column spacing is going to be 24. Now, you hear that? We have something called fr, which is basically fraction. What I can do is I can actually change this from 0.1 fr and said this to 0.4 effort. All right, And when I say zero point for that means that this is one f r and 0.4. But I kind of want this to be 0.6 fr so that this is there a point for a far in the end, F r stands for fraction, and in the end, we want everything to be one. So 0.6 plus 0.4 is one. So basically, we're splitting it in the 40 60 ratio. All right? Could done. Now, let's go ahead and create a block, all right? And we're just gonna call this normal Brock Normal block normal rapper. And here we're gonna start off by bringing in the logo that we had. So I'm gonna grab the logo right about this local SVG. Now we want this logo to be inside a link block, because when I click on this, I kind of want to navigate to the top off the pitch. So I'm gonna press control, eat and create a the block. Sorry. Link block and I will put this image inside the link block. Okay? And I want to select the link block, and I'm gonna call this photo logo. Okay? Now, let's see the size of this in fig MMA, it's around 40 pixels high. So I'm gonna set, um, the image height do 40 picks is okay. That's looking pretty good. We've also got to these icons at the bottom, so I'm gonna create a new de block, all right? And there's gonna be for the is gonna call normal, Rapid. And this is gonna be for the icons. So let's go ahead and grab the icons. So we have got to Witter. We've got LinkedIn and we've got a dribble. Let's go ahead and get dribble. There you go. Now, let's go ahead. And just quickly, I'm gonna call this social icons. Now, there's a spacing over here, which is around are eating, which is on 16 pictures. So I'm gonna go and add a margin off 16 pixels, and I were at the same class to the other two as well to call this social icons and go ahead and select isn't called social icons. All right, now, over here, we also have some spacing of the bottom, which is on 32 pixels from the logo. So I'm gonna select the link block, which is the photo logo and on a bottom margin off the Reto pixels. Right? And that looks pretty good. All right, now we're gonna added this text as well, so I'm gonna create by start by creating a new text block. So I'm gonna create a new text text block, and here we're gonna just copy this information, and then we're gonna go ahead and based it and hear what I'm gonna do is this is 16 pixels paragraphs. I'm going to say paragraph 16 pixels, and we want to for it to be color, to be like grape, and that looks pretty much like that. All right. Another thing is we could see that these two sections are kind of forced to the top, and these two are, fortunately bottom. So we will be using the flex property to kind of evenly spaced tomorrow. So obviously want to select the parent element, which is the normal rapper. And now I want to give it a flex class. So if I say flex, you could see that we have flex vertical left top. That is the only thing that we have done. But we're gonna use another one. We're gonna use a different one. Someone called this flex vertical great. And I'm gonna say left and I'm gonna say space between, right? What does this all mean? So I'm gonna start off by going ahead and changing this to a flex box, okay? And we want the direction to be vertical, okay? And obviously we want the alignment towards the left on the justify is going to be space between, which means it's going to space. Each of the elements, you know, towards the edge of the skin is gonna push it to the edge off the screen. Now, the thing is, we don't want these these icons also to be pushed. So we kind of club these two. So another club, these two, I'm gonna create a new Dev block, all right? And there's gonna be a simple, normal rapper, and we're gonna take Let's actually look at the navigation to understand this better. So you got a foot up, which is a section, and then we've got a rapper normal rapper, and then we inside that we have the left rapper, which is the normal rapper, and that has the space between flex property and down against. So we have the photo logo. Now, since this nap normal rapper has a flex between property, it's going to flex the immediate Children and immediate Children we want is the food A logo ? All right, on the social media icons in one and paragraph to be the second child. So we've got normal. Rapper. The immediately to Children is the normal rapid over here. Which has these two All right there. You can see one on the other One is this. And now what's happening is that since these two other media Children, it is pushing these two immediate Children towards the edge off the container. Right? This is pretty much, uh, what we want. Great. So another this is done. We also want to make sure that these icons are clickable. So what we have to do again is we have to add a link block, all right? And we're gonna put these icons inside the link block. Right? Um, and let's create a new link block. Let's put this icon inside the link block and we've got we need another link block. And we put this, uh, Linda Nikon inside, and we can select each of these links blocks and give a class, we can say social link block. And for this we can say social link block efforts. Also, we can say social link block just to make sure that we have a name for everything. Okay, Pretty good. So now all you have to do is if you don't give it a link, you can just click on the element settings, and you can add the link after you are alone here. All right, so for the next one, um, we have two elements now. The valuable instruction is gonna go 50% space to this and 50% space to this. Okay, Now, if you look at it the link, you can see that this link is taking up this entire space. And what's happening is that when I hovered over this area, I would want the link to be active as well. I just I don't want it toe be active when I have it on the text. I can't want it to be active. And I hovered on this entire section. Right. So what we can do is we can create multiple link blocks and put the text inside. Right? So let's go ahead and do that. They're gonna start off by creating a new block, which is gonna be the right section. And I'm just gonna say normal Rapid, because that's a normal class that we're giving. And inside, I'm gonna create a link block. All right? And this is gonna be photo link block. Okay? And what about to do is I'm gonna start off by adding in a text link. First someone press control E and adding a text link. Oh, we can just say a text block in that case because, uh, okay, and here what I'm gonna do is I'm gonna call this photo link, okay? This is a foot a link, so we can select so we can see that we have some padding on the top and bottom, which is around eight pixels so we can go and set the padding off this to be eight pixels on the top on eight pixels on the bottom. I think we'll go ahead and make this a 12. Let's go make a 16 on the top and 16 on the bottom 16 on the top and 16 on the bottom. Looks pretty good. And also for the photo link block what we can do is we We can remove this declaration or here so that it doesn't look like this. And also for the foot a link. Let's go ahead and see this setting. So it's white. 16 pixels, paragraph ready, Simple. So we can go ahead and change the font size off this to be 16 on, we can go ahead and make this to be white, right They go, let's go ahead and just make four copies so we can select the foot a link so we can say copy Paste based and based, Right? So let's go ahead and change these. We're gonna see home. There's gonna be about it is gonna be work. And next we've got process. Great. So if you kind of look at the structure, what we have is so you got a normal rapper and inside that we have got these four links right now, the problem here is that we want to sets. So what I'm gonna do is I'm gonna go ahead and select this link block and duplicated right now. This is what we get now for me. I do not want to be last Link Block someone Go ahead and delete that for now. We need only store block and reading list. I'm gonna say store I'm gonna see in blawg. I'm gonna see reading list. Okay, now we see a few problems, right? So let's go ahead and fix it. The first thing is that we have this photo link block right, which has, you know, four links we're gonna do is I'm gonna go ahead and give it a wet off 50% right? Which means it's gonna take up 50% off the space. And the same thing's gonna happen here is that it's gonna take up a 50% off the space, which is exactly what we want. Now, the thing is, this is kind of in the center, all right? But we want this to be on the top. So what I can do is I can add a comma class and we can see selects. All right, now we have this common clause that says flex vertical left up, but we want a new combat class because flex vertical is going to put them one below the other. We need them to be one beside the other, right? I'm going to start a new one and call this flex horizontal all right? And underscored. We want Toby left and we wanted to be top, right? So go ahead and flex this. All right? And then we're gonna say flex horizontal gonna say online top and gonna say justify left, right, This is what we want. And now this is pretty much done. So what I'm trying to say is, if I go to the preview and if I hover on any of these areas, right, you can see that even though I'm not happening on the text because this whole section is a link area, I'm ableto activate this. Okay, now, one quick thing that we can do is we can add a hover state to this. So let's actually select the foot a link. Okay? Lets go in at a hover state and in the foretelling. What I'm gonna do is I'm gonna go ahead, do the color and change that do this cyan color that we have, right? And we're gonna go ahead and I'm gonna come back to the non state and quickly go to the transitions set this to 3 50 and in the easing, I'm gonna go ahead and set this to be easy or court. And also we're gonna go to the opacity. Onda, change that property. Do font color, right? And now it should look which we were perfectly. So when I hover, you can see that these cannot get highlighted. Right? And, uh, that is really cool, right? So we now have something that looks like this. So in the next video, we'll go ahead and make this responsive. So I'll see you guys in the next video. 36. Making the Footer Responsive: right. So in this video, we're gonna go ahead and make this foot responsive for other break points. So let's get started. Is going to the tablet break point first, and that is what we have. Now this looks pretty OK, I would say, but maybe we could go ahead and just make sure that our regular patterns on the either sides are the same. Um, eighties. Fine for this should be good enough. Um, I think what I would want to do is, in this case, the rapper we had, like, a 60 40 grid. Can I want to make that one fr and one fr or sorry, one afar and Europe or in six fr So that we get some spacing like this. Thea, other thing that we could do is probably said this to one afar again. So we kind of sped this into 1/2. Right? If you go ahead and scale this up to the other big clients, we see we get something like this, we just fine. I guess depending on how we want to this to be, you could go ahead and structured it. You could keep it the same. A 60 40 ratio itself touching work. Go the mobile landscape point here. We want to do something different. We're gonna create something that looks similar to the mobile break point that we have created, which kind of looks like this is because the top section and then we've got links, and then we've got this information. So let's go ahead and said that so here, or what we can do is supposed to fall. Let's go ahead and remove the rapper and make it a single column grid. All right. And that is what we get. And now the here, if you look at it on. But also, we want to make sure that the is no fixed height because we did give a height somewhere Teoh the I think we give it to the foot, I believe so. I'm gonna remove this height and said that Do auto. All right, so we you know, we get good on space now. The problem here is the fact that these three are clubs together on which probably means that we want the order to be different. Right? So how are we gonna fix that? So that we we have to fix it is through the structure off the elements. So if you look at the navigational here, So we've got the normal rapper, which is the normal rapid. And then we've got this, which is going to be for all the links right now, over here, These three are together, but this actually has to be a separate item. Right? So what we can do is we can go ahead back to the desktop break point, cause we want to make sure we make the changes over there. Here we have this normal wrap right now. Incident off this. It's off putting this element inside the normal rapper. We can put it outside, right? And when we put it outside, I mean, let me just go ahead and do that correctly if I take the normal Romero here. So here we've got the fertile ground. We have got some text. I'm gonna make this come outside, okay? And I'm gonna put this outside here as well. All right? And now what's happened is that we've sort of created this 22 by two column grade on. Now. It looks perfect, right? It looks fine. So you go back to tablet break point it you can see that it looks fine. We got a landscape break point, all right. And now we see we get actually what we wanted, right? Because the thing is, this is one element. This whole thing is another element. And this is another element, right? So that's what we had to do. And when you go to responsiveness, when you goto when you make changes, that responsiveness, they do not affect the structure off the navigation. The navigation structure still remains the same. And that something that you were keeping my Now, let's look at the spacing. So we've got quite a bit of spacing on the topics that are 40 pixels on the top and 40 pixels on the bottom. So I'm going to do that with the help off the column are the Roberts. I'm gonna set this to 40 and we're gonna have something that looks like this. All right, that's looking good on. Obviously, we want to change this. Do 20 on the left, training on the right, um, 64. Or we can say 48 on the top and all 30 64 on the top. I kind of forgot what we were using. Yeah, we were using 64 64 on the top and 64 on the bottom. And this looks pretty much gonna be pretty much gonna look the same on mobile break point as well. One other thing that we could do is actually go ahead and add all these links in one line. That's a personal preference into kiss, if you see or hear here, we did not do that. But in case you wanna have everything one below the other, all you have to do is since we have only this extra class, I can go ahead and said the stool vertical on. You know, we should get something that looks like this, and it's gonna look pretty much the same in all the other break points because we're making the changes only to digest the mobile portrait big break point. But I'm just gonna keep it. As for the design and control Z, that's Are we gonna get something that looks like this, right? So that's pretty much it for this, you know? And I see you guys in the next video 37. Creating a Section Scroll Animation: All right, so we have pretty much gone ahead and build the entire website, and it looks phenomenal. And it looks great. We've got a cool couple of cool interactions here and there, and we're gonna make this even more fun and interactive, and there's gonna be really awesome. So as you can see, it kind of looks fantastic. You can actually, you know, published this to the selected domain. And, you know, you could even view this on your mobile device. Or if you have an iPad or tablet, you can view that and to check it out, how it looks, because this is a real website. All right, this is fantastically area website. Now. What we're gonna do is we're gonna go ahead and start adding couple of interactions and animations and make it fun. The first thing to do is add links, do these links so that they kind of scroll to a particular section off the website. What do I mean by that? So we're gonna do is we've got three links or here, right? We were experience. We've got work, and then we've got photography. What's gonna happen is when I click on experience, right the page is going to scroll through this section, all right? And I'm going to select this expedience section that we have, all right, And I'm gonna come over here and here. I have something called the I. D. Right on. This is as a consensus for in page linking. I'm just go ahead and call this E X p for experience, okay? And I want to come into the experience navigation link, and here we're going to choose this one that says big section, and I'm gonna choose a paid section and I'm gonna choose E XP. So what's gonna happen is when I go to the preview more and when I tap on expedience, you can see that the page schools to the expedient section. Right? And that's and that's pretty cool. Let's do the same thing for work and photography. So for work, I'm gonna go here and choose the projects section, and I'm just gonna call this work, okay? And I'm gonna come down here to the photography section and select this section and call this photo just out of college photo. Right now. Let's go back up and we'll select the work knave link and come to the page section, and here in the paid section, I am going to choose work and for photography. I'm gonna go ahead and choose photography right now for contact. You could either have an email idea, a phone number that takes them, or you could actually make them screw all the way down. Do the Let's Talk business section. So let's go ahead and do that in the form section. Let's go call this contact okay, and we can go back up and we can go to the contact section, and here we can click on Paid Section and you can save Paige contact and then we go right. So if you go ahead and preview this, you can see that when I click on expedience, it can go to the expedient section. When I click on work, it's close to the work section on. When I click on Fort of Photography, it's close down to the photography section unless and that's pretty cool and awesome. You can also go ahead and do the same thing for these bottom links as well. So when I click on home, it's going to take me to the home screen for the about the about section work process. But I'm gonna leave it as it is, because when you are building this, you might have your own pages. You might have your own different links and sections of your website, so I want to leave that as that IHS Now, the other thing is that we have this logo on this Obviously, I want it toe re lord toe the homepage. So I'm gonna go and click on a link are so I will click on pages and I'm gonna say Choose page and I'm gonna choose home. So every time I click on this, you can see that it kind of reloads it refreshes the browser and take you back to the home page. Right? This is what we want, right? So that's very much about adding thes section page like sections, gullible links. In the next video, we'll go out, go ahead and make some elements. Animator. So it's you guys in the next video 38. How to use create and use Symbols: Alright, guys, before we get into the interactions, I just want to explain a new concept quickly. Just gonna take a couple of minutes and that's about creating components. Now, for example, let's say that you have multiple pages on a website and you've got, like, 10 different pages on your website. And first of all, the way to add a page is to go to the page over here and you can click on the Create new page and that's gonna create all the pages that you have. Now let's say that you have this navigation bar and even, you know, the footer up right at the bottom, you know, which is gonna be same all across the Web site. But in case you decide to make one particular change, the problem is that you will have to go ahead and make that change across all the other 10 pages. And that's really a big hassle. And that's a big trouble. So where Flo has something called as components and we can go ahead and create something as a component, I'm gonna get into like this now, but oh, here and I'm gonna go ahead and right click and I'm going to say create symbol right now, simple and component are pretty much terms that are interchangeably used. But I'm just gonna say create symbol and that's going to do is it's gonna tell us to Neymar similar. We're gonna call this Na'vi Gatien bar, and I'm gonna go ahead and click on Create symbol. So now you can see that we are inside the component more where we can go ahead and make any changes that we want. So I'm gonna go ahead and click on Done, and that's gonna create this into the sort of green color bar, which means that it's a symbol and I'm gonna do the same thing down here as well. I'm gonna go ahead and select the foot up and I'm gonna go ahead and right click, and it will say, create symbol and we'll call this foot up and you know we have a symbol. Now, all your symbols can be accessed in the, you know, in the ad panel, where we've got elements, we've got layouts, and then we've got symbols. That is where all your symbols out. And it also shows you the number of instances that a particular symbol has been used, so that's pretty good. Going honestly, can't done so now. This also isn't sort of this green box. So next time when you create a new page, all your photo is just drag and drop this symbol that you have into the page and you know you're good to go. So that's very much about symbols, and I'll see you guys in the next video. 39. Creating a Page Load Animation: Alright, guys. So in this be able to go ahead and animate the heroes section at some really cool fun animations. So let's get started. And the thing is, it's super simple to do. All they have to do is gonna understand the logic off how interactions works. I'm gonna start off by just making sure that this is 14 40 pixels because I'd like to keep it at 14. 40 fixes. And what we're gonna do now is we're gonna start off by deciding how the animation want to happen. The first thing is this navigation bar that we have I want to go ahead and failed this from 0% capacity to 100% capacity. And by the way, we're doing this when the Page Lord. So what's gonna happen when the Page Lords, when the Page Lords, I want the navigation bar to fade in from 0% capacity to 100% capacity. I want this hero image box to move from the left side of the screen to the right side of the screen and I want this text that says I am Robin Williams and we have the Spanish graphics to move in from the right side of the screen towards the left side of this. So this is how we want to go ahead and structure our animation. So let's get started now. We could be dealing a lot with the interaction top, and hopefully you guys get the just and on the logic of how it all works. First of all, we gotta selector trigger know what is a trigger article is basically an action that triggers the main animation, right. And in this case, we want the trigger Toby page load. So when the page lords were going to trigger some sort off an animation we have got to with us when paid, starts loading. And when the page finishes learning, now we're gonna choose event page finishes loading. I'm gonna go ahead, select the action and say, Start an animation, Okay. And now we already exceed the existing animation that we have. I'm gonna go ahead and click on the plus icon, which is going toe create a new animation. I'm gonna call this age, Lord Animation. All right. And here what I'm gonna do is I'm going to start defining the elements. 1st 1 is gonna pick the element in this case. We want to take the navigation, but and click on the plus. But unfortunate thing is that we cannot add animations to symbols at the moment. So what you would have to do is we would have to double click to go inside that and then click on the plus icon and then I'm gonna choose capacity for the NAFTA, okay? And we can just go ahead and click on done editing master symbol so we can come back. So let's go back to our page, our animation. So we got the nab our capacity now on the other interactions. What we did was we just created one state, which is the instant we're in this case. We need to create two states. One is the beginning state and one is the next eight. Why do we have to do that? The reason is because that in this case, since my first initial state is going to be 0% opacity, this knave are on the screen is already 100%. So I have toe override this property by seeing web flow. Listen, when I lowered the website, I want this to be 0% opacity when I start. Right? So what I'm gonna do is I'm gonna select this novel capacity, and I'm looking on the switch that says set as initial state. So even though on the designer this is 100% opacity when the page lords weapons going to assume that this was 0% capacity all the time, right? Severely. Go ahead and set this capacity to be zero. Now, you can't see the change because the change does not affect symbols, but when we reload the page, you can see it. Okay, so we're gonna go ahead and set the initial state to be zero. Now, we'll go ahead and duplicate this, okay? And here, we're gonna go ahead and said the capacity to 100% because we wanted to move from 0% to 100% on. We can go ahead and change the duration to say something like three seconds and also change The easing toe is our court, right? This is pretty much what we want. Now, if you go ahead and play this, you can see that it takes three seconds to faded. Right. There we go. Now. The next thing is, we want to animate the heater image box. So let's sadly, he damage box. Let's come here to the actions. Click on the plus icon and we want to choose Move. OK, now, I could have one link this move along with this because I want these two to begin at the same time, right? And the first thing we do is for the move. I'm going to add the X value right now the X value basically the left and right position because it's on the left axis. Now, I'm not gonna use a pixel value because the thing is with pixel value, it's going to look weird on different break points. Because if I say, for example, 100 pixels is gonna be 100 pictures on for 14 40 picks of break 400.1920 pixels report and the other big points, which is not something that we want. So what I wanna do is gonna go ahead and set the X value to negative 100% right? So when I say posit, it moves 100% away from its initial position. Right? So it's moving basically two times this wit okay, and we're gonna set it 100% so that it's exactly outside off the view port off the screen. And I would go ahead and duplicate this once a duplicate. And I'm gonna merge this with this. All right, because we wanted the NAB are the and the image box to start at the same time. And you kind of also want it to and at the same time what everyone needs to be animated at the same time. Now for the hero image box, what's gonna happen is I'm gonna go back and set this to be zero person because we want it to be the default state. Okay, so zero person and the duration, I'm gonna probably set it to 1.5. Okay. And also change easing to ease out court. Okay, Now, let's quickly take a look. Right. That looks pretty cool, right? Looks fantastic. Let's go ahead and play this again. Fantastic. Looks good. Now, the other thing that I want to do is I will go ahead and also added capacity. I could have wanted to fade and move at the same time. So over monitor is gonna start off by selecting the number one click on the plus icon and I'm gonna choose capacity. Okay, Now, I'm gonna merge this with this because we want the movement and the capacity to begin at the same time. And obviously there's gonna be set us initial state, and I'm gonna read use the opacity down to 0%. Okay? And I'm gonna go ahead and duplicate this. This is going to be much with this, and it's gonna be the end state, but I'm gonna say opacity, You be 100% all right? And also the duration. This time I'm gonna set back to one. I don't want it to be 11.5 and the easing is gonna be easy out court, as usual. So now let's quickly play this and take a look. Right. So this looks super. Could it kind of fades in and moves. And at the same day right now, we're gonna do the same thing for these as well. Quickly. Kilometers, go ahead and said this to 14. 40. Now, we're gonna go ahead and change these as well. So now everything is already defined, right? But the only thing is, we need to change the movement. So rather than creating your trump scratch. I'm gonna go ahead and select these two elements, which is the hero image box. I'm go ahead and duplicate this, and I'm gonna merge it with this, okay? And the only thing we gotta do is gonna go ahead and from 100% I'm gonna make this the positive 100% and I'm gonna go ahead, right? Click and change Target to the heading. Okay. Now, the thing is that it moved exactly 100% but we kind of wanted to move a little bit more, which is 110 plus it. Okay, so it's a little bit outside, okay? And also, we're gonna go ahead and change the opacity. Target has built right? Click change, tiger. Now, this is outside my view ports. I'm not able to select it, so can go to the navigator and click on heading. And that's going to change that as well. Great. Perfect. Now I'm gonna select these to right click duplicate and merge it with this. And all the properties are the same. The only thing after do is go ahead and change targets or right click change. Target heading right click, change, target and heavy. Okay, so Now, let's go ahead and believe this, right? So this is what we get, right? It looks pretty cool now. We also want this also to be animator. So the only thing we lose I'm gonna go ahead and select these to try click Duplicate combined. This and the properties are again the same. The only thing is, the is to change the element someone right click, change target and change it to paragraph 18. Right click change target. Now paragraph 18 is gone because it's outside the screen. So I'm gonna go ahead and click over here, All right? It's the same thing over here. Heading. Let's right click Duplicate. Bring that in and right click Change Target. Paragraph 18. Right click Change Soccer paragraph 80. Right now let's play this. Right now it is lagging a little bit because that's because off the sinking and the Internet But if you go ahead and publish this and view it over here, you can see the difference, and we'll do that. Now. One thing that I want to change, you know, to make it a little bit more fun is that all of these are animating at the exact same time , right. But let's have a little bit off delay. So what I wanna do is fought this heading. All right? Now we It says that it starts with the previous action, which is this. But even though it starts with the previous action, we want a little bit of delay. I'm gon