Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Adding our design
Lecture: The making of the hero
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So, here's where we want to be but here's where we are. Little bit of a difference, huh? So let's focus on this
0:09
what I'm calling the hero section right here. So we go over to our site and we're going to have a hero notice that PyCharm is finding the classes
0:18
used in HTML, and suggesting them here that's pretty awesome. And let's start with color. Alright, obviously, this is just white and black
0:27
and that one is white fonts on a blue background. So let's set the background color and I'm going to take a color that I've already grabbed
0:37
from the design over there and the color is going to be white. Let's see what that does for us. Nothing on that page.
0:49
a little bit better, not 100 percent. Okay, so that's a start. Let's set the padding, notice over here there's a lot of space, and here, not so much.
1:05
We'll do 50 top and bottom and zero left and right. Let's set the text align to be center. The line height to be 1.0
1:16
and the font size is going to be 18 pixels, okay. Little better, we still have some real weirdness
1:27
going on with that that's quite large, so let's fix that. So that's going to be the hero eight one.
1:34
Now first of all, notice this going all the way across and the font size is really wrong so let's go to the font size and say that's 32 pixels
1:41
see what that does. I think we need a little bit more to control this here let's do starter. There we go, that looks like pretty comparable font size.
2:01
Set the font weight to 400, that's a little bit bold. And here we'll set the line height to 1.3 so it's a little bit more space
2:08
again text align is going to be centered just to be safe. Here we go, getting a little bit closer.
2:14
Let's also make sure it doesn't change size in a weird way so well set the max width, 810 pixels. And also let's set the padding.
2:31
And one more thing, now that we set the max width it looks like it's off to the left so we're going to want to set the margin left to be auto
2:38
and the margin right to be auto kind of like we did with our login box. Okay, that's looking good. Next up, let's just work our way down
2:46
this thing being all the way across not so amazing, let's fix that. So that is a forum control and let's set the max width to be 550px.
2:59
And we also need to change the display style cause right now I think it's in line which you can't control some of these
3:04
so we'll do inline block, oh I typed minwidth I meant the set. So we have the width, that looks pretty good let's cycle back and forth.
3:13
Now the rounded edges verses square edges let's work on that. We'll set that, we'll set the border radius to something like two pixels. Here we go.
3:26
Now it's starting to look pretty close. What else we got to do? Let's up the font size to 20 pixels. Change the padding to 20 pixels as well.
3:39
See how we're doing. Oh, those look pretty similar. Now the nav bar up top is changing the, sort of vertical alignment, we haven't worked on that yet
3:47
we're just working on the blue hero but boy those are good. I notice this one is white and underlined and this one is not, so let's go address that.
3:56
So that's going to be a hero and there's only one hyperlink so we can just say a and the color is going to be white
4:03
and the text decoration is going to be underline. Boom, there it is. It looks pretty good, the font size is tiny bit different
4:11
than what we're aiming for but that was also just an approximation. So I think this hero piece is basically done.
4:18
Now this nap doesn't navigate anywhere that's fine, but in terms of modeling these two pieces here, I think this first hero slice is good enough.