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