1

00:00:00,930 --> 00:00:05,340

So even though we've updated this to bootstrap five, there are still some things that just don't look



2

00:00:05,340 --> 00:00:09,380

right on this site and this is just a cosmetic cleanup.



3

00:00:09,690 --> 00:00:13,410

So the first thing you might notice, and you've probably already changed this in your code, but I



4

00:00:13,410 --> 00:00:17,370

haven't I still have in the browser title for every page of my site.



5

00:00:17,370 --> 00:00:19,870

It says my nice page and it shouldn't.



6

00:00:20,190 --> 00:00:23,880

Our site is actually for a bed and breakfast called Fort Smith Bed and Breakfast.



7

00:00:23,880 --> 00:00:25,230

So I'm going to copy this text.



8

00:00:25,650 --> 00:00:31,230

I'll go back to my base layout right here and at the top where I have the title, my minus page.



9

00:00:31,560 --> 00:00:36,450

I will just replace that with Fort Smite bed and breakfast, Fort Smith bed and breakfast.



10

00:00:36,840 --> 00:00:40,710

And if I reload that now, it's changed on every page of the site.



11

00:00:40,740 --> 00:00:45,090

OK, so let's go back to our homepage and look at something else.



12

00:00:45,540 --> 00:00:47,700

My footer, it's kind of ugly right now.



13

00:00:47,700 --> 00:00:49,170

It just doesn't look right.



14

00:00:49,170 --> 00:00:51,030

It just has left middle and right.



15

00:00:51,030 --> 00:00:53,910

And I should put something there that makes it look a little more attractive.



16

00:00:54,180 --> 00:00:55,290

So let's make that change.



17

00:00:55,290 --> 00:00:57,060

And again, I'll do that in the base layout.



18

00:00:57,750 --> 00:01:03,210

And what I'm going to do is go to my styles, my styles excessed, which I've included, and just to



19

00:01:03,210 --> 00:01:08,430

make it faster, because I don't have to reload my external style sheet manually every time I'm going



20

00:01:08,430 --> 00:01:09,120

to copy this.



21

00:01:09,790 --> 00:01:15,180

And at the top of my base layout inside the head section, I'll just override that style.



22

00:01:15,990 --> 00:01:20,410

And once I have it the way I want, I can just go and change this to be whatever I want.



23

00:01:21,060 --> 00:01:27,090

So, for example, if I get rid of the height here and because I don't want to give it an explicit height,



24

00:01:27,090 --> 00:01:31,260

I go to the bottom and I change is to say this is the leftmost column.



25

00:01:31,260 --> 00:01:33,030

So it's what's going to appear right here.



26

00:01:33,060 --> 00:01:39,590

I'll make that the address and I'll just make something up so strong and I'll put in the name of the



27

00:01:39,960 --> 00:01:50,070

the bed and breakfasts Fort Smith bed and I'll put an ampersand ampe.



28

00:01:51,780 --> 00:02:01,800

Breakfast and then on the next line, I'll put in some fictional address, say 100 Rocky Road, and



29

00:02:01,800 --> 00:02:11,370

I'll put this in a fictional town, which I'll call Northbrook, Ontario, and then on another line,



30

00:02:11,940 --> 00:02:20,950

Canada, and then a phone number, say four one six five five five, one, two, one, two.



31

00:02:21,690 --> 00:02:29,280

And on the next line, an email, a traffic equals mail to info at Fort Smith.



32

00:02:29,280 --> 00:02:30,960

Bed and breakfast starts here.



33

00:02:31,470 --> 00:02:36,310

And then the email to show up as the active link info at F.S.B Dozier.



34

00:02:36,360 --> 00:02:37,350

Let's see how that looks.



35

00:02:38,190 --> 00:02:38,820

Reload.



36

00:02:41,090 --> 00:02:45,960

OK, so that's not tall enough for some reason, that's not actually showing up the way that it should.



37

00:02:45,980 --> 00:02:49,490

I have a whole everything showing up here, but the background is not correct.



38

00:02:49,490 --> 00:02:50,270

So something's wrong.



39

00:02:50,870 --> 00:02:53,090

Let's go back and change your style at the top.



40

00:02:53,600 --> 00:02:54,770

We have margin top.



41

00:02:54,770 --> 00:02:55,730

Let's get rid of that.



42

00:02:56,060 --> 00:02:57,050

That looks OK.



43

00:02:57,620 --> 00:03:01,410

And the style is my footer, which is on this row.



44

00:03:01,430 --> 00:03:02,760

Well, let's just add it to this column.



45

00:03:02,780 --> 00:03:04,740

That'll work for our purposes today.



46

00:03:05,180 --> 00:03:05,900

My footer.



47

00:03:07,220 --> 00:03:13,120

And we'll add the same thing here, my footer and the same thing here, my footer.



48

00:03:13,160 --> 00:03:15,000

And that should put the background in there.



49

00:03:15,020 --> 00:03:16,000

Let's see if that worked.



50

00:03:16,640 --> 00:03:17,590

Not quite right.



51

00:03:17,600 --> 00:03:19,010

It actually shrunk.



52

00:03:19,010 --> 00:03:20,420

It shrunk it down twice.



53

00:03:20,420 --> 00:03:21,410

So that's not going to work.



54

00:03:23,060 --> 00:03:23,420

All right.



55

00:03:23,420 --> 00:03:29,590

Let's change this to a Futer instead of a div or should this make this a footer there?



56

00:03:30,980 --> 00:03:33,530

And that changed the closing tag.



57

00:03:33,530 --> 00:03:43,280

And then I need a row div class equals row and cut that and paste this in here and format it and make



58

00:03:43,280 --> 00:03:44,960

sure we've got all of our tags closed.



59

00:03:44,970 --> 00:03:45,380

We do.



60

00:03:45,410 --> 00:03:48,320

Let's try that reload again.



61

00:03:48,320 --> 00:03:49,080

Not quite right.



62

00:03:49,460 --> 00:03:50,120

Why not.



63

00:03:51,260 --> 00:03:55,600

So let's inspect this and see where we're having here.



64

00:03:55,610 --> 00:03:56,750

That's not quite right.



65

00:03:58,250 --> 00:04:02,120

So my foot or background color, that looks right.



66

00:04:02,120 --> 00:04:06,740

And I made my selecting the correct one that's inside the container.



67

00:04:08,650 --> 00:04:14,380

This whole background, maybe this is a bootstrap firebug, who knows it is a beta version, so it's



68

00:04:14,380 --> 00:04:15,400

entirely possible.



69

00:04:16,540 --> 00:04:17,740

I'll just give it a bigger hype.



70

00:04:17,800 --> 00:04:19,990

So what happens if I make this enabled?



71

00:04:20,020 --> 00:04:20,950

That looks good.



72

00:04:20,960 --> 00:04:28,240

So let's give it a height of nine M's and put that in there like this nine Ms.



73

00:04:28,660 --> 00:04:29,650

See how that looks.



74

00:04:30,700 --> 00:04:34,330

Close this to make sure we're going to get it loading properly and reload.



75

00:04:35,230 --> 00:04:37,000

OK, so now we have an address in there.



76

00:04:37,010 --> 00:04:42,400

I'll leave the middle blank, but I'm going to actually make that column text centered.



77

00:04:44,480 --> 00:04:54,920

Text center, and I'll make this empty and in the right, I'll just put a slogan, strong your home



78

00:04:55,460 --> 00:05:01,780

away and then on the next line from home and I'll make this text two.



79

00:05:04,850 --> 00:05:06,440

OK, reload this.



80

00:05:07,400 --> 00:05:07,790

All right.



81

00:05:07,970 --> 00:05:09,700

That's good enough for our purposes right now.



82

00:05:09,980 --> 00:05:12,800

So that gives me my title on the site.



83

00:05:12,800 --> 00:05:13,670

Fixed my foot.



84

00:05:13,670 --> 00:05:15,290

It looks a little bit better if you want to.



85

00:05:15,290 --> 00:05:20,420

You could put maybe a Google map down in here just to show people where you're located.



86

00:05:20,720 --> 00:05:23,180

But I'm just trying to make things look a little more attractive.



87

00:05:23,390 --> 00:05:23,750

All right.



88

00:05:23,750 --> 00:05:25,880

In the next lecture, we'll clean up a few more things.