4.2 HTML: Portfolio Area and Footer
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.2 HTML: Portfolio Area and Footer
Welcome back. In the previous lesson, I started writing the HTML for our homepage. This is what I got so far. Now it's time for the portfolio area. So, I'm gonna start with a brand new section here called recent projects section. And then, all of my content is placed within the grid, so I'll start with a class of container and also a class of main content. And that secondary class will help me style the content little later on. Now, I have this section header right here with recent projects and a link. So I'm going to do a header with a class of section, oops, section header, and this will contain h2, which says a recent project, and then a paragraph with an anchor tag. Anchor tag to portfolio HTML and this will say, see all projects. And of course, that right arrow which you can render using this. So basically, it stands for right arrow. Let's have a look. Cool. Next up, the actual portfolio entries. Now, these are organized into three columns. Which means each portfolio item will have four grid columns. So, what I'm gonna do is start with a div class, row, and then, a div class of col lg four, and inside, I'm gonna do another div with a class of portfolio thumb, and this is necessary because the styling that we have to do here is a bit more complicated. Now, obviously, we have the image first. So, a, which goes to portfolio HTML, and the image goes to images slash portfolio thumb one dot JPG. And the alt, don't forget about this, portfolio image. Cool. Now, we also have this content that only appears on hover. So, we'll create a separate div below the image, and it's gonna say hover-contents, and we'll do an h three plus a small paragraph. And the h3 is gonna say, this is the project name. And this is gonna see Click for, what was the click for, details. Let's see it. There's the image, and there's the hover content. Great. Now, duplicate this two more times, and then duplicate the entire row [BLANK_AUDIO] Once. And I only have like, five images, so I'm gonna delete the last the last column. Now, I'm gonna, just gonna quickly change the image numbers here. Five. Okay, refresh, and there it is. One, two, three, four and five. Okay, great. Now, since we have some more time left on this lesson, I'll go ahead and do the footer. So the footer, if we scroll down, has basically two sections, this subscribe section, and the copyright area. So I'm gonna start, let's see, footer, I'm gonna start with third tag that will have a class of main-footer, and also center-content, and this will help with centering the text and the other elements inside that that box. Okay, next, let's do this icon here, and notice, this box has the same style as the one used in the slider. So, I'm gonna use the same class name, which is fancy box. But I'm gonna do it directly in the i element. So, i with a class of fancy box, fancy yellow, and then it's fa and fa envelope, okay? And that should take care of this bit right here. Next is the subscribe section. So div with the class of subscribe section, which will have a container to place the content within the grid, and then a paragraph here, which isn't full width, so be careful about this. I'm gonna put a paragraph with a class of narrow p, or narrow paragraph. Copy the text from here, paste it, and then we have a form. So, form action, I'm just gonna put a hash tag there, make sure you include the method, post, and I'm also going to give it an ID of footer subscribe. Now, inside a form there are two elements, an input type email and an input type submit. So, input type email. I'm going to give it an ID of subscribe email, a name of subscribe email, and also, a place holder of your email address. And then, it's the input type submit. I'm going to give it a class of btn because it has the same class as the button from the slider, and then the value which will represent the text inside the button. So, value's gonna say subscribe. We exit the subscribe section div because this will represent this full width div with a dark background, and we're gonna say again, div class container because we have some additional elements, like the social list, which will be in UL with a class of list inline. This is a style that we'll have to create and also social, and inside we're gonna have a list item times two, which will include an i with a class of fa and fa square. I'm gonna do this, and you'll see why in just a little bit. So, for the h ref, I'm just gonna put a hashtag, and in here I'm gonna have Twitter and Facebook. Finally, a paragraph with this text right here. Replace this with copy, and that should do it. Let's let's see the page. Refresh. Okay, so this is the form right here. This will be the list of icons, social, and this is the copyright information. Okay, well, that was that was pretty fast. You can see the advantages of using a proper code editor and proper plug ins. For example, you saw me using multiple cursors there so, basically, you select a text and you press command d, and it selects matching texts from from your page, and then you can edit everything you selected at once, which is actually pretty cool. And you also saw me write this container which Includes an UL with a class of test, for example, which includes five list items, each one with an anchor tag, and when you expand that, you get the full HTML. Now, this is a plug in called Ammit. You'll find the link in the lesson notes. Okay, that's about it for, this lesson. Next time, I'll take care of the other two pages, the portfolio and the about page.