The following files are required for this lesson:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps:

  1. Download the demo-responsive-card-component.zip file and extract its contents to a folder named demo-responsive-card-component.
  2. The completed output should look like:
    1. Narrow Width:
      card-01
    2. Wide Width:
      card-02
  3. Modify your index.html with the code shown below:
    1. Update the <head> with links to the stylesheets:
      card-index-01
    2. Add the following div elements:
      card-index-02
    3. Add a <picture> element:
      card-index-03
    4. Add the following below the </picture> element:
      card-index-04
    5. Add the SVG below the paragraph (remember to copy the code from the SVG file)
    6. Below the flex container div, add the following (inside the paragraph tags, is a paragraph of lorem ipsum text):
      card-index-05
    7. Between the two paragraphs, add the thumbs-up-icon.svg (remember to copy the code from the SVG file):
      card-index-06
  4. Refresh your browser and scroll to see something like:
    card-03.jpg
    Question: What needs to be done next?
  5. Open your styles.css file and add the following style rules:
    1. Add some initial style rules:
      card-css-styles-01 </l1>
    2. Style the card:
      card-css-styles-02 </l1>
    3. Style the SVG:
      card-css-styles-03 </l1>
    4. Style the card footer contents:
      card-css-styles-04 </l1> </ol>
  6. Refresh your browser and use a wide width to see:
    card-04.jpg
    Question: Now what needs to be done?
  7. You now must add the following media query for the wide width of the browser:
    1. Add the following media query:
      card-css-styles-05 </l1> </ol>
  8. Refresh your browser to see the desired output at both narrow and wide browser widths.

Module Home

DMIT1530 Home