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.