Now we're finished with a header section,

let's just indent this properly and remove this extra space.

And the next section is the featured section, but

we're actually gonna leave this blank.

It's just gonna be a large image or block of color that we'll add in later.

So, let's move on to this profile area.

I'll type this out and then explain it.

So let's open up this section, and

create a div with the class col, or

column, lg for large -4.

So at the largest responsive size, this will take up 4 columns.

And then we'll also at the class profile-info

to help us identify it later if we need to.

And then I'm going to add an image inside of this div with the class float-left.

So that the image is floated to the left of a name and location text we'll add.

Then the source will be this image, nickpettit.jpg, that I just added.

I'll include this with your workspace,

but feel free to add your own image if you'd like.

So that's just a picture of me.

And then you should always include some alternate text.

I'll say this is a Photograph, Of Nick Pettit.

And then we'll close that image.

Then right after the image, we'll use an h2 for

the name, And feel free to type your own name there.

And then a paragraph with the class, text-muted.

That's a bootstrap class that we'll style this text.

And I'll put in my location of Orlando, Florida.

But feel free to put in your own location there.

So, to review this div is going to be 4 columns across,

and inside, we have a profile picture.

And an h2 for a name, and a paragraph for the persons location.

So right after this div, Let's

create another div with the class col-lg-5, so

that will be 5 columns wide.

And inside of there, We'll type

a short paragraph about myself, feel free to write about you.

We'll say Hi, my name is Nick!

I'm a teacher at Treehouse and

I enjoy designing websites.

So like I said, this will be 5 columns across and

it will hold a short bio, or other information about the designer.

And then finally, we'll add one more div,

With the class col-lg-3,

Inside there, and create a paragraph and an anchor element with,

The class, btn for button.

btn-block, or a block-style button which will fill up the width of the container.

And then btn-primary, or

button primary which will give it a color of blue.

And then after that, add an href and we don't need that to point anywhere, so

we will just put a hash.

And then inside, we'll make this the Send Message button.

So we have 3 columns here, which take up 4, 5, and 3 columns across.

And that will only occur if we're at the largest responsive size.

Otherwise, this will collapse into a column that's just one column

wide with all of these elements stacked on top of one another.

So let's save this and take a look in the browser to see where we're at.

Right now, this looks pretty messy because nothing is sized properly.

The profile image dominates the page.

And the featured image is nonexistent because it doesn't have any height or

content inside, and so forth.

We need to add CSS to make all the elements proportional.

However at this point, we're still just concerned with the basic HTML elements.

The CSS will come after the remaining content is in place, so

let's work on the gallery now.

I'll switch back to our workspace, type this out and then explain it.

So inside of the gallery, we're just going to create a bunch of links.

So I'll create an anchor element that goes no where, and inside I'll create an image.

And this image will also go nowhere.

So we'll just have a hash for the source and

href, and we'll create a whole bunch of these.

Here's one, two, three, four,

five, six, seven, eight, nine.

So here, we've just created this container in gallery section, and

there's links with images inside.

If we save this and look at it in the browser,

It won't look like anything at all yet, because the images are blank and

the links are in line, so they also appear blank.

In the next video, we'll start sizing some of these content areas so

that they're proportional to one another and actually take up some space.