How to create a responsive hero box for our website in Dreamweaver.

Hi there, in this video we're going to start our Responsive Hero Box. That's inside of our Template. You might be looking, and going, "I can only see two things." And yes, we only create two things in this one but there's a bit of underlined structure that we need to create, we need to create a Hero Content Box. And we're going to create some re-usable floating Classes. All sorts of other awesomeness. So, let's go and do that now.

So, I've got my index.html open. So I'm going to start filling out my page. This is connected to the Template, so you can see all the stuff's grayed out. And I can work inside this Main Tag here. It's really easy, just click inside anywhere. And that's the only editable box on this page. So I'm going to put in-- we're going to be working on this part here. It's going to be called the Hero Content. We've got this Hero Image in the background so we don't need to worry about him. We've done him in an earlier tutorial. We just need to worry about this stuff in here. And it's going to be universal. So it's going to be on this page here. And it's going to update the text depending on what kind of page it is.

So we're going to start by putting in our Hero Content Div Tag. And then we'll start putting in the Images and Text, so let's get started. So with this selected, I'm going to go to 'Insert', we're going to insert a Div. I want to Nest it inside. And I'm going to leave it for the moment. I'm going to create a CSS Style. It's going to be in 'styles.css', it's going to be a 'Global' one. And the 'Selector' is going to be a 'Class', remember the full stop '.' at the beginning. This one's going to be called 'hero-content'.

And what is it going to do? It's not going to do a whole lot. It's going to, you can see here it's kind of pushed off from the top, and away from the left. I've already measured it. So I'm going to do a Margin at the top here of 83 pixels, and on this left hand side here, 100 pixels. And hopefully, if I save all-- nothing happens. Why has it not happened? It's because I haven't applied it yet. So, I created it, so I've created the Class, and the Div, but I haven't connected them up. I'm going to do that here. This one's actually called 'hero-content'. Nice! I push this down, and push this off. Lovely!

Next thing I want to do is, with my 'hero-content' selected I'm going to insert that Image. I'm going to Nest it inside. Thank you, I'm going to go to my 'Exercise Files', 'Images', and find down the bottom here, called 'tick'. It's not in the right place. "Copy it across?" "Yes, please." Let's go to 'Images', thank you very much. Hit 'Save'. Nice! Whenever you put in an Image make sure that you put in the Alt Text, which is going to be something keyword friendly without stuffing your website full of keywords, I guess. So this is going to be 'freelance web design available'. Running out of good keyword thinking things. Anyway, the link, this one's not going to have a link, this is not going to go anywhere. So, click off, click the 'Hamburger Menu'.

The next thing we're going to do is put in some Text. Now you're kind of-- you could start using this place holder text that's in here but it's going to give us some drama. It's better to use p-tags, rather than-- see this text here has no kind of tag around it. So it's better to work with a p-tag. So, click on this Image, I'm going to insert 'HTML'. Now I'm to go down here to find p-tag. I'm not going to go down there, there it is there. And I'll get it to be just after. So inside this p-tag, click it, goes on around the outside, and actually just kind of copy and paste the text from here. Now this text down here is no longer that useful. So I'm going to select all of that, and delete it. It was the place holder text for that original Div. Delete all the text.

Now remember, there's a non-breaking space that gets selected there to keep the Tag open, I don't need that. So, they are stacking underneath each other. So we'll Style the color in a second because it's black and it gets hard to see. But you can see, by default, they want to stack on top of each other. That happens all the time. Now we're going to fix that like we did down the bottom here for the Footer. Our Footer, remember, we float it left and right. Now we did do, down the bottom there is, we had some specific Tags to use, so we had like Social Icons and our Copyright, and we floated those Tags to the left and right. Problem is that we have to do that again now, and you're like, "Ugh." Wouldn't it be nice to create like a universal tag that we could apply to this p-tag? Because you can add more than one Class.

So this Image here, I'd like to apply a float left Class and this one, a float right one. So we're going to create that as a re-usable thing rather than coding it hard into these Classes. Which was fine, but not very re-usable. So, let's create a Class first, so we're going to go to 'CSS Designer'. Make sure, we're on 'All', 'css styles', make sure you're in 'Global'. 'Selector', I'm going to call this one '.float-left'. And his job is going to be, floating left. And then we're going to create another one called 'float-right'. And he's going to float right, that's going to be his job. So now we just need to apply it, so I'm going to grab the 'tick' here, we're going to say, you, my friend-- where is he? That one there. You, my friend, we're going to click on '+', and we're going to say 'float'. You can see, it's just a little easier now, we get to re-use this thing to the left. This thing kind of squidges up underneath it but it's kind of a bit trapped, so we need to say—

Now, if you're watching, you might be like "Why would he float it right? I have no idea. I don't want it floating right, I want that universal tag. So I'm going to leave it there, but that is totally my fault. What I actually want is for them both to float left. The nice thing about that is, if they float left they'll bang up next to each other, side by side, and you can see, what happens is, if you float them both left, they sit side by side if you just float one, the other one just tries to sneak in underneath and it causes lots of problems. So make sure you float them both left and right.

Next thing I want to do is I want to Style this Text here. Now I could probably make a Compound Selector and say, p-tags that are inside Hero Box-- let's look at the design. I might use p-tags again, definitely on this one here. This is where you run into problems, you'll be all clever, and you'd be like "Oh, I won't make a new Class with this because there was only one p-tag here," but then later in the design, you go "There's going to be two different p-tags" and we need a bit more specificity. So what we're going to do is, we're going to create a Class. Let's click 'Styles', 'Global', 'Selector', and let's put in a full stop '.', let's put in 'availability'. And we're going to do a couple of things. We're going to steal the color from Illustrator. So, with the text selected, we could use our 'Window', 'CSS Properties'. I don't know why I've gone this way. It's another way to look at. Let's double click the color. Copy it. Back into Dreamweaver, and I want my 'Text', 'color' for this one here to be 'Hex', '#', and that, hit 'return'. And let's apply it. So, over here in my p-tag, it's just going to have 'float-left'. But we're also going to have, we're going to add another one called '.availability'. You can have another one tag applied.

Next thing I'm going to do is play around with the Margins because it's not really sitting correctly. So what we're going to do is go to this first one, go to 'Margins' now, and this one here is going to be 7. You'll notice it kind of went up. 7 from the top, by default, it's aligning down on the baseline there. Sometimes you'll play around, and you'll go "Yes, 7 from the top makes sense." But then it kind of goes up like it did there, don't worry about it. Left on this side, we’re going to do 15. I measured these from Illustrator as well. So, we're getting there. Save it, let's just preview in the browser.

Double check, it's all working, and looking nice. Let's go and put in this 'H1' which is this big chunk here, so I'm just going to grab the Text while I'm here. And let's put that in. And actually before we go on, we'll just cut this video here because we're going to look at clearing the float, and I want to turn that into a separate video because you'll probably have to come back to that one to do it later on, because clearing the float is easy to understand but hard to remember the syntax. So we'll keep that as a nice little bundled video in the next one. Let's go do that.