3.2 Add the Panel 1 Content Tile

Hey, welcome back to XD to code with Avocode 3. In the last lesson, we got our background image with a fixed aspect ratio set up for our panel one section of our site. And in this lesson, we're gonna get this tile of content that's in the center here set up. Inside our panel, we're gonna need a couple of nested divs. One is gonna become the actual tile, and another is gonna be wrapped around it, to center that tile. So first we'll set up the div that's going to do the centering. And we're gonna give it a class center_panel_one_tile, because that's what it's gonna be doing. Inside we're gonna need another div, and this is gonna have the class panel_one_tile. I've run our CSS, let's set up the center_panel_one_tile. Style here. And what we're gonna do is use this div to create a grid. It's gonna have three rows and three columns and our panel one tile is gonna be in a cell right in the middle of that grid. And this is gonna be a really straightforward way of getting horizontal and vertical positioning in place. So first we're going to set our display: grid. Now we're gonna set up our grid template column. So we're gonna say grid-template-columns. We want three columns, so we need to specify three widths. We want the left column to just have an automatic width. This is kind of the same way that you will use automatic margins to center something. We want the center column, where our tile is gonna be, to be 50% width. And then the third column, we also want to have set to auto. Now we need also our rows. So we're gonna say grid-template-rows. And we're gonna do the same thing again. First row should be auto height, the second row, this one is gonna be 45%, and then auto. So now anything that's in that center cell inside this grid is gonna be automatically aligned, and set to 50% width and 45% height. Now we need to make sure that this grid itself is filling up the entire space that's available for inside our panel one div. And we're gonna do that by absolutely positioning this grid and making sure it stretches out across the whole parent. So we're gonna set the position, To absolute. Now in order for that to work, we need to make sure that the parent, which is our panel one div is set to position: relative. And now we can take each of the four corners of this grid that we're setting up, and push them way out to the far corners of their parents. So we are just going to say top, the position should be 0, right: 0, bottom: 0, left: 0. We'll make sure we save both files, and now let's check out the results. So if we used our inspector here, and we hover over our center_panel_one_tile, you see that it's got the space in the center, just how we wanted. But at the moment, our panel one tile has automatically put itself in the first of the cells over here. So now we need to move it so that it repositions into that center spot. So now, let's set up our panel one tile. Select over here and we're gonna change which cell in the grid it should be placed at. We're gonna do that by using grid-column-start. And here, we specify in which grid column this element should start. We want it to start in that second column, the second of our three columns. So we just say 2. And then we do the same thing for the rows, grid-row-start. And again, we'll set that to 2 so that it starts in the second of our three rows. So now if we go back and check and we hover, there we go. Now we've got our panel one tile in the exact position and size that we wanted it. From there we're ready to start styling it. So let's go over to Avocode. And we will select the image here. We will need these two lines. So we're gonna copy that background color, paste that in. Copy the opacity as well and paste that in. So note there is a partially transparent rectangle. We want these lines to be put in above and below, we don't want them to be separate though, we want them to be borders on the rectangle that we just set up. However, if we just select one of these lines, it's still gonna give us the border code that we need. So we're gonna copy that code, paste it twice. Set the first one to border-top. And the second one to border-bottom. So now we've got those same borders that we see in our design. Now we're gonna get ready to use by adding some content, all of the text content as well as the arrow that we're gonna be adding in a centered. So we're gonna say text align center. Now we're gonna need a little bit more HTML inside the tile that we just set up. In our design, we have these two elements here. We could just put in code, a div for each of these elements, and then use padding or margin to space them apart. But it's actually gonna be a bit easier to make them evenly distributed if we use flex box instead on a parent element. So we're gonna add in the parent element. We're gonna make it a header. So this is gonna contain the title and tagline for our site. And we're gonna give the class panel_one_content, because it's holding our content. In here, we'll set up another two divs, one with the class title, and then another with the class tagline. Now back in Avocode, we can make it a little bit easier to carry across content by just selecting the element, right clicking and choosing Copy text. We can paste that title text in here in our first element. We'll do the same thing for the tagline, right click and choose Copy text. And make sure remember to save. Now we can start styling this up. We're gonna start by just styling the text itself and then we'll worry about putting some CSS against this panel_one_content style here. So for our title, let's select our title here and we're gonna want most of this code, so we'll just COPY ALL, paste it in, indent it correctly. We don't need with an height on here. We do need the color, the font family, font size and font weight. Don't need to have this as a text transform to uppercase because our text is already in uppercase, that's not necessary. Now let's do the same thing for our tag line. Select the element again, hit COPY All, paste it in, indent. And we don't need to comment or the width or the height. But we're gonna keep the color, the font family, the font size, and the font weight. Now before we can actually check out how this looks, we're also going to need to pull in our web fonts that we're using. So we're gonna grab those from Google Fonts. First we need to see what weights we're gonna need. So we've made sure that we have nothing selected by just clicking somewhere off the page. Then you can see over here, there's a summary of our font info. And here you can see the weights that are being used in the design. This bold one is actually not used. That's just a small error that's just coming from these measures here. They're not actually used in the design. What we really need is Amatic SC regular and Raleway light, medium, and regular. So we're going to go to Google Fonts, search for Amatic SC, add that to our collection. Search for Raleway. Add that to the collection as well. Now we need to customize for Raleway, we need the light, regular and medium weights. So now we can copy this link code here and we will paste it into our HTML page. And then you'll notice here that we also have suggested fall backs. So we're going to copy that suggested fall back into our variable up here. And the same thing for our Raleway fall back. So now this should be good to preview. All right, so that's looking pretty good, the styling and the size is right. Now we just want to adjust this layout. So we'll scroll back down. We're gonna add in our panel_one_content selector. And this is where we're gonna use flexbox to help us arrange our content. So we'll set this to display: flex. We're gonna make sure that this element is filling up 100% of the available height, so set this to height: 100%. Now we're gonna set flex-direction to column so that each of these two items here are gonna be arranged top to bottom. Do that with flex-direction: column. Now we're gonna set justify-content to center, and that is gonna help with the vertical positioning of those two elements. So let's see how that looks. And there you go, you can see automatically that looks a lot better. There's still a little bit that's off with the spacing here, though, so we're gonna make a couple of additional tweaks. We're gonna change up the line height on these elements. Because if we inspect here, you can see that there's quite a bit of extra space around the lettering there. So we're gonna close that down. And it's gonna make it a bit easier to control the alignment. So we're gonna set line-height to 1, and for this one we're gonna give it actually a little bit more space. So for this one, we'll set this to line-height 1.2, and by the way, I arrived at these figures just purely through trial and error. These are not predetermined figures. You can't really figure this stuff out in advance. You just have to put in amounts and keep tweaking until things look right. So we'll take a look at that. Now that's much better. This is much more centered than it was before. Now, all we wanna do is just add a little bit more space in between these two lines. So we're gonna add some margin to the bottom of our title. So we'll say margin bottom. And this is where we're gonna use one of our spacing variables. So we'll say var, and we're going to set that to spacing_small, all right? So now that's looking great. And we shrink this down just a little bit, we're not gonna go too far because we haven't built in any responsive functionalities. So that's just gonna look a bit crazy, no matter what we do. But if we just shrink down to here, you can see that the outside of our tile is getting quite close to our text. But we always want to have a little bit of gap, around the outside. So to achieve that, we're gonna go back to our panel_one_content style. We're gonna add in some padding. We don't need any vertical padding, but we will add some horizontal padding. And so it's consistent with all the rest of our padding. We're gonna use that same variable, spacing_small. Now if we have another look. And we shrink it down. Now you can see it, you can only get to about there before the text starts getting pushed down. That we're going to fix with our responsive functionality but we make sure that we keep a gap there, which is what we're looking for. Now there's just one more thing to do for out content tile and that is to add in our arrow graphic. And we're gonna do that by using a pseudo element. If you haven't used a pseudo element before, it's an element that you can add just via CSS instead of needing to add more HTML. So this is gonna be a pseudo element attached to the panel_one_tile selector. So we're gonna say panel_one_tile, then :: after which means that our pseudo element is gonna replace after this panel. We don't want any content in it so we're just gonna say content and then add two empty single quotations. We're gonna set the display to inline block, so the inline portion of that means that we're gonna be able to center this item like it's text, and the block portion means that we're gonna have full control over its width, height, and positioning. Now we're gonna set a background image. And for that background image, We want to use the down arrow svg that we created earlier. We don't want the background image to repeat, so we're gonna set background repeat to no repeat. And we wanna make sure that this svg fills up all of the space that we grant to it. So we can set background size to 100% by auto. So that means that it's going to fill up all of the width that it has but by setting the second value to auto, it's gonna maintain the correct aspect ratio. Now we need to position it. So we're gonna position it absolutely. In order for that to work, the parent needs to be positioned relatively. So we'll set panel_one_tile to position relative. And we want the arrow to be all the way at the bottom of the tile, so we're gonna set this to top 100%. So that's gonna mean that it's as far away from the top as it can be. Now we're gonna need to add in some sizing. For our width, you recall that we set up a variable. The variable is arrow_width. So add that in there. And for the height of this element, once again, we want to keep a set aspect ratio so the svg can scale without being warped. And to do that, we're actually going to use a little bit of calculation in line in our CSS. It's gonna set our height and we're going to use calc, so just add calc with brackets. And then inside here we're gonna add our arrow_width variable. Then I'm going to divide that amount by 2.05. So that's a ratio that I calculated earlier by looking at the height and the width of this graphic here. So by dividing it by 2.05, we should be able to keep the correct height. So now let's take a quick look at what we've got so far. All right, so there's a arrow. It's positioned correctly vertically, but it's offset a little bit too far to the right. That's because it's been centered, but it's only been centered from the left most point on it. So what we're gonna do is just offset it a little bit back the other way. And we're gonna do that with transform. And we're gonna use translate, which is something that you can use to move things horizontally or vertically. It's gonna end that line and put this on to a new line to make this a little bit more readable. Because once again, we're going to use calc. And what we're going to do is use calc to figure out half of the width of our arrow, so we can offset it to the left by half. So we've got our arrow width. We're gonna divide it by 2 to get half of that width. And right now if we were to save and preview, we would see that the arrow had been offset by half of its width but it would be offset to the right. We need to move it in a negative direction to the left. So to make that happen, we're gonna multiply this amount by -1. So now we'll save that out, and there we go. Now our arrow is perfectly centered, and as we shrink that down, you can see that the arrow stays in the center. And that is all good. Now as we've been shrinking things down, so far you will have seen that the text is all over the place and that's because we haven't set up any responsive functionality yet. And that is what we're gonna do in the next lesson, we're going to create a whole bunch of media queries to make sure that the text and content of this area looks good no matter what size view port we're dealing with. So we're gonna step through that in the next lesson, I'll see you there.