The Profile Section and Image Gallery

Now we're finished with a header section, 0:00 let's just indent this properly and remove this extra space. 0:03 And the next section is the featured section, but 0:09 we're actually gonna leave this blank. 0:12 It's just gonna be a large image or block of color that we'll add in later. 0:16 So, let's move on to this profile area. 0:20 I'll type this out and then explain it. 0:24 So let's open up this section, and 0:28 create a div with the class col, or 0:32 column, lg for large -4. 0:36 So at the largest responsive size, this will take up 4 columns. 0:40 And then we'll also at the class profile-info 0:47 to help us identify it later if we need to. 0:52 And then I'm going to add an image inside of this div with the class float-left. 0:57 So that the image is floated to the left of a name and location text we'll add. 1:04 Then the source will be this image, nickpettit.jpg, that I just added. 1:13 I'll include this with your workspace, 1:19 but feel free to add your own image if you'd like. 1:21 So that's just a picture of me. 1:25 And then you should always include some alternate text. 1:29 I'll say this is a Photograph, Of Nick Pettit. 1:33 And then we'll close that image. 1:40 Then right after the image, we'll use an h2 for 1:43 the name, And feel free to type your own name there. 1:47 And then a paragraph with the class, text-muted. 1:52 That's a bootstrap class that we'll style this text. 1:58 And I'll put in my location of Orlando, Florida. 2:02 But feel free to put in your own location there. 2:05 So, to review this div is going to be 4 columns across, 2:10 and inside, we have a profile picture. 2:15 And an h2 for a name, and a paragraph for the persons location. 2:20 So right after this div, Let's 2:28 create another div with the class col-lg-5, so 2:33 that will be 5 columns wide. 2:38 And inside of there, We'll type 2:41 a short paragraph about myself, feel free to write about you. 2:45 We'll say Hi, my name is Nick! 2:51 I'm a teacher at Treehouse and 2:55 I enjoy designing websites. 2:59 So like I said, this will be 5 columns across and 3:06 it will hold a short bio, or other information about the designer. 3:10 And then finally, we'll add one more div, 3:15 With the class col-lg-3, 3:20 Inside there, and create a paragraph and an anchor element with, 3:28 The class, btn for button. 3:36 btn-block, or a block-style button which will fill up the width of the container. 3:40 And then btn-primary, or 3:49 button primary which will give it a color of blue. 3:52 And then after that, add an href and we don't need that to point anywhere, so 3:59 we will just put a hash. 4:04 And then inside, we'll make this the Send Message button. 4:06 So we have 3 columns here, which take up 4, 5, and 3 columns across. 4:13 And that will only occur if we're at the largest responsive size. 4:21 Otherwise, this will collapse into a column that's just one column 4:26 wide with all of these elements stacked on top of one another. 4:31 So let's save this and take a look in the browser to see where we're at. 4:36 Right now, this looks pretty messy because nothing is sized properly. 4:44 The profile image dominates the page. 4:49 And the featured image is nonexistent because it doesn't have any height or 4:52 content inside, and so forth. 4:57 We need to add CSS to make all the elements proportional. 5:01 However at this point, we're still just concerned with the basic HTML elements. 5:05 The CSS will come after the remaining content is in place, so 5:09 let's work on the gallery now. 5:13 I'll switch back to our workspace, type this out and then explain it. 5:16 So inside of the gallery, we're just going to create a bunch of links. 5:21 So I'll create an anchor element that goes no where, and inside I'll create an image. 5:26 And this image will also go nowhere. 5:35 So we'll just have a hash for the source and 5:40 href, and we'll create a whole bunch of these. 5:43 Here's one, two, three, four, 5:47 five, six, seven, eight, nine. 5:51 So here, we've just created this container in gallery section, and 5:56 there's links with images inside. 6:01 If we save this and look at it in the browser, 6:04 It won't look like anything at all yet, because the images are blank and 6:11 the links are in line, so they also appear blank. 6:16 In the next video, we'll start sizing some of these content areas so 6:20 that they're proportional to one another and actually take up some space. 6:24