Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Band members section
0:01 We have our upcoming events all done, let's see what the next section is.
0:04 OK, so here is upcoming events, OK, the next one is this cool section
0:07 with the three band members, here in the middle.
0:10 And, we are going to use again, like you imagine, one of these horizontal slices
0:14 with grid layouts, so that some kind of responsive design happens,
0:18 that's a little insane, but responsive design for the three band members there,
0:23 of course, we could set max sizes on these images
0:26 and that would prevent it from getting too crazy.
0:29 So let's duplicate this section, like so, and we are going to switch it,
0:35 like I said, we are going to automate that part later,
0:38 we want to change this to "band"
0:42 and in here we are going to put something very similar, not the same, but similar,
0:45 where we've got our title that's going to be at the top
0:50 and then we have some medium rows,
0:52 maybe we want to make those small, I think we could do better with that,
0:55 those pictures being huge, and of course it's not an "sd" but it's something with an "m",
1:01 alright, so here we're just going to put our little header at the top,
1:04 maybe that should be an H3, let's try that,
1:08 we don't want to fight with defining what is important on the page here,
1:13 so we are going to have H3 and then again,
1:16 have a little bit of padding on the left and right, so like basically 25% left, 25% right
1:22 and then we'll have three, one sixth worth of images for these guys.
1:28 Now, this is going to look a little funky, it's not going to layout just right,
1:31 but let's see how far we've come with this, there is the band members,
1:36 and, well, I've got to say, I am not impressed with the way Rags is looking,
1:38 he is not rocking it out, that's because we didn't move his pictures, so let's do that,
1:42 go over to the members, there they are, we are going to move their images over,
1:48 we'll make a folder for the members, and in there we'll put those three guys.
1:55 How about now?
1:57 There we go, that looks great, right?
1:59 Notice some of the Bootstrap things we are doing here, we are doing an image, responsive,
2:05 we already talked about that, we are also applying the circle style
2:08 because if you look at the original images, they are square, but of course here,
2:12 they have got that cool circle look, and I just love the way this
2:15 sort of spotlights on them and it looks really good.
2:18 The last thing that we need to do is put that in the center of the page, so let's give this,
2:22 we have this band, so we say .band and go to our home and down here,
2:27 we can say .band, text align center, like so, if we try again, there we go,
2:34 that's great and just for now, I am going to put that back to H2.
2:40 Alright, I think that looks pretty good, want to check the responsiveness?
2:43 You know it's going to work, right?
2:46 OK, so go like this, scroll down, there is the band members,
2:50 they are kind of huge, but they get smaller.
2:53 Now, notice this is a little small, let's do one more thing for the band members
2:58 for their names, we'll say it's a block display, that's a little bit bigger fonts,
3:02 we'll give it some margin, because right now it's kind of crowding up against that,
3:07 let's run it and see how it looks. There we go, that's better.
3:10 Dave Wilson, Mark Spencer, and so on.
3:14 Make it bigger, unwrap, I think the band members are good
3:20 and this section is looking done to me.