4.4 Set Up Panel 7 With a Clipped Laptop Image

Hey, welcome back to XD to Code with Avocode Three. In this lesson, we're gonna put together our seventh panel. We're gonna be creating this laptop image in the same way that we created the tablet image here in the last lesson. We're gonna set up the content, the background image, and we're gonna get it all responsive all in this one lesson. So let's go ahead and get started. So we're gonna set up our seventh panel in pretty much the same way that we set up our sixth panel. So we're gonna need a class named panel seven, On a div. And then we're also gonna use the extra large padding class. But for this one, we want it to be a light panel. We're gonna set up two divs to act as columns, just like we did before. So div one and div two. And we're actually, even though we're gonna be using this same text content, we're gonna leave it out for now so that we have a bit more space to set up our laptop image. So we'll save that. And now, let's set up our panel seven class. So you're gonna do the same type of code that we did up here. We're gonna set display to grid and we are gonna have two columns side by side. But to start with, we just want a bit of space, as I mentioned, so we can put together our laptop image. So for now, temporarily, we'll just set grid template columns and have both of them be 100% width. And we might as well put in our background image right away. So we're gonna set background, Image. To a URL, we'll set that to images. And then we're gonna choose our seven BG. We'll set background repeat to no repeat. And we'll set the background position to be aligned on the left and also to be vertically centered, so that way when this panel is quite thin and the background image is only gonna be taking up a small portion of it. It's gonna be centered vertically, and the rest of that space is just going to be filled in with the background color. The process that's gonna be used for the laptop here is exactly the same as we just went through with the tablet. So we're not going to go through it step by step, because you wouldn't be learning anything new. So in this case I'm actually just gonna paste all of the laptop content, all the HTML rather, into our second div here which is gonna be our second column. So we've got the same thing, there's only one difference here. This code is the same as what we did with our tablet. So instead of saying tablet we have laptop, instead of tablet_bg we have laptop_bg, and our image here instead of being tablet screen is laptop screen. The only extra thing we're adding in is this laptop clip div, and I'll explain what that's for in just a moment. You'll save that. And I'm just gonna paste in all of the CSS that you need to set up the laptop in the same way that we did the tablet. So you can get this from the source files that you have access to with this course. And I've just left in comments here that let you know what the original sizes are in fixed values for these images and a little note as to how each of them was calculated. But otherwise, all of this is just an exact repetition of what we did with the tablet. Now just a quick note, on the laptop style here we have got some code that's gonna help us vertically center. We don't need to vertically center anything just yet, so comment out those couple of lines for now. Then, let's take a look and see what we've got. We scroll down, there's our full size laptop image, and as we shrink down, the laptop image scales. So once again, it's just exactly the same thing that we did with our tablet. All right, so now what we wanna do is put our content on the left side here, and we wanna take this laptop and push it off to the right side. And that's where our laptop clip class comes in. So first up, let's adjust our grid template columns so that our two columns are actually sitting side-by-side. We're gonna have the first column be 53%, the second column is gonna be 47%, that's the inverse of the panel above it. So we'll save that and now let's grab all this HTML from panel six, so that's our heading, paragraph and button. And we're gonna put it in the first column of panel seven. So that has gotten us this far. We've got our content on the left just how we want it. Our laptop is over on the right. But right now it's too small. We want it to be quite large, and we want it to be clipped down the center, and offset over to the right. So now, let's go ahead and add our laptop clip style into our CSS. We're gonna set its width to be 200%, so it's gonna be twice as large as it is normally. And that's gonna give us enough capacity to cut off half of that image. And we're gonna set its height to 100% so that it fills up all the space that it has. Now let's take a look. All right, so it's getting pretty close. Our laptop is now large and the one thing that's left for us to do is to clip off this edge here. And the way that we're gonna do that is by going into our panel seven class, which is the parent, and setting overflow x, which is the horizontal overflow, to be hidden. So now anything that's sticking outside of this div is just gonna get chopped off and hidden. All right, so just like we wanted, there's our laptop clipped off to the side. And if we shrink down now, you can see that our clipped laptop is shrinking as well. If we want it to be vertically aligned, we commented the code out before that would handle that vertical alignment, that's these two lines here, so we'll bring those back in. And now when we shrink things down, that laptop is gonna stay vertically aligned. And by the way, as you scale down, you notice that we have our background image in here, that's just centering itself vertically, and it also has a really nice subtle fadeout into the flat colors here. These are things we went through in the first course in this series, making sure that an image like this can fade out without seams to a flat color so that you get this ability to have that responsive functionality. And we also have the ability to take our laptop image, clip it off to the side, but then we're gonna take this image and have it appear in its entire width above the text content. And the point that we were going over in the design phase of this course is that you want to make sure that when a design is put together, you don't chop off the edge of the image here and have it fixed being stuck on the right side. So let's bring this image so it stacks up on top when the viewpoint is narrow enough, and we'll see why that's important. So we're gonna go down to our media [INAUDIBLE] 45 rem, which is where we stacked our columns one on top of the other in our panel six. And we're gonna do the same thing for panel seven. So actually we can just add to this star that we already have and just tell it panel seven to also. Switch the grid template columns to a 100% so let's take a quick look at the result of that. So now we shrink down and then we get our stacked columns. But right now we can see there's not a line probably and we also wanna switch the orders of the images on top of the text content. And that's a reminder, this button is still orange. We actually want that to be a dark button. So let's change that to read dark button. There we go. That switched that over really easily. So let's do the same thing that we did with our tablet code. Where we, in these two lines we get rid of that vertical centering, cuz we don't need it anymore and in this line we're horizontally centering the laptop. And to make sure that we're not just seeing half the laptop pushed off to the side anymore, let's override what we did with our laptop_clip class and set the width to 100%. Now let's check how that has gone. So now, the laptop's the right width. The onlny thing we need to do is take it and put it up on top. So we're gonna do that by targeting these two child elements, these divs. Child elements of the panel seven class. So we're gonna say panel_seven div, so that's targeting child div elements. And we'll add a colon, and we'll say nth-child. Now this lets us specify which child did we wanna target. We wanna target the first child div, so that targets this div here. Then we wanna change the order in the grid for this div, which we just do by setting the property order. Right now this is first, but we want it to be second, so just specify 2. And then we do the same thing for our second div as well. Just copy and paste this code. Now I wanna target the second child, and we want it to be first in order. We'll take a look. There we go. So now our laptop is sitting above our content. We have the gap that we wanted. It's centered, and it scales all the way down as small as we need it to go. Our laptop is not vertically centering there, so it looks like I must have not uncommented the correct code. So let's go back to our laptop code. There's our vertical centering card, gonna uncomment that. And by the way, what I'm also doing here is pushing the laptop over to the right a little bit with this figure to make a little bit of space in between the text and the laptop image. So now let's take a look. There we go, so now we've got a bit more space here. And as we shrink down, you can see that the laptop is staying vertically centered. All right, so that's it. That's everything that we needed for this section of the site. We were able to reuse a lot of what we did in this section, and that just goes to show why it's a good idea to think about reusability when you're coding up your sites. It can make things a lot faster to roll out multiple elements if you've thought ahead with how you create your initial elements. So now we are very nearly done. We've only got one more thing to do. And that is add this little footer element down on the bottom. So we're gonna knock that off in the last lesson, which is coming right up. And I'll see you there.