2.3 Create the Features Panel

Hey, welcome back to build a one page website with Froont, no cutting required. In the last lesson we put together our header section and we set the background color for the page. We'll just have a quick look at the preview version of this, so that is all nice. Now we are ready to set up a section along here, a panel that's gonna show off some features. This is designed as a template, so what kind of features would actually be displayed in this section would come down to the person who's using the template to show off whatever kind of product or service they're wanting to show off. So we're just gonna keep it fairly generic. The first thing that we're gonna do is add another container. Now, this is gonna give us a black panel that stretches the width of the entire site. It's gonna act as a backing board, and it's gonna help to make the content look like it's lifted out of the page a little bit, towards the viewer. So once again, we'll go up to the component section, we're gonna drag in a container. So we want this to be below the header, so just double check down here, make sure it's not nested inside the header, and we're gonna name this featurespanelouter. At this time we do want to leave the width to 100%, we're gonna have this be totally flexible. It's gonna have a flexible hut as well, but we're gonna leave this figure in here for now just so that this rectangle doesn't collapse down to nothing cuz that's gonna make it hard to see what we're doing with our design settings. The first thing we're gonna do is give this container a background color. So we'll scrolling down to the background section and we're gonna give it the background color 181818. So we'll hit Enter and that's given us a nice soft gray, and we're also gonna give this a drop shadow. So, like I mentioned, that's gonna help this section feel like it's coming towards the viewer. And that's something that you can use to help highlight different areas of a website, give a little bit of a subtle three dimensionality. Now if we scroll down, here, you can see we have this shadow section. So we're going to enable it, and we're gonna just change a couple of the values here. We want this to be a blurred out, soft shadow, so we're gonna change the radius of the blur on this shadow to 2 rem. So you can see that our shadow is showing up there now, it's just the wrong color at the moment. We want that to be darker, so, just find our shadow panel again, we're going to take this all the way down to black. And then we're gonna drag this slider along to give us a transparent looking black shadow there, so we'll hit Choose. And you can actually further tweak these values here by just clicking inside this area here. Now this number on the end controls the opacity and we're actually going to change that to 0.82. All right, so there, now you can see we've got this nice, subtle shadow. Now, we're actually gonna fill this whole container up with a subtle image of a mountain. So it's gonna add some texture into the area, but we don't want it to be too distracting. So we're gonna make the image blend into the background a little bit. So we'll go back to Editing. Now, we're actually, for now, just so we can see what we're doing, I'm just gonna bump up the size of this section to, let's say, 30 rem. That'll just make it a bit easier to see the mountain image as we put it in. So we're gonna go up into the Unsplash search again, and this image I found by searching for black and white. So you can search for anything you like. You can find all kinds of good stuff, and then this is the mountain image that we're using. So we're just gonna drag and drop that straight in here, and there we go, nice mountain. But, as I mentioned, we want this to be a little bit subtle, so we don't want it to be as bright as it is right now. We want it to be just visible, basically, so we're gonna go down into the background section here, and we're gonna add in an overlay color. So once again, we're going to choose a color that's not quite black. When you see 14, come up here, that's the right color, the right shade of grey to go for and, again, we're gonna have this, Transparent, so you can just drag that along until you see a color that you like. Or if you wanna go with the exact same values that I'm using, then you can change this also to 0.86. So now we've got a nice background in here. Now we need to add an inner panel to that, and the inner panel is gonna hold the actual text content and icons. Once again, we're going to go to Basic Elements, drag and drop in a container. Now we just wanna make sure that this one is nested inside feature's panel outer, and we're gonna name is featurespanelinner. It's always a good idea to name things like these as you go along. It helps you to easily select what you're looking for and just keep track of everything that you're adding in. All right, so now let's add in some width controls. This one we do wanna restrict the width, we want to have this panel have the same dimensions as our header. So we're gonna change it to 940px in width, capped to a maximum width of 95%. And once again, we'll leave this minimum height in here for now, just while we're working on it, this will be removed later. Now this container is actually just gonna be decorative. We're gonna use this to add a little bar to the top and bottom of another container that will have the text directly inside it. So to do that what we're gonna do is add some spacing on the inside so that the container we nest in here can't max out the height so that it's flush with its parent. So we're gonna add in 1.5 rem of spacing on the inside at the top and 1.5 rem at the bottom as well. And we wanna make this transparent so that we can see our nice mountain behind it. So for the background color, once again, you can use these sliders to add in the color that you want, or you can directly type in rgba with a set of brackets. Then, to create our grey color, we're gonna type in 26, 26, 26 and then for our opacity, 0.62. Now we'll add in another container inside here, we'll drag and drop that in, and you can see how we've now got this little bit of space above and below the outer container that we added in. We'll just rename this to featurescontent, for now we're gonna boost this up to 30 rem minimum height. And then we can remove the minimum height that's on our outer panel. So now you can see this starting to form up We want this panel to be transparent as well, so we're gonna type in rgba and we're gonna type in 18,18,18 and an opacity of 0.74. So now we've got just a little hint of this mountain showing through. You can see the mountain fairly clearly when you've got some width around the outside, but it's also not coming through so brightly that it's gonna make it difficult to see the text that's gonna be add in over the top. All right, so we got a couple of extra additions to make, we will select our outer panel. And we're gonna add some padding on the inside because we do not want this container here to have no gap here, we don't want that to be flush. So we are gonna add in top and bottom padding of 2 rem, so above and below, so now that gives us this nice gap here. And then to make this area just have that little bit of extra highlighting, we're gonna add in a border. Scroll down to the section labeled Border. We're gonna add a border of width 1 pixel, so just drag this up until it hits 1 pixel. And for the color, we're gonna use a transparent color again this, it just helps with that subtlety. So we type rgba with brackets, our grey color is going to be 49, 49, 49 and then we're gonna give it an opacity of 0.5. And once again, you can do all this with the color picker. I'm just giving you the exact values if you want to have what you're working on match exactly what I'm working on. All right, so now we've got this nice, soft border around the outside. Just go into Preview Mode. Now, that's all set up to have some content added. We've got our background image in there to give us just a little bit of style without being overbearing. And the space is all set to have our three columns added in with icons and little text on some features. So we're gonna go through and add in that content in the next lesson, I'll see you there.