Variation 9: linking to projects

- [Rik] The last variation we're going to talk about is applicable to all of these designs. So what happens if I want to click through and go to a different page? So at the moment I've got an application on the page, but maybe what happens if I want a lost and found page for example? So what we're gonna do, is we're gonna focus on one area of the site, let's say this lost and found grid we're gonna add things into.

So the way that we do this, is we switch the tags into a A tag. So at the moment in our grid layout, we have div tags being part of the column. I'm gonna switch this to an A tag on here and here. And an A tag here and here. And an A tag here and here. And an A tag here and here. So what I've done is changed all my div tags in my layout, my grid layout, to just be A tags. Now at the moment what will happen is this will break the layout of course, and the reason for that is we don't have the layout on A tags, we have it on the div tag.

We can see this in style dot css if we go and find it, we're gonna find in our grid layout, where is it? This one is grid layout div. Gonna change that to grid layout A. Nice and happy again. So what we'll see now is this goes back to what it should do. Now there is some issues, we have some linked styles in here by default. At the moment we need to add different pages. So for instance if I want the lost and found page, I'd add the new page called lost and found.

And I just linked to it. I'm not gonna do it right now but you can kind of fill in the gaps. So here, if it was lost and found, I'd just do href equals lost and found dot html. And this will link up to that page when I click it. So here, as I can hover, you can see this is gonna try and go to lost and found. There is some style on here that I wanna fix, so that A tag on hover, we might not want the border underneath.

So here what we're gonna say on our style is not only this A, but underneath that, we're gonna say grid, sorry, section dot grid layout A dot hover, we're gonna get rid of this border bottom, it's gonna be zero, or none. We're not gonna have one. So by default what we'll see now is this should go away. There it is. Now this also has some margin by default, all A tags do, so we're gonna get rid of that margin as well.

Now this margin is on by default, not just on hover, so I'm gonna get rid of the margin, zero, zero, zero, zero, no margin at all on here. So this again aligns with this layout. You can see here, this aligns. It fits in the grid. And also, we have this hover state. Now you might notice that when we hover back and forth, this kind of layout kind of pops in. So this border is both, can transition on and off. So again I'm just gonna say, on here, the border on the bottom is none.

So we're just gonna get rid of that little flick, there it is, who can see it still retains this color that goes in? So here what we've done is we've added a link into here. All we need to do next is add a lost and found dot html page and do the content that we want. Maybe wanna kind of do things like we did on the about page, so for a different kind of layout, so section class individual projects, or about projects, or lost and found and style it up in this way.

So we have a lot of control now. We can have as many pages in one. All the pages can look completely different as well. It's totally up to you. If you want them to be the same, you just use the same classes. So just like we have the same header, we could have the same section class about. So it's up to you how you want to style this up. But this is how we add extra pages.