#100DaysOfWeb in Python Transcripts
Chapter: Days 37-40: Introduction to Pyramid framework
Lecture: Design and hero images
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
I think it's time to create a little bit more design feel and customize our site. So, the rest of the time we're working with it it feels really good.
0:09
We need to do two basic things. Over here on the layout notice there's this copyright, pylons and what not. Footer, I want to use a different footer
0:18
and a different title and so on. So, I'm just going to drop in a new layout here. Notice, that's a new copyright.
0:26
It links to our 100 Days of Web project and it just says it's a demo. Right, then it has our content and that's pretty much it.
0:35
Nothing else really has changed. Let's run that and see what happened. Okay, looks a little bit better stuff's not starting in the middle of the page
0:43
it's going up a little bit higher here's our hero section. The hero section has no styling so it doesn't look very heroic but it's about to.
0:52
The other thing that we got to do we're going to need an image for our heroes. Let's go over to our static image section
0:58
and I'll paste in this one called finance. If you want to look at it real quick it looks like this.
1:03
And by the way this image came from a place called Unsplash. Unsplash has awesome, beautiful images.
1:11
I'm taking a moment and pausing to tell you about it because images are so important in how your site looks
1:17
but often people either steal images, not a good idea or they decide to just not get them they use crappy clipart and whatever.
1:27
So here if I want finance for example you can see there's all sorts of cool pictures which I can use royalty free.
1:34
And then I don't see the one that I chose but it's in here somewhere. Right, so there's tons of things you can search for
1:40
that's where this image right here came from. And we're going to use that in our hero. Now just having it in that image folder does nothing
1:47
we have to add the CSS as well. Just like with the SQLAlchemy, we've already spent a whole section on design
1:54
and CSS, so I'm not going to go through too much detail but let's just look at a few highlights. Changing the color of the body and the main content.
2:01
The main body's going to be like a gray and the content is going to be white. So that means our footer and stuff will be gray
2:08
but the main content will be a proper color. And then here we're setting some stuff on the footer and then finally the most interesting one
2:15
probably is the hero. We're setting a minimum height setting a background image that covers it and things like that. Let's see how it looks now.
2:23
Are you ready for the grand presentation? Get rid of this. Here we go. Boom. That looks good, right? That looks real good actually. So here's our site
2:33
we just put a little more spacing around these things. Put a little background on our H1 up here. This is our hero, and our hero image.
2:42
See as we resize it it does what it's supposed to do. So, here's our new design. That was pretty easy. Oh, and let's look at the footer.
2:49
It's not the most amazing looking footer but it's going to have to do for this. I guess we could change the color just a little bit
2:55
but we have a little de-emphasized footer at the bottom and we have our main content up here.