4.1 Quick Panel 6 Setup

Hey, welcome back to XD to Code with Avocode 3. This lesson is gonna be a really quick one. We're gonna set up the basics of our panel_six before we move on to setting up our dual image responsive tablet. The first thing that we're gonna do is actually just collapse down these divs that we already have set up. And we're just gonna comment them out, just for now, so that they're not showing in the browser when we preview our panel_six. It's just gonna make it a bit easier to keep an eye on what we're doing. We'll uncomment that later, once we're done here. So now we need a new div, and we're gonna give it the class name panel_six. We're also gonna give it the class name dark_panel, so we're using the style that we set up earlier. We want to apply some padding to this. It's gonna be the same padding that we use in our next panel, panel seven. But the padding that we have here is larger than the padding that we have in our panels that we set up earlier. And this is where our spacing extra large variable comes into action. So make a new class, we're gonna call it extra_large_padding, save that. And let's find our normal large padding style here, copy that. And we're gonna change that to extra_large_padding and spacing_extra_large. Now, the way that we're gonna handle this panel is we're gonna set up the parent panel_six to be a grid, and in that grid we're gonna two columns. The first column is gonna house this image, and the second column is gonna house this content. So to do that, we're just going to add two two empty divs, one and two. Then we'll set up a class, a style for panel_six, we'll set it to display grid. And we're gonna set as grid template columns so that they're almost 50-50, but not quite. We want our left column to be a tiny bit narrow, so we're gonna set that to 47% and the second column to 53%. Now, we're gonna leave our first div empty for now, this is where we're gonna to have our tablet. But we can copy in some content for the second div, we're gonna to need this heading, so we'll right-click and copy h1, paste that in. We'll copy this paragraph as well And then we need this button. So we'll just actually expand this briefly, so we can copy light button_1 from this code, and paste it in there. Now if we check out what we've got so far, there's our panel with the extra large spacing around it. And you can see that we've already got our columns in place. Now, the other thing we wanna do is add in a radial gradient to this panel. Now, something to watch out for with Avocode at the moment is, it seems like there's a little bug with radial gradients. If I click on this panel, and I'll look in the code. You can see here there is some radial gradient code, but there are a couple of undefined properties in here. I'm sure that this is just an early bug with the import of XD and it's gonna be fixed very soon. It might even be fixed by the time you're watching this video. So just keep an eye out for a radial gradient showing up in the code there. Because you can use this code, you just have to delete this part of the code at the front here. So we're gonna copy that, and then on panel_six style, we're gonna paste that in, and just delete this part here, undefined undefined at. So we'll drop that, and now if we check out our panel, now we've got a nice radial gradient. So that's all we needed to do for this section. The panel is all set up and now we're gonna move on to getting our dual image based tablet going, making it look like it's a single image. And also making sure that it's scalable so we can make it responsive. So we're gonna set that up in the next lesson. I'll see you there.