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.