2.6 Include a Subscription Box

Hey, welcome back to Build a One-Page Website with FROONT, no coding required. So far, we've set up our header, our features, and our main information area. We just have one more main content section to add in before go to our footer, and that is a subscription box. So as usual, grab ourselves a container, drag and drop that in. We're going to rename that container to subscription box. We'll give it the same width controls as we did on all the others. So 940 pixels wide with a a maximum of 95%. We already have some spacing above this box, and that's because we have our main and full panel here with a margin on the bottom. But we don't have any space below it, so we're gonna add full rim of margin on the bottom of this box. So now there's a nice even amount of space above and below. We're gonna give this a relatively dark grey background color, so we're gonna go with 181818. And now we're gonna drag and drop in a form from our ready-made components here. So if we have a look through, here we go. We're gonna use Form Block 2. So we'll just drag and drop that into our container. And this is already just about good to go as it is. The first thing we'll do is we're gonna change up this heading. So we'll change it to heading level three. Then, we've got something different to any of the headings that we've used so far and then we can style this up. So we'll change that to Source Sans Pro. We're gonna give it a color of a5a5a5. I'm just gonna change this text so it says Enter your email to learn more. And then, we'll just make it a little bit bigger. All right, that looks about right. Now we've got this subscription button here to send in the email form. But the blue doesn't match anything else that we've got in our site. So what we wanna do is take a color from one of the images that's already imbedded in the site. So I'm gonna use a color picker extension again. And we're just gonna move around these images until we find a color that we like. So I've already done this before for this design. And the color that I arrived at is 93313c. So that's a little hint for how you can find colors for your site. You don't necessarily have to come up with everything off the top of your head. Find images that work in with your design really well, and then you can take samples from those images to help you build out your color scheme. And while we're at it, we're gonna change this font to Source Sans Pro as well. That's made that a little smaller, so let's just try 1.1 rim. Make it a little bigger again. Let's get 1.2 rim, all right. So now we're just gonna add a border around this box as well, and we want it to match this color here. But we're not gonna use the exact same color. What we're gonna do is take this color and tone it down, so it's a little darker and more subdued. If we had a really bright color around here, it would make it seem like this border was worth as much attention as the button. But we want the button to stand out, so we're gonna keep that a little brighter. So we'll go down to the border section, and we're gonna give it a border of five pixels. And we're gonna use the color 402326. So there we go. You can see that it's very similar to this color but darker and a little softer. Now we wanna give this a shadow just like our other panels. So we're going to go into the shadow section, enable our shadow. We're gonna make it a two rim blur radius. And once again, we're gonna have it black with some transparency. I'm actually gonna use a transparency of 0.47. Now if we preview that, we can see that our shadows are now consistent behind all of our panels. And we've got this nice-looking subscription box. We've got everything styled consistently, so the design of the site itself is consistent. And we've got everything all meshing in with the images as well. We just got one more little piece to add to a layer, and that is running a border along the bottom here. And we're gonna go through adding that in in the next lesson. I'll see you there.