4.1 Setting Up an Article Listing

Welcome back to Power Up Your Portfolio with Bootstrap. I'm your instructor, Cory Simmons. In our last lesson, we finished up our homepage design with a nice footer and learned how to use glyphicons in the process. In this lesson, we'll break ground on our blog page by adding a post listing. First things first. Let's create a new file in the root of ourproject called blog.html. Now let's copy and paste everything from index dot html to this page and remove the portfolio section from it. [BLANK_AUDIO] Now let's fix our jumbotron to indicate the user has arrived on a new page by simply changing the text to something like. My thoughts on and off the web. And change the lead paragraph to read, Web-design, development and parent-teacher conferences. [BLANK_AUDIO] Create a container-fluid div, and inside that put a row. And inside of that, put a col-md-8 and give that column a class of post. This is where we will host our blog excerpts. Inside of this div, let's create another row. Remember, we don't need to make another container for it. This is just how you nest columns and bootstrap. Inside of this row, let's create a div with the classes of post and col-md-6 to signify it's a single post. Inside of this column, let's create a thumbnail. Let's create a dead anchor with a image inside of it. And again, let's just use a place holder image for now and remember to assign the helper class of image dash responsive to it. As a sibling to the anchor, create an article and give it the class, post-exert. Inside of that article, create a header and put an anchor inside of it. Inside of the anchor, put an H3 tag with some dummy text in it. Within that header, and as a sibling that anchor we just created, add a paragraph with the class of post-meta. And inside of that we'll put I author within the dead link on span 8. [BLANK_AUDIO] Now back out of that a bit and create a paragraph with some Lorem Ipsum. Now we can copy that post a few times to get, and get to work styling it. [BLANK_AUDIO] Since we're not using Bootstrap components for this area, we won't need to go through the trouble of inspecting and overriding anything. So just start writing out classes as you normally would. First we wanna make sure that if content appears below the article listing that it won't be touching the article listing. So we'll say post margin bottom three rims, we wanna do the same thing for each post so we'll say post margin bottom one rim. Next, we'll give the same treatment to our images as we did in our portfolio by setting post-image border radius, 4 pixels, WebKit filter, grayscale 100%, filter, grayscale 100%. Then we want to push the text off the bottom of these images. So add a margin bottom, 1 rem, to that selector as well. And when someone hovers over the entire individual post we want to lighten up the image. So we'll say post, hover, image, webkit filter, grayscale 50%, filter, grayscale 50%. Let's pull those meta tags up a bit by setting a margin bottom of 2, of 0.25 rims to a post excerpt header H3 selector. Let's make sure all of our anchors that could appear in these excerpts or anywhere on th sit is a nice blue color. So just a color. So just a, color, 4e9af3. And now to override that in our excerpt headers we'll say post excerpt, header a, color f5f5f5. Let's also remove the underline that occurs when someone hovers over our header tag with post excerpt. Header, a hover, text declaration none. And now let's set the font color of the post excerpt, post meta class to 838383. Same goes for anchors inside of that, except let's give them a border bottom of one pixel, dotted, 111 as well. [BLANK_AUDIO] And when you hover over that anchor lets lighten the font and remove the border. [BLANK_AUDIO] Save and refresh and contract your viewport. Now our blog page has some nice excerpts on it. But there is a conveniently empty space to the right of it. In the next lesson, we will put a sidebar in there and learn about source ordering in bootstrap.