Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: Final footer
0:00 The final element before we call our over-all
0:02 design done is to add a footer.
0:04 If you look over here, you can see at the bottom
0:08 there's this cool footer that says this is a fake site
0:10 you should actually go to www.pypi.org
0:12 if you really want a package
0:13 and it's from Talk Python Training.
0:15 So we want to have that on our site over here
0:18 but of course we don't.
0:20 So let's go and add that real quick.
0:23 We'll have a footer, I'm going to use the HTML5 footer tag
0:27 which is ideal.
0:28 Now there's a bunch of texts
0:29 that you don't need to see me type
0:31 so why don't I just paste that over.
0:34 Here's our this is a fake site and so on
0:36 let's see how we're doing in terms of how this looks.
0:40 Hmm, let's go do a little bit of style over here
0:43 in the site and then I'll say we're just going to target
0:45 the footer tag, we'll have a padding of 30px
0:50 text align center, it'll help.
0:54 Hmm mm. Good good good.
0:56 And then we can set the background color, 00d
1:02 now check how cool that is.
1:03 It actually is auto-selecting.
1:05 I've used this color before and it's automatically
1:08 discovered it.
1:09 Specific color, we have white as well.
1:13 Then we go Pytron, so there we go.
1:15 That's actually pretty good.
1:17 The hyperlink is not quite there.
1:22 Let's see what that little think is in terms of color
1:25 right there we go.
1:29 Refresh, all right that looks pretty good.
1:31 Tiny bit of line height difference there
1:34 but you know, it doesn't really matter.
1:36 Now this looks pretty good.
1:37 But remember we have some other pages like about
1:40 and now a couple of problems here.
1:42 One, I feel like we could use some more spacing up there
1:46 to push this footer down.
1:47 So let's say margin top is 50px, that's pretty cool
1:53 but it also looks really weird with this at the bottom
1:55 so what I'm going to do is actually take the background
1:57 off of this and set the entire site to be that
2:00 and then just style the main content
2:01 have a white background.
2:03 So, I get off of here, and we go up there
2:08 that's why I had that hanging around
2:10 and then I'm going to take that and I'll put it there.
2:15 I think I'll just do this at the top
2:17 we'll have .main-content, it's background color is that
2:22 there we go. That's pretty sweet right?
2:24 So maybe also in this main content
2:28 maybe we should set padding bottom like 50px as well.
2:35 Looking good, looking good. I feel like our site is coming together.
2:38 Yeah we definitely need some padding
2:40 on that section as well.
2:41 I like that so main content, oh I just realized right there
2:47 that we have this, let's combine these together like so
2:52 get rid of that, do a little clean-up.
2:54 I guess I'll let Pytron shorten that up.
2:58 There we go, this is looking a lot better.
2:59 If we go back to our about page, yeah it still could use
3:02 some padding on the left or right I guess.
3:06 If we go messing with the left and right padding
3:08 it's going to go messing with how this thing looks.
3:10 So, I'm a little hesitant to go moving around
3:13 we'll just style the other pages to have sort of
3:15 smarter elements that fit in there.
3:18 Cool so I think this is looking really great.
3:20 We've got our top nav, we've got our Hero
3:22 we've got our stats lights, we've got our new releases
3:24 and at the bottom we have this very cool footer.
3:28 There's one other page that we could style.
3:31 Remember we have /project/flask
3:34 and this has nothing here.
3:35 I don't want to work on the design for this.
3:37 We don't have enough data to do anything.
3:39 If you look over here, let's say this one
3:41 there's a ton of stuff going on here
3:44 and it's not, we don't have anywhere near enough data
3:47 to do anything meaningful yet
3:48 so let's just wait to will get to the SQLAlchemy section.
3:50 We'll have real data and then we can finish out
3:52 the design of this page.
3:54 There's actually not that much more to do.