Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

4.11 CSS: Main Content

Hey, welcome back. In this lesson, I'll style the content area from all three pages. I'll start with this one from the home page which contains a list of recent projects. So jumping back to the code editor I'm gonna import main.less. So the main content here starts with a div with a class of main-content. So let's put that and the only style that I have to do here really is a margin-bottom, apply the theme margin. So let's see margin-bottom, theme-margin. And this will create the proper distance between the main content and the footer. Next let's see about this header here. So, we have a header with a class of section-header and actually since it needs to be center aligned. I'm gonna add the class of center-content. So, section-header. [BLANK_AUDIO] The only thing that I'm gonna add here is a margin-bottom of baseline times 2 so that it will be distanced from the content below it. All right, now, let's move on to the portfolio area. So, we have each portfolio item is wrapped in this div, portfolio-thumb. And it contains an image and a div with a class of hover-contents, which should only be shown when you hover on that image. So you gonna start with this portfolio-thumb. Let's see about the border, I need to add on these images and I also have a 3 pixel gap here. So, I'm gonna target each image, I'm gonna say border. I'm gonna do 3 pixels, solid, white and then for the outer stroke, the dark one, I'm gonna use a box shadow. So let's do the prefix first -webkit-box-shadow. I'm gonna do 0 0 0 and 1 pixel for spread and the color is color-border. And that will apply an even border around the element. And also the white gap is given by my actual border which is this one. So let's apply the box-shadow without the prefix. Cool, now let's see about the hover contents. So hover-contents, the idea here is when I hover on an image, I get this text. And a very easy way to do this is to hide the actual contents under the image give them this dark background. And on hover, I need to set a very low opacity for the actual image. So we, we get like a see through effect. So let's start with this background-color. I'm gonna set it to pure black and then the text color I'm gonna set it to white and then I'm gonna align the text to the center. Good, let's give it some padding. Let's do a baseline times 2. [BLANK_AUDIO] Okay, pretty good. Now let's target the heading which is in h3. So h3, we need to give it this yellow color and also distance it from the text below it. So, I'm gonna say color it's gonna be color-button-1. That's the yellow and also margin-bottom let's do like a baseline times 2. Okay, next, let's target this paragraph here and let's see the font size for this is 14 pixels. So I'm gonna do font size 14 divided by 18 that's about 0.75ems and let's do uppercase. Okay, and let's do a letter spacing of about 1 pixel. Okay, perfect. Now, I need to hide this background below the image. So I can do that using position absolute. So I'm gonna put it right here, position absolute and I'm going to align it at the very top. Okay now, I'm gonna set position relative to the portfolio-thumb because that is the parent. Okay, and then I'm gonna set the where is it hover-contents. I'm gonna set the width to 100% and also the height to 100%. Okay, so now this hover content is the same width and height as my image. Now for hiding this content under the image all I gotta do is set a zed index of about 100 to my image. And also for it to work, I need to set position to relative. Okay, so now the content is tucked away nicely under my image. Now all I have to do to show it is set hover state for my image. So, on hover I'm simply gonna change it's opacity to 0.2 or 20% and now when I hover you can see the content behind the image. Now we need some distance between these portfolio thumbs, so right here I'm gonna say margin-bottom baseline. Okay, so that is the main content for the homepage. Let's see on the portfolio. Let's see, I think we needed, yeah. We need bold here on the project description. So let's open our portfolio HTML. Page banner, fancy-box, portfolio item. Div with a class of project-description. So I'm gonna put that over here and I'm gonna target the h2, I think. H2, project name, yes. So h2, simply gonna say font-weight bold. Okay, nice and now it's the project navigation I need to worry about. So let's see the PSD first. Project-nav, first of all it's italic and they're positioned on each side on the left and on right. And let's see about the font size and that's 18, okay. Cool, so the portfolio let's see, project-nav and then project-nav-left and project-nav-right. So project-nav, I'm gonna do font-style italic, I like that. And then I'm gonna target the project-nav-right and set float to right, just like that. And that's basically it for the portfolio. On the about page no change is needed actually because all of the styles that I wrote so far apply very well to this. Okay, so that was the main content. The only thing left to do here is the footer and that's what I'll do in the next video.

Back to the top