课程: Level Up: CSS Layout

免费学习该课程!

今天就开通帐号,24,700 门业界名师课程任您挑!

Responsive card

Responsive card

- [Instructor] Card based layouts are popular for an obvious reason. Presenting information on cards makes it easy for the visitor to understand each card holds a separate piece of information. In the first of several card based challenges, you'll make a basic responsive card. The card features an image, a heading, a paragraph and a button. The image must appear at the top of the card edge to edge. The text and button should have consistent whitespace, top, right, bottom and left. The card must have a visible border or other design feature demarking its outer edges. The card must have a defined maximum width and be centered horizontally and vertically. And to test, change the viewport width to ensure the contents of the card are always displayed within the card at all possible widths. Looking in the browser here, I want to show you one specific feature with this card. As I reduce or increase the content width, you'll…

内容