fix: updated the note sections for responsive web design english (#35528)

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md

@@ -11,7 +11,7 @@ CSS treats each HTML element as its own box, which is usually referred to as the
 When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
 <blockquote>p {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;bottom: 10px;<br>}</blockquote>
 Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
-<strong>Note</strong><br>Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
+<strong>Note:</strong> Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md

@@ -13,7 +13,7 @@ You can use the <code>hr</code> tag to add a horizontal line across the width of
 ## Instructions
 <section id='instructions'>
 Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.
-<strong>Note</strong><br>In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
+<strong>Note:</strong> In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
 </section>
 
 ## Tests

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md

@@ -13,7 +13,7 @@ Some examples of complementary colors with their hex codes are:
 <blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>
 This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read <a href='https://en.wikipedia.org/wiki/Color_model' target='_blank'>here</a> for more information on this complex subject.
 There are many color picking tools available online that have an option to find the complement of a color.
-<strong>Note</strong><br>For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
+<strong>Note:</strong> For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md

@@ -11,7 +11,7 @@ The <code>transform</code> property has a variety of functions that lets you sca
 Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
 <blockquote>p:hover {<br>&nbsp;&nbsp;transform: scale(2.1);<br>}</blockquote>
    
-  <strong>NOTE:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
+  <strong>Note:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md

@@ -13,7 +13,7 @@ To underline text, you can use the <code>u</code> tag. This is often used to sig
 ## Instructions
 <section id='instructions'>
 Wrap the <code>u</code> tag only around the text "Ph.D. students".
-<strong>Note</strong><br>Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
+<strong>Note:</strong> Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
 </section>
 
 ## Tests