Need to add full working solutions for over 100 challenges in the Responsive Web Design section

With a quick search, I found there are currently 104 challenges in the Responsive Web Design section that are missing a full working solution. I wan to use this issue to help track who wants to work on adding these and when the PRs get merged.

Please make sure to remove the // solution required and make sure to surround the solutions using html instead of js (see below for example).

```html
solution code goes here
```

Make sure to add full code (original challenge seed plus any changes needed to pass challenge) for all challenges in a section. Please create a separate PR for each set of section challenges to make the review process faster. I have listed the sections below with the applicable challenge file paths. Before creating each PR, please test that all solutions pass by testing them locally using npm run test:curriculum.

Notes:

1. Only do the English files, because we can copy the solutions over to the other languages in one PR once all have been added to the English version.
2. Instead of write Closes #this-issue-number, just write Related to issue when creating the actual PR. We will close this issue once all solutions for all sections have been merged.

PR created:

• Applied Accessibility (16 challenges) - @rimij405
• Applied Visual Design (32 challenges) - @huyenltnguyen
• Basic CSS (24 challenges) - @Manish-Giri
• Basic HTML and HTML5 (12 challenges) - @Manish-Giri
• CSS Flexbox (13 challenges) - @moT01
• Responsive Web Design Principles (3 challenges) - @Manish-Giri

PR merged:

• Applied Accessibility
• Applied Visual Design
• Basic CSS
• Basic HTML and HTML5
• CSS Flexbox
• Responsive Web Design Principles

Applied Accessibility

• give-links-meaning-by-using-descriptive-link-text.english.md
• improve-accessibility-of-audio-content-with-the-audio-element.english.md
• improve-chart-accessibility-with-the-figure-element.english.md
• improve-form-field-accessibility-with-the-label-element.english.md
• improve-readability-with-high-contrast-text.english.md
• jump-straight-to-the-content-using-the-main-element.english.md
• know-when-alt-text-should-be-left-blank.english.md
• make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md
• make-links-navigable-with-html-access-keys.english.md
• make-screen-reader-navigation-easier-with-the-footer-landmark.english.md
• make-screen-reader-navigation-easier-with-the-header-landmark.english.md
• make-screen-reader-navigation-easier-with-the-nav-landmark.english.md
• use-tabindex-to-add-keyboard-focus-to-an-element.english.md
• use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.english.md
• wrap-content-in-the-article-element.english.md
• wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md

Applied Visual Design

• adjust-the-background-color-property-of-text.english.md
• adjust-the-color-of-various-elements-to-complementary-colors.english.md
• adjust-the-hue-of-a-color.english.md
• adjust-the-size-of-a-header-versus-a-paragraph-tag.english.md
• animate-elements-continually-using-an-infinite-animation-count.english.md
• animate-multiple-elements-at-variable-rates.english.md
• change-an-elements-relative-position.english.md
• change-animation-timing-with-keywords.english.md
• change-the-position-of-overlapping-elements-with-the-z-index-property.english.md
• create-a-horizontal-line-using-the-hr-element.english.md
• create-visual-balance-using-the-text-align-property.english.md
• decrease-the-opacity-of-an-element.english.md
• learn-about-complementary-colors.english.md
• learn-about-tertiary-colors.english.md
• learn-how-bezier-curves-work.english.md
• learn-how-the-css-keyframes-and-animation-properties-work.english.md
• lock-an-element-to-its-parent-with-absolute-positioning.english.md
• lock-an-element-to-the-browser-window-with-fixed-positioning.english.md
• make-a-css-heartbeat-using-an-infinite-animation-count.english.md
• make-motion-more-natural-using-a-bezier-curve.english.md
• move-a-relatively-positioned-element-with-css-offsets.english.md
• push-elements-left-or-right-with-the-float-property.english.md
• set-the-font-size-for-multiple-heading-elements.english.md
• set-the-font-size-of-paragraph-text.english.md
• set-the-font-weight-for-multiple-heading-elements.english.md
• set-the-line-height-of-paragraphs.english.md
• use-a-bezier-curve-to-move-a-graphic.english.md
• use-css-animation-to-change-the-hover-state-of-a-button.english.md
• use-the-em-tag-to-italicize-text.english.md
• use-the-strong-tag-to-make-text-bold.english.md
• use-the-text-transform-property-to-make-text-uppercase.english.md
• use-the-u-tag-to-underline-text.english.md

Basic CSS

• add-different-padding-to-each-side-of-an-element.english.md
• adjust-the-padding-of-an-element.english.md
• change-the-font-size-of-an-element.english.md
• give-a-background-color-to-a-div-element.english.md
• import-a-google-font.english.md
• inherit-styles-from-the-body-element.english.md
• make-circular-images-with-a-border-radius.english.md
• override-all-other-styles-by-using-important.english.md
• override-class-declarations-by-styling-id-attributes.english.md
• override-class-declarations-with-inline-styles.english.md
• override-styles-in-subsequent-css.english.md
• set-the-font-family-of-an-element.english.md
• set-the-id-of-an-element.english.md
• specify-how-fonts-should-degrade.english.md
• style-multiple-elements-with-a-css-class.english.md
• style-the-html-body-element.english.md
• understand-absolute-versus-relative-units.english.md
• use-a-css-class-to-style-an-element.english.md
• use-abbreviated-hex-code.english.md
• use-an-id-attribute-to-style-an-element.english.md
• use-attribute-selectors-to-style-elements.english.md
• use-hex-code-for-specific-colors.english.md
• use-hex-code-to-mix-colors.english.md
• use-rgb-values-to-color-elements.english.md

Basic HTML and HTML5

• add-placeholder-text-to-a-text-field.english.md
• create-a-set-of-checkboxes.english.md
• create-a-set-of-radio-buttons.english.md
• fill-in-the-blank-with-placeholder-text.english.md
• inform-with-the-paragraph-element.english.md
• introduction-to-html5-elements.english.md
• link-to-external-pages-with-anchor-elements.english.md
• make-dead-links-using-the-hash-symbol.english.md
• nest-an-anchor-element-within-a-paragraph.english.md
• nest-many-elements-within-a-single-div-element.english.md
• turn-an-image-into-a-link.english.md
• use-html5-to-require-a-field.english.md

CSS Flexbox

• align-elements-using-the-align-items-property.english.md
• align-elements-using-the-justify-content-property.english.md
• apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.english.md
• use-display-flex-to-position-two-boxes.english.md
• use-the-align-items-property-in-the-tweet-embed.english.md
• use-the-align-self-property.english.md
• use-the-flex-direction-property-to-make-a-column.english.md
• use-the-flex-direction-property-to-make-a-row.english.md
• use-the-flex-grow-property-to-expand-items.english.md
• use-the-flex-shorthand-property.english.md
• use-the-flex-shrink-property-to-shrink-items.english.md
• use-the-flex-wrap-property-to-wrap-a-row-or-column.english.md
• use-the-order-property-to-rearrange-items.english.md

Responsive Web Design Principles

• make-an-image-responsive.english.md
• use-a-retina-image-for-higher-resolution-displays.english.md
• make-typography-responsive.english.md

[moT01]

👍 @rimij405 - I will mark it down as yours. Let us know if you need anything

[RandellDawson]

Thanks to everyone involved in getting this issue closed. All PRs for this issue have been merged, so I am closing this issue.