Okay, so let's go back to the code editor and I'll cut and paste some code I've prepared for the name of the restaurant and this Kosher certified sign right here underneath of it. So if I just place it the way it is now, first let me explain what is going on here. The first thing is this navbar brand. This is something that bootstrap, the communication will tell you that any branding like the name of the company should go into this navbar brand, under this navbar brand class. And what we're doing here is again putting it inside of an Rep. So this David Chu's, David Chu's China Bistro will be a clickable region. And we're also putting it inside of H1, because this is the most important thing about the page. That is, the name of the restaurant. So, that's as far as the name of the restaurant is concerned. The next thing is this little star, this Star-K, this kosher sign. And this is just the logo, so it's just an image. And it's very small so we don't really care about responsiveness for this particular one because it is that small. And we just have a span set up that just says Kosher Certified. Let's save this. Let's go ahead and go back to our browser and not quite exactly what we expected. It's going to push down here and this is kind of ugly looking. But the first thing is we need to kind of take this and move it right here in this region. The reason that it's going down is because this is nothing more than a div, so This is a DIV and this is a DIV so obviously they're stacking one upon the other. Well since David Chu's China Bistro is wrapped around with a class navbar brand and that already is floated left. As long as we make our logo Float left will have nicely David Chu's China Bistro aligned to the right of the logo. Well let's go back and do that but we're going to do that in a boot strap way. And the way you do it in a boot strap is you apply. In this case to this region right here which is our logo, and we'll apply a class called pull-left. And pull-left is basically float left. And obviously we could split a style attribute here and say float left but that would make this whole thing a little bit dirty looking so we're just going to stick with the bootstrap class names that they came up with. So we'll go back to the browser. Look at that, now everything is to the right of that, because we're now floating the element with a logo. Okay so let's go ahead and, now style is a little bit better. We certainly don't want this underlying link on here that's number one. Number two is if you look at our design the font is different and you can see here business theme font is called Laura. So really the first thing we should do is we should go back to our code editor and import this Laura font and I'm going to end and pause the video real quick and import the font the same way we imported the google fonts for the oxygen font. Okay, so, here's how I lower a font and I went through the exactly the same procedure in Google.com/fonts in order to pull it out. So, now, let's go ahead and go to our styles.css and we'll cut and paste some code I prebaked for our navbar brand. So the first thing we're going to do is, we're going to give it some padding, We're going to basically push it down a little bit, so we'll give it some padding top, about 25 pixels.
And the other thing we're going to style the actual name, the brand name. We're going to say Navbar brand h1, that's the restaurant name and here's our Lora family font. We're going to give it a little bit of a different color. The color is going to be green. This is what we are basically doing according to our design. And we'll increase the font size just a tad. We'll increase it 1.5 m's. And what we'll do is we'll make the text uppercase. So we'll all stay uppercase the entire time. We'll bold it, we'll put some text shadow on it. And this is something we haven't really seen before. But I'll let you go ahead and research how to do this yourself, this is not really so hard. And we'll do margin top zero, margin bottom zero, and we'll decrease the line height just a little bit to kind of tighten up the whole thing. If you remember, we also had an underline, like a link thing, going on under there, and we really want to disable that. And that's called text-decoration. So what we're going to do is we're going to say .navbar-brand a:hover and .navbar-brand a:focus, either one, we want them not to have any underline type of link decoration. We just want it to be clickable but not look like a regular link. The other thing that's left here is to style this Kosher cert thing, and all we're doing here is just basically giving it a color, transforming everything to upper case and decreasing its font size just a tad to 0.7 ems. And again, keeping the margin top 15 just to separate it from the actual brand, the David Chu's China Bistro It'll get separated a little bit more by 15 pixels. And the last thing is, we want to vertically align our Star-K span. So, if we look at the index.html, there's a span here that says Kosher Certified. So, what we're doing here is we're saying that when you get to that span, just vertically align that text. And the reason we're doing this is because we want those words kosher certified to align in the center of that star image, that star-k-logo.png. Okay, so let's take a look at a browser and see what we came up with. Okay, not quite what I expected over here, you can see that this is working just nicely here, and it has a nice shadow here, text shadow. And then you could see it's clickable but this is kind of sticking right up there, so let's go back to our CSS and take a look as to what we might have messed up here. I could see what's going on here, there is a little typo here that we need to remove, it was kind of the ending of a comment that got left there. Let's take that out of here and see if anything else and I think that's good. We'll go back and now sure enough its displaying how we actually wanted it to begin with. So that's pretty good so we're good to go here and I just want to do one last thing we don't always want to display this logo as we squeeze the browser if its maybe a medium screen a large screen we'll want to keep this logo. But then we're going to be, if it's smaller than that, we're going to start fighting for real estate. And I don't want to do that. I want to remove this logo and only leave the name of the business. So only when it's small. So let's take a look at what we could do in order to achieve. Do that in bootstrap. Okay so if we go to index.html there are a couple of classes that bootstrap defines that let's you basically say that this element should only be visible in a particular break point and they're called visible, visible-md and what I'm saying is if the screen size is medium I want this element, this a href element to be visible but if it's anything other than, at this point, a medium-sized screen, I don't want this element to be displayed. Well, if I put that plus, I also want it to be displayed when it's large. So now, this element will be visible when the screen is large or when the screen is medium-sized. Well, let's try this out. Let's go back to the browser, and our new styles should have already been injected. So at this point, if I just squeeze the browser and make it, it's medium. You can see by the way how the container jumps. So now it's a little bit more spacier so it's going to keep our site centered here. And if I squeeze it a little bit more, boom, it's gone. And we still have to fix that at least at this particular breakpoint. But you can see now that the logo is gone. And it's gone because of those responsive elements. And if I stretch it back out it comes back out alive again. Okay, so this is a pretty good start to a header. And we'll see you in the next video to continue developing the site.
Video Images
0 comments:
Post a Comment