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