Webflow Intermediate: Progress Your Webflow Skills (2022) | Sam Harrison | Skillshare
Drawer
Search

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Webflow Intermediate: Progress Your Webflow Skills (2022)

teacher avatar Sam Harrison, Webflow Developer, YouTuber, Teacher

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      COURSE INTRODUCTION

      2:10

    • 2.

      NAVIGATIONS

      0:24

    • 3.

      NAVIGATION: ALIGNED LEFT

      7:41

    • 4.

      NAVIGATION: CENTERED

      5:41

    • 5.

      NAVIGATION: LOGO CENTERED

      3:44

    • 6.

      NAVIGATION: DESKTOP HAMBURGER

      4:52

    • 7.

      NAVIGATION: DROPDOWN

      7:25

    • 8.

      NAVIGATION: MEGA MENU

      14:17

    • 9.

      NAVIGATION: CUSTOM MOBILE

      12:35

    • 10.

      HERO SECTIONS

      0:34

    • 11.

      HERO SECTION: CENTERED

      12:07

    • 12.

      HERO SECTION: GRADIENT

      4:51

    • 13.

      HERO SECTION: BOTTOM BANNER

      17:04

    • 14.

      HERO SECTION: BACKGROUND VIDEO

      4:15

    • 15.

      HERO SECTION: SLIDERS

      10:00

    • 16.

      INFO SECTIONS

      0:38

    • 17.

      INFO SECTION: ICONS

      8:00

    • 18.

      INFO SECTION: ABSOLUTE POSITION

      13:17

    • 19.

      INFO SECTION: 3 COL GRID

      4:46

    • 20.

      INFO SECTION: CARDS

      8:40

    • 21.

      INFO SECTION: FLEX CARD

      11:30

    • 22.

      ANIMATIONS & INTERACTIONS

      0:45

    • 23.

      ANIMATIONS HOVER CARD 1

      15:33

    • 24.

      ANIMATION HOVER CARD 2

      4:04

    • 25.

      ANIMATIONS HOVER CARD 3

      5:23

    • 26.

      ANIMATIONS HOVER CARD 4

      12:33

    • 27.

      ANIMATION HOVER CARD 5

      23:17

    • 28.

      ANIMATIONS SLIDER ANIMATIONS

      8:55

    • 29.

      ANIMATIONS LOTTIE ON SCOLL

      5:35

    • 30.

      CLASS PROJECT

      0:53

    • 31.

      CLASS PROJECT WALKTHROUGH

      2:16

    • 32.

      CLASS PROJECT MAIN NAVIGATION

      27:05

    • 33.

      CLASS PROJECT CUSTOM MOBILE NAV

      21:43

    • 34.

      CLASS PROJECT HERO SECTION

      14:29

    • 35.

      CLASS PROJECT INTRO SECTION

      12:46

    • 36.

      CLASS PROJECT HOVER CARDS

      28:55

    • 37.

      CLASS PROJECT SOCIAL PROOF

      13:50

    • 38.

      CLASS PROJECT CTA & FOOTER

      6:29

    • 39.

      CLASS PROJECT MOBILE RESPONSIVE

      10:42

    • 40.

      MORE COURSES ON THE WAY!

      0:40

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,035

Students

7

Projects

About This Class

WEBFLOW TUTORIAL: THE SEQUEL!

Hello Everyone and welcome to my second Webflow course!

This Webflow course is for beginners to intermediate levels and we cover the following main topics:

  • HERO SECTIONS
  • CUSTOM NAVIGATIONS
  • INFO SECTIONS
  • WEBFLOW INTERACTIONS AND ANIMATIONS
  • CLASS PROJECT 

The aim of this course is to provide you the skills required to start creating more complex websites within Webflow and you can implement the skills learned in this course within the class project.

Meet Your Teacher

Teacher Profile Image

Sam Harrison

Webflow Developer, YouTuber, Teacher

Teacher

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 My YouTube channel:

 https://www.youtube.com/c/SamHarrisonco

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. COURSE INTRODUCTION: Hi everyone and welcome to my second Webflow course for beginners to intermediate levels. I've run one, I'm Sam Harrison and I run a digital agency based in the UK. And in this course I want to take you through sort of the next logical step into progressing your Webflow skills. I'm going to go into how to craze. So the comment sections and elements that you're going to use within your designs. So in the first part of the course, we're going to go into how to manipulate the menu or the nav bar and to changing the way works into having Lego centered, have a Lego adjusted to the left, or having the navigation in the middle. Basically lots of different ways of positioning the navigation. From there, we're going to go into how it's cray, various different types of hero section and just sort of column types of design that you're going to see when creating websites. The third part of the course, we're going to go into how to create different sorts of info sections where we have maybe different icon sections by using grids and flexbox was going to make use of positioning such as relative and an absolutely to get all the different items weight woman to be. The fourth part of the course is going into more depth into how to use interactions and animations to have at least four or five videos and how to create hover cause and how you can create various different animations on mouse hover rows agrarian to look at how to use Lottie files and how to animate those on page scroll. Nonetheless, parts of the course we're going to create a landing page together by using all the techniques learned throughout the course so far. So ideally, what I'd like you to do is to use all the techniques that we've done and create your own version of a landing page by using mine as an example. If you don't want to do that, we don't have to worry. You can also do is just copy along with me on the landing page I created, which also makes use of at least most of the techniques used throughout the course. Well, you'll need for this course is a laptop or a PC. And all you need also is an active Webflow account. And in terms of the assets for creating the landing page, I'll make sure all that is available within the course materials. Okay, So if that sounds good to you, we'll get started. 2. NAVIGATIONS: Okay, so this first part of the course, we're going to look at how to create various different types of navigation. So in my first course, we use the standard NAV and adjusted that slightly. In this course, I want to delve a little bit deeper into how to position the NAV made you in various different places. I'm also going to show you how to create your own custom mobile navigation, also making use of a lottie file. Okay, so let's get started making our first navigation. 3. NAVIGATION: ALIGNED LEFT: Okay. In this video, we're going to be looking at how to style the Navbar in various different ways. So first of all, what we'll do just to make this a little bit easier to follow. On the body itself, I'm going to give this a background color that's darker than white. Then what we'll do is just throw on the inbuilt navbar that comes standard with web flow. Let's throw on a NV. Okay, so in the first court that I did, we pretty much use this all of the time. So we had our logo on the left hand side here, then we have our navigation menu on the right. Now, again, this is pretty common, and this is maybe the most common kind of nab that you'll see. But there are variants on this. So sometimes you'll maybe want to have your logo in the middle. Sometimes you'll want to have the navigation menu either in the center or a align to the left with maybe buttons on the right. So we're going to talk you through all the different ways you can actually alter the inbuilt nab to suit your needs. So what we're going to do initially is copy something similar to the HobSpot website. You can see here on the HobSpot website, we have the logo on the left hand side, just like we do here, but they have their navigation menu pretty much next to the logo with a bit of a gap here, and then we have a button. So we're going to recreate this first of all. So what we'll do is start out the same sort of way, and we'll just throw on a logo first of all, I think, just for ease, we'll do. It's we'll throw on a text block, and we'll just call this logo. And we'll just make it a bit bigger. Let's try 25, and we'll make it a bit bolder as well. Then on the brand itself, we'll apply some padding. So we'll apply 20 pixels of padding, I think what we'll do. That looks fine. We're going to try and recreate this. First of all, what we're going to do is within the container, which is the container. We'll actually give that a class actually, we'll call it container. And we'll also make the container a bit because that's generally what I like to do. We'll do hundred And what we'll also do is on the nav bar itself, we'll give that some padding as well, and we'll do 3%. I'm going to do this throughout all the different versions that we do. We're going to stick to the same kind of thing. I'll explain why a little bit later. Okay, so what we're going to do is within our nav container, we're going to add a diblock. And just so we can see what we're doing, we're going to just drag this a little bit higher up so we can see what we're doing. Okay, so this div block is going to be 50% worth of this nav container. We're actually going to have two of these. So this will be on the left hand side, and then we'll create another one, which is on the right hand side, which is going to house the different sections of this new navigation that we're going to make here. So we're going to have a container, which is 50% of the whole width, which will contain the logo and the nav menu. Then the other remaining 50% will be for any buttons that we want on the right hand side. Okay, so we'll just call this left just for ease. So that's left. We'll give it a width of 50%, and we'll give it a minimum height of something like 60. We can change the height later. But let's just do 60 pixels so we can see what we're doing. Then once again, within the nav container we'll add another div block and we'll call this right. And what we'll also do just so we can see where it is. Again, just move this below left. Okay, so we now have these two different containers. One of them is 50%. This one also needs to be. So the same sort of thing again, 50%. And then we'll give it a minimum height of 60 pixels. Okay, so there we are. We now have two different di blocks, one on the left hand side, one on the right. Obviously, at the moment, they're both on the left, so we'll change that in just a moment. So just for now, what we're going to do is we're actually going to put the brand and the nav menu into our left container. Then once we've done that, we're then going to make our nav container a flex box just to realign all this properly. So just before we do that, let's just minimize a few of these things to make it easier to follow. So first of all, let's throw in the brand, and that's going to be within this left container. So you'll see when I dragged it over, it kind of snapped inwards, and that's what you want to make sure you have. You don't want it sort of on the same line like this. You want it within the dive block. So that's within the left hand side div block. And the same will be true for our Nav menu as well. Just throw this up and then make sure it snaps inwards, and they're both going to be sitting within this div container, which is called left. Okay, so at the moment, we still have both of them on the left hand side. So this one that's called right is still over here. We actually want to get this over to the right. So the way we do that is make sure that the nav container is highlighted, and then we're going to create this as a flex layout. By default, it's already horizontal, and it's actually pretty much as we need it to be anyway. So we're getting closer to how it should look. Again, if we revert back to the HubSpot website, you can sort of see they're both aligned to the left hand side, and there's a bit of a gap here, but it is obviously closer to it. So how do we get that closer? Well, what we're going to do is on the left div or the left div container, we're going to make this also is going to be a flex box. And again, it's pretty much done it automatically forward. So what we want is to have it justified to the left. And at the moment, it's stretching the whole thing across the center, which is actually fine. You could also center it too. It will depend on what you have as a background color. In this case, it's all clear, so it's fine. What do want to do, you can see now that it is pretty close to this now, but there is a gap. So what we'd have to do is just on the brand part here. We'll just pop on some padding. So we'll just do something by default. So let's say 40 pixels, and that just separates the nav menu from the logo slightly. Okay, so we're pretty much there for the most part. So within our right container here, we're going to add on a button. And at the moment, you can see it's not aligned correctly. So once again, we're going to make the right container or the right div. Is that flex as well. Again, by default, what it's done is it's stretching the button over the entire height of the section, and we don't want that. We actually want it to be aligned to the center. And then rather than justify it to the start, we're going to justify it to the end, so it goes right from here, right to the other side. If I do that now, there we go. So we pretty much created exactly the same kind of thing that we have with this menu, obviously, I appreciate they have a top bar as well. We'll cover top bars a little bit later in the video or in the next few videos. So, but you can see pretty much for this main section here, this now does pretty closely resemble this. We'll just make the nav bar a little bit larger as well. Let's give that 20 pixels of padding as well. Yeah, and there we go. If we have a quick look at this, and then as we re size, it will go down. Because we add a padding to the Navbar, you'll see when we hit this point here, there's still a bit of a gap at the side, so that's going to be good. When we get to mobile, you'll have to decide whether you want to have this button here or not. If you didn't want to have it there, all you'd have to do is just go to the button, and then you could always hide it on mobile if you wanted to. And there we are. But when we go back to the desktop view, it's still going to be there. 4. NAVIGATION: CENTERED: Okay, so just before we start making our own container that our own navigation that centered from scratch. I'm going to just show you how you could actually alter the one we've just made to make it center. Now obviously, you wouldn't do it this way, but I want to just show you how you would do it if you say changed your mind. So what you need to do is just go onto your navigator here, and all you need to do is basically just get the nav menu, so it's not currently residing within the left div. All you need to do is just hold the nav menu and push it to the left, so it's no longer sitting within this div container. And then on the NAV menu, just click on Flex and that will center it for you. Now obviously, that's very, very quick, but obviously we've already gone through all the other steps on the first nav we made, which was aligned to the left. So you wouldn't necessarily do it this way. So what I'm going to show you now is how to do it from scratch. We'll leave this here as something to compare to, and we'll just add on another nav bar. Click on that and just to create some space, we'll add margin to push it away. We'll call this one, we'll move that class, and we'll just call this NAV two. Again, just push that down again, so we've got a bit of space, and we'll give it a padding of 20 just like the first one. We'll make sure it's white, and let's get started. You would assume that if we just make this 1,200 pixels, it's the same as that. We'll add in our logo onto here. Then make this a flex box. The way you'd assume you would do this is by using the justify option of space between and distribute evenly from start to end. The theory here would be that the logo will be on the left, the nav menu will be in the center, and then the button would be on the right. Let's do that. In fact, that's hurting me being blue, let's just change that. Let's make it black. We'll then copy this pop it into our container. Then you would assume if I now do this, it would solve our problem. Let's make sure it's aligned to the center. Then hopefully, if we do this, Ah. Okay, so this is the problem. So this is something I wanted to mention. If you do it this way, it doesn't matter what you do, you're never going to be able to get this to look correct. And this is because with the inbuilt Navin web flow, there's some hidden styling which you can't see or change. So you can see here, or maybe it's the margin, but no, the margins on the outside. What's here is basically some kind of padding on the inside, which obviously there is nothing. And even if you mess around with this, it doesn't actually change anything. So what you have to do is create your own container and not use the inbuilt nav container that comes with the Navbar standard. So hopefully that makes sense. And I'll actually just show you the way we would do that. So what we'll do is on the Navbar itself to just create our own container. So we'll go here. We'll click on Div block, and we'll call this centered container. I spelled that wrong, but whatever. Then what we'll do is just pop this to the top, what we'll do is now style our container as we want to. Obviously, the previous one we had would be 1,200 pixels again. Let's do that now. Because it's not centered, we need to center it, click this button here to center. That's all fine. We also want to make sure it's a flex layout and we want it to space between. It should be, and then we also have it aligned to the center. Now nothing's in here for the moment. But now, if we throw all these items in, it actually will work as it should have done the first time around. Let's do that. The easiest way to do this is with the navigator. What we're going to do is throw in our brand, make sure it sits within the container. Same for the nav menu, make sure it sits inside. Same for the menu button. Again, just push it inwards. Then this one here, also the same. And then this container, which is the default one can just be gotten rid of, and you can see now if we have a look at this, we have actually got what we wanted. So the only thing that we've missed off is on the NAV two. The second NAV we don't have any padding, so we want to do the same things before. That will be 3% and we want the same either side. So to make it the same both sides, you just hold Alt or command if you're on a mac, and then as you move it, it will change it on both sides. And now, if we look at both of these, you should see that they react just the same way and we have a centered navigation by creating our own container. Now, obviously, that may be felt a bit long winded. And it's only because I sort of wanted to show you the problem you'd encounter if you hadn't created your own container. If you've done that, and you didn't know about that problem, you'd be scratching your head forever trying to figure out what you're doing wrong. It's basically because that the inbuilt container within the NAV has some pre made styling, which would not have let us do the justification that we wanted. So that's really important to remember, you do have to make your own container for certain styling. Okay, so that pretty much wraps it up for the centered. What we'll do now is we're going to change it slightly so that we have the logo in the center and we'll have a nav menu on either side. 5. NAVIGATION: LOGO CENTERED: Okay, so next up, we're going to create a version where we have a logo in the center, and we're going to have sort of two nav menu either side of that logo. So once again, we'll throw on another nav bar. We'll just keep this here as a reference point again and we'll kind of use it to take the logo from. So we'll pop on a nav bar, first of all, and we'll just move this away slightly. We'll get rid of this class that keeps appearing, and we'll call this move that down a little bit. And just like before, we'll create some padding above and below. So let's give it 20. Okay, so, similar to the last video, we're actually going to create our own container once again. So rather than using the inbuilt nav container that comes as standard with web flow. We're going to create our own. So just before we do that, though, let's just finish your styling this as we should do. So this should be white. We'll just create a swatch in case we come back to this, and we'll pop our logo within the brand section. Okay, don't worry about this for now. We'll change all this styling in just a moment. So on the NV itself, we're going to enter in a div block, and we're going to call this centered logo. Container. Once again, we'll just move this to the top so we can see what we're doing a bit better. And we want to have this as 1,200 pixels. We need to make sure it's centered, which is this button just here. And then what we can start to do is make this a flex. What we'll do in this case, once again, we can actually have either space between and distribute evenly or we can also have space around and distribute evenly. We can kind of go through different versions, and I'll show you what both look like. First of all, we need to start dragging some of our sections in. We'll go to our navigator. We need to throw our brand into this one now. Same for the nav menu, that needs to snap inwards slightly, and same for this menu button here, I can snap inwards. Then this old container we can just get rid of again. And what we also need though is two different nav menu. So we'll just copy and paste that in, and very simply, we'll just drag this brand in between the two nav menu. And then we'll just make sure all the styling on the logo container so that the centered logo container is as we want it to be. So we need to have it aligned to the middle so everything is essential. And then what we can do is just simply click on the space between, and there we go. We have a logo in the center. We have nine items either side. And if you didn't want to have them completely to the edge, that's up to you. You could also have space around. So there's a little bit of a gap either side. You could do that. Again, that's completely up to you what you want to do, and there's just the two different ways you could do it. And just to finish this off, once again, we'll add some padding. So this needs to be 3% just like the rest of them were. We'll make sure it's the same both sides. And then let's have a look at that. And there we go. We have a centered logo navigation, and we have nav items either side. Okay, so for the next one that we're going to do, we're going to have it where we have a full screen drop down without any actual nav items on screen initially. So a little bit like we do for mobile, we'll have this but basically also on the desktop version as well. 6. NAVIGATION: DESKTOP HAMBURGER: Okay. So for this video, I'm going to show you how to essentially have the same kind of thing that you have on a mobile nav. So just a button with a drop down, but have it on desktop view as well. So just to get rid of some clutter, we'll just get rid of this NAV and we'll do it to this one. So all you have to do is go onto your tablet view or mobile tablet is the best one to do it with. And then what we can do. On the settings panel for the Navbar, you can see it gives you some options here of where the menu icon appears. So if you wanted this navigation not to have the hamburger on table, you could actually do that if you wanted to. And you can also go the other way. So if you want to, you can drag this all the way to the left. And now on desktop view, you're going to have the drop down as well. So let's have a quick look at this. And now you can see there's a drop down with all the nav items. Now, that's kind of the end of the video, I suppose, because that's kind of done what we want to do, but it doesn't look great. So we're going to just change this slightly so it looks a bit more usable. So first thing we need to do, I think we need to give some padding or sorry, some margin to this button here, so it pushes it away from the button. So let's just do that first of all. So on the button itself, we'll just apply maybe let's do 40 just for now, and that will already look a lot better. And then on the menu button, what we're going to do is go to our settings again and then click on open menu. Then on the NAV menu itself, we're going to change the color of this. So rather than being gray, we wanted to match the background of the nav, so this is going to be white. So just turn that into white, and already, this is going to look a lot better. Okay. So that's better. But again, it still looks a bit weird because obviously, we've only got three icons here. Now, you don't really do this if you had maybe multiple navigation items on here. But I'm going to just show you a slightly different way to address this layout, and maybe make it a little bit better. So we're going to change this also. In fact, we'll leave that for now. And we'll maybe just get this into the center. Now, we did do this briefly on the first course that I did, but I want to just show you again how to do this. So rather than keeping it like this, what we're going to do is throw on a div container. Now, what you don't want to do is do this to the nav menu itself. You don't want to restart the nav menu because you're going to change it for other ones, which you may not want to. So the best way to do this is to throw your own dv block into it, and therefore, then alter that container to suit. So within the nav menu, what we're going to do is throw on a dv. And then we're going to drag these items into that dv block. And then now we can style the div block within the nav menu, however we want to without affecting the inbuilt nav menu. So what we will do is maybe make the height of this div, or maybe make it 50 VH, so it takes up 50% of the viewport height. So that looks a lot better already, and we'll also make the div block a flex box and we'll have it set to vertical. And there we are. Already looks a lot better. We'll give these a class of nav link. In fact, I should have done that before. Nan we'll copy and paste that a few times. We'll make this one that was about. We'll make that services and this one can be contact. Okay. And then we'll just make these a bit bigger. Rather than being 14, let's try 25. Great. I'm within this div block. We're going to also get this to the center as well. Let's have that line to the center and justify it to the center as well. Okay, already, this looks a lot better, and what you could also do? Let's see if you had a lot of nav items. You could also make these into different columns as we go across. But I think we'll probably leave it at this for now. I wanted to just show you basically how you would do this. As you can see now, we don't have any nav menu here. When you look at the button, however, it does bring up the navigation. And bear in mind, though, any changes we've made to the NAV here is also going to be the same on tablet and below. So let's say you didn't want this on mobile, you could then alter that obviously, and it wouldn't change this one. So just to prove that to you. Let's say on mobile, if we want to get this NAV open again. So go to menu button. Go to settings, click on open menu. Then let's say for a tablet, we want this to come all the way down, so it's 100% of the viewport height. Let's do that. Rather than 50, let's do 100. And there we go. Now, you may want to actually not have this centered for tablet view, but I will leave it up to you. But just to show you the difference. So on desktop, it comes up halfway, then on tablet and everything else downwards, it will be 100% of the viewport height. Okay, so that pretty much sums it up for this video in the next video, we're going to be looking at how to use dropdowns. 7. NAVIGATION: DROPDOWN: Okay, so next up, we're going to look at how to use dropdowns within the nav menu. So first of all, let's add a standard sorry, a standard navigation on. And you can see above the Navbar, we actually do have a drop down option, which is what we're actually going to throw inside the nav menu within the Navbar. So first of all, though, let's just throw the Navbar on, and we'll make the background of it rather than this horrible gray color. We'll do it as white. And for the brand, we'll just add whatever we have lying around. So we've got this logo here. Obviously, you can do whatever you want with this. And we'll just make the nav bar itself a little bit wider. So we'll just add some padding below above and below. Okay, so that's fine. This isn't perfectly centered in terms of the nav menu. So actually, let's just center it, so it's a little bit off at the moment. So let's just put some padding on this too. Something like that looks about right. So I'm just doing it by eyeballing it for now. That's fine. Okay, so what we're going to do then is within our nav menu, we're going to throw that drop down element that you saw within the elements panel. So first of all, make sure you have your nav menu selected, and then go to your elements panel and just go to the dropdown option here. Click on that and then it'll add a dropdown element. So at the moment, I'll just show you what this looks like. If we preview this, this is again, as it would normally be for nav menu, nothing exciting happening, but then for drop down, if you click on this, it drops down. Okay, so that's all fine. And basically all you'll do from here is then obviously alter If we open the menu, you can alter the links inside, and then you have a dropdown menu. Now, this is not particularly sexy, though, is it? When you just click on it, this is really, really basic. Obviously, you could style this to however you want to, but it doesn't animate anything by default. We're going to look at more to do with animations later on in the course. But I'm going to just quickly show you how you would do this to get it, so it's a little more interesting than what it currently is. Okay, so over to the interactions panel here. Click on Interactions, and click on the t plus icon here, and you'll see that we actually have a new option available. So usually this will be grade out. But since we've selected the dropdown, it now says, Dropdown opens, and this is what we want to select because we want to have this animation when the dropdown pops down. Okay, so that's all fine. We'll actually just open the menu as well. Back to our animation here. And what we can do now is click on Start and Animation. Click on the plus icon to start it. And we'll just call this drop down. And now, you actually want to animate the list. So this is the drop down list. Now they were on the interactions panel. You need to change from the drop down should be highlighted. Now change it to the drop down list because this is what you're going to actually be animating. The drop down itself with this little lightning bolt is the signifier of it being the trigger. So that's what's triggering the animation, and the drop down list is what we actually want to animate. So make sure the drop down list is now selected. Go over to your actions panel here on the plus icon again. What we're going to do is change the size. For this, what we want to do is click on for timing, set to initial state, and this is going to be actually zero. They actually already both say zero, but it's grade out. You actually have to enter in zero for both of these for this to work. Just click Enter. Basically, it's going to be completely hidden. Then what we can do is right, click on the drop down list, duplicate it, and this time, we're going to have it set to s we're going to have it selected rather than on pixels. Click on that and then set it to auto for both the width and for both the height as well. So now if we preview this, you'll see it is animating downwards, and it's growing in size as we animate. Okay, so that's that first part done, so just save this. Then what we need to do also is make sure that when the menu closes that it animates as well. The best thing to do is go into action here and then start an animation. We're actually going to duplicate this drop down again. Right click on the three dots here and duplicate that. It now says drop down two. Make sure you select it and then click on Configure. And then what we can do is just delete this initial one here, get rid of that. This one, you need to uncheck for initial state, get rid of that. Then you'll need to just reset the easing that you want to. Rather than linear, we want it set to ease. This is actually fine. We actually want it back to zero because when it obviously when it goes back out, it needs to go back to zero, so you can't see it. Make sure that is selected, and that should all now be fine. We'll save that. Now let's see if we preview this, what this looks like. As we click on it, it drops down. We have an issue. So the issue that we have is that it comes down quite nicely, but when we click off it, it just disappears really quick, and the animation that we should have isn't actually there. And the reason for this is to set another option. So when we go to the drop down option here, go into the settings for the open menu settings. And you'll see here, what we'll also do is click on Open on Host that when we just hover over it, it opens, but also the closed delay needs setting. If you don't set this, the animation won't correctly work. So what we're going to do is type in 500 milliseconds, which is the same as the animations we set for sort of 0.5, which is 0.5 second, which equals 500 milliseconds. So make sure that's all selected, and now everything should be working as it should do. So now if we hover over it, it's going to animate down, then we take our mouse away, it animates back in. And there we are. That's pretty much all we need to do for it. Now obviously, you can then style this, however you want to. If you wanted to have it when you click down to these that these change color, you could easily do that and add more animations or even a transition, you could do that. You wouldn't necessarily have to use an animation for that. If you want to have multiple ones of these, you can do that too. So just to show you that, if we go on to the drop down, make sure that the drop down is selected, and then you can just copy and paste that along as many times as you want to. So now let's have a look at that. As you can see, they all do the same kind of thing and they all animate downwards. Okay, so that's a really basic example of how to use dropdowns. Now, again, it's not overly exciting what we've done. But again, to make it sort of fit your particular needs or project, you could then change the colors. However, you want to if you wanted some kind of hover effect to be on each one of these, you could do. Again, there's endless possibilities in how you could animate this. Okay, but that pretty much wraps it up for the dropdown part. Next up, we're going to do something again which involves dropdowns. But rather than just sort of singular dropdowns from one navigation item, we're going to create a mega menu. 8. NAVIGATION: MEGA MENU: Okay. So for this video, we're going to be looking at how to create a mega menu. So this is going to follow on from the drop down video we just did previously. And we're actually going to use a drop down element for the mega menu as well, and just kind of alter that to suit our needs. Okay, so first of all, we're going to throw on the default NAV within Webflow. You don't have to do this. You could create your own if you really want to, but just for speed, I'm going to use the standard menu and then kind of alter it to suit. We'll just throw in a text block, and we'll just call this for the logo. We'll just call it mega menu. Oh. Okay, that's fine. We'll just make it a little bit larger, so something like 30 pixels. And on the brand part here, we'll just give it a little bit of a little bit of spacing, so maybe 20 would do fine. Okay, so now, within the nav menu, we need to throw on a drop down. So let's do that just like before. And now, this is what we're going to use to get this full width. So currently, if we open this, go to our settings panel here and go on open menu. You can see it's just literally going straight down and it has some styling to literally just take up the space of the items currently in it. But what we want is to have this drop down list take up the entire expanse of the screen. There's a few things we have to do in order to get it to do that. So if we go to a navigator, we need to alter a few things. So we actually need the drop down to be set rather than a relative, which it currently is, we need to set this to static. I'll explain why in just a moment. This needs to be static. You can see as soon as I do that, something has happened. It's now taking a little bit more room, kind halfway there. And the nav menu is currently also set to relative, and that will need to also be static. Then also, we need to make sure that the NAV bar itself, the actual bar itself is set to well, you could use fixed or absolute, and we're going to use absolute, and then we're going to make sure it sticks to the top of the screen no matter what. Now, when we come back to our drop down list, if we open the menu. Now if we select the option here, you could have it as top left or you could use this one here. We're going to have it from the top. Now you can see it is taking up the entire expanse of the screen. And if we just move this down a little bit by using the controls on the positioning, you can now see we can move it wherever we want to. And if we make it 100% here at the bottom, Okay, so there we are. We now have a mega menu, which takes up the entire expanse of the screen. Now, the reason for this is that we needed to get the drop down list to be relative to the Navbar itself. Now, currently, the Navbar is called Navbar five. Again, you should be naming them properly, but Again, just for this video, I'm not going to be quite stringent on that, but again, it's relative to the Nav Bar, which is why it now takes up the entire expanse of the screen. If you hadn't made the Navbar absolute or relative or fixed, this would not work. I mean, just to show you that, if I put the nav bar back to static, you'll see now when we open this menu, it's actually not going to be full anymore. So it's actually not working at all. So make sure the Navbar itself, in this case, we want it to stick to the top of the screen, make sure it's actually absolute and to the top, and now when we open it, it does what we want it to. Okay, so as you can see at the moment, all of our nav links are right to the edge of the screen. So what we need to do is get this to a maximum width, which will match the container within Webflow. So the max container size by default within Webflow is 940 pixels. So what we're going to do within our drop down list, if we make sure that's selected, we're going to throw in a div, and we'll call this NVlink container. And we're going to give this a maximum width of 940 pixels, and we're going to center it. Then by using the navigator, just move this to the top, so it's just below the drop down list, and then just throw one of these dropdown links inside of that container, and then just now delete these other two. Okay, so you can see we have a slight alignment issue because we actually have some default padding on the nav Lnk itself. You want to get rid of that, so it aligns properly. You can do. So if you just go onto this and then just get rid of that so it zeroes out, you'll now see that it completely aligns with our lego over here. Okay, so there we are. That's our first nav Link. Done. Obviously, what you could do then is obviously just change this to whatever you want to do, so this could be, I don't know, service one. And then if you want to just duplicate this, however you want to. What you do initially, of course, is style this particular drop down link and then paste it along. But within the drop down within the nav link container, what I want to do is get this into a grid, and that way, we can actually just have them spaced evenly along. So what we'll do make sure the nav Link container is selected, which is currently just a div, but turn it into a grid. Okay, and now we're going to have I think we'll have three columns, and we will have two rows as well. So that's all fine. And then what we'll also do is this drop down link. We need to give it some styling. So by default, it has some space in here. So let's just zero that out. Just get rid of that. And then what we'll do is make sure it's a aligned to the left, which it currently is. And then if we then copy and paste this once we've styled it, however you want to, it will then take up all the different cells. So this will give you a pretty common drop down. So what we also need to do, though, is that it's kind of a little bit tight at the moment, we need to give it a bit of spacing. So within the Navaln container, we're going to give that a little bit of padding. So we'll do something like, I don't know, something like 50 pixels. That looks pretty good. Okay, there's 50, and there we are. We have a basic drop down, which correctly aligns with our menu. Okay, so let's do that. And also, we can change the way in which this works. If you want to have it drop down on Hava, you can do that as well. And if we just preview this now, if we just get rid of it, now when I move my mouse over it, it drops down. Okay, so there we are. That's a very basic way of creating a dropdown. Now, we're not going to just stop here though, because this is incredibly boring. So just having it literally pop down straight like that with no kind of animation is not great. You don't generally see dropdowns quite as plain as this. So we're going to actually put an animation onto the drop down. So let's give this a go. So we need to make sure that the drop down is selected. So make sure it's selected on the navigator, because this is going to be our trigger to trigger the animation to get this dropdown list to appear. What I want to happen is I want the drop down list to basically grow in size or it's going to be obviously start from zero pixels and go to just auto however big this actually is. Okay, so make sure the drop down is selected. Go to your interactions panel over here, and then go on an element trigger and you'll see because we've selected our drop down over here, it's giving us a new option, which is the dropdown opens. So that's what we're going to choose. And then we're going to start an animation, create a new one here. And we're going to have this as have it called dropdown opens. Okay, so our trigger is now selected, but obviously, we need to then choose what we want to animate. And what we want to animate is our drop down list. So make sure that is clicked. And what we're going to do from here is then go on to sizing. And we want to set it as the initial state. So click this one here. So initial state is selected. And we then need to basically just zero this out. Now, it currently says zero. But they're actually grade out. You need to actually put in zero for this to work properly. Sometimes I know people that use Webflow for the first time have just assumed it says zero and then it would work, but you actually have to enter zero in for it to actually work properly. Okay, so that's all done. Don't worry too much about this for now. We're going to solve this problem in just a moment. This is going to be an overflow hidden thing. We're going to do in just a moment. What we're going to do now though is just click on this and duplicate it. This time, rather than not being an initial state, we're going to have it set to ease. What we're going to actually do is set this to auto. And this way, it's going to respect the sizing that we actually gave this ourselves. You don't need to set a pixel value. Just make sure it's set to auto, and we're going to make sure it's set to ease as well. And then we're going to save that. And now, if we preview this, you'll see it grows and pops downwards like that. Okay, so that's all fine. So let's preview this on the real thing. Now, you can see, we have an issue with the text appearing when the menu is opening. So we need to make sure that we get rid of this problem. So I'll just show you this again on the animations, if we look at this. You can see that this text is already kind of there. So what we need to do is on the drop down list. Make sure you go back to your CSS panel, first of all, Then rather than this being flow visible, just click overflow hidden, and this will have solved the issue for it. If we go back to the drop down on the animations here, you'll now see that we don't have it visible, which is what we want. So if we click Play, you'll now see it does that, and there's no text that's actually visible. Okay, so that's that done. But the other thing we need to do is get this to animate back upwards when we take our mouse away from the trigger. So that's now done. And then what we're going to do now is on menu close, we're going to start an animation. And dropdown opens. We're going to actually duplicate the one we just created. I've got ones here that I've done previously, so just ignore these. So we created the dropdown opens. Click on the three dots to the right here and duplicate this, and we're going to then rename it dropdown closes. Or drop down closing. Okay, that's fine. And then make sure it's selected, and then we can configure this one. So, very simple. All we have to do is get rid of this first one here, uncheck the initial state for the one that's now left. So make sure that's gone checked, and then we're going to set that to ease as well. And we'll keep it as 0.5 for the timing of that. So that's all fine. And then this should already be set to zero, but just make sure it is actually typed in. Okay, so save this, and there's just one more thing we need to do. So before anything, actually, make sure you've selected the correct ones. Very often, you know, I make death mistakes where I just forget to select it, and I wonder why it's not working. So make sure you don't do that. Make sure both of the correct ones are actually selected on here. So make sure it's not that. We'll make sure it's dropped down closing, make sure this ones dropped down opens. Then just go to your settings panel here. We already have set it to open menu on Hov, but you also want to add a closed delay. Now, you have to set this for it to work properly. So the closed delay, we're going to have is 500 milli seconds, which is going to be the same as the animation speed for the open end close. So make sure that is selected. This time, when we hover over, it animates on open and animates on clothes as well. So there we are. We have our very basic mega menu all sorted. Now, one thing I want to mention actually, if I actually move my mouse down a little bit, there's actually a very small gap here, which is causing it to close before I can get to any of these. Now, this happens in cases where you've made adjustments to the nab bar itself. If I get the Nabar some padding and now I try and do this, you'll see it's actually closing before we get a chance to go into the mega menu. And the reason for this is that you'll see here, There's actually a gap between where this drop down tugle stops because we've given some spacing to the navbar. So what we need to do to make sure this doesn't happen. If we open the menu is just back this off a little bit. So if we go on to our absolute positioning, rather than 100, move it sort of slightly up here, and this time, we're going to have enough space here, you can see that the gap is actually closed. So now, there's no gap for this to kind of untrigger if that makes sense. Now if we do this again, if I move my mouse down slowly, you'll see there is no point at which it stops the trigger. So now when you hover over it, it does exactly what it's meant to do. Okay. Okay, so that pretty much is it for this video. For the class project, I'm going to create something which uses lots of different facets of all the things we're going to use in this course. And for the class project, I'm going to use a mega menu again, and I'm going to do some a variant of this basically. So rather than just using text links, What you can do, of course, is you can put anything you want in this mega menu. You don't have to have it is just text links. You can put images in. You can animate what comes in here as well. So you could instead of just the drop down link, you could have images, you could have a link block rather than a drop down link. And that's what I'm going to do for the class project. So we're actually going to come back to the NAV menu a little bit later. Okay, so that's pretty much it for this video. Hopefully, that all makes sense. And again, we are going to come back to a mega menu towards the end of the course when we do our class project. But just for now, this is a very simple mega menu with a drop down animation. 9. NAVIGATION: CUSTOM MOBILE: Okay. Okay, so for the mobile nav, we're going to essentially follow on from what we've just done from the mega menu. And in fact, just following on from that video, if we look at the sort of tablet and mobile versions of the mega menu, we have a slight issue, that when we do this, this happens, which, of course, doesn't look right. Now, what you could do is try and alter this to fit the mobile version. The way you would do that is by maybe going to the nav menu itself and making the nav menu position absolute, and putting it back to normal, how it would usually be. That's one way of doing it, but the only problem with this is you sometimes get glitches when you go back to this version as well. So it's not always perfect doing it this way, I wouldn't say. You're actually better off. See, this is the glitch I'm talking about. So sometimes it kind of has a conflict. So what I always do is put a new navigation on that's completely separate, and it just becomes its own thing as a mobile NAP. So what we would do on tablet view downwards is basically just hide this version of the nav. So let's do that. And then what we can do is just simply throw on a new nav bar. And we can then style this, however we want to whilst retaining the original nav here. And obviously, on desktop, we'd have to hide this version there as well. So we want to keep that. And just for speed, we'll actually just copy this text, where are we and go back to here. So, okay, so we need to make sure we unhide it on tablet view, so that would just be as it is usually. And within our brand, we'll pop in our logo. So let's do that. And rather than mega menu, we'll call this mobile menu. And we'll actually make this a little bit smaller, so we'll just give us a subclass of mob for mobile and we'll make it something like 20 instead, and just for speed, we'll apply some padding to this. Okay, so we have the makings of a mobile menu. And the way this currently looks is just the bog standard way that Webflow has them. So what I want to do though today is to actually change the way we interact with the hamburger icon. So the hamburger is static. It doesn't move. There's no kind of animation effect. If we look at the Webflow website, for example, and we look at the mobile version, You'll see as we click on the Hamburger, it has animation, which is quite nice. And this is obviously super common with lots of websites. And it's just something a bit more interesting than the bog standard kind of, you know, it just stays in place. So I want to show you how to do something like that. And there's actually a few different ways you can approach this. So you can actually create this kind of effect that we had on the Webflow website in terms of using an interaction, which is quite involved, it can be, depending on what kind of interaction you have. But there is one other way you can do it, which arguably is slightly easier. So it still involves interactions, but it means we don't actually have to build the effect of it moving. And the way we're going to do that is by using something called lottie files or a lottie file. So this website is called lottifies.com. And lottie files basically are kind of animations created in after effects which you can use on your Webflow website. And the great thing about them is they're very low file size, and they look absolutely great. And there's all sorts of things you can use this for. What we're going to do is just type in hamburger. And when we do this, you'll see it actually loads on lots of hamburger menus if it eventually loads. And there we are. So some of them are actual hamburgers, but you'll see that the term hamburger refers to the three lines that you generally use for mobile naps. And we're going to use one of these as our animation for our mobile navigation. Again, we could use any one of them. It's just a case of scrolling through and finding one that you like to look of. I think this one for me looks pretty good. We're going to use this. By the way, all the. A lot of the animations on lottie files that come are completely free to use as well. It's really, really great. We're actually going to use lottie files again a little bit later in the course when we talk more about animations and interactions. I'm going to just show you this now because obviously we're at the mobile NAS stage. So they also have a marketplace of pay donations, which are sort of more complex, but these ones are actually free. So we're going to go on this one, and you're going to download the file. It's also worth mentioning that these are all black by default, but you can actually change the color of them too, if you go down to edit layer colors, you can actually change them to white if you had sort of a black background or whatever color you wanted. Okay, so let's download this. So we want the Lottie JS file, and then we'll go back to our project here. And what we're going to do is pop this file within the menu button container. So we have a look at that. So within this menu button, we're going to get rid of this icon, and we're going to replace it with this lottie file. So just before we do that, we need to actually upload this here. I've actually already loaded it on off screen, but I'll load it on again just so you can sort of see. So once that loads up, all you need to do is then drag it into this menu button here. So I'm going to do that now. So if we drag it in, And there we are. So at the moment, it's huge, obviously, we're going to have to fix that. So get rid of that for now. And also, we need to get rid of this icon because we don't need that any longer. Okay, so the issue we have is absolutely enormous, so we need to try and make this a lot smaller. And a lot of the lottie files that you have have a lot of space around them, which is why this has happened. So we have to do something kind of clever to get around this problem. And the way around it is clicking on the menu button selector here, and rather than having it overflow visible, we're going to have it as overflow hidden. Then on the Lotte animation, we're going to give it a set height. Something like 40 pixels will be fine, and then the height also will be 40. But that's now obviously way too small. So what we're going to do is now scale this up using a two D and three D transform. Now if we go to scale, and we just drag this to where it looks correct, I think something like maybe three would actually look appropriate. And what's actually happening now is the actual container itself is now hidden or overflow hidden, so it's not showing, but we have just scale to make it a bit larger. So I hope that makes sense. Okay, so now what we can do is start making this look right and we'll actually animate it to open the menu. So the way that we do this, in fact, just before anything else, I need to adjust this now, actually. So this doesn't look quite right. So we have some padding. Yeah, we'll just adjust the padding slightly. Okay, so we need to click on the Navbar itself. Now, this is just called Navbar six. Again, I should have called it something proper, but whatever. Hopefully, by watching the first course, I made you know you should be naming all the classes as you go. But just for speed, I'm not going to do that. Okay. So what we're going to do then is now go onto our interactions panel. With the Navbar selected. And then you'll see we have a special option that is now open for us. So you don't always have this Mofult. It's normally grade out. But because I've selected the Navbar, we now have this option. So if you click on this, we're now going to start an interaction. So we'll start an animation. I've got a few different ones here just from previous projects. So we're going to start a new one and we'll call it mobile menu pen. Hey, J. And then what we're going to do is start the animation. So this is on when the mobile menu opens. So what we want to effect, though, is the lottie animation. So make sure the lottie animation is selected when we do this. Then go to actions, and then you'll see here an option for Lottie. So click on this. And I think the animation itself is actually actually a bit of a delay before the animation starts. So you can actually scroll here. Through the entire animation. You can see as I move my cursor, if you look at the lottie file itself, it's actually moving as I do that. And you can see, for the first few milliseconds, nothing's actually happening. So just start moving it until it starts to move. So I think by around about frame 3.1 or frame three, maybe I'll do. Whatever. That's fine. That's about where it starts. So we're going to set that as the initial state, rather than having it zeroed out. So now click on the timing for initial state, and that's fine. And then what we're going to do is right click on it, and then we're going to duplicate it. And this time, rather than being 3.1, we're going to just drag this along until we get the full animation sorted. If you keep going, it will eventually go back, which we actually don't want. We want to just get it to the point where we have the sort of the cross. So A here, I think is fine. So around about frame 35.1. It's very specific. Okay, that's fine. So that's what we want it to do. And if we click on Es when we do this as well. If you press play now, you'll C, it changes, and it's stopped at this point in time, which is great. Okay, so that's the first part done. That's when the Navbar opens. So if we save this, that's all fine, we now need to add it when it closes. So if you start an animation, what we can do once again is duplicate the mobile menu open. So we'll do that. And then we'll just rename this Mobile menu close. So just get rid of that. Okay, that's all fine. Make sure it's selected as well, and then we can start to configure it. All we need to do is get rid of this initial one here. Uncheck the initial state for this option, but you can essentially keep it pretty much where it is. So that's all fine. That's pretty much it. So we can maybe put the easing on as well. So if we play that, actually we won't play. So that should actually be all fine now. So now, I think that's all we actually need to do. So let's preview this. So if we click it, we should get the animation, and when we click it again, it should go away. And there we are. We now have a lottie animation hamburger icon, which is a lot more interesting than the standard nav. Okay, so hopefully, that makes sense. I'm going to just tighty this up a little bit. Obviously this is kind of gray doesn't look right. And what I think I'll also do is if we get the menu to open a moment, menu button, open menu. And we need to get this rather than being gray. We want it white, so it all matches. So let's do that. The nav menu can be white and the menu button background also needs to be white or transparent. In fact, it was gray, wasn't it? I just realized. I tell you, we'll make it white. I will also make the mobile nav menu white to just for as. That's fine. Close the menu moment and I'll make the entire nav menu white. Again, this doesn't really matter. I'm just doing this to show you how it would look But there we go. We have a animation on the mobile menu. Now, what's also good about doing it this way? If I click off, it still goes back to normal. Sometimes, depending on how you want to get these animations on, it won't always do that. So it's really important to have this animation set to the Navbar nav menu itself. And you can actually only do this with the default NAV menu within Webflow. If you make your own, you don't have this option, so you have to actually use that default nav menu to do it. Okay, so hopefully, all of that makes sense. We're going to go into more detail about lottie animations a little bit later on. And we're going to use them more in various different ways. But for now, that is our mobile nav menu with a lottie animation for the hamburger icon. 10. HERO SECTIONS: So we're going to create various different types of hero section. So we did this very briefly in my first course for web flow beginners, but we're going to dive a little bit deeper in this, and we're going to make use of some of the techniques that we didn't cover in that first course. So in that first course, we didn't cover background videos, and we didn't look at sliders. So we're going to use at least two of those different types within our hero section for this course. I'm also going to show you how to position various different dip blocks and sections by using relative and absolute positioning to get things to stick to certain areas of the screen. Okay, so let's get started with our first hero section. 11. HERO SECTION: CENTERED: Okay, so, first off, we're going to create a hero section which is pretty much everything centered. So the initial image we're going to use is going to be centered, and therefore, we're going to match that with our title and sort of paragraph and buttons as well. Okay, so let's get started. So I've already preloaded some of these images on just to save time. So what we'll do initially is throw on a section, and we'll just call this hero section. Okay. And we also want this to have a minimum height of 100 VH. This way, it takes up all of the viewport height. And then what we'll do is pop on our background image. So go down to your background section. Look up the plus symbol and then go and choose image, and in this case, we're going to choose this first one here. Okay. And also, we're going to have it centered, I think. We don't want it to tile and we want it to cover. Okay, so here we go. So we have the makings of our hero section, which is going to be centered already. So our text is going to go around about here. Obviously, you could do it either side. This would actually suit either. But since kind of the main focus of this image is all centered, we're going to have the text also in the center. Okay, so how do we do this? There's a few different ways you could go about this. You could just start throwing text onto the hero section if you wanted to. And what I think we're going to do is place all of our sort of titles and text and buttons within its own div container. And the reason for that is that we're going to potentially use flex. I'll show you one of the ways you could use flex for this and another way just to simply center it and then just padding to suit. It doesn't really matter which way you do it. So let's just try both anyway. Okay, so first up, then, what we're going to do is just throw on a div block. And we're going to give this a maximum width of something like 800 pixels. And we're going to center it as well. Now, this first way is going to be basically by just as using padding, which is completely fine. We could also use flex, of course, which we're going to do in just a moment. And you know what? In fact, just before we do this, actually, let's get rid of that, and we'll just clean that up and get rid of it. We're actually going to throw on our navigation first. And we're going to put it within this hero section. So I'll just show you how to do that because I don't think we've done this before. So go down to your nav section and then click on Navbar. And now this navbar is actually sitting within the hero section. So rather than being above it, it's actually sitting within it. So if you go into the hero section. You can see the navbar is sitting within. Now, previously, what we've done is we've had it sort of not part of it, and it's been sort of, you know, above it, but you can actually pop nav bars within hero sections too. And this is useful, if for instance, you want to have a transparent nav, which is what we're actually going to do for this one. So first of all, we'll pop in a temporary logo, or we'll just create something very quickly. So we'll just pop in a text block, and we'll just creatively call this logo. And then let's just style this slightly. So we'll have it as let's say 25. That's fine. And we'll have it slightly bolder than that. In fact, we'll use the font that we're going to be using. So we're going to use this one. And okay, so that's pretty much okay. We're actually going to have this as transparent. So rather than having it all dark, we're going to have it white. So let's do that. So rather than essentially black, we'll have it as white. Just create a swatch for the hell of it. Okay. And obviously, this background is going to have to go as well. So what we'll do. Just before we do that is we'll just get the We'll get the brand, so it's center slightly better. So we're going to just put spacing above and below. And something like 20 pixels should match what we have here. So they have 20 pixels here. In fact, just so we can style these better as well. We're going to get rid of two of them like we have them before. We're going to create a class of Nav Link, and we're going to make these white. Okay. And then we'll just copy and paste this a few times and pop in back what they were before, which was about and then contact as well. And then on the nav bar itself, it currently has a color, which is a slightly off white color. Click on this and then just basically get rid of the opacity, so it's completely see through. And now you have a clear navigation, which is basically taking up to the gbfusly no color there, and it's just you can see what the background image actually is through the Navbar itself. We can still make this a bit larger so it's spacing slightly better. So we'll give it well to give the Navbar some padding as well. So let's just do that. And we'll do 20 for that as well. Okay, so that's pretty good. Okay, now we can pop on a div block, and this will be our hero text container, and this will have a maximum width of 800 pixels. You might make that smaller, but that will do for now. And then we'll center it by clicking this button here and I'll pop it in the center. Okay, and then we'll pop in a heading and what shall we call this? How do you spot prestige. That will do. Okay. I'll check I'll spot that right. I think I spilt it right. Okay, so also, we're going to just choose our font over here, so it all matches, and this is going to be white. And we'll actually rename the class for this. So rather than just heading, we'll rename it as heading one, so we can identify it, and we'll have this centered. Okay. So the div block that sits within will actually make it, so this is centered to. So this means whatever we put in the dvlock now, it will automatically inherit the centered styling. So just to prove that, if we make sure the dv sorry, yeah, the hero text container is selected, we'll then add a paragraph in, and you can see automatically, it's already centered it because the div it sits within is pre set to being centered, if that makes sense. Okay, and we'll just make this white as well. There we are. And we'll also pop a button in two. Okay. And that's all good. So everything centered. Well, perhaps just the spacing on this a little bit. So I'll just put some margin on for here. 20 seems good. And that text is a little bit smaller, actually. So let's let's say 50. And I think also. What shall we do? Let the spacing, and we're going to have a pixels worth it for that. And yeah, I'm prettyhappy with that. Obviously, this button looks wrong being blue, so let's change that to yellow. Get kind of eyeball in this, really. So that looks something close. That's good enough for me. And we'll also have the button text rather than whites, we'll have it as dark as well. Okay, so there we are. So that's really simple. This is probably the simplest way of doing this. We could have used flex, but that doesn't really if you don't need to use flex, there's no point in doing it. If you can do it by literally just using dip blocks and then altering the padding where needed, then you may as well do it that way. I mean, obviously, flex is a way of centering things. But if you don't need to use it, then you don't feel you shouldn't feel have to use it. So all I would do for this. This is pretty much perfect is maybe adjust the padding slightly for this slightly further down, and that looks pretty good. Okay, so let's also show you how to make this responsive for tablet and mobile as well. So, as it stands, we don't have any padding on either the section or the container containing the text. So we'd have to do that. So if I just show what it looks like for the moment, you can sort of also see that we're csting off quite a bit of the image, too. At this point, it may be worth trying to alter how this looks on mobile slightly. And also, as you can also see, when you get to this sort of stage here, when we get to sort of 800 pixels, it's going right to the edge. So what we're actually going to do is we're actually going to apply some padding to the section. Now, in the previous course, I think I applied it to the containers, but it actually doesn't matter which one you do as long as you're consistent with which version you do. For ease, what I'm going to do just to show you you can do it both ways. I'm going to apply some padding to the section itself. So let's try that. So what I did before was something like 3%. So let's do that and we'll make sure it's the same either side. And to do that, you have to just hold down either command or lt if you're on a PC, and then just drag that, so it's both 3% on either side, which means now when we go to tablet view, you can see there's now some spacing at the edge, which means the text isn't going to go right across the screen. And it will be tempting also to potentially on tablet view to maybe make it so it's not going across all the screen, but actually maybe that's fine for now. So let's do it part by part. So for tablet view, this actually is okay. The image itself, we're going to cut some of it off whatever we do. But let's just see if there's anything we can do to try and make this so we can see more of it. If we go back to our image section here, you can sort of see have this contain option. Now, this won't work. Obviously, it just means it's going to contain it and it won't stretch it over the entire thing. So that won't work. So to some degree, we do actually have to have it. So it covers the entire section. So really, there's not that much we can do to sort of solve this. Really, it's going to be cutting off some of the car. What you could do is maybe just have it like this. So for me, this is what I would perhaps do for the mobile section. So this looks a bit strange. Having sort of half a car, you're not really seeing either end. I mean, also having it to the end. That also looks fine. So that's what I would do in this sort of situation. Now, obviously, this will be up to the individual if you were a designer, you'd have to decide what you'd prefer to see. I think in this case, for me, I would probably choose to have the front end of the car. Let's do that. And obviously, whenever we do this, because we've done it on the tablet view, as you go down, it will have done the same for mobile as well. Now, we could, again, choose to alter this slightly if we wanted to. You can actually type in the percentages you want. So rather than just relying on these position markers, you could actually alter this a little bit. So as it stands, we have it sort of, again, pretty much centered, but it's 0% from the left here. So if we just tried making that 10%, it's going to bring it forward a little bit. And actually, I think that looks a little bit better. So if we do the same sort of thing on mobile two, yeah, at this point, again, you're not seeing which of the car because at the end of the day the screen is small. But maybe maybe you would keep it like that, I think, actually. So I think that is fine. I think that's the best we're going to get out of this image. So you can sort of see you have to sort of think about this creatively how you'd solve these problems because to some degree, as your screen size shrinks, you're going to have to change the design slightly on smaller screens. But I think that is a pretty good compromise. Okay, so that pretty much wraps it up for this one. The next one we're going to do is a similar sort of thing where everything is going to stay pretty much centered. But sometimes when you have an image, it won't always be perfect like this where you have sort of a light part where there's no text over it and a dark part for text. Sometimes, all of the image is going to be quite bright. So on the next one, I'm going to show you how to keep it centered, but I'm going to use a linear gradient to darken part of the screen. 12. HERO SECTION: GRADIENT: Okay, so, first up, I'm going to just change the background image for this. So rather than what we have here, let's choose a different image, and I'm going to choose this one here. Okay, so as you can see, everything is kind of it kind of feels right to have this all centered still, but the big problem that we have is that you can't read any of the texts whatsoever. Now, obviously, what you could do is just make the text doc. That would kind of make sense. But even if we do that, it's going to be difficult to read on certain screen size. So this one is kind of okay. But you can see here that sort of it's sort of borderline at this point. And obviously, what we could do is maybe just move the div block itself a little bit higher. I mean, we'll just try that just so you can sort of see. So at that point, you know, you're kind of getting very closer than now and that will look a bit weird itself. Now, what we're actually going to do is let's just say that we actually want to keep this image, exactly how it is, and we don't want to move it around. I mean, in all reality, what you might want to try and do. I mean, just to show you you could just do this so it brings it down a touch. But even then, at some point in time, you're going to have the issue of this being kind of in the way. So what we're going to do is just show you how you can darken a part of the screen or a part of the image, I should say, and then keep most of it where it's not got a full overlay. Because if you were to put a full overlay over this, it's kind of ruining the image a little bit. So I'll just show what I mean by this. So if we were to do a plus icon again, and then you clicked on Color Overlay, this will automatically give you a full overlay over all of the screen. Now, again, this kind of is okay, but it kind of ruins the image a little bit. So rather than do that, we're going to get rid of that. And we're going to pop on a gradient. So rather than the overlay, you've got radial gradient, which for this one, we actually don't need. So a radial gradient basically means it'll have a different color in the center, and it will gradually get different become a different color as it radiates out. Was a linear gradient, as it suggests, is sort of from one side to the other. It can be whatever direction you want, you can alter the gradient direction by just turning this wheel. And in our case, what we want is to actually have it so the darker part is at the top. So let's just get this to one 80. Okay, so we don't want the gradient at the bottom to have any color whatsoever. So what we'll do is just click on that, and then we'll just pull this bar all the way down. So this part here is completely fine. Then at the top, we actually do want a slightly darker color. So we don't want it quite as dark as that. So when they just make it slightly lighter, and this will allow us to retain our white text or we'll change this back in just a moment. So just make sure that's selected, go onto the black one here. And then when they just back this off a little bit. And that is probably going to be okay, actually. So let's now pop our text color back to white as it was before, and we'll just see how this looks. So back to white. Same with that. And there we go. And that looks pretty good, actually. So that probably wouldn't need much more alteration. You can see that we've managed to retain most of the image being quite bright, rather than having to put a full color overlay over everything. Now, obviously, it's completely up to you which version you would like to try. But for me, kind of, you know, it kind of makes sense to do it this way, just because you don't want to ruin what is essentially a nice image. You can actually move the gradient round slightly as well, just to show you how you would do that. You go back here. Now, at the moment, both of these markers are towards the end. But if you drag this, you can actually move it down more if you wanted to. Now, obviously, in this case, that probably isn't what we want. Well, let's say you wanted to darken something at a certain point. You could do that as well. You can actually then create an extra one over here. You can see when I clicked on it again, it's actually created another point for that gradient color. So for this one, for example, on the end, we could have that essentially completely clear. Obviously, at this point, you can start to see it a little bit, so you'd have to back it off a little bit. But you get to the point. Basically, you can actually control the gradient in quite a number of different ways. But I think for me, what we'd actually do is have it as it was before. We have it, so there's only two different ones here, and we'll make sure that's towards the top. And that pretty much solves it for that, I think. Okay, so again, that's quite a nice quick little trick just that I thought I'd show you. And on the next one we're going to do, we're going to have it where we're going to use we're not going to use flex just yet, but we're going to have all our text to the left hand side. So that's on the next video coming up now. 13. HERO SECTION: BOTTOM BANNER: C. So next up, we're going to revert to having our text to the left hand side like we've done previously. So what we'll do initially is again, change the background image. So we're going to get rid of all of this and just start again. So we're going to add our image, and it's going to be this one here. So we're going to have it centered for now. We don't want it to tile and we'll have it to cover. And just for the moment, we're actually going to get rid of all of this. So let's just select that that we'll select the hero text container, and we'll just delete that. And just so there's no conflicts, we'll just go into our style manager and click cleanup and remove anything that we don't want. Okay, so This time around, obviously, we have a white background or largely, it's quite light. And therefore, obviously, this is not the best one to have, so we're going to change all this to it, so it's dark, rather than being white, we'll have it as just enough black. And we'll create a swatch for that as well. And we'll also make all the nav links, they'll be dark as well. So let's try that. Okay, great. So that's a lot better. So you may have noticed that last time around, we hadn't created our own container in the standard way that we would. So previously in the previous course, when we use containers, we had it, so it was sort of a maximum width that matched the same as the container within the navbar. Now, because it was centered, we didn't necessarily need to do that because obviously being centered, it doesn't really matter because it wasn't right to the edge at any point. It was always in the middle. Now we're going to have our text to the left. We have to go and revert back to that style again. What we're also going to do, again, just for the hell of it, we're going to make this slightly larger just so that looks a bit nicer. So rather than being 940 pixels, which is the default container size within Webflow, we're going to make this a Nav container. Give that a class. And we're going to give this a maximum width of 13 50. And that's all fine, and the padding is still remained on the hero section. Okay, so that's all good. And then now what we're going to do is throw on a container so it contains all of our text to again, a maximum width of the same. So on the hero section, we're going to just add a div block, and we're going to have this as we're going to call it container 13 50, just so you know what it is. And we'll also make sure that it's centered, and we'll have a maximum width of 13 50. Okay, so you can see automatically it is now all completely aligned to the nav itself, which is what we wanted. Okay. So in this case, also, we're going to actually, no, we don't need to do anything in terms of flex for this one, actually. So what we'll do now is, again, it's always best to contain your group text items with its own div block. I mean, we could just start throwing items straight into the container. But it is just good practice to have everything contained. It just means you can move things around easier. So let's do that next up. So what we'll do now is throw on another div block, and this will be our hero text container. And let's start throwing in a heading. We also want to have a paragraph, and we'll have well, I have two buttons in this case. Okay. So as you can see, it's going right the way across the screen again, which we don't actually want. So you could do this in a few different ways. We're going to restrict the whip. So just like before, we could do a maximum width of something like 800 pixels, and that looks okay. My maybe 700 this one. Okay. So let's do the same sort of thing again. So we'll have Sam Harrison's prestige spelled correctly. Cars. Okay, fine. And we'll have the same font again. So if you want to load the same font on, just go into Google Fonts and search for how you have pronounced this one Bebas whatever. Okay. And then we'll have that as inter as well. And we'll have it slightly more bold. And because that hurts me, I'm going to just make this go to about here. Okay, that's fine. And once again, we'll make. Sure. That looks correct. And it's a lot bigger as well, so I think it was about 50 last time. Yeah. That looks good. Okay. So here we are. So now all of our text contains the left. It's still not looking quite right, though. So for me, this is a little bit too high. So I think we need to alter this image slightly a little bit more. So it's a little bit further down. So let's see if we can do that. So go down to your image and gradient section here. And you can see currently it's centered. But what I want to do is try and get this as far down as we can get it. So what you can do, obviously, before you even loaded this image on what you could have done is basically just crop this a little bit to help you with this. But what we're going to do is just click on the up position here, and you can see now that's created a bit more space for it. So that's going to be fine. So that's all good. And what we can do now is on our hero text container, we can now just move this down a little bit. And that still looks pretty good. Okay. So let's just starve these buttons a little bit as well, just so you can make it look a bit nicer. What I think we'll do is rather than having them with a filled color. We're going to have this one. This one will have a filled color, and we'll have that with the dark text. So it says it's dark, but you need to just do that again. And then this one, we're going to have it slightly differently. So this will be the normal button. This one doesn't have a class actually. So this can be button transparent. Okay. And then rather than being blue, we'll have it transparent. But we are going to have a border for it, and we'll also want to have the text color as dark as well. So let's do that. And then on the border section here, you can just have that, so it's for all of them. And I think, yeah that looks pretty good. And because this is a different class from this one, we can actually just affect the margin on this one, so it spaces it apart a little bit. Okay, let's have that around Let's try 25. And yet, that looks fine. Okay, so for our knees, that's going to suit us perfectly fine. And there we are. So that looks pretty good. Now, this is pretty straightforward, and this was quite easy to do. Now, sometimes, though, on a hero section, you don't just literally have text and then some buttons. Sometimes you have other things within the hero section. For this, what we're going to do is we're going to make use of position absolute. So we're going to have a bar at the bottom, which would take you to various different parts of the website. Now, again, there's all sorts of things this could be, but just for the process of this, I'm going to basically create another div block, which sticks to the bottom of this section. And the way we're going to do that is by using position absolute. Okay, so just make sure that the hero section is selected. What we're going to do is throw on a diblock. And we're going to have this, and we're going to call it he bottom banner. So this is essentially going to be like a secondary navigation, which will take you through to different parts of the website, and we're going to place it at the bottom of the screen. And the best way to do this is to make sure that we use position absolute for this container here. So in order to do that, what we're going to first of all, just before we start doing that actually, we're going to give it some color. So in this, we're going to have it as we'll have it as white. And we'll also give it some height just so we can see what we're doing. So we'll give it a height of 70 pixels. And that's about fine. And then on the hero section, we need to make sure that it's actually a relative. So by default, it comes as a static. So just make sure it's relative. And then when we click on our hero bottom banner, we now make this position absolute, and it brings up this section here. All we need to do to get this to stick to the bottom of this section is just click on here, and that will take it to the bottom. And there you go. So we've now created a banner for the bottom of the screen where we can put various different things in. So what I think I'm going to do, I'm going to sort of pot, different options for different cars. Let's just say. So let's say one of them is going to be new cars, used cars, part exchange, and then contact. So again, this could be anything. I'm just doing this as an example. And what we're also going to do is throw in another container within this bottom banner, just so it aligns properly with this. And what we could do actually is just use our container 13 50. So what we'll do is we'll throw it on a div and we'll give it the same class as our normal container. So container 13 50. As you can see, there's nothing in it at the moment, but you can see it is aligned to our container, so everything will align correctly. So let's now start throwing some things in. So what we'll do is we're going to use rather than div blocks, we're going to use link blocks. So on the container, Just click and add a link block. And we're going to obviously, what you would do from here is link this to a different page, but we're not going to do that just yet, so we'll leave it as it is. But within this link block, we're going to add we'll use a text block for this, actually. And what we'll do is. Okay, we'll restart this in just a moment. In fact, I will show you that now. So by default, whenever you use a link block, you're going to get this sort of really ugly sort of dark blue with an underline, which of course you don't want. If you don't want that, If you try and do it on the text box itself, it actually won't get rid of it. So if you're not aware of this issue, you'll be again, it's one of these quirks of web flow whereas if you don't know this, you would be tearing your hair out trying to figure out why this won't work. So if I'll just show if I try and get rid of this color and this underline, if I click on the x, it actually hasn't got rid of it. So what you actually have to do is on the link block itself is get rid of that. And now you can see it's actually gone. And what we'll also do whilst we're here is even though it says it's dark, obviously, it isn't. So just kind of do that again, and now you'll see it has actually changed. So that's an important thing to remember. Otherwise, you'll be there forever. Okay, so let's do that again. So rather than leaving this as it is, we're going to give this link block a class. So it's automatically giving it a class of link block, which, you know what? We'll leave it for now. That's fine. Okay, so let's start putting these different options in. So the first one, let's do new cars. And then we're going to copy and paste this link block along a few times. So let's do it. Let's do it at least four times. We'll space these out in just a moment. So new cars. And then for this one, we're going to have used cars. That's fine. And then we'll pop in maybe a part exchange option. And then maybe just maybe get a valuation. Let's do that. Okay, so all of these are the same class. So they're just called text box two for now, which is not very matter. So usually you would obviously give these a proper class, but just for speed, I'm not going to do that. What we'll do is just make them larger, so we'll make sure that they are, again, the same kind of font as well. Let's do 25 pixels and we'll make them all this font as well. Okay, so what we could also do is this container, we're going to give it a special class because what we're going to want to do is turn it into a flex box so we can spread these out evenly. So on a navigator, on the container 13 50, we're going to give it a qualifier of flex. And now what we can do is make it a flex box. So if we do that, that's fine. And the option we're going to choose is to space set space between and distribute evenly from start to end. So if we do that, You can now see that all of these are spaced out along this banner bar. Okay, so that's all fine. And since we have created a new qualifier for our container, we can actually alter the padding a bit as well. So let's do that. Let's give it a little bit of padding. So let's do something like 25. And already, that looks pretty good. Okay. So, as you can see, as I hover over, we now have the option to actually click through to something. Obviously, for the moment, they're actually not linked to anything, but that would be an option there if you wanted to. So, again, this is, again, fairly straightforward. I wanted to just show you sort of another hero section with something more interesting on it. This is, again, just another example of how you can use position absolute. Position absolute is very, very useful for sticking things to certain sections. So it would mean now, whatever we did, it would always be there. Now, the issue that we have, obviously, is on mobile, would have to change this slightly. But what I think we're actually going to do is we're going to just actually hide this on mobile landscape and mobile version. Just because there's no real nice way of making this look great. So what I think we'll do when we get to this part here, as it gets smaller, you can see, it's going to go too close. So what I think we'll do is we'll just on the hero bottom banner, we'll go up to display non, and that'll get rid of it. And that's a fairly common thing to do on mobile view anyway, so that's not an unusual thing to do. So what we'll also do, though, is just change the way the background image looks as the screen gets smaller. Now, at this point, it's kind of okay. You can just about read the text, but it's not ideal. So what you could do, of course, is just move this up a little bit further, which we could try that. And that would be okay. Alternatively, what we could also do is just play around with the background image. Because we're now on tablet view. We don't necessarily have to have this image covering and we go down to custom. So if you go onto the image itself rather than cover, click on custom and now that will let you play around with there's a little bit more. And as it happens, we could actually probably have kept this in the same place that it was before, and it would look fine. So that's something like something like 60 pixels. And we actually don't need to alter that very much at all. That looks pretty good to me. You can still see the car. You can still see the background. Thats pretty good. And as we go down, we're going to do the same sort of thing with this. I've actually played around this off screen, which is why it's not copied the same version. So let's just do the same with this. We'll click on. It's already on Custom, but we'll maybe have it, so it's something like that. There we go. So it's gone to the center put towards the top, and that will just let us view slightly better, and we'll perhaps just move this one up a touch. I think like 20. And then for mobile, same thing again, let's just play around the image slightly. So rather than cover, let's have custom, and we'll put it. Yeah, similar to how we deal with for mobile landscape, we'll have it towards the top, and maybe even Mmm. Maybe we'll try and move it over slightly so we can see a tiny bit more of the car. Let's just see how that looks. So rather than 50%, let's try 40. All start. That's the wrong way actually. Okay, so 60%, I think that's pretty good. And we'll also make sure again, this is all hidden on this version. As we go through all the different versions now, that should look pretty good. Okay. And actually, this text is way too small. Let's make it bigger. Let's try 70. Yeah. And that's much better. Okay, so that pretty much wraps it up for this particular hero section. So I wanted to just show you a way of making a hero section where you don't have to use flex, particularly, you can just have it sort of aligned to the left and sort and play around with the image a little bit. And also have all these different options here to click through. This is quite common. This sometimes could be like a logo section as well. So it's pretty common to have this kind of bar at the bottom, and if you want to do that, and you want to get it to stick to the bottom, you'd use position absolute and make sure the hero section itself is relative in order to let you do that. 14. HERO SECTION: BACKGROUND VIDEO: Okay, so next up, we're going to talk about background video. So we haven't actually covered this in the first course or this course so far. And in terms of video, there's a few different options you have within Webflow, you have the option of sort of pulling a video onto a section or onto a div block. You also have the option of having a YouTube video embed. And you also have the option here of a background video. And that's what we're going to be looking at for this video. Let's say we didn't want to have this car as a background. You could just get rid of that. And then what we're going to do instead is throw on a background video for this section. So the easiest way of doing this, if we go to our navigator, make sure on the body is selected and then we'll add a background video from the component section. And there we are. So that we'll have added it below for now. What we're actually going to do is go back to the navigator. We're actually going to throw the hero section, within our background video. So what we'll do is just grab hold of the hero section, hover over it, and then you'll see it snap inwards. And now you can see that the hero section is sitting within the background video. Now, the issue we have is that the background section, sorry, the hero section is 100 VH. But obviously, as it stands, the background video part or section doesn't have that qualifier. So what we need to do is just go to a minimum height of 100 VH, and there we go. That's pretty much perfect. So obviously, for now, when we press preview, nothing's gonna happen because we haven't got a video. So what we need to do is upload a video to this. So making sure that the background video part is selected, go to the settings we all here, and then go on upload video. And we'll just upload this one. Now, I've actually previously loaded this one on, so it's gone very, very quick home. This actually takes about three to 4 minutes to encode. But once that's done that, you'll see it will automatically be on the page. And then when we preview it, you'll see now we have a background video. Now, the issue we have, of course, is that while this looks quite good. The text is going to be very difficult to see depending on what is featuring on your video. So this video is actually quite bright. So what we might need to do is have some kind of overlay for this so we can read the text a little bit better. So all the same controls with background images still apply to video as well. So if we go to our background section here and go on image radiate gradients, and what we'll do is add just a color overlay, which will make it a little bit darker. We'll just back it off a little bit. And then when we press preview now, you can see it's a lot easier to read, and we still have a really nice background video. So that's basically it really for background videos. I mean, all the settings you'd expect to see for images are all there as well. So it's not just color overlay, if you wanted to have a radial gradient. You could do that as well. Obviously, what you'd need to do in this case is back off the pacity a little bit. So I'll just show you how that would look. So for one of them, let's have sort of a TL color, and we'll back off the opacity of that a little bit for something about something around 70. And then for the other side, we'll have maybe I don't know. We'll have maybe blue, and we'll back off to around 70 as well. And as you see now, when we press preview, we still have the video, but we now have sort of a color overlay on it as well. Now, this looks gross, but obviously, I'm just showing you this so you can sort of see what it would look like. Okay, so that's pretty much it for background videos. Obviously, you don't have to do it quite the way I did it. You can also just drag on a background video onto the section two, if you want to do it that way. So if I just show you that, and we'll just go back for a moment. In fact, let's just do this this way. So we'll pop it, so this is out of that. And then you could also just resize this background video. So rather than 100 VH, you could have, I don't know, 50 and then kind of style it to suit. But the way we did it is, you know, a much easier way of managing, and that's probably the way that you would do it generally if you're going to have a background video. Okay, so that pretty much sums it up for that. In the next video we're going to do, we're going to be looking at how to use sliders. 15. HERO SECTION: SLIDERS: So for next hero section, we're going to be looking at how to use a slider. So what we'll do, we'll just sort of leave this where it is for now because we may use some of the assets from this. What we'll do is go to our body, and then we'll just add on a slider, which you'll find again on the component section. So click on slider and we'll have a slider on the bottom. So, as it stands, obviously, there's nothing on this, and it's not taking up much of the page. So what we'll do is on the actual slider itself. We'll then just make this 100 VH just so we can see what we're doing with. And there we are. We have a 100% vertical height for the slider. So first of all, let's just start showing you how to add images. So obviously, this is generally what you're going to have with the slider, and we'll go into the settings in just a moment. So in terms of the anatomy of the slider, we have the slider, we have the mask, we have then slide one, slide two is default. Now, obviously, you can add as many different slides as you want to this. You don't have to just have images. You can also add video, which I'll show you in just a moment as well. Well, first of all, let's click on slide number one, and then we'll pop on a background image. And we'll use one of the ones that we've already got loaded on. So have that one as our first one. We'll have it centered. We don't want it to tile, and we'll have it covering. And then for slide number two, we can do the same sort of thing at a background image, and we'll just choose this one. Same kind of thing again. Okay, so we now have a slider, which, as you click through to it, we slide to obviously, whatever slides you've got on there. And as far as I'm aware, there's no limit on how many of these you can have. There probably is some kind of limit, but for most sliders, you're going to generally have sort of three to four as a standard thing for a hero section. So obviously, at the moment, we have just images, and there's no kind of text on here. So we'll start doing that in just a moment. But first of all, I want to just show you the different kind of effects that you can have with the slider. So currently, we just have a normal sort of easing of a slide effect going from left to right. There are some different things you can do for this. So if we go to the settings tab here, you'll be faced with again, different settings for each slide, and you can have different animations, too. So we'll look at this first, and we'll sort of work our way down throughout all these different settings. So the first one is just a slide animation. The next one we have is cross fate. So I'll just show you how this looks. We prove you that. As we click to the next one, rather than sort of sliding the whole thing across the screen, it kind of just fades over. So again, that's fairly straightforward. The next one we have is fade out dash in. So again, rather than trying to explain that, I'll just show you what that looks like. So again, a similar sort of thing. It's kind of fading and then comes in with the next one. The next one we have is going to be fade over. I'll show you this one as well. Again, this kind of just transitions over. Again, you get the idea, there's just slightly different effects for each slide. Then slide over we just replace the whole image from left to right, and I'll just show you that. There you go. Okay, so they're all sort of the default styles for the slide that you can have. And in terms of other effects you have, you can actually apply different easing to this effect for each of these different animations, too. So just like you deal with the kind of interactions, you can have ease in, ease out, ease in out. All of them that you would find with the interactions panel are the same for how the different slides will move over. So if I show you this one, for example, and we'll preview again, it's the same kind of thing, but it will just act slightly differently, so the way that's going across, it's very subtle and the one I just chose, but you have to just take my word for it. It is slightly different. Okay, so we'll pop it back to normal for now for both of them. And again, you can have a slide duration. So if you want it to be a fair bit longer, we can make it 1,000 and you'll see it won't be quite as quick this time if I do it again. It just takes longer, so you get the idea for that. And then we'll pop it back just for the moment. Okay. And also, it says here, disabled swipe gestures. So at the moment, if I drag and click, it will move over the slider as well. Now, you may not want that for every project that you have. So if you want to disable that you can do, and quite simply, all you'd have to do is just click on disabled swipe gestures. You can have auto play as well. This is fairly self explanatory. This will obviously just automatically play the slides the moment the page loads. And you can also hide these arrows too if you want to. So if you collect that, it will hide it at each end rather than both of them. You can actually hide both of them too if you really want to, and the slider will still work, but just to show you that. So this time, there's nothing here. But there is one there and this time, it will hide at this end rather than that end. Okay, so hopefully that will make sense. It's fairly straightforward. I'm sure you're okay with this. And let's uncheck that for now. Then we also have different types of slide navigation. So at the moment, we have these two circles here. If you didn't want that, you could have numbers instead. So same kind of thing. If you didn't want rounded, they could go to square if you wanted that as well. And yeah, so you can have a shadow for it. You can invert the colors and all the things you'd expect to see with a slider are here. The spacing can be altered to. So if you didn't want three pixels and you get to say something crazy like ten, you could do that. So again, it's pretty malleable, just like everything else in Webflow, you can sort of change pretty much everything that you want to. Okay. I pretty much sums it up for that. So that's kind of the settings part of it. Now I can show you how to put some content on the slide itself. Now, the slide element is slightly different to a normal sort of div block or section or container. So you can see here, I have the slide selected, and I don't have any options for display options, so I can't make it a flex box. I can't do anything other than what it already is. So what you'd have to do if you wanted some kind of text on here is put some kind of wrapper over it. So we'll pop a div block on and we'll call this slide wrapper. And this is going to be again 100 VH. And then what we can do is then if you want to change the display options, you can now do it within this slide rapid div that we've just created. So what we'll do is we'll put some text within the slide. So if we now add another div block, we're going to house our text in slide this one. And let's just do that first of all, actually. So we'll pop a heading in, we'll pop in a paragraph and we'll pop in a button as well. And this div block, we'll call slide content. And we'll give that a maximum width of something like 900 pixels, and we'll have it centered. And the slider wrapper itself will make this a flex box, and then we'll just align and justify everything to the middle. And then also for the slide content, we'll make that, so it's centered as well. Okay, so, obviously, we can't see this, so let's just change that font slightly. We'll make it white. Same for the paragraph. Okay. And also on the slide itself. Again, just like normal background images, you can also apply an overlay. So we'll do that because we can't really see what we're doing. So this is on the slide itself. Obviously, we have the image there. We would also add a overlay color, and we'll leave it at that for now. Okay, so there we are. This is how you would add content to it. So you can't if you want to sort of maneuver different elements around the slide itself, you'll want to use a wrapper of some nature, so you can control that with the display options that you're used to because you can't do it. As standard on the actual slide itself. So hopefully, that makes sense. So if we want to now move this around as we normally do with flex, you can do that as you would normally want to. The reason it didn't quite do that, as I just clicked on it is because we've made this container centered, so that's the reason why it didn't quite look right. Okay, so hopefully that will makes sense. And you're not restricted to just having background images. So if you want, you can actually have a video on one of the slides. So I'm going to do that with slide number two. So what we'll do is go to our slide two and get rid of this image. And what we will do instead is pop our background video that's currently on here, we'll pop it on this one instead. So let's do that now. So currently, I think we have our hero section inside this div. So what we'll do make it easier to follow. I'm going to take the hero section out of the background video. I'm going to drag this background video onto slide two. So it sits within it. And now, when we go to that slide, it's going to play the video. So first of all, go to slide one. We'll preview this. Now as we go to the next slide, the video should start playing, which it does. Obviously, if you wanted to have all the different texts that you currently have here, you could then obviously do the the exact same thing. You could copy and paste and then paste it onto this section as well. Okay, so hopefully that all makes sense, and that's pretty much a basic overview of how you would do this. Now, later on, we're actually going to come back to slides. I'm going to show you how to animate the text on the slide. So currently, when we kind of go to the slide, the text is already there, and it's a little bit boring. So what we're going to do is once we get into the interaction section of this course in a bit more detail, and I'm going to come back to this kind of thing. I'm going to show you how to animate this text when the slide comes into view. So, I won't do that just for now, because we're going to go through a whole section of animation in a little while. And I'll wait for it on that one. But hopefully, that gives you a basic overview of how to use slides and how you could possibly use them for a hero section. Okay. 16. INFO SECTIONS: Okay, so for this next part, we're going to look at how to create various different intro sections. So I call it intro sections, but this could be for anything, really. So we're going to cover things like how to create info cards and how to use absolute positioning to stick various different images to the tops of the screen. Again, any kind of assets that I use within this, I'll leave in the course description. Some of the images I can't give you because they're part of the established website, so what you'll need to do is just kind of use your own images, which you can download from a stock photography website, such as pixels or Pixabay. Okay, so let's get started with our first info section. 17. INFO SECTION: ICONS: K. So first up, we've got the member stack website, I'm just going to use this website as an example to show you sort of like an icon section. Now obviously, I could have used any website. Pretty much every website that's ever existed has some kind of icon section. So I'm going to just show you how you would sort of structure this by using grids. Now, you could use flex for this as well, but since we have sort of two dimensions, one going across, one going down, it kind of makes sense to use grids. And if you've watched my first course, you'll know that personally, I love using grids for most things. Okay, so let's give this a try. So first of I'll actually, just before we do anything. Let's just have a look at this on different views. So obviously, desktop view, we have this. On tablet view, it goes down it goes down to two. Then on mobile view, it goes down to one, but also the icons are actually now to the side of the contents. So I'll just show you how to do that as well. We'll have to change the way we structure this because of that. There's probably a few ways you could do this. I think the way we're going to do it is we'll actually house these in their own div blocks, and then we can make them probably probably use flex for the overall div container to put them side by side. That's probably the way that makes the most sense to my brain. You can probably just do it by making them inline. We'll come to that in just a moment, actually. We'll think about it there of the time. Okay, so let's go to our page and we'll throw on a section and we'll very creatively call this section. We'll give it a minimum height of 100 VH. Then what we'll do also is just pop some padding on either side. So we'll add 3% on the left and the right. Then we'll we'll make our own div'll make our own container again. We'll call this this container, and we'll give it a maximum width of 13 50 and we'll make sure it's centered. Then on the section itself, we'll actually make the section flex in terms of the display option, and we'll have all back to the center and we'll just expand that out as well. Okay, so what we can do now is we could have actually just turn this into a grid if we want to. In fact, I don't know if I've mentioned this on my previous videos. So you don't have to necessarily drag a div into this container if you don't want to. You can actually just turn this into a grid. So again, whether you would do that or not, it depends on your use case, but just to show you it's possible on the container itself, just click on this icon here, and then you have a grid. Okay, so let's now adjust this as we need to. So we need to have at least three columns, and then the rows will also generate as we go anyway. Okay, so that's fine. So what we're going to do initially is just style one of these, and then we're going to copy and paste them along. Okay, so first of all, we're going to throw on a div block, and we'll call this icon container. I spell that wrong again. I cannot spell the word container. Okay, anyway, you know what I meant to do. What we'll also do then, just to make sure we can get this correct on mobile. We're going to actually house the image and the text in their own divs. So let's do that as well. So we'll pop on another div and we'll call this icon div. And then we'll actually pop our icon in. I've actually loaded it on previously. Okay. So that's all fine. And again, in the icon container, we'll pop in another div, and this will be icon text container spelled correctly this time. And then in there, we'll put a heading, which will be H three, and we'll also pop a paragraph in. And we'll just get rid of some of this text. It's probably a bit too much here. So let's get rid of that. Okay, so we also want to give the image a class just because if we change the size and we want to do it for everything. So we'll just call this icon, and we'll give it a width of at least for desktop, we'll give it something like 50 pixels. We may change this on mobile, and then H three and paragraph. We will just give them a class in case you want to change anything. So just very creatively call that H three, and we'll just call that paragraph. Okay, so that's fine. So once you've done one of them, this is where you can basically just copy and paste this along. Now, I'm not going to pop in all the different icons because that would be you watching me copy and paste things along. I'm just showing you this for structures purposes. What we'll do now is make sure the icon container is selected, and then you can just copy and paste the whole container along a number of times until you have the desired amount that we need. And as you can see, that pretty much is exactly the same as this. Obviously, the spacing is slightly different. We can set maximum width for this if we wanted to or you can adjust the spacing. Let's do that actually as well. So obviously, the beauty of grid, you can do this by just dragging along so you can do it visually, which I really, really like, and we'll do it 30 pixels from the side, and we'll do it 30 from the bottom as well. So it's all even. Okay, so that looks pretty good. So what we'll do now is start changing this on different views. So for tablet, I think That's probably okay, I think for tablet. But for mobile landscape, I think this is well we'll change it. To get rid of a column, just click on the grid icon and then just get rid of one of the columns over here, and then it will go down to two. Then for mobile, this is we need to change things a little bit more. We need to get rid of a column again, but also we need to change the way these are displaying slightly. So on the grid, I'm going to just pop some margin on so you can see better. Okay. So again, there's a few ways we could probably get this next to this item. But since I've done it this way intentionally, I think the simplest way is that on the icon container, make sure that's selected. Just to double check on your navigator to see which one you're selecting. What we could do now is basically just make it into a flex box. And now you can see that the icon is actually next to the text. Okay, but as you can see, it's still not quite right, so we need to change this slightly. So on the icon itself, we need to actually give it a minimum width. So that way, no matter how much we resize this, it's not going to get any different in size. So we'll make sure that we have a minimum width of 40 pixels. That's probably about right for this. And then what we can do is maybe just on the div container itself for this. We can apply a little bit of margins, so there's some spacing, since we did. Let's do 20. That probably feels about right. And you can also see something isn't quite right. So by default, if you're thinking, well, technically, that should be the same sort of height and what have you. Let's say you've actually made it so aligned to the top and nothing changes. You can still see here there is actually a gap. Where the icon is actually higher up than the text. The reason for it, bear in mind that by default, headings come with margin. So if you just get rid of it, it's going to affect all of them as well, and there we go. So now that's all completely aligned correctly. So that's the easiest way I could think of doing it. There's probably a few different ways. But again, since we did, putting it in its own div, that's probably the best way to do it. Okay, so hopefully, all that makes sense? Okay, so that is how we're going to create our icon section by using grids. 18. INFO SECTION: ABSOLUTE POSITION: Okay, so what we have now is this kind of thing where we have, again, two columns, one with an image, and one with some text, and we also have some images sort of stuck to the corners of the section itself. And as mentioned before, we're going to be using a position absolute in order to do this. So I want you to just do at least a couple of videos on position absolute because of how useful it is. And getting things to be sort of to get them to stay exactly where you want them, no matter what screen size you have, position absolute is very, very useful for that. And for these kind of sort of SASS type websites where you see quite a lot of vector graphics, This is quite common where you have sort of images in unusual places, and you'll have to sort of think creatively how to get them there. And quite often, you're going to be using position absolute, to get them positioned exactly where you want them to. Okay, so let's get started. So once again, we're going to keep the same section that we've been using in the course so far, which is 100% of the Veport height, and we have some padding on either side. And what I think we'll do is we'll actually just throw in a grid straightaway. We don't need to have two rows, so we can get rid of a row, and that's pretty much okay and we will just expand this outwards to. We'll actually give this grid a maximum width as well. We'll give it say 1,200 maximum width, and it happens to already be centered. That's all fine. Okay, so let's get started. So first of all, we'll enter in a DIV block. In fact, we'll enter in a div for both of these because they're going to be slightly different, so we can do this this time. Again, you should be naming everything whenever you do this, but just for speed, I'm not going to necessarily do that. And within this div block, we're going to pop in our image. And I've pre oded these images on. Now, I have provided these images within the course description. Some of the other ones, I can't do that because obviously, you know, they're established websites, and I can't provide images for free. Obviously, that would be illegal. So these ones, however, this is part of the humans animation pack, which is free to download. So what I'll do is I'll provide at least the ones I've used for this within the course description. But if you want to download the whole thing, I'll provide a link to that as well. This basically is just a list of animations that a guy called Pablo Stanley, who's quite a famous designer has created. And basically, the idea is you can sort of mix and match all these different vector graphics to suit. But what we're going to be doing is just using this as an example of how to position things around the screen. Okay, so that's that done. And that's pretty much actually fine. We'll probably just make sure it's justified to the center as well. And if you want to change the styling or size, you could do. I think we'll actually keep it that size for now. Let's just seem in a touch. Yeah, that's fine. Okay, so now we have this section here, which is obviously a title, with a paragraph, and then we have some sort of link sections here, so let's do that. Okay, so let's do that now. So we'll throw on a heading and we'll make it an H two. We'll also throw on a paragraph. And then we'll also throw on a list section here as well. Okay, so let's just copy and paste the text one. So it's the same. I'm not going to be worrying about typography or anything just for now. We'll just pop that down to the next line. We'll make this a lot bigger, something like 50 bigger than that maybe we'll have that a bit larger as well. We'll just copy and paste this text in. The font size for this was 18, I just spotted. Let's do that. Okay. So in fact, that looks a lot bigger, to be fair. Say is 18, but it doesn't feel like 18. No, it didn't change. That's why. Okay, let's try that again. So rather than 14, we'll do 18, and that's more like it. Okay, so that's fine for now, and then obviously, we want to have this in as well. So we'll just copy and paste one line of this and then we'll copy it. So we'll delete two of these list items. Double click, paste your text. And then we can adjust that however, we need to. So we'll have the size of that as 18 as well, so it matches. And we'll also just put a little bit of margin on this, so it pushes it down slightly. Okay. I'll have 30, and we'll just do a a little bit of margin more margin below. That looks pretty good. And then what we can do with this list item, we'll just copy and paste this a few times. Okay, so we've pretty much got exactly the same as that. Obviously, I've not put all the text in just to save time. Okay, so that's kind of the bare bones of it actually completed. On this version, it looks as though the text element is sort of centered within this image. So we'll do the same thing again. So if you click on the DIV block, which is housing all of this text, all you need to do is get this to be in the center, which actually will be not justified, it will be aligned, in fact. Okay. So we're pretty much there. So next up then, we have to get these images into all the corners of the screen. And once again, what we're going to do is on the section itself, we're going to make the position relative, and that will allow us to position the images absolute throughout each corner. So let's do that now. So let's go to our position tab here. So what we need to do is just open that up. And then rather than static, it will need to be relative. Then what we can do on the section, you can start adding these images in. So just throw on an image. It's going to appear in random places for now until we get it set properly. Let's do the first one. The first one is this one here, which is that this one happens to be on the top left. That's fine. And this is going to have to be position absolute. Then we can just click this one here to top left and there we go. If we need to re size, we can do, but that's probably about right anyway. That's good. The same thing again, add on another image. All these images we need to have a different class because obviously if you give them the same class, they'll all be positioned absolutely to the same place. The next one is going to be top right, which is this one. Once again, this will need to be position absolute, and this was to the top right. That's good. Then two more. What was the next one? So we'll do this one next, which was this one here. Once again, needs to be a position absolute, and that will be to the bottom left. We'll make that tad smaller. That's good. And then just one more. Same thing again, image on the last image will be this. Once again, that will need to be position absolute position to the bottom right. Okay, so there we are. Hopefully, you can see how easy that is once you get used to the concept of this. We now have pretty much exactly the same as this, and we've used position absolute to get these images in the tops of the screen. Okay, now that we have this, how we want to on desktop version, we're not going to be able to have this for mobile. So this is going to look very strange. We can't really have them in the tops of the screen. It just isn't going to look right, so we'll have to make a choice stylistically at some point of what we're going to do. Now, on tablet view, there's probably a way we can actually make this work to some degree, but tablet is probably the last version where we can actually have all four on the top. So what I think I'm going to do for the sizing of this, I'm going to use vertical width. So now, this can be changed for maybe desktop and for tablet. What we'll do for desktop is we'll have something like Let's do 12 vertical width, and that's probably about right, and we'll do the same for all of these actually. That one could maybe do with being a little bit larger, let's do 15. I'm doing this just by sight really. Again, 12 vertical width. I'll explain vertical width in just a moment and how this works. I've mentioned it briefly in the course before, and we'll go into a bit more detail and how this actually works. So the vertical width basically means it's going to scale with the size of the screen. So unlike ca pixel value, which is set in place, a little bit like percentage, these images are going to actually be scaling depending on the size of the screen. I'll just show you. So now I made them more vertical width. In fact, I need to adjust this a little bit more. But you'll see if you watch this one, for example, As I scroll downwards, you should be able to see the image is actually getting smaller. As it is here is a lot smaller than how it is there. This is very useful for this use case where as the screen contracts, it's not going to be able to stay the same kind of size. This is probably the last moment where we're actually going to have these images in the top corners. I mean, at this point on mobile landscape, it looks okay, but it's a bit weird at this point, perhaps. But I think for desktop and for tablet, that's fine. You can actually also adjust the vertical width dimension for each one as well. So let's say on tablet, you wanted it actually a little bit larger again, at this point, you could do so you could make it like 13, so it's a bit larger. No three, 13. There you go. This would be up to you, how you would do this, but you can adjust it for each one. Okay. So also on tablet view. This text is probably a little bit too large as well, so we need to also, should mention, you can actually also do vertical width for text as well. So I'll just very briefly show you that again. So rather than being 60 pixels, let's do something like 30 vertical width. Definitely not 30. Let's do ten. Okay, so that's something like what it was before, maybe slightly less, so maybe it was eight before. Now, if I start moving my cursor inwards, you'll see the text also is getting smaller or larger depending on how much the screen contracts. And you can use this for anything. And it's very, very useful in cases where you want to have a certain word on the line below, and you don't want it to sort overlap or drop onto another line. This way, it'll stay on the same two lines, and the text size itself will just contract depending how you want it to. So that's very useful for that. Okay, so on mobile landscape, at this point, we're going to need to alter the grid slightly, so it's not on two columns. So go onto the grid and get rid of a column. We're also going to make this image a little bit smaller as well. So rather than being quite as big as it is, we're going to just adjust that slightly. We'll give it a width of what shall we do? We'll actually give this a vertical width value as well. So 80 vertical width is probably about right. Again, as you can see, as I move the curse up and down, the image is going to get bigger depending on how big the screen is. Again, very, very useful to have. Again, we're going to go into more detail about vertical width in just a little while. And so something else we need to do, of course, is that we now have an issue with these images sort of interacting with this part here. So we're going to need to apply some padding at some point to get rid of that problem. So in terms of the padding, that's currently on this section, we need to have, again, the standard hundred, maybe a little bit more because we have this in the way. If we did 200 worth of pixels of padding, that's going to solve this problem for us. That's all fine, and then for mobile. Again, you would maybe just get rid of these or hide them at this point in time. Obviously, you need to adjust your text as well for the mobile view. But you get the idea. This is a way that you could basically use vertical width for various different text items and image items on the page. But I do think for this section here, you would maybe just hide these. So if you wanted to hide them, you just click on display options here, then click on non, and that will get rid of it only on mobile version. Put it back for now, actually. So there we go. We have used position absolute, and we've also used partially vertical width attributes in order to scale the size of certain elements as the screen contracts. The main obvious one of this will be as we move down, these sort of plant SVGs are getting smaller as we go downwards, as is this image here. And also, we did the same thing for this text block as well. Okay, so that wraps it up for this one, and we're going to do a couple more different info sections before moving on to info cards. 19. INFO SECTION: 3 COL GRID: Okay, so next up, we have this section here where we have an image with the title and then some text blow. Again, this is super super super common. I think we've actually done this in the first course, but I'm going to just show you again and how to do this and just a little bit of detail about image sizing two. Okay, so let's get started. And we're going to use the same section that we've been using so far. So this is a section with 100% of the viewport height with 3% padding on either side. And what we'll think we'll do is we'll actually just throw on a grid straightaway. We want to have three columns. We don't want to have two rows, so get rid of one of those, and that's all fine. And then we'll expand this out. And then we'll also give it a maximum width of 1,200 pixels. Okay, so, first of all, we're going to design one and then copy and paste it along. So let's first of all, add in a dip block. We're then going to add in we'll do heading, paragraph and button. And then we'll also, of course, add in an image. And then we'll just use this one again. And we'll just drag this to the top. We're pretty much halfway there. Well, we're pretty much all the way there, actually. So all you need to do there is make sure you give all these a class in case you want to change anything about them. But I'm not going to do that just for a moment. I'm going to just copy and paste those along. And there we are. Obviously, if you want to change the image, you will need to make sure that they are the same orientation. So that's important because if you don't do that, this will happen. So if you do this, of course, obviously, it's not going to look right. You need to make sure that you're uploading the correct image ratio in. It will just save you a lot of time if you do this beforehand. There are ways where you can make the image cover a space if you define the size, but it's just much easier if you actually just upload the correct ratio straight away. So let's also just put that one in just so you can see it. There we are. So it's super simple. And as we go down, obviously, we're going to adjust this slightly when we get to tablet view. So on tablet view, obviously, we need to make the text a little bit smaller. And table view is probably the last moment where I think this is acceptable being in three columns like this. On mobile landscape, that's when it gets a bit too much. So what I think we'll do is on this way, we'll just get rid of both columns. It's a bit weird just sort of this looks okay this way, but it looks totally weird having one missing. So you need to get rid of both, there's only one column and then of course, what you can do is then just adjust the padding on the grid, which is, again, another reason why I love grids. Let's go crazy. Let's do 100 And that's done, and that's going to do it obviously on the same for all of them. So what I should have done, and this is a reason why you may want to do this as well, is you may want to house the text and the buttons in their own div block. So that way, if you want to reuse this heading again, if I want to apply, sort of margin to either the image or this, so there's a bigger space between these two here, The only way of doing that now is by applying more of a margin to the actual heading or a margin below on the image. What I should have done really is pop this within its own div block so we can space the div away from it. But it doesn't really matter in this case. Okay, so on this view, we're kind of fine, and there's not really much else to say I do really. That's kind of it. So there is one thing I do want to mention, which is about clients uploading their own images. Now, I mentioned before, if a client, you know, uses the editor feature of web flow, which is, again, very useful, but it can cause problems because if a client does do this and they just replace an image, they haven't thought about image ratios, you're going to be faced with this, of course. I mean, they're going to figure out this is wrong most of the time. But there are things you can do to make this a little bit easier for your clients. Like I mentioned before, you can actually define the sizing or use a div block with a defined size, and then you can pop your image in. But in all honesty, I try and offer my clients a care package wherever I can. The reason being that even if we make it so that when the client enters this image in, it's still going to crop some of the image out anyway. So if they're trying to put a portrait image into a landscape space, it doesn't really matter Even if we managed to get that to look right, it's still going to be weird because they're going to be cropping off the image. And obviously, the reason they uploaded that image is to have the whole image in it. So really, you have to explain to your clients beforehand, if they're going to upload their own images, they need to follow the same aspect ratio. And you can put this in a document for them if they ever want to do that. But this is again a really common thing for all websites, and this is something you're going to be probably using quite a lot. 20. INFO SECTION: CARDS: Okay, so with this, again, we're going to probably just use grids to have these two columns, and we're going to basically use position absolute to get this image to stick to the bottom of this div container. So we've done a little bit of this position absolute in one of the previous videos, and we'll do it again in just a moment as well. First of all, when we try this one, we'll just basically have two did blocks either side within a grid. There's no sort of flex setting required for this because by default, text elements will go by default to the top left anyway. So, let's get started making this. So first of all, then, we will not go through the ribbon role of doing a section and a container. We'll just delete this, and then we'll actually just turn this container and we'll just turn this into a grid. Okay, so from here, we don't need two rows. So we'll just get rid of one of these, and that will be completely fine. Okay. So now, within this container, we're going to have eventually all going to have two of these, but just for now, we'll throw one in and we'll style this one and then we'll duplicate it over once we've done it, and then just change the image towards the end. Okay, so we need to give this some kind of height. So let's just try so we'll do a minimum height, at least a desktop version of something like 600, Let's try that again. Okay, so it's not going to be exactly the same as this, but that's pretty close. Maybe it's a touch more actually, so maybe six 50. Yeah. Okay, well, whatever, that will do for now, just to illustrate how to do this. Okay, so within this Diplock, what we need to do is first of all, give this a background color. So the background color, I'm not going to do it exactly. It's just a light gray. So let's do that first of all, so it's a pretty light gray. That looks good enough to me. Okay. And next up, what we're going to do is throw on a div block to house the title text here. Okay. So let's do that again. So over to the Tbiography setting and click on heading. We'll make it an H two. We'll also then throw on a paragraph, and then we'll also throw on a button. I'm not going to bother styling this exactly the same. Again, this is purely to show you how to structure these. Obviously, styling, you change anyway. So, so we're pretty much there now, so we have the title, we have the text, and we have the button. So next up, we need to get this image on. Now, you may think to yourself, well, you could have just put maybe a background image onto this section, which potentially could work. But when you start moving it around it and resizing it for different screen sizes, it would possibly move around. Well, I wouldn't possibly move around it would. So the best way to do this is to use position absolute. And what we do is make the div block relative. So let's do that first of all. We'll worry about the styling of this in just a moment. So make sure the dVlock itself is selected. Go over to your position settings and then we'll have it rather than static, we'll have it as position relative. This way, when we throw on our image, we can then make it position absolute, and it will be to the bottom of this div block. So let's do that. Let's Trow on our image. And that will be this one here. Again, back over to the positioning, and then this will be position absolute, and it will be to the bottom of this section. There we go. It is now position absolute because we made the div block relative, if that will make sense. Okay, now, whenever we move the screen around, it's always going to stay at the bottom of this div block no matter what. Obviously, it's going to get smaller when you do that, but it will never move away from being at the bottom of this, which is actually what we want. Okay, so now, let's just style this properly. So obviously, that's right towards the edge. What we can do is just make sure that these are sitting within their own div. I don't know if I put a div in. I didn't. Okay, fine. So within this div block, we need to house the heading and the paragraph on the bottom within their own div. So on the overall div block, click this and then put in another div and then we'll simply just drag these elements in. Same for the heading, and we'll just reposition this around a bit. Okay. And then what we can do is on the new div. So we'll just call this text div just so we know what we're working with. Now what we can do is apply padding to the whole thing. So what we're going to do this time is on the padding. Hold shift, and then we're going to drag that. So there's equal padding on all sides. Then bvioly just pick where you think looks right. I think something like 30 pixels looks about right to me. And that looks pretty good. Now when we resize this, you can see that this does stay there no matter what. Now obviously, we're going to have to change it slightly for tablet and maybe, but let's come to that in just a moment. But that looks pretty good for now. And how much text did they have on? Three lines. That's pretty much fine. We'll just keep like that for now. That looks pretty good. So what we can do now is just select the overall div and then we can just copy and paste that over and simply for this one, all we need to do is just replace the image with the other image, so that would be this one here, and now we have the exact same thing. Okay. So there we are. Now, I appreciate that the styling is slightly different. These looks slightly slimmer, and the container size for this website is actually a little bit smaller than what we have, which is why it looks a little bit different. But again, this is more just to show you how you would actually control this and style it by using the different positioning techniques. Okay, so what we'll do now is go over to our tablet view. And this looks pretty much okay, actually. There's nothing really wrong with this. I think maybe as we get further in. No, I'm still happy with that. Maybe it could be doing with a little bit less in terms of heights, and maybe rather than 650 600. And that would be okay. And then for mobile landscape, it's starting to get a little bit bunched up. So let's see what they do on their website. So we click inspect. And it looks as though Yeah, they may pop it onto one actually for mobile landscape, so that's what at 750. What's that? Yeah, they do. They pop it onto just one. So what we can do then, if we do the same sort thing is go onto the grid, get rid of one of the columns, and then it will take up the entire space. Now, this probably looks a little bit big actually. So what I think we'd do rather than having it be 100% of the width, maybe just change this. So what we'll also do, just so we can see what we're doing a bit better is just on the section itself. We'll just add a bit of padding so we can see what we're doing properly. Okay, so on the overall div block, rather than it being 100% of the width is by default, we'll set a width for it and we'll set a maximum width of, I don't know, something like say 600. No, maybe five then. Okay, that looks pretty good. That looks pretty similar to that. And then what we need to do is make sure it is justified to the middle, so it jumps over. And the same would need to be done for this one as well. So just make sure it's justified over. So make sure everything is currently selected. So I'm selecting the overall div for the entire thing, and then the justification will be to the center. Okay. And there we are. Obviously, when we go down to mobile as well, we're going to have the exact same thing. Okay, so hopefully that all made sense what we did there. And we've pretty much covered everything, I think. Now, again, again, there's potentially a few ways you could have done this, but I think the way I did it makes the most sense. Again, you could have used flex box for this. You didn't have to necessarily use grids. But like I've mentioned many many times, I just like the fact I can control the spacing visually. So again, this probably needs to be slightly wider apart. So if we did, I don't know, something like 50 pixels. That looks pretty good to me. Okay, so that pretty much wraps it up for this one. And next up, we're going to do another one where we use position absolute in a more of a sort of ASA website style using vector graphics. 21. INFO SECTION: FLEX CARD: Okay. So next up, we're going to sort of recreate this kind of layout from the obviously.ai website. So as you can see, we have sort of one here with a heading, and then we have a paragraph section over here. Then we have these sort of three card sections too. So we're going to achieve all of this by using a mixture of grid and flex. So we're going to use a sort of a grid for this part here, a grid for this as well, and then we're going to use flex to sort of distribute this evenly. Okay, so let's get started back onto our project. We're going to throw on a section, which we're very creatively going to call section. And this once again is going to be 100 VH. Then we're going to just use the default container just for speed. And to get this container into the middle, we're going to make our section flex. And then this container going to just expand outwards. Okay, that's all good. Then within this container, we're going to throw in our first grid, we want to have just two columns, but only one row, so get rid of one of the rows. And then what we'll need to do also is get this container into the center as well. Sorry, the grid into the center. So within our container, we'll also make the container itself a flex box. And that's going to need to be justified to the center, and it will be vertical as well. Okay, so there we are, and we'll throw in our first diblock, and then we'll just duplicate that over. So this one is going to have a heading in. We will just copy some of this text diver actually just so it looks sort of similar. We'll sort this out in just a moment. And then in here, we have sort of two paragraphs. I usually make it into two different paragraphs, but just for speed, I'm going to just separate these two apart, so it looks similar. Okay, that's good enough for me. And then we often need to have this just onto three rows. So as we expand this downwards as you'll see, does actually retain the three lines up until we get to sort of the mobile tablet section. So there's a few ways you could do that, actually. You could set a maximum width of the dip block that this sits within so it kind of pushes it onto three lines, or you can actually change the heading itself to a character width. So CH is something that you can use within Webflow. So I'll just show you what CH is. So if we go onto the heading, make sure the heading is selected. And if you have it over here, you'll see Maxwith currently it says non, then you have this option here that says CH. So CH is basically a character value, and it basically limits the amount of characters within any line. So it's basically to do with the amount of zeros you can have within a single line. So whatever sort of font you have, it will limit the amount of characters you have based on a number of zeros. If that sounds a bit abstract, basically, just think of it as it limits the amount of words you're going to have on a line. So if I do something like 20, you'll see them pops it onto three rows. So again, you could use a maximum width to do the same kind of thing, but that's just another way you can use in terms of a different value. I'll go more into these values a little bit later on in the course. Okay, so as you can see, something is not quite right here. You can see that this is line to the top, but this one kind of has a gap. It's worth bearing in mind that by default, all of web flow headings have some margin. So if you don't want this, just get rid of it and just drag it up, sorry, down, and then it goes back to zero, and now you can see that these are aligned to the top again. Okay, so that's pretty much the first grid done. Also within our container, add the next one in. And this one, we're going to have three columns, and then we're going to get rid of one of the rows as well. And then we'll also just apply a little bit of margin to this, so it's a bit of a space. So we'll have 50 pixels worth of margin. Okay, next up, we're going to start styling this. Again, we're going to create one of these and then basically copy and paste it along and then change the colors as we need to. So as you can see, we have a icon next to a heading, was essentially a heading. Then then we've got a bit of a gap and we have a text block at the bottom. So we're going to use again, flex box to distribute this evenly from start to finish, and we're going to need to apply a radius to the dvlock itself. And we'll need to make this in line so it sits next to each other. Okay, so let's get started. So first of all, we'll throw on a div, and we'll just call this card div, and we'll give it a minimum height of something like 200 pixels. That's fine. And we'll give it a background color of just an off blue. We also want to have this with a radius two. So something like ten would probably do the job. And I reckon that looks pretty similar. Not quite as blue as it should be actually. So we'll just make it a bit more blue. There we go. That's better. Okay, so that's pretty much all okay. And we're also going to apply some padding inside this too. So to get this text so that it's not quite to the edge, we're going to apply padding to the actual div itself. So let's do that. And we'll apply something like 25 pixels all the way around. So if you hold down shift and then drag these, you can see it all does it at the same time. And 25 should do it quite nicely. Okay, so for this bit, we're going to have a div which will house both of these. Let's do that. So we're going to pop in a div block, and we'll just call this icon div and we'll throw in an image. So I've preloaded one of the icons in for speed. That's all fine. Then we'll also throw on another heading, and this can be H three. And as you can see, at the moment, the image actually is in line by default, and the heading is actually not. It's actually the display block. So what we need is to get this the jump next to this one. And the way we do that is making sure that the heading is rather than block is set to inline block, and you'll see it jumps to the same line. Okay, we'll sort out the spacing in just a moment. Let's make sure this is also white. Looks pretty good. And then what we'll do is we'll just apply. So how is the sizing of that? That's pretty much okay. So we'll apply some margin to the icon so it pushes this away so the margin can be on this side. So we'll have sort of 20 pixels. On the original, it's actually not much there, but I don't know. I think it looks better like this. Okay, so let's pop the text in. And, I could just write it, couldn't 3,000 and this can actually be a bigger, so we'll have it something like 40. That will do. Then in terms of the spacing you can play around with a little bit, obviously, you could adjust the margin on this, so we could do that, I think, so it gets it a little bit better positioned. Sorry, I didn't quite work. Let's just do that again. So we'll do Okay, obviously, we need to play around with the positioning of this a little bit, so it's kind of aligned to the center. Again, a nice easy way of doing that is perhaps to have it so that the icon div actually is a flex box itself, so we could do that, and you'll see the icon will move a little bit. So it's now pretty much in the center, and you can adjust the margin of this two suits, so it's kind of aligned correctly. So something like ten would be about right. And that's much aligned to the center, I think. Okay, so next up, we're going to throw in a text block. And we'll make sure that this is white as well. I think there was two lines of text wasn't it's fine. So we'll just copy and paste that over again. Try that again. There we are. Now what we need to do is get this spaced correctly. So what we can do is on the actual card div itself is make this flex box as well. Sorry. Another way we could do this. Okay. Okay, so now to appropriately space this from the top to the bottom, I will make the card div a flex box, and rather than being horizontal, we'll make it vertical. Then we can use the dification of space between and distribute evenly from start to end, and then you'll see this jumps to the bottom. Okay, that's pretty pretty much it actually. So what we need to do now is just do copy and paste this along and then give the other two a different color, and obviously, what you would actually do is change the text. I'm not going to do that for this. I'm just showing you this for layout purposes. But if I just copy and paste that along now, you'd need to give each of these different card gives a qualifier or a different subclass. So we'd need to give this a combo class of something like green. What color was it? Oh, it was green. Okay. So yeah, this one could be called green for obvious reasons, then just change the background color. So if we have that, and then the last one, I think was purple, so you just call this one purple. And then change that. Obviously, if you hadn't have done that, when you changed the color on one of them, it would have changed on all of them, which obviously, we don't want to do. Okay, so that pretty much wraps up for this one. Lets just before we do anything else, though, we're going to just make sure it's appropriate on mobile and tablet as well. So for the tablet view, I think they still keep it with three columns, so it'll just expand down a little bit, and then, it's going to be on one line at this point. Okay, that's fine. So let's do the same kind of thing. So on tablet view, I think it's still acceptable being like this. But on mobile landscape, I think this is where we're going to change it so it sits just on one column. So just go to your grid here and get rid of two columns, and it will automatically expand it down like that. And then for mobile, of course, we're not going to have to worry about that. And I think also, I forgot to do this part here. So yeah, mobile landscape. We're going to adjust this one, two, get rid of one of the columns, so the text all sits below. And you can see something I forgot to do at the very start is give any kind of padding to the section or the container. So just quickly do that. So on the section, we'll do it this time, and we'll do 3% on both left and right. And now as we go down the different sizes, it should all look pretty good. So that's mobile landscape, and then we have mobile as well. Okay, so that is pretty much it for this one. And yeah, okay, so that's pretty much everything obviously. I'm not going to put all the different text in. I'm just showing you this to how you would actually do it. And this kind of thing, again, is pretty common. So hopefully this is quite useful. Okay. Okay. 22. ANIMATIONS & INTERACTIONS: Okay. So hopefully, so far, you're managing to follow all of this. We now we're going to get into interactions and animations. So again, we touch very briefly on this on my first course but for this course. I wanted to dive a little bit deeper and give you some slightly more usable use cases for using interactions. So we're going to first staff start by creating some hover cards. So you've seen this plenty of times within various different websites where you hover over with your mouse, and you get some kind of interaction with that particular card, whether it be sort of zooming in, or some kind of animation when you hover. Also, throughout this course and including this video, we're also going to look at how to animate lot of animations as well and implement them into your designs. Okay, so let's get started. 23. ANIMATIONS HOVER CARD 1: Okay, so for our first interaction, we're going to have the three images here, and as we hover over them, they're going to appear darker as the background image and then we're going to have some texts that will appear as we hover over them. So this is going to be surprisingly a grid. We're then going to again use animations or transitions to create this effect. So as we progress throughout the course, these animations are going to get more and more complex. But I thought we'd just start out with this because this is quite common and this sort of thing can be sort of tweaked however you want to, and it's quite useful to have. Okay, so let's get started. We're going to recreate this. So I'm going to assume you know how to structure this. So we have a section here with 100 V H vertical of viewport height. And then also, I've just centered this by using flex. Again, if you're not sure on structure, go and watch my first course on this, and that'll help you with that. Okay, so this is within its own container. So what we're going to do is within this container again. We're going to throw in another grid. And this is going to have three columns, and we're going to have just one row, and that's all good. And then for this grid, we're going to just pop it a little bit further away. So it sort of about 100 pixels worth of margin. Okay. And rather than call grid two, now what the helm, we'll just call it grid two. So you should call it something more obvious than that, but for now, this is going to be fine. So what we need to do, first of all is throw on a div into the first cell. And this is going to be 250 pixels worth of minimum height. Okay. And we're going to rename this, actually. We'll do this properly, and we'll rename the class of card call it card background. Okay. And what we'll do now is give this the background image. So let's do that. And the first one we're going to choose is this racing car. And that's going to be covering as well. Put it in the center, and I think I gave it a little bit of an offset here. So rather than 50%, I think I did 40%, so it centers it slightly. Okay, that's all good. Right. So this element here, we're not going to be applying any transitions or animations to the card background. This is literally here just to have the image in. Everything else is going to be over the top of it. So we're going to now have another div block is going to sit on top of this card background. Okay, the way we're going to do that. What we need to do, first of all, is make the card background div, which houses this image. We need to make it relative. So rather than static, just go to relative. And the reason for this is we're now going to throw on another div block. This is going to basically be a wrapper for that entire div. We'll call this card wrapper, this we want it to be position absolute, and we wanted to take up the entire space of this image. The way to do that is to make sure the card wrapper is selected. Then rather than static, we're going to give it a position of absolute, and we're going to have it on the top right, so the far right selection here full, and that's going to take up the entire space. The element that's going to trigger all of the animations is the card wrapper. So it's not the card background element or div. It's the Card wrapper, which is taking up the entire space of the card background div if that makes sense. If it'll make more sense as we go. So just make sure you have the card wrapper selected, and then we'll go over to interactions panel here and click on Element trigger and mouse hover. So when we hover over, the card wrapper is going to trigger this animation. So let's do that now and we'll do started animation and we'll do a new timed animation, and we'll call this card hover Sorry, Card hover in. Okay, and then we can get started. What we're going to do initially is get the background to go darker as we do it. First of all, we're going to give a background color. So this is the card wrapper itself, and this will be the initial state for it, and we want it to be completely transparent just like it currently is. Okay? Dead simple. Then what we want to do is on hover in, we want to get it to be darker. Once again, we'll click on background color. And this time, we're going to have it easing and we'll have a duration of not 0.2. This time, we're going to choose a background color of black. But rather than being completely dark, we're going to have it, so it's just slightly see through. That will do fine. Obviously, the reason we're doing this so we can see the text better when we hover over it. That will do nicely. Okay, so now let's have a quick look at this, and you can see. When we hover over, it goes dark. When we take our mouse away, it stays as it is. Now, we're going to do the hover out in just a moment. But of what we also need to do is to get this text on as well. So just before we do that, we're now going to apply another div to this card wrapper, and this is going to house our text. And just for speed, I am going to just copy and paste this over, so it's the exact same class. So it's same for this one as well. It's going to sit within the Diplock. And we'll actually give this div block a name. So the DV block, which is currently housing this text here, we're going to give that a class of card text. And within the card text, we're actually going to give it some padding as well. So at the moment, you can see on this version, the text is, again, not right to the edge, and we want the same sort of thing. And the way to do that is on all sides, we're going to just apply something like 20 to 25 pixels worth of padding, and that I'll make sure the text is not quite to the edge. Okay, so there we go. And once again, as we hover in, again, it goes dark, but the text is already there, which of course we don't want. So now we need to get it so that this text appears on hover. So we need to make sure the card wrapper is selected once again. Go back to our animations, go to the mouse hover animation we've already started. Click on that. And this time, with this animations panel open, rather than having the card wrapper selected, we need to select the div block, which is which the text is sitting within, which we called card text. So this is really, really, really important. And this basically lets you do lots of different things and lets you apply an animation to an element which is not the trigger element. Does that make sense? So by that, what I mean is, the element trigger, is the card wrapper. When we hover over this anywhere in this square, the animation will start. If we apply the animation to this card text, it would only apply if the mouse was within this div block here. If we came from the bottom, it means it wouldn't do it. So what you have to do, is make sure the trigger is what you want to apply the transition to. But on this section here, to make it apply to this card text, you then have to select it and then apply the transition to that element. I hope that makes sense. I'll just run through that as we go. So what we're going to do now, the card text div that we called card text is now selected, and we're now going to apply some opacity to this. So this is going to go inside the first part here as well, which I'll show you in just a moment. The initial state of this is going to be completely transparent. We don't want it to actually be there initially. We're going to just drag this inside that first one to make sure they're grouped together. These two need to happen at the same time. Okay, that's all fine. Then what we can do is just right click on the card text, duplicate it, and then we're going to pop this inside this one here. And also, what we're going to do now, is rather than having it completely transparent, we're going to bring the opacity up completely, so it's fully visible. So basically, the first two we have here is that the background color is completely clear. There's no darkening of the image, and the card text is also completely clear. You can't actually see it. And then when the animation starts, the background card wrapper goes dark and the card text will appear. So that's the idea and that rhymed. Okay. So the car text, we also need to give some easing to this. So we're going to give it rather than linear. We're going to have it ease, and we're going to give it a duration of 0.2 just like we did before, and that should be completely fine. And now, if we preview that, you can kind of see it happening, but we'll just save that and come off it, and I'll show you how we're currently looking. So the first one I made earlier, you hover in the image goes dark and we have the text appear. As we take our mouse away, it disappears and goes back to normal. We've just done now, as we hover in, we have the heading and text appear, but then we take a mouse away, you can see that it stays where it is. So the reason for that is we have to actually alter the Hover out state. So I'll just show you how to do that now. So if we go back to our card wrapper animation setting, so we currently have this here, it says Card hover in. What we can do rather than starting our own hovrot animation completely from scratch, what you can do is basically just click on this one here. And we're going to duplicate it. Then when we go to hover out and we start an animation, you'll see the duplication here, which says Card hover in two, which is the one we literally just duplicated just there is now here. And what we can do is give that a different name. Rather than card hover in two. We're going to rename it, and we're going to call it Card hover out. And then we'll need to configure it slightly. So if you go onto the little settings wheel here, first thing you need to do is just delete these last two ones here, so just get rid of them completely. And then for these ones, they're currently set to an initial state. So what you need to do is basically just get rid of that initial state for both of them, and that's going to go halfway to solve this issue. And then what we need to do is just adjust the easing once more to make sure it's the same. So what we'll need to do is give it an ease and that was an ease of 0.2 And then we also want to have the card wrapper the same rather than 0.5, we need to be 0.2, and it needs to be easing. And also, since we deleted the part of the animation, we need to make sure that this is within the same timeline as the card wrapper. So just click this and drag it into the same box as the card wrapper. And then if we save this, everything should work correctly. Okay, so now that we've done that, just make sure the card verte is selected for this one here, and it should work as the previous one. So if we preview this now, This one, as we hover in, we get a dark background with text appearing. And with our new one, we've just created as we hover in, we get a text appearing and hover, it disappears. So we've just recreated the exact same thing as we have in this one. When we preview this, this is appearing up like this, because I think I also applied a tying to it. We'll do that towards the end. But just before anything else, what we need to do now is just change these images. So we'll make sure to just copy and paste this along the row. And when you do this, make sure that you don't just click on it and press copy and paste. The reason being, is that the card wrapper is over the card background div. So if you by default, just click on this and copy and paste, it's not going to do anything. You need to make sure you select the card background, which is the overall div that houses everything. To make sure you're doing this, you can use the navigator and make sure it's selected. And then you can just copy and paste that along. And once again, when you start changing the images on these, you're going to make sure that the card background is selected. And before we start changing images, we need to give this a qualifier, so we need to give a combo class, so it will allow us to change the image on each individual one. Otherwise, if we didn't do this, if we change one image on one of them, it will change on all of them. So we want to have a combo class for each box. So I'm going to just give this combo class of one just for sorry two, and then we can adjust the image. So rather than that one, we're going to where are we? We're going to have this one here. And then for this one, again, make sure the card background div is selected, and then we can change this one to a combo class of number three. That's really important to make sure that you do that, and then we can change the image again, and then we can have this one. And now we have pretty much exactly the same thing on all of these. And just to make it exactly the same, I'll apply the slide in transition to. What I also did, I apply the transition to the grid itself. So when you click Preview, it slides in up from the bottom. So we'll do the same for this grid as well. So this is a slightly different kind of interaction. This is an interaction that's sort of preset and scrolling interview, it will be sliding and it will be up from the bottom. And that will now be the same as this one, I now preview, it should be exactly the same. They all appear up and they all have the same kind of hover effect. So I hope that was useful, and I hope all of that made sense. The most important thing to understand at this point in time is what triggers other elements in terms of animation. So what we did, we applied the trigger of the animation to the card wrapper. Sorry, the card wrapper. The card wrapper, when we hover over it, triggered this card text div block. So we didn't apply it to the card text div. We applied all the transitions to the card wrapper. But when we were within our animation section here, we just selected the div that we wanted to animate. So that's really important. If you're not sure about that, just rewatch this a few times. I think this is the thing that gets people confused at first, is how do I affect one thing by another one. And the simplest way I can explain it is that you want to basically have a trigger element, which is the card wrapper in our case. Then when you get to our animation panel, you can select anything within this diblock here and animate it over here. But the trigger will always be the hover of the card wrapper. Okay, so hopeful that makes sense. I appreciate it a bit much at first, but once you've got used to that idea, it's going to make everything else much easier to understand. Okay, so that pretty much wraps it up for this one. The next one we're going to do is going to be pretty much the same as this apart from rather than this sort of appearing with opacity, we're going to have it slide in from the left. 24. ANIMATION HOVER CARD 2: Okay, so next up, we have the same sort of thing, but we're going to do a slight variation. So rather than the text just suddenly appearing and the background going dark, we're going to do something a bit more interesting. And when we haver over, we're going to have a text slide in from the left. Okay, so in order to do this, you're going to obviously have created this first one. So all the animations I'm going to do, from here on out, I'm going to be using these sort of three examples. So let's get started. So this is pretty easy. We're only going to basically alter the one that we've already done. So go onto the card wrapper, which already has the interaction on and go to the interactions tab here and click on the hover in and then make sure that the card wrapper div is selected. And what we're going to do is then add move to this. So if you click on move, make sure this is again, grouped within this first section here. And what we're going to do is have that set as the initial state, and we're going to move it just out of frame of this diblock. So we'll move it. 394. I can't cope with that, so that will have to be -400 my OCD kicks in. Okay, that's fine. So -400 pixels is going to be set to the initial state. Then what we can do is duplicate that again, and then drag this into this collection here. And this time, it's going to be set back to zero. So currently, it's on -400. Make sure the initial state is not selected and just click on zero, and that's going to push it back in place. And we want the easing of that just set to ease and we'll have the duration of 0.2, just like the other ones that we have. So that should all be fine. Okay, great. So that's the first bit, done. I'll just show you that. We haven't done the out section yet, so I'll show you that in just a moment. Just to prove what we've done so far. As we hover in, it shoots in, but we have something kind of weird happening. I if you saw that, it's kind of doing something strange. And the reason being, because we've got something coming out of this section here, we don't actually want to see it appear before it gets to the actual card wrapper itself. So I'll show you the way to get around this. So on the actual card wrapper, what we're going to do back to the CSS panel here, make sure it's set to overflow hidden. And this way, you're not going to see this text fly in from outside of this sort of frame. So now if we do it, you'll see you'll only see it within this square. Okay, if that makes sense? Now, obviously, we have to now set the hover out setting to make it make sense. Okay, now let's add the hover out animation. So again, make sure the card wrapper is selected. Go over to this one, and then on the hover out. We're going to just add the animation for the card text dVlock. So I'll go on the plus, click on Move. And this one was -400, if I remember rightly. So on this one here, we're going to have it as -400 pixels, and that's going to move it back out. It may not actually do that to show you, but it is going to on the animation itself. Make sure it's set to 0.2. And we'll set it to ease and also make sure that it's within this group as well. Otherwise, it's going to look a little bit Janke. Anky a word. It is now. Okay, so save that. And now, you should see when we preview this that they all have the same kind of interaction, they all slide in and out, and that's pretty much the end of that one. Okay, so hopefully that all made sense. The next one we're going to do, we're going to also have a few other things in here, and we're going to perhaps just add a border to the bottom as well, and we'll do something more interesting this as well. 25. ANIMATIONS HOVER CARD 3: Okay, so we now have a slight variant on what we've already done. So obviously, the one we've just done is where we have the text sliding in from the left coming into the box. This time, we have a similar sort of thing, so it's going to use most of the same properties apart from I've just given it a little bit of color just to make it more exciting. And we've also got a line, which is also shooting in from the left as well. Okay, so obviously, you'll need to have done the previous one for this to actually work. And all we're going to do really is change the background color. And obviously, we're going to add this line in, which is going to be a div block. Okay, so let's get started. So first of all, we need to add this dive in, that's going to act as our line. So what we'll do is we'll just throw in a div into the card wrapper. We're going to give the dvlock some height. And also, we're going to give it a name very creatively of line. And it's going to have a height of about five pixels. And I'm going to give it a background color as well, so it's going to be white in this case. And we also want to get it to stick to the bottom of this card wrapper. So what we're going to do is just go to our position here. And rather than static is going to be absolute, and we're going to set it to the bottom. So even though this card wrapper is already absolute, it's still going to work and it's going to stick to the bottom of the card wrapper. Okay, so that's all fine. And obviously, we then need to animate this going in from left to right, and we're going to do it in pretty much the same way we did for the card text to div as well. Okay, so first of all, make sure the card wrapper is selected. Go to your interactions panel here. Click on the mouse hover interaction we already have. And then what you're going to do is click on this. Now with this panel open, you're going to select the line div that we've just created, and then we're going to add an animation for this, which is going to be move once again. I'm going to make it match the other one. So first of all, we need to drag it into this collection of three here, so it now sits within all of them, so it's now a collection of four. We're going to have that as the initial state, and that's going to be -400 so it's the same as the text that flies in as well. So that's -400 pixels. So it's outside of the element here, and that's going to be fine. And then we'll just go on the line again and then we'll duplicate it and we'll drag it into this collection here. And this time, we want to make sure that the initial state is not applied, it probably won't be by default, but just make sure it isn't. And then all you can do is zero this out so it goes back into place, and we're going to apply some easing to it as well. And we'll also we'll make it slightly longer. Not quite 0.5. We'll make it. No, we will. We'll keep it 0.5, actually. We'll do that. So if we preview this, 0.5 is too long. Let's do 0.4. I've actually forgotten what I did. I'm pretty sure it was 0.4. Okay, so that's all fine. We also need to change the background color as well. So this was red. So let me just go back to this one just to see what I did for this. One moment. Let's just say what we did first of all. Go back to this one. I'll just check what we did. So background color. We'll just swipe this one from here. Obviously, you can make this whatever you want. I'm just going to try and keep it the same just so obviously, it looks like what I did before. So that's all good. Okay, we'll go back to this one. And then I'll just change this background color that we have here. So the background color for the card wrapper is going to be rather than what it currently is. We're going to have this sort of ready kind of color. And we need to back off the capacity just a little bit as well. Okay, so that is all fine. So all we need to do now is on the card hover out is just basically add on this extra element that we have. We're going to obviously duplicate this line and copy and paste it into the new boxes in just a moment. But first of all, we'll select the line that we have. Then we'll add the animation of move. Make sure once again that it sits within this collection, and then we're going to have it as it's going to be 0.4 and we also want to make sure it's set to -400 again. So that's down here. Okay, so now with that saved, we should have exactly what we want. So it should look like this. And there we go. So as you can see, there's a slight delay on the line. I kind of wanted that just so you know, it gives something a bit more interesting to it. Now, obviously, on these ones though, we don't have exactly the same animation because we haven't added this line on. We have got the color, which has changed. But since we added something to this, I didn't actually add it onto these ones here. So all we need to do very simply is just copy and paste this line, paste it onto the card wrapper itself. It's automatically going to be set to the bottom because all the rest of the classes are the same anyway. And now if we preview this, we should have exactly the same thing for each and every one. 26. ANIMATIONS HOVER CARD 4: Okay, so we're going to sort of start from scratch again with this one because it's going to be slightly different. So the first one where the image is sort of fading in. This time, we're going to have an image zoom effect along with a few other things going on here. So as we hover over, the image is sort of zooming in, we have a border as well it's coming in, and just like before, the text is fading in and out. Okay, so let's get started making this. So I've already got another grid on here. So what we're going to do is just sort of retrace our steps on what I've done previously. So within this grid, I'm going to pop in a div, and we're going to call this to call it card. And this is going to have a minimum height of 250 pixels. Okay. And then what we're going to do is throw in an image. So this won't be a background image. It will actually just be an image within this div block which you've called card. So let's do that now and we'll throw in the first one and we'll choose the racing car. And what we'll also do is make this 100% of the width and 100% of the height as well. So that way, it takes up the entire expanse of that, and the fit, you can choose what you want for that, but I'm going to go with cover for now. Okay, right. So that's the first part done. Also on the card element itself, we're going to give a border as well. This is going to become part of the animation later on. So we're going to have a border, which will be white. I'm going to make that about five pixels. So that's fine for now. Okay, so first part done. Oh, sorry, one thing I forgot to mention on the card element itself, rather than that being static is actually going to be set to relative because what we're going to do now is throw on a div block, which will house the text that we have here. So next to plan, making sure that we have the card elements selected. We're then going to add a dVlock. And this deb block is going to be set to position absolute, and that is going to be to this option here, which is full, and that is now taking up the entire expanse of this section here because the card element is set to relative. So that's really important. You need to have that set to relative in order for the deb block to do this basically. Okay, so that's all fine. What we'll do now is just copy and paste our text on. I'm going to just copy and paste it from over here. But obviously, you need to just Obviously, throw on a heading and throw on a text block, I think I've used. So that's all fine. So this is being thrown into the div block, which we should name actually. This will be rename this and we'll call it card hoops. Re name it Card text. Okay. And that dip block, we're going to give some padding because obviously at the moment, this is right to the edge which we don't want. So we'll give it 25 pixels worth of padding, so it matches the one I've done before. So that's all good. So you can see, we're pretty much there with sort of building the first part out, and then we need to start doing the interactions. So let's give this a go. So obviously, what we want to do is we want the border to appear. We also want the image to sort of zoom in, and we also want the text to sort of, you know, appear from a zero opacity as well. Okay, so that's all fine. So first things first, let's start by making sure our card element is selected because it's the card, which is going to be the trigger for the animation. Okay, so let's go up to here, and we will start on mouse hover and we will start an animation. And we'll call this. We'll call it hover in. That's all fine. Okay, so with that started, we can now start doing all the different things we need to. So what I think we'll do first of all, is get this image to Zoom, first of all. In fact, no, sir, you know what, we'll actually make the border appear. So first things, let's go on to border color. And the initial state will need to be selected, and we're going to have it. So there is zero capacity. So you can see as soon as I do that, it's actually changed it on here, so you now can't see it anymore. Okay, that's the first thing we need to do. And from there, we're going to select the image afterwards. Let's do that now. And so for the image, what we're going to do is we're going to have this scaling. So that will be scaled. The initial state will be just set to one. So basically, that will just be as it is essentially. So that's all fine. And then also what we want to do is give the div block, The card textive block, we need to give this some opacity, so it appears when we hover in. So let's do that as well. So we're going to give opacity to this. And because we could set this to individual text elements. So if you wanted to have this sort of one coming through first, followed by another one, you'd have to do these emations the text element. What I'm going to do, though, is I'm selecting the card div, which means everything inside it is going to have the same animation. Basically, what I mean by that is that both of these text elements are going to go from zero pacity to full opacity at the same time because they're pairing element, which is the card text div is going to have the animation applied to it. I hope that makes sense. Okay. Well, I'll just do it and then you can see if you've managed to follow along. Okay, so we're going to go for opacity and the initial state is going to be zero. So you can see as soon as I'm doing that, both text elements are disappearing because they are within this card text element, and that's what we're applying the transition to. There we go. That's going to go completely blank. Okay, so so far so good. That's fine. And then next up, we're going to need to start getting a different color when we hover in as well. So again, once again, the card text div, we're going to apply a background color to, and the initial state is going to be again, nothing is going to be completely transparent. But then we can now start doing the alternate versions of all of these. So first of all, what we're going to do is drag all these so that they're all definitely nested within each other, which at the moment you can see, they're all within this box together. So that's all fine. So what we can do now is start duplicating all of these, sorry. So first of all, we're going to duplicate the card. So we'll do that first. Rather than being the initial state, which shouldn't be selected, that's going to be unchecked, and it's going to be 0.5. We're actually going to keep it 0.5 seconds because it actually works quite nicely with that sort of time frame. And we're going to have it all easing as usual. So that's all fine. And rather than transparent, it's going to be full, and it's going to be white as well. Okay, first one down, then we'll duplicate the card text, drag that underneath this one, so it's all the same. Still 0.5, that's also going to be easing. That's all good and that rather than zero capacity is going to be full. Couple more card text, duplicate this, and then drag it down underneath this one. Once again, that's going to be with easing and that's going to have a background color, which makes basically black but we'll back off the opacity a little bit. You can see the text better. So that's all fine. Then the last one, the image scaling. We're going to duplicate this. Again, drag that into this. It doesn't matter what order they are within the box contained, but you do need to make sure that you have always contained in the same box together, so they apply the animations at the same time. Okay, yes, that's going to be scaled now, rather than one, we need to set it to something like 1.2. When I hit enter, you're going to see the image expand. We actually don't want this, and I'm going to do something that's going to correct this, which is basically an error at the moment. But we are going to just click Save for now because that's pretty much everything set up as it should be. Apart from we need to make that easy as well. Okay, so we are now, in fact, all good. So I'll just show you the issue we have at the moment that we need to fix. When we preview this, like this one, where the image is zooming in, but it's not getting bigger as such. This one is getting bigger, which obviously we don't want, and there's a really simple way that we can fix this. What we all need to do, is on the card element, which is the main div that is housing, everything that's going on currently. This needs to be set on our CSS panel to overflow hidden. And now, when the animation happens, it's not going to do what it did before, which is kind of expand out of the div block, if that makes sense. Okay, so that's fine. We'll also just make sure we've selected everything correctly here. So that's all fine. Obviously, we need to do the hover out in just a moment. But let's just see what it looks like initially. So there we go, and that's pretty much perfect. Now obviously, at the moment, there's no hover outt function. So we very quickly need to just get that changed. Okay, so for the hovert animation, let's go and do that now. So make sure the card is selected. Go to our animations and on the hover out option, you can see that we don't have a hover outt one created yet. What we're going to do is duplicate the hover in one. Sorry. So just duplicate this one, and then we're going to rename it hover out. So we'll now just rename hover out. And then we can select it, and then we can adjust this again. So again, just like previous ones before, we're going to have to delete a few of these, so we'll delete all of these ones. We don't need them. Now, these ones currently are all set to initial state. You need to uncheck this for all of them. And then we need to make sure they're all together so you can see, currently, they're all sort of in different times. We need to make sure they're all the same time. But just before we do that, let's go back and make sure everything's set as it should be, we'll need to reapply the easing to each one of these now we've messed with it. So again, each one of them needs to be easing. Oh, sorry. One more. Okay, so that's all easy. And then we need to just drag them all into the same collection, so it all does it at the same time. Okay, so that should now be perfect. So if we have a look at this, just like that one, this one does exactly the same hover out, it hovers out as well. So again, I think sort of point half a second for this sort of animation works quite nicely with the zooming in effect. So yeah, that's pretty much it completed. Obviously, what we need to do now is just get the other ones in two. So let's do that. And obviously, the easiest way to do this is to select the card. And then literally just copy and paste the diblock along. And all you'll need to do is just change the images. So let's do that, go to a navigator. And so for this one here, sorry, for this one. Just click on the wheel there. Place image, and we'll have this one. The next one along. Just make sure the image is selected, where is it now it is. Look on that and then we'll have this one. Okay. And there we are. We have recreated a hover effect where the image zooms in, the border appears as does the text as well. 27. ANIMATION HOVER CARD 5: Okay, so now we have, again, a similar sort of set up where we have three cards, and when we hover this time, a few things change. So you can see that as we hover over, we have sort of a line that's expanding on the left hand side, and we have some text and a button appearing as well. So this is what we're going to make of, we have a color change in the background as well. Right, so let's get started making this. So this is a bit more advanced. We have quite a few different animations happening here. So I'll go through this as slowly as I can and explain what I'm doing as I do it. Okay, so I parked on another grid, and what we'll do. First of all, is throw on a div. Now, just like the previous ones that we've done, we're going to basically style one of these and then copy and paste them over by changing the image at the end. That's probably the quickest way of doing it. Okay, so this div block, we're going to call we'll just call it card content. No, sorry, not card content. We'll just call it card base. Because that's going to house our image. The diblock for this is going to need to have some defined height. So for this, we're going to have a minimum height of 250 pixels. And then we're going to throw in an image. And in this case, it's going to be this yellow racing car. The image needs to also have some defined sizing. So we're going to have a width of 100%. That's 100% of the element it sits within and also we want the height also 100%, and this way it fills up the entire space. Okay, so that's the first part done now, we need to start throwing on our content. And the way we're going to do that is by putting another div block inside the card base div. So rather than putting it on top of the image, obviously you can't just do that, it'll pop it below. The way to do this is to pop another div on and have that positioned absolute. But just before you do that, you need to make sure that the card base div, which is the one that we threw on to start with, which currently houses this image. The card base needs to be positioned relative because then when we throw on a div Initially, it's going to appear down here, but what we want is to make this diblock position absolute. So that's what we're going to do. But just before we do that, we're going to give this div block a name and this will be card content. I spot that wrong again. My microphone is in front of my face. I can't see as well. That's my excuse anyway. Okay, car content two, three, since I've done a few other ones. Car content two. We'll call it. Okay this needs to be position absolute. No fill. It needs to be rather than static, it needs to be absolute. Then we'll select this one here, which says full and that will now cover over the image and over the original dip buck as well. Then now we can start throwing on all the things we need for this. That's all fine. There is just one thing I think I did on this one. I think I made the image. Let's just see what we've done with this. So the image also needs to be covering as well. So we'll do that and that's fine. And if you want to you can sort of position this a little bit differently. So I'm going to make it so the car is a little bit more ever to this side. My maybe not quite as much as that, maybe sort of 10% or 20% more. Yeah, that's fine. Okay, so 20% left and then 50% top, that's fine. Okay, so we're all good. Now, let's start throwing on the things that we need. Now, what I'm going to do just so it makes sense and makes the same sort of look and feel of this one. I'm going to just copy all these classes over. What you would do, of course, is initially throw on a heading for this one here. So I've got it is an H three. And obviously, this is actually a text block, and this is a button. You need to just style these to however you want to. Again, you don't have to make yours look just like mine. So just for speed, I'm actually going to reuse these. So I'm going to just copy and paste this one on. Same for the text box as well, and same for the button. Okay, so you can see we've got an issue. Unlike this one here, there's a slight gap where we have the text the lining and then there's a gap. Then we have this line which we'll put on in just a moment. The issue, though, of course, is that we don't want to have it right to the edge. So what we need to do is on the card content two div, which I've called. Just make sure you have some padding on that. So that's what we're going to do. Make sure it's selected and then we'll do on all sides, hold down shift and then do something like 20 to 25 pixels worth of padding all the way around, and that'll give you the slight gap. Okay, so we're pretty much already there. The only thing we're missing, though, is this line. And I'll actually rather than copy and pasting that on I'll actually show you how to do that. So what we'll do is on the card content, we'll add a diblock This is going to have a minimum height of 250 pixels. So it's going to be quite large. The width is only going to be something like five pixels. So it's quite small. Now obviously, it's not in the right place, obviously, we need to try and figure out a way of getting that over there. So whilst I give us a background call, have a little bit of think how you might do this. So it's called Di six for now, which we don't want. So let's rename this and we'll just rename it as line. And we'll give it a background color of white so it matches the other one. How do you reckon we do this? Well, just like other things, when you want something to stick to a certain position, you're going to use position absolute. This line needs to stick to this left hand side. The way we'll do that, is by rather than having it position static, which it currently is, make it position absolute. Then if you click this one here, it's going to stick to the side. There you are. We now pretty much have everything that we need to start making this animation. And you can see when we hover over this, again, there's quite a few different things happening. You can see in its initial state that the background is actually slightly dark. And the reason that I've done that is so that you can actually see the text. Now, for this one, it wouldn't be a big deal because it's on the black background anyway. But for this one and this one, the images are slightly lighter at the top, particularly up here, you wouldn't have been able to read the white text. So we need to get a slightly dark overlay over the initial state as well. And obviously on Have it's going to turn red red. Okay, so let's get started with the animation. So the trigger for the animation is going to be the card base as we called it. Obviously, you can call this whatever you want to call it, but we call it card base, which is just the initial dip that we threw on. And this is going to be the trigger for all the animations. So again, it's important that you get the correct element that triggers the animations. And for this one, it's the card base. So go over to your interactions panel here. And then what we're going to do is on go on mouse hover. Okay, and then we'll start an animation. And we will call this hover in. Okay, so what we're going to do initially is have the image slightly scaled inwards a little bit so that when we move it off to the side, there's actually some room for the image to actually do that. So that's the first thing we're going to do, and that's going to just be in its initial state right from the beginning. So just before we do that, though, we're actually going to make sure that the card base is overflow hidden. And the reason for that is that when we scale it, it's actually going to come out of the Did block. In fact, I'll actually just show you that just to show you what would happen if we did that. So let's actually do that first. So for the image, make sure it's selected. We're going to scale it. And we're going to have it as something like 1.1. Again, you can choose whatever you want to do. I'm going to choose 1.1. You can see now, the image is now protruding out of the diblock, which we actually don't want. In just a moment, we're going to come back and correct this. So we want this set to the initial state, and that's going to be fine. Just to fix this problem that I mentioned just a moment ago, we'll just quickly save that and come back to this in a moment. So the card base, if we go back to our styling panel is currently set to overflow visible. So what we actually want is to have it as overflow hidden. This time, when we go back to animations panel over here, you'll see that the image is no longer protruding out of the diblock. So that's really important to get that looking correct. Okay, so next up then, what we need to do is start affecting all the interactions for the initial states. Obviously, the initial state initially for the image is scaled in. We're actually not going to change that at all. That's going to just stay there. Okay, so the next thing we need to do is get this to have some kind of a slightly dark overlay. Okay, so then on the card content div, which is again, housing, all of this text and what have you. That's going to have the background color be slightly dark. So let's do that. So make sure card content two is selected or whatever you've called it. And then we're going to give this a background color, and it's going to be black. But we want to just back this off a little bit so we can actually see through to some degree. So that's going to be pretty much okay, I think. That's good. And this is going to be the initial state. So once you've done that, it all groups this together. That's fine. So you can see now if we just preview this, it already has the slightly darker color. In fact, this version, I actually made slightly darker still, but this is probably acceptable. Okay, so that's all fine. Actually, no, we'll make it a little bit darker. Just a little bit. Let's just back that back up again. That's fine. Something like 50. Okay, so that's fine. And then we're going to expand this line outwards. So on the animation on the have over, you can't see it, and then it expands outwards from the middle. So that's what we're also going to do. So with the line selected, go over to here, and we're going to have it as scale. Now, by default, these two options here for scaling on the x and y axes, they come as locked together. We actually don't want that. So click this button here to unlock it, because what we want to do is actually make this completely not visible. And then we're going to also set that as its initial state as well. So to start with, you're never going to see it. So that's all fine. And again, these are all still grouped together. And now we can start affecting the text block three and the button. I really should have named it something other than text block three, but whatever. Okay, so you know the importance of naming things by now. Okay, but anyway, let's do that, click on the text block, and this time, we're going to have this. This is actually going to do two things. This is going to be not visible to start with, and it's also going to move upward slightly. Now, I would suggest doing the move option first because if you make it invisible, obviously, trying to get to move around, you won't be able to see where it is. So click on Move initially. Again, this will be the initial state. And we're going to just move it on the y axis, something like something like minus ten would be fine. So let's do that. Minus ten. Keep it to round numbers. Sorry, not minus ten, it would just be ten. Okay. So ten makes it go a little bit lower than it currently is. That's fine. Then on the button, we're going to do a very similar thing. We're going to have it as a move. It'll be the initial state, and that's going to be ten also on the y axis. So let's do that. And you can now see that the button has gone a little bit further down. Okay, then the final two things that we need to do, final three things we need to do is also the background color will change is then to get this to have an capacity where it's not visible to start with and then becomes visible later on. But let's do the capacity first. Click on the pacity This will be the initial state, and it's going to obviously just be not visible. And the same will also be true for the button. Make sure you select all of these as you do it, capacity and then get rid of that completely. And then that will also be the initial state. So we need to set an initial state for the image itself because on HVO, we're going to have the image move a little bit. So what we need to do is just make sure that the image is selected within the card content, so just select the image and then we'll affect another transition here and we'll have it set to move. And its initial state will be zero pixel, so it will be exactly where it is right now. But then when we start going on to Hov, that's when we're actually going to change this slightly. Okay, so now we are, in fact, done with all the initial states. Okay, so we'll save that, so that's all fine. So next up, then, what we have to do is start altering all of this on the Haves state. Now, obviously, we've got quite a lot here in terms of animations. Now, you don't want to have to start doing these individually one at a time. There's a much quicker way of doing it. So what we're going to do is click the bottom one here, which is our button. Hold down shift and then click on image three, and then you'll see it selects all of them all at the same time. Now, this is super useful because if you didn't know about this, the logic might be that you individually do all this again, but no, definitely not. I want to do is select all of them. And then, again, just to repeat how I did that. What I did was I clicked on the place I want to select from, and then I clicked on the place I wanted to select up until. So in this case, I selected image three right the way to the top, and that selected all of them. So again, this would work for anything. So I did this one here. Let's say I wanted to just highlight these ones here. Click where you want to select from, and then hold down Shift and click that, and it will select only the ones that you clicked. So again, super super ul. Okay, so in our case, there, what we want to do is select from here up to here because the scaling is actually not going to be affected at all. It's actually going to stay scaled. So we don't necessarily need to change this at all on Hov. I mean, we could just select all of it anyway, which I think we'll do, we'll have it all there, but this is not a property we're actually going to change at all. Okay, so let's do it again. So make sure this is selected, hold down a shift, click Image three, select all of them, and then right click, and then you can duplicate. Okay, and there we are. So again, we've just saved ourselves a hell of a lot of time. Okay, so now that we have all of these, obviously, we have to change some of the properties because by default, they're all set to the same positioning as these ones over here. But obviously, on Hova we want to change these slightly. So for the image scaling, again, that can actually stay exactly what it is. The button capacity, rather than being 0% can be 100%. Same for the moving here. So we move that ten pixels that can just be zeroed out, so it goes back where it was. Text block, again, rather than 0% capacity, that can be 100%. The text block moving again, was ten pixels just the same as the button, that can be zeroed out now. And then the line, that can be back to one. And then for the card content, we want to have this as sort of a red color with a slight capacity. So rather than just dark, we're going to change this sort of like a dark red. So it won't be exactly the same as the first one, but it'll be very close. So that looks pretty much okay to me. That's fine. And then for the image moving, this is where we're going to have to apply however much we want to do that. So something like something like 20 pixels, so it's quite subtle, maybe 25 pixels, and that's all going to be fine. So now if we preview this, you'll see, We have the interaction that we want. Now, it's quite slow, though. So I think what we want to perhaps do is get this line to be a little bit faster when we do that. So again, this is still quicker doing it. Well, we still have to actually alter things, but just imagine how long this would have taken to have done one by one again. Having this sort of copied has has actually saved us quite a bit of time. But let's click on the line. And rather than this being 0.5, let's make it 0.2. I think it's a bit faster. I also think we'll have the background color a fraction faster as well. So rather than 0.5, Let's try. Let's try 0.3 for that. And let's preview this. And yeah, that looks pretty good to me. I think that's fine. Okay, so let's save this and let's preview it properly. So on preview. You see this one comes in. The timing might be slightly different of this one compared to this one, but as we hover in, there you go. You can see we have pretty much the same thing. However, now, if I let go and I hover out, nothing happens. So what we have to do now is set up the animation on hover out. So let's do that now. Okay, so what we can do to save time once again is duplicate what we've already done, and then just change things slightly. So we currently have this one which is hover in. If you go to the hover out section here and click on Start animation, and we're going to this time basically just duplicate this one here, which says hover in. So click on these three dots and click on and duplicate. And rather than calling it hover in two, we're going to call it Hover out. So rename this one. H out. Make sure it's selected, and then you can click the little settings wheel to configure it. Now, again, if you logically, you might think, Oh, I have to sort of go through this all again. But no, you don't have to do that. So once again, what we're going to do is bulk delete all of these by clicking this one here, hold down shift and then click on the top one to select all of them, and then you can just delete all of those. What we do need is all of these, though. So we do have to change something. So rather than these being all set to initial state, that's no longer the case. So what we need to do is book, select all of these using the same method as before, select all of them. This time, uncheck the initial state, and now all of them will have been unchecked. Otherwise, in one of the previous videos, we have to do it individually. This is actually much quicker and a much better way of doing it if you have a lot of different things going on. And both ways work, but obviously, this is much quicker. Okay, so that's fine. Now, again, you have to affect some things once again. So the easing, all of it was set to ease, and the majority of them had 0.5, but a few of them, we did actually change. So let's do that as well. Let's now uncheck all of them. Now, the line we had as 0.2, I believe. That's fine. Also, that's all we need to change actually because it is going back to zero, none of this needs changing. Only the durations now need changing for this. Click Enter on that. Then I also think we change the background color as well. This wasn't 0.5, it was 0.3. And if we save that. Okay, now if we click Save, we should have this all working as the first one does, so you can see this one here. You hover in, everything comes on. This one, you hover in and hover out, it all disappears. Okay. And actually, I think the animation I've done for this one here is actually slightly nicer than this one. This one's a bit jerky. I probably made the speed a bit too fast on this. This one's nice and slow and it's nice and gentle. Okay, so that pretty much is it. Now after what we have to do is then duplicate this a few times. So let's do that now. And what you're going to do is make sure the whole thing is selected here, so this will be the card base that we need selecting. Let's just make sure anything I left over is deleted. So yeah, make sure the car base is selected and then hold down Control C for copy or command C, you're on a Mac and then control or command V, and then copy this along two times. We'll just change the text so it's the same as the top point. So this is under, and then this one S Bro Okay. And then obviously, what we need to then change is the image. Now, you won't be able to actually select the image by just trying to find it on here because what we have is a div, which is kind of going over the top of it. So what you'll need to do is just use the navigator and then sort of loosely sort of click around this area here and on the navigator, it'll show you roughly what you have. So obviously, this one here as I highlight it over image three. You can see it there. And then just click on the settings wheel and then replace the image this way. So this is the way that you're going to do it. So for that one. The same thing for this one over here as well, use the navigator again, select it over here, and then change it on this part here. Then the last one is there. And there we go. We pretty much finished everything, and we have pretty much the same animation on each one, and you can see it hovers in and then hovers out with a slightly different background color. Okay, so that pretty much wraps it up for this one. Now, in terms of getting this, mobile responsive and what have you, you would have to obviously disable some of the animations potentially with hover effects. Hover effects on mobile kind of interesting. C doesn't work the same way. You don't have a mouse. What you could do, of course, is just have this text, always appearing. You could do it that way or. You could have it, so you have to click it to Hovver then rather than this being a link block, you could have this you have to click on it first and then click the button to take you through to the section you need. There's a few different ways you could do that. But again, this is mainly just I'm showing this for desktop view for the interaction purposes. Now, there is one thing I should mention, actually. These two elements here on the interactions panel, we actually did this as individual elements. Now, what I want you to try. The reason I did that is, I want you to try changing the speed at which both of these do this. So I'll just show you what I mean by this. So what we could have done. Since these two items are actually separate within the animation, what you could do is affect the speed at which either one of them appear. Now, for speed, it may have been faster to actually have grouped the text and the button in one thing. And then that would have meant we wouldn't have needed to have done an interaction for each individual one. We could just have affected the diblock itself. But what you can also do is affect the speed at which these would have appeared. So you could have had this one appear first, followed by this one. So have a little play around with this sort of thing, and don't stick to exactly what I've done. Try some different colors, try a few different things. Kind of, I wanted to show you this how it can be done, but I want you to try and create your own version of this. Okay, so that pretty much wraps it up for this one. And then next up, we're going to be looking at some more animations that use lottie files. 28. ANIMATIONS SLIDER ANIMATIONS: Okay, so earlier on, we did actually look at how to use sliders, but I did mention, we'd come back to sliders, and I'll show you how to animate them now that we're doing the interactions part. I thought I'd do that now. So first things first, let's throw on a slider. So this is again, just a blank section that's 100 VH. And what we'll do is throw on a slider. And then what we'll do is make sure the slider is also 100 VH as well. So 100 viewport height. And then we'll add a image to the first slide. Which will be here. So you go to the background image section here, and then we'll choose an image and we'll we'll choose this one first. And we'll also pop on an overlay so we can see the text a little bit better. So that's going to be fine. And just image actually get it centered. We'll have it covering. There we go. Now it's better. Okay, so what we need to do is pop on a div that we can use and then to start a text around it. Because if you try and apply any kind of flex box to the actual slide itself, you can't won't let you do it, basically. So what you have to do is just throw on a div, and this will be just slid div doesn't matter what we call it, and that'll be 100 VH and then we'll actually make this a flex box because we t to have the text in the center. So that's been aligned to the center and we'll be justified also to the center. And then what we'll do is throw on a Diplock for our text. This will just be hero text. And then in there, we can throw it in a heading, and we'll make this, it's white again and we'll use a similar title as before. Okay, that's all fine. We'll make this a bit bigger as well. So rather than 38, we'll make it 50. And also, within this dV block, we'll just throw on a text block for now as well, and we'll also make that white and we'll make this slightly larger too, so something like Yeah, maybe a bit obnoxious, actually so something like 20. Okay, so there we go. So this is our first slide. What we want to try and do now is get the text to first of all appear, and we'll also have it moving upper slightly too. So we're going to basically animate the text every time we change a slide. So just before we do that, I'm going to Actually need it. Yes, sorry. What I'm going to do is style this one, and then I'm going to just basically copy this slide over to the next one but obviously change the background image for it. Okay, so first things first, what we need to do is set the trigger for animation. Now, usually, you'd think you'd have it on the root element, which would be the slide, which actually in this case, you don't do that. Is actually on the slide itself that you need to select and then go to your element triggers here on your interactions panel. And you'll see we now have a option, which says, animate when slide is in view or out of view. So slider change. So we're going to click on this, and this is going to be the trigger for the animation itself. So what we'll do now is start an animation, and we'll just call this slider in Okay. So what we can do now though is select the element we want to effect in terms of the animation. So with the hero text div selected, this is where we're going to add all the things you want to change. Obviously, the same for all the other different animations that we've done, you can choose, lots of different things. There's no limits on what kind of thing you can do with animations really. But I'm going to just do something that's quite common. We're going to have the text kind of fade in, and we're going to have it sort of move slightly from the bottom as well as we do that. Okay, so let's get started. What we'll do initially is have the opacity. Actually, sorry, we'll actually move it first of all. So from where it currently is, we're going to have it slightly lower down, and this will be the initial state as well, and we'll have it on the y axis, we'll have it something like 50, I think will be fine. It's probably a bit much actually, but whatever, that's fine. Then what we'll do is we'll duplicate this. This time, we'll have it set to ease as well, and we'll just move it basically back to where it was, so we'll zero it out and it'll move back up to the top. OK, so that's fine. And then what we'll also do is affect it in terms of its opacity as well. So again, this will initially will be the initial state, and we'll have it rather than 100%, we'll have it as zero. Then we'll duplicate that one as well by right clicking and clicking, duplicate. These two can be grouped together. And all I did there was basically just put it over the other one to kind of get it into a group. And this time, once again, we'll have it as easing, and rather than 0%, we'll have it as 100%. So now if we play this, you'll see it kind of isn't visible initially, but then it kind of pops up as well. So it's going from 0% capacity to 100 and it's also moving 50 pixels from the bottom up. You can say, that's pretty much it already. So obviously, I'm not going to do lots of different variations of animations. All the animations that we've done for the Ha card as well. All of those things will apply. You can add pretty much anything you want to. You can be as creative as you want to with this kind of thing. But what I've just done here is, again, pretty common when it comes to delides. Okay, so let's just make sure we have everything correct here. The hear tech move. That's all fine. Actually, so we need to make sure that the delay is added to the move option as well. So that should also be 0.5, so they're both doing the same kind of thing. Okay, that's fine. So that's now done in terms of the slide in. And also the delay, obviously, like I said, is going to just give us a little bit of time to actually get the slide on screen. Okay, so save this. What we'll do now is go on to obviously the slider out of setting. Okay, what we're going to do is basically duplicate the slider in. So we'll duplicate this and rather than called slide I two, we'll rename this something more obvious like slide out. There we go. That's all fine, and now we can configure this. So what we need to do basically is just get rid of these first two here, they can be deleted. Then these two will select them both together at the same time by using the technique of, again, using control to select all of them. And then what we'll do is uncheck the initial state, or make them ease. And we don't need any kind of delay for this, actually, so it can just remain as 0 seconds. It can happen straightaway. The reason being is that when you're going away from the slide, the delay isn't really as necessary. Okay, so that should actually be completely fine. So let's now save this. Make sure they're both selected in the correct one. So slide it in initially and slide it out. Now if we preview this, this will be more obvious when we go to the slide from the previous one. So if we go away to the one we haven't done yet and go back to it, you'll see it pops in. The posity again, comes from 0% to 100%. Okay. So that's a basic way of giving you a slider interaction. And just to show you how you'd maybe just go about doing this, what I would do is just duplicate this slide that we have here. Let's do that now. Obviously, you would have to just give this a different class name or a combo class. So maybe slide two, and that would allow us to change the background image. Otherwise, if you did it on one of them, it'll change on both of them. Now if you choose image, we'll choose this one perhaps. And we'll have that as yeah, we'll have it covering there. And we'll actually make sure we have this capacity, actually. So for some reason, we actually lost the capacity, which is strange. Okay, so that's all fine. Now let's have a look. The next one, the same kind of thing. And we still have a slide left over. Let's just get rid of that one. So get rid of slide three. Okay. There we go. We have a slider where we have text which appears by using the animation. Again, this is just one basic thing that you could do for the slide. There's all sorts of things you could do. But I thought I'd just show you this one because it's fairly common. Okay. So that's it for this video, and we're pretty much almost there with our animations part of the course. We've got just one more to have lookout, which will be a animation for lottie files on page scroll. 29. ANIMATIONS LOTTIE ON SCOLL: Okay. So for this video, I want to just illustrate how you can use lottie animations whilst the page is scrolling. So what we're going to do initially is just within our body, we're going to just throw on just for speed. We'll throw on just sort of this layout here. We'll make this section 100 VH as we always do. Okay. And then what we're also going to do from here is then within the body is throw on another section. And this will also be 100 VH. And this is going to house our lottie animation. But what I think we're going to do is we'll throw on a grid. And we'll just have one row, but two columns, so that's all fine, and we'll make the section itself a flex box. We'll have it all centered, and we'll just click on the grid, and we'll just stretch this out, and we'll give it a maximum width of something like 11,200, doesn't really matter. Okay, so there we go. What we're going to do initially is throw on a lotty file on the left hand side and then just some text on the right. Initially, we'll throw on a div just to house both of these elements. And in terms of the lot inmation we're going to use, we're going to use this one here. So if you click on this, we can then just download the file. Now, I've actually already uploaded this to my project, but I'll just show you how you would do that. And so if you go on, if you just throw this in, it'll throw it into the asset manager here. And then what you can do is just drag it onto the section you want, ops make sure it's in the div, and there we go. So if you just preview the animation, if we just preview the whole project, it will automatically just play it until it's completion. What we want to do is animate it whilst the page, whilst we're actually scrolling. And so, kind of get rid of this for now. What we will do just to make it look a bit better is just maybe just pop in the heading, and we'll just have some paragraphs to fill this space a little bit. Okay, so that's all good. And we'll also actually just duplicate this one, and we'll just adjust where it's base as well. So we'll just drag this to the bottom. Okay, the reason I'm doing that is just so you can sort of see the scroll effect as I do it. Okay, so what we want to do is have this animate as we scroll past it. So we're going to sort of play the animation gradually as we scroll the page. So let's do that. So what we need to do, click on the Lottie animation. Go over to your interactions panel here. Element trigger, and we're going to have it while scrolling in view. So that's going to mean whenever we're scrolling, it's going to play the animation. So what we will do is play scroll animation and we'll set up a new animation and we will select the lottie file. And then for the 0%, which is, again, the first key frame, this is going to be 0%, so we don't want to have anything being played. You can see as I scroll through this, it will play it. So we want to start it at 0%. And then at 100%, you can actually play around with the positioning of this a little bit. So at 87% in this case, we'll have it as 100% complete, and we'll choose easing for that as well. And then if we save that, That's all good. That's it. So smoothing is something we'll talk about in just a moment. So let's just preview this now. Ashley, what we're going to do actually is publish it. The reason being is that when you play back animation sometimes on the preview mode, you're not getting the true sense of how it actually looks. Sometimes it's a little bit janky, so you're actually better off viewing it on sort of the test domain. So let's do that now. So as we scroll down, you'll see the animation is actually playing as I scroll it. And if I stop, the animation stops and it will finish a roundabout here. So it's pretty neat. So there's all sorts of use cases for that. This is obviously just to show you how the actual effect works. There's all sorts of usable things you could do for this. Things I've used in the past is where you have sort of like an arrow that as you scroll, the arrow kind of grows into place. And you know lottie files have lows and lows of different things to search through. A lot of it is completely free as well. So lots of things like hamburger icons that were used earlier in the course are completely free to use. They do have a marketplace too. So you can actually buy animations from here, that obviously a more sort of complex. But again, a lot of this stuff is actually free, so it's really, really nice to use in your projects. Okay, so I want to just quickly talk about the smoothing side of this as well. I I I turn smoothing off, I'll show you how that looks. Oh, hang on a minute, right? So yeah, if I turn out to zero, It'll be just a lot more direct, and it kind of whenever I stop, it stops very abruptly, whereas with smoothing, if I now put that to max, you'll see a big difference. So you see now, even if not scrolled, it kind of keeps going ever so slightly. So it just smooths out the whole animation, and it almost makes it look slower, but it's actually just smoothing out the movement of the animation itself. So again, that's something you can again, play around with. It's up to you. It sort of depends on what you want the animation to look like. But by divulity comes at 50%, which is kind of, probably about right. 30. CLASS PROJECT: Okay, so now this brings us on to our class project. And as I mentioned at the start of the course, what I'd really like you to do is actually maybe use what I've done as a guide, but create something of your own and maybe use different images and have a different theme for the landing page. Obviously, you can just copy what I've done, and that's perfectly fine. I'm actually going to show you exactly what I do step by step. But really, what would be great is if you could create something maybe similar, but something that uses all the techniques throughout this course, and then share that to the class to everyone to see. So the nice thing about skill share is everyone's really nice. And if you share it to the class, everyone will give you nice constructive criticism. And I will also give you what I think about your project too, if you can be brave enough to actually share it. So I highly recommend you do. Okay, so now let's get started with the class project. I'm going to show you what I've created from start to finish. 31. CLASS PROJECT WALKTHROUGH: Okay. So for this first video, I wanted to just show you around what I've created for the class project. Now, your version may be completely different to this. You're welcome to copy exactly what I've done over the next few videos. I'm going to talk you through how I created this entire page. For your version, though, it would be nice to see if you did something slightly different. I've tried to use in my version, a lot of the techniques that we've used so far in the course. So obviously, we have a video background here. I'm using lot animations throughout as well. We also have a mega menu, which has some nice effects on it. But obviously, you can do something completely different. But anyway, I'll just show you through what I've done. So as we can see, we have a menu to start off with. So I wanted to try and make use of this drop down. And obviously, I'll talk you through to do all of this as we go. I do have a mobile menu too, which also uses a Lotti files if we click this. You can see we have an animation effect here and they kind of slide in. But we'll come to that in just a little while. So as we scroll down, we also have this sort of info section here where we have some icons, and we also have some transition effects here. So transition effects, we haven't actually touched on that much. So I wanted to just go through a few of these where we have this sort of the shadow on Hover. And then for this section here, we have obviously sort of info cards that similar to what we did earlier in the course with the animations where we have the images ming in and we have a button which comes up here. We also have some absolute positioning of this sort of almost like a background image here of a speedometer. Going down from there, we also have, again, just a standard listing section here with these icons actually animated refresh this. You'll see that animate in as does this image. And yeah, there we are. This is my version of the landing page. Now obviously, you're more than welcome to copy exactly what I've done and exactly the way I've done it. But what I'd really like to see is you do something maybe similar to this, but slightly different. It may be rather than the video background, try using a slider or use a slider with videos within the slider. Try and do something a little bit different to what I've done. You don't have to copy it exactly, but obviously if you want to do that, you can do as well. Okay, so in the next video, I'm going to start off by showing you how I created the menu. Okay. 32. CLASS PROJECT MAIN NAVIGATION: Okay, so, first things first, we need to start loading on our assets. Okay, let's go over to our files here, and then we'll just upload, and then I've got all my stuff saved here. So where are we? Okay, so this is all the stuff that we need, so just drag this on. Now, in terms of where to find all of this, this is within the course description. Alternatively, you can also go to the page on web flow, which I've made this design available for you. You can also download the assets. From the clonableFile on web flow as well. But obviously, I'm going to include all these images within this course. So anyway, we've now got all of these on, and then we can start building out our menu. Now, usually, like I mentioned before, you would start before creating any kind of website is create a style guide. Now, I'm not going to do that for this course, just because the next course I'm about to upload, which will be a full website build from start to finish, including all the different process. I'm going to include that on that course. So because we're just building one page here, I'm not going to include a style guide, but usually you would do it this way because creating a style guide just saves you lots of time later on. Okay. But first thing is first, let's throw on a menu. So we're going to use that default Nav menu within Webflow, and then we're going to throw on a drop down to create the mega menu. So first of all, what we need to do is get this to be black. Now, I don't. I haven't actually designed this on design software. I've actually just created this website within Webflow. So there is no design document. So I'm just very loosely copying what I've done on this design here. Okay, so the background needs to be black. And so, first of all, again, I am going to start naming these as we go. So this will be our main nav. And the background for this is going to be black, and we'll save that color as a swatch just for ease. And that's all fine. And then these nav links, we want to get all of these to be white. So what I tend to do is just delete the first two and then style this one. So we'll just give us a class of nav link. And we'll make this just like an off white color. That's all fine. Okay. And then what we can do from here is and style this however we want to. So two different types of font that we have. I've actually used fonts that are just already preloaded within web flow just for speed. So this is Oswald, and this is literally just area off, so it's a very common fonts. But again, for your project, you can choose whatever you want. So what we're going to do is for our main nav we're going to have Navnk I should say. We're going to have it as Oswald. It's going to be a lot larger than that, so it's going to be something like 16. Let's try 18, actually. And this is also going to be capitalized as are all of them. And that's pretty much okay. And then what we can do is just copy and paste these along. We only need four because we're going to have a drop down link for this. So we need home services about and contact. And then we'll just type in services. And then about there we go. Okay, so far so good. And we also need to get this logo. Again, I've just sort of put my initials on here, but you can do whatever you want for this. So what I'm going to do for that is just throw on a text block, and this is going to be our logo. And we'll just call this the same thing. So it'll be Harrison. And that's also going to be Oswald as well, so it matches the navigation. And we'll also make that 18. No. Let's be a typical client to make it bigger, so it 20. Obviously, this also needs to be white as well. We'll also have this capitalized. Then just to get this into the center, we're going to just apply a little bit of padding to the branding itself. So we'll just call this brand div. Then we'll just apply some padding above and below to get this into the center. That's all good. We'll also just give some padding to the main n itself as well. Something like ten pixels should be fine. Okay, so we now have the workings of our navigation. But obviously, we need to try and get now our hover effect. So we're going to throw on a drop down to do this. So again, this will be just the same as earlier in the course where we use the drop down to create the mega menu. And then obviously we actually have got some effects on these as well. So when this drops down, the images are kind of fading in on drop down. So again, we'll get to all this in just a moment. Okay. So let's get started. So what we have to do is within our nav menu. Again just to make sure you're doing that. Make sure the nav menu is selected. We'll then throw on a drop down. Obviously, we want this to be just after home. And we're going to style this just the same sort of way. So rather than call drop down. What did I call it? So it was vehicles. So that's all fine. Obviously, we need to get it, so it's the same as this. So the topography for this was Oswald. It was a normal font weight, and it was 18 pixels. So let's make sure that's the same. So that's Oswald. It's going to be 18 pixels, and it's also going to be white and capitalized. Okay, so also to change this icon color, you change the icon color by also changing typography. So let's do that as well. So we'll just call that white as well. It's called itself by default icon. We'll actually rename this and we'll call it dropdown icon just in case later on we ever use dropdown icon for something else or the word icon for anything else. Okay, so that's all fine. So what we can start to do now is get this to open the way we want to. So very similar to how we did earlier in the course, we're going to see how it looks initially. So we have this, which is what we don't want. So in order to get this to work correctly, we have to alter some things. So what we want to do is make sure that the drop down is not set to relative. It needs to be set to static. The nav menu also needs to be set to static. The actual main navigation, also for this to work correctly, needs to be set to either absolute or fixed. What we're going to do actually for our purpose is have this as absolute. I'm going to have it sticking to the top there, or being fixed to the top, I should say. In terms of a fixed positioning, that would then follow as you scrolled. Which is up to you. You could actually do that. And you know what? Just for the hell of it, let's do that. So let's have it so that the navigation actually follows us as we move around the page. So I think on my other version, it didn't do that. But again, either version would work. So you could have it absolute and stuck to the top or you can have it fixed, which will do again a similar sort of thing. Okay, so now if we open this menu, we should see that it's kind of doing this, which again, is still not quite right. So make sure that we go to our drop down, sorry, our drop down list. So I'm not going to rename some of this stuff just because it kind of makes sense for what it is, so that's all fine. But we need to make sure the drop down list is set to absolute, and I'm going to have it from the top here, and then I'm going to just drag this down a little bit, so it sits somewhere about here. We're actually going to pull it slightly above the nav menu. And the reason for that is that the trigger, you can see here is within its own box. If this is too wide, it will actually close automatically without you having time to get to the menu. So what I tend to do is have it slightly dragged above, and the actual dropdown list itself is also going to be dark as well, so this is going to be black. So everything matches. And there we are. So at the moment, we have these dropdown links kind of all to the left. But again, we do have something that represents a dropdown now. Okay, but obviously, what we want to do is on hover. We wanted to open, and then we want to have these sections here. Now obviously, is not just text, it's actually images with texts as well, but as you can see, whenever I hover over any of this, all of it is clickable. So I'm not using just nav links. I'm actually using a link block, and that's what we're going to have to throw inside of a div block. So let's do that now. So what we need to do is within our drop down list, we're going to add a div. And this will be our mega mega menu man Container, And then what we're going to do from here is then just actually, we're not going to throw anything into this. We're actually going to just delete our drop down links because we don't actually need them. Okay, but within this container, we're going to make sure it's set to the same width as the default webflow container. So I'm not going to mess around with container sizing for this video. In my previous course, I've talked a lot about that, so if you're not familiar with that kind of thing, go back and watch that first course. So the default size of the webflow container is 940 pixels. So just for ease, I'm actually going to keep everything the same. And what I am going to do is obviously set the maximum width of this of 940 pixels. And you can see when I did that, it's now kind of going over to the left. What we want to do is center it. And there we are. And the reason I'm doing that is so that this lines up with the navigation menu so that these options are going to be in line. You can see when I hover over this that all of these line up correctly with the nav menu. This one doesn't obviously, it's going off the screen, but it's actually in line from the left, though. Okay, so what we have to do now is throw in some link blocks. So we're going to do first of all, and we're going to organize them by using a grid, which is what's inside of here. So let's do that first of all. So we could turn the div into a grid if we wanted to, that'd be fine. Or you can throw a grid inside. Let's just for the hell of it. Let's just turn this into a grid, and we want to have three columns, and we only want to have one row. So that's all fine. And I have just spotted a drop the link, which you to get rid of. Okay, so that is all fine. We're going to apply some padding. It doesn't really matter if it's padding or margin really. But actually, let's do margin, so it's kind of looking something like that. We'll do 100 pixels, perhaps. We can adjust this later on. I can't remember exactly what I did. Let's do 50 actually, because it's going to take up more space in just a moment. But there you go. You can kind see where we are currently. We have, again, this grid now, and that's going to basically be the same thing we're going to do for this. So first things first, we're going to style one of these and then copy and paste them along with different images. Okay, so we need to have a container now that contains our image and obviously our text as well. Okay, so first of all, we're going to throw in a div. And this is going to be our mega menu link block. And actually, what I need to do is rather than this be a div, it needs to be a link block. Now, you can actually turn a div block into a link block by just right clicking and then click on Convert to link block. So that's what you can do. Obviously, I actually just made a mistake there. So what you wanted to have done is going on to rather than diblock, you want to have clicked the link block, which is, again, the same kind of thing, but allows you to link. You can't actually throw text links inside of this. You can't have multiple links within the same elements, so you have to choose one or another. Okay. So that is all fine. So what we're going to do now is throw in our first image, which is this sort of orange sports car. So let's do that. And we'll go onto an image here, and we'll choose this one. So that's all good. And then we're going to throw in a heading. And we also have a text block as well. Now obviously, for the moment, we have this kind of horrible looking kind of kind of blue link, which obviously we don't want. So what we're going to do is make sure the link block is selected. So whatever you call it, so I call it mega menu link block. You actually have to affect it on that rather than the individual elements themselves because that's what's affecting this link. So if we go down here, you'll be able to see by default, we have some text decoration. So it's currently underlining, which is what we do not want. So get rid of that. And also, it's gone blue. Now, it won't actually turn up blue on the typography option here, but obviously, as soon as you change this to black orever it is, white in our case, it will change. So that's kind of a weird thing that it does sometimes. Okay, so in terms of what we need, this is going to be probably an H three, I think, for this. So let's do that. So rather than an H one, it's going to be H three. And we're going to give this a class of link block title. And this is going to also once again B Oswald. Again, this is the benefit of doing a style guide before you start designing because I'm going to have to do all this on the fly, whereas if I created a style guide, this would all be set up straightaway and the actual process will be much quicker. But again, I'm only not doing that because we're doing one page. And you want to sort of think of a style guide is like when you're painting a room, you have sort of the cutting in part which takes forever and it is really boring. A style guide is kind of the equivalent of that. So the cutting in when you're painting a room takes forever and you feel like you're getting nowhere. But when it comes to actually painting or using the roller on the rest of the room, it goes really quickly. So hopefully that analogy makes sense. Okay. Anyway, so I have enough for painting. So this will be Oswald, and I think we had it was all again, all capitals as well. So we'll do the same thing for that. So that's all fine. And we'll actually enter in the text for this. So this was sports cars for the first one. So let's have that. So then we have a rental buyer from our wide selection of sports cars starting from $199 per day. Okay, so we could just copy the text from this and then we'll paste it into here. Again, I'm not going to do all of this on camera just for speed. So along this sort of process, I'm not going to fill in all the text. I'm going to fill in some of the text off camera, just to sort of speed things up. Otherwise, you're going to be having large parts of the course you watching me put text in. So, okay, so that's kind of the first part done, and that looks pretty much okay. So that's all fine. And then now what we can do is start copying this one over. So obviously, as you can see, they will follow the same kind of thing. So let's do that. So make sure the mega menu link block is selected. So then we'll command C or control C for copy and then paste that along. So again, I'm sort of assuming, you know what shortcuts to use or what keyboard shortcuts to use. So all we can do for this one is just change the image. So this one, I believe, was the was it that one? No, it was this one, wasn't it? Okay, so that's fine. And also, it was the off roader as well. Okay. So let's put that one in as well. Okay. So there we are. Now, you may want to set defined sizes for the images. That's totally up to you. It just so happens that all the aspect ratios of these ones actually match. So, you know, it's actually all fine. But you could for each one, again, set defined sizes. And because we haven't actually given these a class, which we should have done actually. So we'll call these. In fact, I really should have done that before. I started it. But if we call this mega image, We can then set a defined height for this of something like maybe 250 pixels. That's too much in this case, something like 200 maybe, and that's fine. Then you can apply the same class to each of these. So if we do that now, mega image. Same for that one. And same for that one. So now it's never going to get any taller than 200 pixels, which is going to be fine for our use case. So we're only going to have this on desktop view. We're actually going to set up a different menu for mobile. Okay, so that's pretty much it for getting the actual images on. So if we quickly preview this now, you can see that we have to at the moment, we have to click on it to get the menu to open. But again, it's pretty much the same as this one in terms of the looks. Okay, so again, I'm going to fill in the text off camera. So what we need to do now though is to get this animation working. So this will be an interaction. And let's get started. So first things first, come off preview. We're going to want to have our menu opening, but when we hover. Click on menu pen and Hover, which is going by this settings tab here. And so that's going to be fine. But now we need to have it so that it animates to do that. So what you have to do is make sure the dropdown is selected, and we're going to start an animation. So this will be the dropdown opens. You have to make sure that the dropdown is selected to get this option here. So click on this. And we will start an animation and we will call this mega menu open. And then what we want to do is to get our drop down list to animate. This is the thing we're going to animate within this. So, what we're going to do initially is have this set to We're going to have it, so it's obviously not here. So the size of it is going to be far smaller. So if we on size, this is going to be an initial state and it's going to be basically in terms of height, it's going to be zero, as is the width. So that's all fine. Now obviously, we have something weird going on here, and we'll go over this in just a moment. You may remember this from when we did this on the actual menu part of the course. So that's fine for now. And what we want to do then is affect it on the dropdown. So we'll then duplicate it. And this time, we want to have everything set to auto. So this is also going to be we're going to have it easing when it drops down. It's going to last maybe we'll keep it at 0.5 for now. We may change this, but we want to have everything set to auto. So you don't need to give it any kind of specific sizing, have it come out to the actual size of the element itself. So that should be fine. If we preview this now. You can see the drop down is working just as we want it to. However, these items are actually here already, which we're going to need to sort out in just a moment, but that's fine. We're also going to have these mega menu length blocks appear on dropdown as well. So what we need to do initially is make this, so we have maybe the capacity for this for the initial state is going to be zero. And then if we duplicate this, we're going to put this onto the same group as when the drop down comes down, and I'm going to change the capacity to full. And we want this to actually happen maybe just after the drop down comes. So rather than if the duration of this one here is 5 seconds, we need to apply a slight delay. So we're going to have a delay of something like 0.2. And if we preview this now, It kind of fades in as it comes in, if that makes sense. So that looks pretty good to me. Okay, so that's all fine. So let's save that. That's all good. And then what we need to do is affect it when it closes, too. So if we now go on to start an animation, we're going to duplicate the mega menu open. And then we're going to rename it mega menu clothes, of course. Okay, so, rather than open, we'll call it close. And that's all good. And then we can make sure it's selected. The amount of times I have just forgotten to select it and wonder what was going wrong. So always make sure you've selected the right ones each time. It's worth checking. And then we'll configure this, what we'll do is we'll click the one just here and then hold down shift to select both of them, and then you can delete those two and then make sure these are both selected at the same time, and then we'll uncheck the initial state and we'll set them both to ease. The duration is both for 5 seconds. And in terms of a delay, we don't actually need to affect this on hover out because that's not really that important. So that's all fine, so that should now be okay. So if we save this, So again, make sure they are both selected in the correct way. And then we also need to have a closed delay set here. If you don't do this, it won't work. You really have to set a closed delay for this to look correct. And since we have 0.5, we're going to have 500 milliseconds for the closed delay, so it copies that. And now, this should work. And there we are. Okay, so there was one of the thing we need to select, actually. So you can see, as I do that, the images are kind of still rolling off a little bit. So we need to set the drop down list itself back on our CSS panel to overflow hidden. And now, we're not going to have any kind of ghosting of this image. They're going to only be visible once the drop down comes on. So make sure it's set rather than visible, set to overflow hidden, and this is on the drop down list itself. Okay. So now that should all look completely fine. And there we are. I'm actually going to make the delay I'm actually going to change the timing of this ever so slightly. It's a little bit to dreamy at the moment. It needs to be a little bit faster for me, and definitely we're going to delay for this. So let's just go back to where we were. And make sure let's just expand this for a moment. And make sure the drop down is actually selected back to where animations. Yeah, I'm going to just alter this ever so slightly. So the drop down list is fine, but the delay is probably too much actually. So I think maybe we'll try 0.1. Let's try that. Okay. We'll save that and we'll preview. And yeah that's much better, I think. But again, for your version, you can play around with this, however you want to change the timing to suit your personal preference. It's maybe still a bit too slow. Actually, I might just alter that slightly off camera, but maybe 0.5 is too slow. Again, it's totally up to you. I want you to kind of choose your own way of doing this a little bit. But as you can see, we now have pretty much solved this problem, and we now have a mega menu which will expand on Hover. Okay, so there was actually one more thing I almost forgot to do. We actually want this arrow here to animate as we hover over as well. So on this version, when we hover over, you can see it kind of turns and then turns back. So we're going to also add that on. So this is no problem. All we need to do is make sure we go back to our drop down. Go to our animation here. And then we're going to just select this arrow, and then we're going to have it so it rotates. So the initial state can be exactly where it is right now. That's fine. What we want to do, though, is that when we hover over, we're going to actually get this to rotate. So let's do that now. So this won't be an initial state. This will be within this section here when we hover. So let's do that. So we're going to just basically just turn this until you can see it goes right the way. So it needs to be to one 80, so that's completely fine and make sure it's selected within these ones here. They all do the animation at the same time. These are all set to again 0.5. I actually I'm going to take this opportunity actually to just to change the duration of this. I'm going to make everything 0.3. So it's a little bit faster. It feels a little bit slow and being 0.5. That's all fines. That'll be also 0.3, and that will need to be easing. If we preview that, you can see it now turns. Okay, so that's all good. We are going to have to just add this to the clothes as well. Otherwise, it won't actually change. So we'll save that. That's all good. Go to your mega menu clothes, and then again, we need to make sure that the drop down icon is selected. And then we're going to have this rotate, and it will basically be just zeroed out on this part here. So that's all good. And that also needs to be eased and we'll make that 0.3 as well. Okay, so that's good. Again, make sure it's within this collection of three. Save that. Now let's preview, and let's see if that works properly. It does. Okay. And also, the menu looks better being a little bit faster as well. So that's all good. Okay, so that now pretty much is everything for at least the desktop version. Now obviously, if you're going to link this, you'd have to enter the link for the link block to go to a specific page. So I'll just very quickly show you that. And so if we open the menu, Oh, one other thing actually almost forgot to mention, because we want to close the delay of how this drops down. Rather than 500. We're going to make it 300 now just so it matches. So I'll just show you that one more time. And there we go. It's a little bit quicker. Right, that's all fine. And yes, so in terms of the linking these up, so make sure the link block is selected, you can then go into the settings, wheel here, and then you can obviously select it to a page. You can have it to an external page, e mail, call, file download, which would be weird, but you could do that, or you're aware, whatever you want to do. So that's how you link it. Okay, so that pretty much is it for the desktop version. Next up, we're going to create the mobile NAV. 33. CLASS PROJECT CUSTOM MOBILE NAV: Okay, so let's get started creating our mobile navigation. Now, what we could try and do is alter what we already have, but generally what I like to try and do is create a completely separate navigation, just because usually what you're doing to it is slightly different. And it's just easier to manipulate if you create a separate nav altogether. If we try to change it for tablet on what we've already done, it is possible to do. But sometimes when you come back to this version, it kind of glitches, so it's sometimes easier just to start completely afresh, which is what we're going to do for this. Okay. So first things first, we need to basically just copy what we already have, and I'm going to give it a qualifier of mobile nav. We should probably just call this navigation, but it doesn't matter. We'll just give it a qualifier combo class of mobile. So we'll just highlight our main nav. We'll then copy and paste that. And then we'll give it a qualifier of mobile. And then just so we can see what we're doing. We're going to just move this down just for a moment. And you can see, again, it's essentially exactly the same. What we are going to do, though, is for a mobile version. We're actually going to get rid of the drop down for now, but we're going to create our own version of that that will act slightly differently to how it does on here. So that's all fine. So again, you sort of see we have the same sort of thing, but what we're going to do now though, is on desktop view. We're going to actually hide the mobile version of this. In order to do that, all you have to do is go over here to display non, and it will hide it on desktop view. And then on tablet view, you'll need to also make sure that you hide the sort of the standard nab on tablet. So this will be hidden now because we don't want that one to show. But we do want to unhide the mobile version of the nab that we have, which is here. So currently you can see here by this market that says display non. So we just pop it back to there, and there we go, it appeared again. And now what we can do is just back off that margin I put on just to show you what we're doing. And we'll just zero that out. Okay, so now we can get started. So first of all, we have to create the nav where we have it sort of a 100% of the Vewport height, and we're also going to also have to replicate some kind of version of this drop down. But obviously, we're probably not going to have all the images on because for Mobile, that's probably too excessive. What we'll probably just have is just the titles that will drop down. Okay, so let's start getting all the essentials on first of all, and then we'll start worrying about animations as we go. So Roy are also going to change the icon also to a lottie file, a lottie animation. But again, we'll do that maybe towards the end. Okay, so first things first, let's get the menu sorter. So click on the menu button and we'll open the menu, and we'll make sure that the background for this matches the rest, so it's going to be black in this case. So that's all good. The background for the menu button will also need to be black. So let's do that. So that's all fine. Okay, so let's make it so that the nav menu is 100% of the viewport height. So if we just go to a minimum height of 100 VH, there we are. That's all good. Then we're going to try to get these nav links into the center as well. I mean, you could keep it where it is, but I like having them in the center personally. So the way to do that is to add a div block to the NAV menu. And we'll just call this mobile link container. And then what we can do is just drag all these nav links into this container. I'm going to put this to the top for just a moment. So just drag all of these in so they're inside the link container. So we'll just drop all of these in, so they should all snap to the side. Okay, so that's all good. We're then going to make the nav link container a flex box so that we have them vertical as well, and they're all going to be centered as well. Okay, so that's all fine. We perhaps don't want it quite to the top like this, so we could maybe just pop some padding. So it's maybe maybe 100 pixels worth of padding. You only really need the padding on top, but I've done the bottom as well just because why not? Okay. We're pretty much there with that. So let's have a look how this looks so far. Now when we click this, it drops down all of the way and we have the nav links in the center, which is fine. Okay, and we can affect how this drop down looks as well. So if we go onto our menu button here, you can affect the easing of how it opens and what have you. We're going to have it 500 milliseconds, actually, because our animations are also going to be the same. And rather than easing, let's do something a bit more interesting. We're going to have it I think we'll have it Ease out court, and we'll do the same for both. K. That's all good. Let's have another quick look at that. So you'll see now when I do this, the animation will be slightly different. I find that's quite a nice one for navigations, actually. But again, you can choose whatever you want. Okay, so that's sort of the bare bones of it. What we need to do now is get our drop down link on. So let's do that. Let's make sure the nav menu is open, and within our nav menu, make sure the nav menu is selected. And just in case I haven't mentioned this before. You might see me coming down here. Obviously, you have all your different tabs here. Sometimes for speed, it's easier just to select things by clicking here if they're available rather than always using the navigator. If you know it's visible here, and that will be dependent on what you've selected it. I cascades downwards. It's quite useful sometimes to do that. Anyway, so within a nav menu, make sure it's selected. Then we can add a drop down in there, and it's over here at the moment, which is not good. So let's drag this so it's just below home. Then we can style this textbook actually as a nav link. So it gives us the same class. And we'll make sure this icon also is going to be and what it says it's already white, but it's not. So let's just make sure it is. Okay, so there we go. So now we have the drop down in place, but obviously, that's not the most interesting thing it could be. We'd like to try and give some kind of animation to this when it drops down. So we're not going to go quite as crazy as we have for sort of the main version, but we're going to have something at least. And what I think we're going to do is just have this sort of grow in size so that it kind of drops down, and then also it'll grow back as well. So let's do that. But first of all, let's get the actual links in place before much else. Again to just make sure all of this is open. Okay, so let's open this drop down menu, and then we're going to just delete Toby's links, and then let's style this. The first one was sports cars. We're going to we're going to give that dropdown link the class of Naveling actually just for ease. There's no harm in doing that. And the background for it for the drop down list, which is here, if we just select the drop down list, you can do it either from the bottom here or from there. So I'm not going to rename all these, so they don't technically have a class at the moment, but drop down list, it's kind of obvious what that is. So you don't have to necessarily name that something different unless you want to. The background for this is currently like a gray color. We're going to just have it as black. Okay. And also, one very important thing is that we need to make the drop down list. It needs to be overflow hidden. The reason for that is that when we do the drop down, we don't want the text to appear until actually we actually want it to appear. So this is really important. Make sure the drop down list is selected, and this is going to be overflow hidden. So this will be important later. If you don't do that now, something will go weird. So make sure you've done that. Okay. And then what we can do is just copy this navel along, and then it was electric, I think, was the next one. And Then I think it was, what was it? Of road, I think. Okay, so we're actually going to give these particular Navnks combo class as well. So we're going to make them slightly smaller. We don't want the exact same size as the normal links. So this will be nav link drop down. And then we'll make them rather than 25 pixels, we'll make them something like 18. That's fine. And then we'll just give these are the ones the same combo class as well. So they're all the same kind of size. You could have done that before. And also, what we'll do is get these centered to, they follow the the rest of them. Okay. So there we are. That's sort of all the things in place that we need. And we'll also just get this, so it's not gray. I thought I'd already done that, but there we go. Maybe because it wasn't open. Okay, so we're pretty much there with sort of the bare bones of this being created. And now you can see we have all the things that we need. I just kind of I mean, you could just stop here, really. You don't necessarily have to create an animation for these to drop down, but since we're getting a bit more fancy, let's do it. So let's now start doing some animations. So we're going to do the animation for this first of all, and then we'll worry about the animations for the Lotti file for the hamburger icon and for I think on this version, I they appear and come up, so we'll do that same kind of thing as well. Okay, so here we go. Come off this, and then we're going to open a menu and then we're going to select the drop down, and this is going to be the trigger for our animation. So make sure the drop down is selected. Again, if you want to make sure, just go to the navigator, make sure that's what you've got selected, and then we'll go over here, and then we'll start an animation, and it's when the dropdown opens option is what we want. Click on that. And then we will start an animation. And then we'll call this drop down open. And then we're going to select the drop down list, and this is what we're going to animate. So on the plus icon, and we're going to have the size of it grow basically. So it's going to start with its initial state selected, and then you're going to have the height as zero. So it's just basically not there. And then we're going to just duplicate this. Then we're going to have this height set to auto. This is the bottom right of the screen here. Make sure it's set to to. You don't need to give it any kind of pixel height. Just set it to auto and then it'll automatically do what you want it to do. Then for the easing, we'll just set it to ease, I think. That should all be fine. I think that is all we need actually. We'll save this And then on the menu close, we're going to again, duplicate this and just change a few things. We'll start an animation as usual. Rather than drop down open, we're going to rename it something. But obviously, before you don't rename this one. Duplicate it first, and then it gives you this option of drop down open two, but we're going to rename this and it's going to be drop down close. I have a new keyboard, by the way. If you're wondering why I just can't ever type. Okay, so there we go. That's all fine, and then we're going to configure this. We're going to just get rid of this initial element here. Get rid of that. Uncheck this one, so it's not the initial state anymore, and then just set this to ease. We're going to keep the duration or what have you all the same. So that should now be fine. Now if we preview this, we should be good. So we have the drop down, then we click on this, it appears, and then goes back. And actually, it didn't do it on the way back, so I must have not selected it properly. Oh, I know, sorry. Yeah, closed delay. This is important. I almost forgot. So if you don't put a closed delay on, it won't fully work. So, you need to have the same kind of delay as we have for the animation. So something like 500 milliseconds, I think is what we had, and now it will work. Okay, so let's duck that again. It will drop down, and then it will drop back. And now we are. We have our dropdown animation sorted for the Mb menu. So a few things left to do. We're going to get the hamburger icon to be a lottie file. This is a bit boring. Again, it's fine, but again, what we've done now actually would be perfectly fine. You don't have to necessarily do anything else than this, but again, I want to just change this. I'm actually going to change it slightly compared to the original version I had. On this version, I have a slightly different lottie animation. Earlier in the course, also, I showed you how to scale up lotti animations if there's too much space around them. Now, sometimes, if you're on Safari, Safari has a weird glitch sometimes when you scale up an SVG icon. So if you want to check this yourself, try it on different browsers, particularly safari, because sometimes Safari has a weird thing where if you use scaling for an SVG. So the best thing to do really is to choose a lot of animation where the creator has designed it where there isn't any sort of massive gap around it, so you can just basically use the size that it actually is, if that makes sense. Anyway, let's give that a go now. So let's come off this. We've done all the animations we need for the drop down. Now, we need to select the main nav menu or at least a mobile version, and this is going to be the start or the trigger for our next set of animations. So let's do that. And then this time, we're going to have this option of Navbar opens. So that's important to select that. And then we're going to start an animation as usual. And again, this is going to be mobile nav menu opens. Something like that, we'll call it. So we'll call it mobile call it mobile open. That's obvious enough. Okay, so here we go. What thing we're going to do first is effect. Yeah, let's just make sure the menus is open, first of all. Okay, so I think the first thing we're going to do is animate our nav icons or at least the mobile Navaln container, I think is the way we're going to do it. So we'll make sure we have a mobile Navaln container selected. And we're going to kind of get them to move upwards and come from a capacity of zero to 100%. So again, go into your actions, and we're going to initially do it with move, and it's going to be moving on the y axis. So we'll do it something like we'll do 50 pixels, and then it's going to move from 50 pixels here back to where it was. So that's going to also be the initial state. And then we'll just basically just duplicate this. And then this time, we're going to have this zeroed out, so it moves from here to there, and it's going to do that by easing in. I'm going to keep all the durations the same just for ease. If you see that now, there we go. That's the preview. And what I also want to do is have this not be fully visible straight away. We're going to again, make sure this is still selected, and we're going to give it an capacity as well, and it's going to be the initial state, and it's going to be 0%. Then we will duplicate this along and put this into the same group as this one here where we move it. This time the capacity is going to be obviously going to 100%, and it's going to be easing it in. And we're actually going to give this one a very slight delay, I think, actually. Otherwise, by the time the Navbar has dropped down, we're not necessarily going to actually see this happen. So we're going to give it a delay of something like Something like 0.1. We'll actually do the same for the movement as well. So a delay of 0.1, if we preview that. That's probably about enough. You're going adjust that to suit whatever you think or whatever you want. Okay. That part is now done. All we have to do now is get the lottie animation in place. Let's just try and do this it's open. We'll get rid of the icon because we don't actually need this particular one. Actually, sorry. We'll save this initially, and then we'll get rid of this icon here, and then within our menu button, we're going to throw in our lottie file. And so, again, that is selected here. And we replace this one and we'll choose this one that I have here. Now, obviously, that's gigantic and we don't want that. So we're going to make this a lot smaller, so it's going to be something something like 40 pixels is probably going to be about right, and the height will be auto's all fine. Okay, so I think we're good. And now we need to obviously alter this on the Navbar open animation. So let's do that now. So what we're going to do is make sure that the lottie animation is selected and then go to your actions panel here, and you have a special lottie option here, click on this, and this is where we can sort of animate the keyframes, so to speak. The initial state is going to be selected, and it's going to start from 0%. With this animation, whoever animated it, they don't have any sort of excess timing before it, so we can actually keep it at 0%. And then if we duplicate this along, drag it into this part here. We don't actually need any kind of delay on the lottie animation. So that can actually be just zeroed off, and that's all fine. So let's look at that. Oh, sorry, we need to set it needs to go to it actually stops at this point. So you put it to 100%. And then this way when we preview it, you should see it moves. There we go. So also, we need to set it to as you can still use these different kinds of easing for it. And the duration is maybe That's actually okay. Maybe a little faster perhaps in terms of duration. Maybe 0.3. Let's try that. Yeah, I like that better. Okay. So we're pretty good. I think we're pretty much there with the opening part of this animation, so we can now just save that. And now for the menu close, we're going to obviously basically duplicate a lot of this again. So we're going to start an animation. And we're going to duplicate the menu open. And then we're going to rename this menu close. A mobile clothes, I should say. Make sure it's selected, and then we're going to configure this, and we're going to just select all of these, and then we're going to get rid of these bottom three. Then we're going to select all of these together. We're going to uncheck the initial states. We don't want that set to initial state, and then we can alter this suit. So not all of these are going to be the same actually, so we'll have to change this slightly. So for the lottie file, we don't want it to be 0.5, we want it to be 0.3. And that is going to be easing again. It won't let's preview this, actually, but everything else should be fine, they need to be set to ease. So I should have done those together, actually, but that's all good. So, I think we should be pretty much there with this. So if we save this and now we preview, hopefully, everything works. And there we are. We have just created a custom male navigation with a dropdown, which also has its own animation. Okay, so I hope all of that made sense. I tried to go as slow as I could. I know that's a bit more involved compared to some of the other stuff that we've done. But hopefully, you can see it is worth it. And it's this kind of thing that, you know, will make your website stand out compared to others. Some people wouldn't go to the trouble of doing stuff like this. So it's these little things that means you can charge more for your designs. And obviously, since we've done this on tablet view, it will cascade downwards for mobile as well. So that's really important. Don't start it on one of these because then you'd have to recreate it on a higher screen size. So yeah, make sure you start all this on. I should have mentioned that at the start already, but hopefully you remember from my first course that if you make any changes from here, they cascade this way. So that's important to know. Okay, hopefully that will make sense. And then next up, we can start looking at our hero section, which has, in my case, a background video. 34. CLASS PROJECT HERO SECTION: Okay, so just before we get started creating our hero section with the background image, we want to sort of decide what our container sort of width is going to be. So so far, we haven't actually adjusted this. So the default container within web flowers I mentioned before in the previous course is 940 pixels is their default size. And if you use a container from here, that's what it will be, you can't change that, but there are other limitations to using the container. Really, you should always use your own container and just use a div block and call it container. But we're going to actually just to copy our design from the original design. I use a container width of 1,100, so we're going to do the same for this too. On the container on the nerve container, give this a maximum width of 1,100 and that's going to extend it out slightly. And on the main nav itself, we also want to give some padding. So we're going to give 3%. So we'll do 3%. And then we're going to just make sure this is the same on both sides. Okay, so that's going to be something that's echoed throughout the whole website. So we're going to have 3% probably on the sections. Again, you can put them on the containers, but it doesn't really matter as long as you keep it consistent throughout. Okay, so that's all fine. So next up, we're going to throw on our background image. So you don't have to put the background image within a section. It kind of acts as a section itself. So what we'll do, make sure the body is selected, and then we'll add our background video. And we're going to set the background video to a minimum height of 100 VH Okay, so here we are. And first things first, let's go blow the video. So I've got it sethed here. Now, obviously, this is going to take a few moments to upload. So by the power of editing, I'm going to skip through this bit until it's fully loaded. Okay, so that's now completely loaded on. It is worth mentioning. You can actually keep designing, whilst it's loading, so you don't have to stop like I just did. Okay, so that's all fine. And what we're going to do now is start throwing on our text. So we need to get a container first of all, and then we'll set the background video to flex and we'll get it all centered. Okay, so first things first, within our background video, we're going to throw on a dev block, and this is going to be our main container, so it's going to be container 1,100. Now, obviously, I've called it that just so you know sort of what pixel value it is. We're going to have this. Obviously we're going to have to set that as well, so that the maximum width is going to be 1,100. And then we're going to have this centered as well. Okay. And you can see at the moment, it's kind of up the top here, so what we want to do is get it into the center of this. So the way to do that, click on the background video. Again, I've not given that a class because it automatically we'll call itself background video, which is fine. We'll set it to flex, and we want to get it into the center and we'll align it into the middle as well. Okay, so this container, we'll just stretch this out, and then we can start adding in our content. So from here, we don't necessarily need to add a div to how's the text just because we can sort of manipulate anything we need to by adding that to a class, that's all fine. So just by the nature of the way it will be, we don't need to space things with divs ready. Okay, so let's pop in here. We're going to have our heading. And this is going to be an HO because it's obviously the main title of the page, and we'll just call this hero H one. And let's enter in the text, so we'll copy and paste this over. That's all fine. The size of this was 65, it's quite large. And it's also going to be Oswald as well, wherever that front has gone. There we are. It's also going to be all caps, and we're going to have a height of 1.2 m Okay. So that's all fine. Then next up, we need to get on our text block here, which is a subtitle. So let's do that as well. So within our container here, we're going to throw in. It won't be a heading. It'll be a text block, and we'll just call this we'll just call it hero subtitle. And what size was this? We'll just copy the text wells we're at it. So that's all good. And that was 22 pixels. That's fine. Let's paste this in. We change the size. So I think what I also did, I gave it a maximum width. So, I did put this inside a div, actually, and this is the reason why. So I've restricted the maximum width just so we can get it onto certain lines. Now, there is another way we can do this. You don't necessarily have to use a dv to achieve this. You can just give a maximum width to the elements themselves, or you can give them actually character width as well. I just so I can keep it exactly the same. I don't want to show you something different. I am going to put these inside a diblock, after all, having said all that. So back to your container, and we're going to open up a navigator. And within that container, we're going to throw in a div. And this is going to be a hero text. Container. And then we're going to just basically throw all these items inside here. So I just drink those in, that's going to be fine. And then here a text container, we're going to give it a maximum width. I think I did a maximum width of 700 pixels. So let's do that. 700 pixels, and then we have something pretty similar to what we have here. Okay, so that's all fine. And then the height for this also is going to be 1.2. Okay, so that's pretty good. Okay, so it also looks as though I gave this a maximum width, there are other ways to actually achieve this by using a vertical width or you can use CH as well, which you've got a few different options. If you look at these here. There's a few of these. We've not gone into any massive detail. The next course, I'm going to release. We're going to go into there's a lot more in a lot more detail, which is again slightly more advanced. But just for now, I'm going to keep things simple and we'll just give it a maximum width for the subtitle itself. It's going to be, I think it was 500 pixels, so there we go. Fine. So there are lots of other ways to do it that potentially may be better, but just to keep things simple for now, I'm going to just keeps the aspects we've already mentioned. Okay, so let's preview this at the moment. So we have our background image and we have our text we need to put our button on as well. Okay, so as you can see that this is pretty clear, but it's a little bit too difficult to read the text. So we need to give the background video a slight gradient. So what we'll do is we'll just literally just click on color overlay and we'll do something around this point here, so something around 60. And let's preview that again. And there we go. That's a lot better. We can now read it. Okay, so next up, we need to get our button sorted. So again, we have got a transition effect on here as well, and we do have a white border, and the button turns white when you hover over it. Okay, so let's do this now. So again, make sure this is within the hero text container. We'll throw on a default button and then we'll start styling it, and we'll just refer to this one here. Throughout the course, you can refer to my project as you design yours if you want to. That's probably the easiest way of doing it. Like I mentioned before, there's no design document for this. I created this website or this landing page just within Webflow. So you can take all the measurements from my design that I'll make available for you, which I'll put in the description. Okay, so let's look at what we have going on here. So we have a border. That's one pixel, which is white. Obviously, the background initially is also dark. Spacing wise, quite random actually. So we've got 18 on the top and bottom and 54 on the sides. But okay, let's just do what I did. And so it was padding of 18 And then what was it? I've forgotten already 54. She's quite strange, but whatever. So let's do the same thing. Let's just round it up slight to 55. Why not? Okay, there we are. And this will be automatically is called button because we've now styled it, so we haven't created a class for it as such, but, you know, that's going to be completely fine. Okay, so let's start styling the button vs slightly. We're going to need to push this away, I think, as well. So we'll give this a subclass or a combo class of hero. And that will then let us just give a little bit of margin to this, too. So let's do something like 20 pixels. Okay. And then when we use this pot again, we can use it without that subclass. Okay, so background does not want to be blue. I want it to be dark. We also want to give it a border, which will be one pixel and it will be white. And then the text, I think, said, read more. No sorry, book now. Let's do that as well. So book now. And what we'll then do is just change the font as well. So this will need to be sword, sizing wise. What did I do? It was 18 pixels. So let's change that as well. So that's now 18, all caps. And yeah, that's all good. So there we are. So we're pretty much there, but we now need to style this button with some transitions. So again, as we hover over it, you can see that it turns white and kind of inverts the color. And this actually happens throughout the website too. So when we have it here, all of these are actually the same button, but they just look slightly different on each one. Okay, so let's give this a go. So we need when we hover over it, we just need the background to essentially turn white, and we need the text to turn dark. Okay, so what we'll do is make sure the button is selected, go over to your states. And then on hover, what we want to do is we want the background to be white. Let's do that. Then we also want the text to be dark. So again, make sure I come off hover I have. So, make sure that you go to typography now, and even though it says it's dark, it's not, so just make sure it's black. And there we go. That's pretty much all fine. And then once we've done that, come off hover. And then go to your transitions here. And what we can do is, I think we'll make it 300 milliseconds. We'll keep it as ease. And, we just want to have the background color and the font change. So since we have two elements, what we can do is just go to all properties that will save us doing individual ones for the text in the background color. So now if we prove that, you can actually see already, it's already working, and there we are. Okay, so we're very nearly there. There's one more thing to do, which is to get this lottie animation on here, which is the area of pointing down to tell us to scroll. So here we go. Make sure again, this will still be within the text container itself. So let's just add in a lottie animation. And we'll replace that and it will be this one here. So what we're going to do. We don't actually need to apply any sort of particular animation to this. What we can simply do is click on Loop, and it's going to just keep doing that over and over again. So if we now get rid of that and have a look at it, Oh, actually, it's massive. So how big did we make it on this? Let's have a look. So we had it as 90 pixels. That's fine. So let's do the same for this. So we'll do a width of 90 pixels. That's going to look okay. And I think we've got some margin on there, too. We don't have margin, actually. That's interesting. So why is that doing that? Oh, okay, so I put some margin on the bottom of the button itself. Okay. We won't actually do it that way. We'll actually apply it to the the lottie file. So we'll just do since it was 50, let's copy the same. Okay, let's see how this looks. And there we are. We have what we need. So that's pretty much exactly the same. I think I changed the way I did that slightly. I think I kind of put it on there on the button in terms of margin. Again, it doesn't particularly matter. I guess what it does do is push the text slightly further up, but that's completely up to you. I you want to do that. Okay, so we're pretty much there. One thing we do need to do, though, is to apply some padding to the background video. The reason being, again, we're not doing responsive just yet, but if I share what it looks like, it's right to the edge. So what we need to do is apply the same kind of padding we did to the Navbar, and also the padding is going to also be the same throughout the rest of the section on the website. So we're going to give this padding of 3%. And that's going to be the same for both sides. Okay, and that will give us exactly what we need. Okay. So that wraps it up for the hero section. Again, play around with this yourself, and I think I just added some padding to get it a bit more in the middle. Again, for your version, again, try something different, try maybe having a slider or try having a video within a slider, whatever you want. Obviously, you want them welcome to just copy what I'm doing as well. But I'll be interested to see if you come up with something different. Okay, so that's it for this section, and then next up, we've got our little intsection here where we have some transitions when we hover over the icons. 35. CLASS PROJECT INTRO SECTION: Yeah. All right, so next up we have our sort of intro section here. And this won't take too long. So we have obviously just a plain section here, which is got a white background. We then have the sort of icon section here, which is going to be unsurprisingly a grid. Okay, so let's get started. So what we're going to do, first of all, is pop on a section. So open a navigator and we'll just claps everything for now. If I haven't mentioned how to claps items, it's this one here. So you can expand all of the things you have, or you can just claps all of them by one click. And you can also tag the navigator to the side as well. I can't remember if I've actually mentioned whether you can do this or not, but you can if you really want to. Sometimes if you've got something complex, it's quite useful to have the navigator always open. So that's one way of doing it. And if you want to see everything you have, that's another way to Okay, anyway, so on the body itself, we're going to throw on a section, I'm going to give some sort of default style into this section because we're actually going to reuse the section at least one or two more times throughout the whole project. So within the section, we're just going to literally call it section. And we're going to give it some padding above and below of 100 pixels. Because that's going to be so it's uniform throughout the whole website. There's only one instance on the website where that doesn't actually happen, and that's on this section here because we have this image of taking up the full height and full width of this particular section here. So we've done this slightly differently. But generally, we have 100 pixels of padding. What we probably should do also is give 100 pixels just on this particular dip block here. But we'll come to that in a little while Okay. So also for this section, we're going to apply some padding. So just like the background video, we need to have 3% on either side. So make sure it's a percentage, and then just make sure it's 3% on both sides. So let's get started. So first of all, we need to have a div which will house our title elements. So let's do that first of all. So within our section, we're going to throw in a div block, and this will be, sorry. No, I've forgotten something really important. We need our container first of all. So the diblock we've just thrown on is fine. And all we'll do is give it the class of container 100, sorry 1,100 and that's going to be okay. And then what we can do is start throwing in what we need. So we have a sort of this probably would be an H five. I know it says H four in here, but that would be an H five. This will be an H two, since it's the next title down the page, and then we have sort of paragraph section as well. We haven't really styled any paragraphs or anything just yet. Again, I'll keep mentioning this, but really what you want to do is have a style guide before you start doing any kind of development work. But again, I'm just for speed not doing that now. Again, the next course I do, we're going to go all into style guide. So I'm just saving it for that course, which will be coming very very soon if it's not out or already the time you're watching this. Okay, so now that we have our container on. We're going to start popping our heading elements in here. So we need to throw on a div first of all. This is going to be a text container for all the elements. And you don't necessarily have to do this because we're actually going to have the section itself sort of centered. But we are going to put it in a div for good practice. So let's do that now. It's going to have a maximum width of 900 pixels. We're going to reuse this a few times. So they're going to center this, and then we can start popping in our text elements. So we're actually going to by default, have everything in this div block here is going to be centered as well which just save a little bit of time. Okay, so we need two headings, we'll pop two headings in. The first one is going to be an H five, and that's going to be for these sort of little subheadings underneath each section. The first one is going to say welcome. So that's all fine. But we're going to style this correctly. So it is going to stay as aerial, but we're going to have it as normal. We're going to make sure it's all caps, and we're going to give it a slightly different color. So we're going to have this dark gray color, which I've already created a swatch for. We're going to also just extend slightly the letter spacing, I think. So I'll have maybe two pixels worth for that, and that looks okay. The default sizing for that is 14 pixels which actually, I think we're going to just keep as is. Okay, so make sure we've given this a class as well. So rather than just heading. We're going to renounce this will be We call it heading H five for now. That's no problem. We're going to just reuse that a few times. I no. Okay, so in terms of what we'll call this, again, this can be anything you want, but we will creatively call it H five just for now. Okay. And then this one is going to be rather than H one is going to be H two. This is going to be the same for all H two headings as well that we use. We're only going to use it once on this actual page, but whatever, we'll just do this anyway. This is also going to this time be Oswald. It's going to stay as bold, and we're going to have it all caps as usual. In terms of sizing, I think it was 38 that we had. That's fine. Then just for speed and I want to copy and paste this text in. So let's do that. There we go. Okay, so now whenever we do any kind of H two, it's going to remember that. We will just call it. We all just call it H two as well. Okay, so that's all fine. And then we need to have a paragraph in here as well. So then we can style the default paragraph. So let's do that now. This is going to be called paragraph. And then we're going to have this. What size did we use? We use 17 pixels. Okay. That's fine. 17 pixels, it is. And I don't think we did anything particularly clever with the color for this. It was just yeah it was just black. Okay. That's all fine. And that's sort of the first part done. And then what we need to do next is within our container, I should give that a name. So rather than just being called Dblock. We're going to rename that. I'm going to have it what should we call this. We'll call this centered text container. We may use that again at some point, so it would be useful to have that. Okay, so that's all good. And then within our main container now, the container 1,100, we're going to throw in a grid. Okay, so let's do that next. So we'll throw in a grid, and we're going to have four columns along, but only one row, so we just get rid of one of the rows. Okay. And then next, what we're going to do is style one of these and then just copy and paste it along for each part. It's much better if you do it that way. Okay. So we also have it looks like a little bit of padding or margin, sorry for the grid, so it's 50 pixels. So let's do the same for that. So this will be rename that and we'll call it. Sorry, icon grid. And that's going to have 50 pixels with. I keep doing that. You should just go on here and just type it in much faster. Okay, so then we need to throw in a diblock, and this will be our icon container, did I set any particular width for this? Let's have a look. It doesn't look as though I did actually. So we have some padding on the inside there, so let's make sure we do that. So it's 20 pixels all the way around, so just hold down shift, and then we can get 20 pixels on the inside. That's going to us when we put things inside, it's not going to be right to the edge, and it means when we hover over, we get a bit of a gap towards the side. And what we'll also do is make sure this is all centered as well, so everything in there is going to be centered now. And then we can just start adding in our icons. So let's do that now. We're going to pop in our first one, which is this icon here, which is a sports car. So let's do that. So I think I put these in as SVGs, so I'll pop on an image initially. And I think it was this one here. That's all good. In terms of sizing, you can give them a defined size, so you could make it a width of something like 90. That looks about right to me. I don't know if exactly what I did before, but that looks pretty close, maybe 80 actually. That's fine. Then from there, we just need to get an H three, and then we have obviously a little text box below it as well. So let's do that now. Let's throw in our heading, which will be an H three, and we will just call this H three as well. And then we will the reason we're doing this, so we can reuse it again each time. And then we can just make sure this is Oswald as well, and sizing. What do we do? I think we kept it the same. Where are we? So 20 pixels? I think it's already that. Oh, it's 24. Okay, fine. So 20 pixels. And we'll also make sure it's all caps as well and color wise that can stay as it is. So this will be sports car. Y. And then we also need to throw in our text block as well. And this will be icon text. We'll call that. Oops misspelled it again. This keyboard. There we go. Okay. And I think we actually kept that as it was. That's 15 picks. I'm going to change this slightly actually. I'm going to make it 16. Okay. And text we we'll just copy and paste all of this in. Okay, so there we are. We have a slight thing here where we have some padding. So all headings by default have some margin on the top and bottom, as you can see here, and this is sort of pushing this icon quite far away. And there's actually a lot of space around the icon itself, too, which is kind of an issue. So what we'll do is we'll just zero out this particular part here just so it's a bit closer. Okay, so now the element itself is pretty much sorted and is pretty much the same. We now need to get the transition effect on when we hover over it. So make sure the icon container is selected. And then what we're going to do is go to our states. So on hover, we want there to be sort of a box shadow around the outside. So let's do that now. And we are going to have it sort of to one 80. That was lucky. We're going to have it just slightly off black color, I think, and we'll just call this icon so we know what we're using it for. That's all fine, and we might just increase the blur a little bit, too, I think. So again, you can decide for yourself, how much of this you want, so I think that's going to be fine. We'll keep it actually at one. That's okay. So that's all done. So now you need to come off Hover to treat the transition, go back to the non state. And then on transitions, we'll make sure it's 300 milliseconds. Again, this is just personal preference. You can do whatever you want. We'll keep it as easy as well. And in terms of the type, rather than trying to search for the thing we've just done, the quickest way really is to go right to the bottom and click all properties, and there's no harm in doing that. Okay, so now if we view this, we should see as we hover over, we get this kind of box shadowy effect. So that looks pretty good to me. That's maybe a bit too much in terms of the blur actually, but again, I might alter that off screen, but you get the idea. So now what we can do is simply copy and paste that along. And all we'll have to do for each one here is just swap out the image. So the next one, so it was the darker sports car and then the off roader. So let's do that. And where is it. There it is. Same for this one here. So this was the off roader. And then for this final one, it was the electric car. Okay, there we are. That's pretty much our introsection done, and we've affected it with a hover effect. And rather than using the interactions panel, we've actually just used transitions for this. Okay. So that pretty much is it for this particular section. And then no next up, we have this part here, which is a bit more involved, so I'll go through this bit as slowly as I can. 36. CLASS PROJECT HOVER CARDS: Okay, so just before we get onto our next section, I want to just correct one thing, actually. So these I think I had as H three. We actually don't want that. We're actually going to make this H four, and we'll actually just rename the class of H four. P because we're going to be using H three, four hour or titles such as this. So we're going to just change that every slightly. Obviously, we need to make sure they all have the same Because we have the same class. They've already automatically updated for everything. Okay, so we're all good. So next up, then we have this section here where we have a list of cars, which obviously we have sort of when you hover over, this appears. And we also have a lottie file here in the background, very, very subtlely. So I just show you this. So you can sort of see it's a speedometer, and it's very subtle in the background, kind of, you know, it's kind of as if an engines reving type thing, is the idea that I had with this. And as we scale this down, because it's positioned absolutely will never ever move, it will always stay towards the top and in the center. It just works quite nicely. So I have to confess that was actually a happy mistake. I didn't mean to do that. It just worked out really well. Okay. We're all fine to get lucky sometimes. So that's what we're now going to do. So first things first, let's pop on a section. We'll just clapse all of these. And now we're going to also give it the same class that we did for this one. But then going to have a combo class. Obviously, the main section by default is actually white, and we actually don't want that. So let's pop on a section within the body. And it'll automatically appear below here. I'm going to give it the class of section because that's what we want. So you'll see now we have the padding of 100 pixel, so it's just the same as this one, and we also have the percentage of either side as well, and that's all fine. Okay, so what shall we call this? We'll call this card section. Just so we know what that means. Okay, now we can start messing with things. So rather than being white, we need the background color to be dark, so let's have it as black. Okay. So that's all good. And everything else, though, can actually stay as it is, we still want all the same padding and what have you. Okay, so this time, we actually don't necessarily need a container because this text element here or the deer in which this text is sitting within is actually centered. So there's no need to try and align it to our logo as such. And since the part below here, this is actually not within our default container. It's kind of full width. We actually don't necessarily need a container. So what we'll do straightaway is used the same thing we did for this in terms of the text container. If you look at what this was called on our virgin up here. So this was a centered text container, and we're going to just basically reuse that class and basically reuse pretty much everything that's in here actually apart from the heading. So let's do that, first of all. On here, we're going to throw on a div and that div is going to be our centered text container. And there we are. So that's all good. And then we do need to get all this in here. Apart from, obviously, this is all dark, so we need to have a combo class version of this. So what we simply could have done actually is just copy and pasted it into the section. And I'll just show you maybe a way of doing that, so it speeds things up. So we'll actually just delete this for now. And we'll copy our centered text container. Control C or command C if you're on a MAC. Then make sure make sure the section is selected, that's hard to say, and then paste it in. You can see we have what we want, but we now need to just give you a combo class. H five, but this time it will be light or white. It doesn't really matter. That can stay as dark gray. The H two, however, we are going to change. This is actually going to be an H three. So let's do that now. And actually since we haven't styled an H three so far, we're going to do that. So we're going to remove that class, and it's going to be an H three, and we'll just give it the class of H three. And this time, we're going to have it as Oswald. It's going to be Well, we'll keep it as dark for now because we want to save a white combo class instead. But let's at least make sure it's capitalized and we'll need to make this bigger as well. Okay, so the sizing for this, I think we have it slightly smaller. Let's have a look. Where are we? The H three was 38 and the H two was 40. So that's probably a little bit too large actually the H three, we're going to have I think we'll have something like 35. Let's do that. 35. We are going to leave it as dark, just in case we ever used it again in a dark version. Now obviously, we're not probably going to do that. Actually, we might be. Yeah, we are, later on, we actually have an H three again, which will be dark. So we're going to leave it by default as being dark, but this time, we're going to give it a light version. And this time, yeah, we can turn it. We'll turn it white. Then paragraph, obviously, will be paragraph, but then we'll have a light combo class for that as well, and then we can change the text to white again. Okay, so there we are. Usually, on jet black backgrounds, you want to not necessarily have it as 100% white. So a slightly off white like I've done here is better. Otherwise, it kind of hurts your eyes sometimes if you do that. Okay, so that's all fine. The first part is done already, and then we need to get a grid where we start styling our hover cards. Again, just like before, we're going to style one of them, and then we're going to just replace the images as we go. Okay, so here we go. So now within our section, we're going to throw on a grid, and it is we want it to be full width like this. So we want to have three rows, and we want to have two rows, and we have three columns. So that's all fine. And then we're going to make sure we have some padding, so I think it was 50 pixels worth of padding. So let's do that. What's it 50? It was. Okay. Great. So first things first, we're going to throw in a div, but not before we rename this. So it's alto named as grid. We're going to just rename the class so we know better what it would be. Again, you want to always name things that make sense. Other than just grid. There's multiple grids on this page. So we're going to call this Hard grid. That's fine. And then what we'll do is throw in a div initially. Okay. So then this we'll call Card container. Right. So from here, we can do this a few different ways. So the way I've done this, I've had an initial div and then I've got the image is actually sitting within the div itself. So I just show you this. So the image here is there and we have it set to 100% of the width, it's also 100% of the height of the dear block itself. So that's the way we're going to do this. So let's do that now. So we're going to throw in the first image, which is this red Ferrari. And so we'll pop in an image. You could do this as like a background image too, if you wanted to. Sometimes that's actually better when you're dealing with clients. If you make it a background image, the way in which you can do it, it helps with not allowing. Okay, so let's pop in an image, and we'll choose this red Ferrari that we have here. So that's all fine. And the image is going to be 100% of the container, and it's also going to be 100% of the height of the container as well. There we go. So in terms of the container sizing, I actually set a predefined height for the div buck itself. That's 300 pixels. That's just a defined height, no matter what, it's always going to be 300 pixels, and this is quite important. To be fair, I should have done this first actually before doing this. The card container is going to have a predefined height of 300 pixels, and this way, the image is always going to take up that kind of space. In terms of the fill, we wanted to have, you can see the image compressed slightly when I did that. Rather than it to fill, we're going to have it to cover, and that way, it's not going to compress the image. Okay, so that's all fine. Next up, you want to get on our different sections here. So we actually have some absolute positioning with this. We actually have our first div is set to absolute at the top, and this other one, which is the book online is set to absolute and at the bottom. There's actually a few ways you could go about doing this. You could use flex actually to get it sort of distributed evenly. It doesn't really matter which version that you do. And, okay, so that's all fine. So let's now pop on our first div, and this is going to be the div that sits at the top here, and it's going to be obviously our pricing container. So that's what we'll probably call it. So this div block is going to be a pricing container. And we need to also make sure the car container is set to relative. So rather than static, it's going to be set to relative, and then the container itself, the pricing container is going to be set to position absolute. And the reason for that, we want it to stick to the top of this container no matter what. Let's do absolute, and then we'll choose this option here and you can see it sheets to the top. Okay. Right. Also, just to demonstrate this, it also does actually have a little bit of padding on the outside as well just so it doesn't go right to the edge. So we'll do that. The spacing doesn't necessarily need any on top because the elements themselves come with some predefined padding. Anyway, let's do that though. Let's pop on a little bit of padding either side. So I think it was 20 pixels, did I do? Sorry, that's the wrong part, not this part on the actual spacing part here itself. Let's do that. That's 20 pixels. Then we want to actually just pop in some heading initially. So we'll pop in our heading. This heading, we actually want this to be an H four, and we need to obviously give it that class. If we just type in H four, we've actually pre made this already, and we need to give it the qualifier of light, which we haven't actually done yet. So we type in light, we can now style this, rather than being dark, we'll have it set to our off white color here. That's all fine. Then we'll just copy and paste this text in just for speed. Okay, that's all good. And then I think we'll use I think it was just a text block. It was. That's fine. Okay, I'm going to just make sure that the padding is correct. Actually, we haven't got enough module on top, so let's just pop ten pixels worth of padding there and that I'll make sure it's centered. I'm actually also going to put a little bit of padding within the pricing container, actually, just so we've got a bit. Only a tiny fraction, something like maybe even five pixels would do. Let's try that. Yeah, that looks pretty good to me. Okay, actually, this heading, I'm actually not going to make it a standard H four. I'm actually going to remove the class actually. I'm going to give it a new one completely. I'm going to remove this class as well. So we'll just remove that class and we'll call this of a card heading. The reason being, I don't want to get tons and tons of combo classes. What we're going to do is actually set this to inline block. So I don't want to have to do that for all of the H four. So what we'll do very quickly is just set this up again, so we're going to have it as Oswald. It's going to be in this case, white, we're going to keep it the same height that it currently. So that spacing is totally fine. And we're going to have it capitalized just like the other ones are. But now we don't have to deal with tons of combo classes. So we actually want to have this set to inline block. The reason being is that we're going to actually have our pricing sat next to it. So that's the best way we're going to do that. So now that we have that there, we're going to set this to inline block. So this way, it's not taking up the entire expanse of this div. So just do that. And you can see it's just kind of surrounding there. And then what we can do is throw on a text block. And this is also going to be set to inline block, and we'll give this a name of call it card price. Okay. And we're going to set this to again, a similar sort of thing as this, so it's going to be 18, then the dark gray color. So let's do that now. So this is going to be Oswald again. It's going to be set to a normal weight. It's going to be set to 18, and we're going to have it capitalized as well. Okay. So that's all fine. And then we're going to also have it as the sort of the dark gray text as well. So I think it was this one we used. That's fine. Okay, so let's pop in the initial price, $500 per day. Okay, so that's all fine. And now you can see they are both side by side. However, because the card price is only ever going to appear on our hover card here. We can just apply some margin to this, so it just makes it slightly further away. So let's do 50 pixels, and that looks about right. It's actually slightly different, isn't it to this one? Is that 18? It is, but it just looks different. Whatever. It's all good. Okay, so that's actually fine. So that first part is now completely done. However, on this version, obviously, we have an effect. So it kind of hovers in here and it says book online, and the image is also kind of hovering. And we also have a border. So just before we start doing the animation, let's get this border on as well. So the border, and I think is, so it's two pixels and it's a white border. Okay, that's fine. Okay, so let's do that. So on the card container, we're going to apply a border to this. It's going to be all the way around, and it's going to be two pixels, and we're going to have it as a white color or just off white. And that's all fine. So there we are. We are now pretty much where we should be, and now we're ready to start styling it with our animation. So let's get started with that. So what we first of all need to do is actually throw on the div block here even though obviously we're going to animate it afterwards. So we need to get at least get it in place. So what we're going to do is now throw on a div within the card container. So that's important to make sure the card container is selected. And then we'll throw on this div block. It's going to act very similar to this one. And this is going to be our card book now. And it's going to be set to position absolute, and it's going to be set to the bottom. Now, even though there's no spacing there, it is actually here. Just so it's the same as this one. We're going to set it to five pixels. Again, if it's difficult to actually get, just go on your navigator to find it. And so we're going to have just five pixels above and belo