Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Upcoming events section

Login or purchase this course to watch this video and the rest of the course contents.
0:01 OK, let's see what's next. Well, we've already added our get notified section, now we want this upcoming events,
0:08 and we of course want this to be responsive so if I make it smaller, we want the images to go like so,
0:15 we want that to go underneath, we don't this to look too weird, it is kind of weird that the image is so big just temporarily
0:21 but we are going to use our Bootstrap grid again to do this. And if you look of course, these images that come from the original,
0:29 are exactly responsive in the same way, that is where most of this behavior is coming from.
0:35 So again, let's come down here and we've got, here is our form, so let's rename this to newsletter or something like that,
0:42 so that we can link to it, we are going to do this again, but now, we want to do things a little bit differently.
0:50 Like I said, we are going to work with this "a, b" stuff in a better way but I'll just put "b" for the moment. Inside here instead of having this,
0:57 we are going to have some different HTML and I am just going to paste it, like I said, not worth watching me type, I'll just copy.
1:04 So what we are going to do is actually we want to get rid of that one, now what we want to do is we want to have a section that has that picture,
1:12 so here is the picture of one of our live events to try to tell everyone, "OK, look how fun it is to come to our concert."
1:19 Next to it in the responsive way we are going to have some really cool upcoming events, so if you are in North Kansas, Bottleneck,
1:26 they've got awesome stuff, I'll be sure to stop there, Boulder, Colorado, Crystal Ballroom, Portland, lots of good places, so we are going to be,
1:33 our band is going to be playing there, and we want to have this responsive layout,
1:38 so notice, we've got this section here, that's just like a padding if you will, there we've got 3 and a 5 and a 2 and if I did things right,
1:47 adding those up add to 12 and it does, so remember, we need 12 columns to make up the whole grid and this will be 3 twelfths wide of screen
1:58 and this will be 5 twelfths wide of the screen, When you think of it as a ratio.
2:02 We are going to need to add this image, I don't think it's here, no it's not, so over here we've got our event, there it is, it looks like fun, right,
2:10 I just can't wait for some stage diving to start to happen. Alright, so we'll put that over here, like this, great,
2:19 and let's just look at our site again. so it should appear right under this newsletter and if i refresh it, look at that, beautiful,
2:38 you can even see the alternating style a, b, a, b, going. When we're done we'll have a darker color,
2:34 but that is that, now let's check the responsiveness. There we go, responsive, just like we expected, really cool, huh? OK, so that section is done.

Talk Python's Mastodon Michael Kennedy's Mastodon