From the course: CSS: Advanced Layouts with Grid

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Overview of card markup

Overview of card markup - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

Overview of card markup

“

- [Instructor] We're starting at a fairly similar point as the previous chapter in terms of our index.html. After this opening body tag, we've got our skip link for accessibility, followed by our header. One difference from the previous chapter is that I've wrapped the cards in a div with this class of site, I've used that to set a max container width for the content, as well as add a little margin to the top and bottom of this container. And from here it should look familiar. We've got a div with a class of cards, plural, and then we go into each of our individual cards. Now for these, I've reduced the total number of cards to six. So for each of these individual cards with the class of card, we've got the featured image with an image, and then from there a div with a class of info. And inside of that we've got the name and title. This time we've just added a third paragraph with a class of description. With those exceptions, the remainder of the markup is what you've already seen…

Contents