Variation 2: Alice's layout

- Variation number two, Alice has done this style of layout where it has one image, one title, one description. Now if we look at ours at the moment, we actually have grouped things in twos. So one and two. What ours has done this group things in three, one, two, three. So our layout is slightly different. Now what I'm gonna do, is make this as a separate layout completely, just so we can remove it if we want to.

So what I'm gonna do is go back to my index.HTML, and style and actually write this out as content. So, between my last project and my photo , what I'm going to do, is add a new section in here, and the new section, I'm going to give it a class of what? Well, I'm going to call this one Alice dash layout, because it's Alice's layout, we'll call it something like that. Now what Alice has done is group things in three.

At the moment. If we look at both, this is in two. So in my section we project, there's one box and then two box directly inside of it. So what we want to do is have three boxes. I want my image, my title, and then a description. So I'm going to put in my image. I'm just going to pick one of the images in here, which is gonna be, let's do lost and found. Let's say, there we go. The next thing I'm gonna put inside here, is my H two which is lost and found.

There we go. I'm just gonna remove the space, just to make it a little bit easier to read. And then the last one is, I wanna group my description together. so I could just do it as the P tag, But what I'm gonna do is in case I want multiple paragraphs in here, I'm just going to put it in a div tag. So in here I've got a P tag with some text. So I'm gonna just take some texts from here, and paste it in here.

So I could put multiple paragraphs in this area. So Alice has an image, a H two and a div to lay out. Now at the moment, if we look at the page right now, we've got to my portfolio, it should look like a bit of a mess. One, two, three. It's trying to fit into the columns, but what we want to do, is have this one span 12, this one being a certain place, and this won't be in a certain place as well. So what we're gonna do is, we gonna lay this out in our style CSS.

I'm gonna have a section. Gonna do just before this photos. So just before section contact finishes, I'm going to do section dot Alice dash layout. So it's gone happy. There should just be one in here right now, and here, the first thing I wanna do is pick the image. What do you want to do with the image? Well, I want this grid column, to be starting at one, and spanning twelve instead of the whole width of this.

So let's see it right now. So if I scroll down the page, we show that this big image with one and two. So if these don't fit in, it will just go onto the next line down. So now what I can do, is just lay these out in the same way. So lost and found is my H two. I'm gonna lay this out. Section dot Alice, layout space H two. So picking the H two inside this section, with the label Alice layout.

This one is gonna have grid column, and this one's going to be at one as well, spun four let's say, let's see how four looks, There we go. Let's see what she's done. One, two, three. So she is kind of done six and six. Maybe we'll do the same, but again we can play around with this, and see what it looks like. Now I want to do the last one, which is gonna be my div tag.

I've got one, two, three things in here. So here what we're going to do is, just lay this out. So in my section with the class, or the label of Alice dash layout, I have a div tag in here, the grid column. It's gonnabe starting at seven let's say, halfway across and spun six. So now what I'll, see is Alice's layout, something that looks like this. I can put more content in here because this is a dev tag.

It's just holding generic content. I could put more paragraphs in here. If I wanna add more in the style. I would just lay out my structure, to be slightly different in this way.