Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Upcoming events section
0:01 OK, let's see what's next.
0:03 Well, we've already added our get notified section,
0:05 now we want this upcoming events,
0:07 and we of course want this to be responsive
0:10 so if I make it smaller, we want the images to go like so,
0:14 we want that to go underneath, we don't this to look too weird,
0:17 it is kind of weird that the image is so big just temporarily
0:20 but we are going to use our Bootstrap grid again to do this.
0:24 And if you look of course, these images that come from the original,
0:28 are exactly responsive in the same way,
0:31 that is where most of this behavior is coming from.
0:34 So again, let's come down here and we've got, here is our form,
0:37 so let's rename this to newsletter or something like that,
0:41 so that we can link to it, we are going to do this again,
0:44 but now, we want to do things a little bit differently.
0:49 Like I said, we are going to work with this "a, b" stuff in a better way
0:53 but I'll just put "b" for the moment. Inside here instead of having this,
0:56 we are going to have some different HTML and I am just going to paste it,
0:59 like I said, not worth watching me type, I'll just copy.
1:03 So what we are going to do is actually we want to get rid of that one,
1:07 now what we want to do is we want to have a section that has that picture,
1:11 so here is the picture of one of our live events to try to tell everyone,
1:16 "OK, look how fun it is to come to our concert."
1:18 Next to it in the responsive way we are going to have
1:21 some really cool upcoming events, so if you are in North Kansas, Bottleneck,
1:25 they've got awesome stuff, I'll be sure to stop there, Boulder, Colorado,
1:29 Crystal Ballroom, Portland, lots of good places, so we are going to be,
1:32 our band is going to be playing there, and we want to have this responsive layout,
1:37 so notice, we've got this section here, that's just like a padding if you will,
1:41 there we've got 3 and a 5 and a 2 and if I did things right,
1:46 adding those up add to 12 and it does, so remember,
1:49 we need 12 columns to make up the whole grid
1:53 and this will be 3 twelfths wide of screen
1:57 and this will be 5 twelfths wide of the screen,
1:59 When you think of it as a ratio.
2:01 We are going to need to add this image, I don't think it's here, no it's not,
2:06 so over here we've got our event, there it is, it looks like fun, right,
2:09 I just can't wait for some stage diving to start to happen.
2:13 Alright, so we'll put that over here, like this, great,
2:18 and let's just look at our site again.
2:22 so it should appear right under this newsletter
2:24 and if i refresh it, look at that, beautiful,
2:37 you can even see the alternating style a, b, a, b, going.
2:31 When we're done we'll have a darker color,
2:33 but that is that, now let's check the responsiveness.
2:36 There we go, responsive, just like we expected, really cool, huh?
2:41 OK, so that section is done.