From the course: Advanced Responsive Layouts with CSS Flexbox
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Marking up typical cards - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Marking up typical cards
- We have now moved on to Chapter Three, which has its own set of exercise files found under the Chapter Three folder, and in this movie, 03_02. In here, you will find the card-layout.html document that has all the markup for the example we're going to be working with. When you look at this markup, you'll see it looks a lot like the markup from our previous Menus example. In the body section, we start with a header, with a class "masthead", that's followed by a main area that contains this div that just centers the content on wider screens. Inside the div we have a section, with the class "cards" and this is the section that holds all the cards for us, and then within that section, we have a series of articles, each with a class card, and these are going to be the actual cards. The cards themselves are comprised of an anchor or a link that wraps everything, and within that link we have a figure tag that contains an image, and then we have a div with a class "card-content", that…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.