fix(challenges): change definition of complementary colors

challenges/01-responsive-web-design/applied-visual-design.json

@@ -1518,7 +1518,7 @@
       "title": "Lock an Element to the Browser Window with Fixed Positioning",
       "description": [
         "The next layout scheme that CSS offers is the <code>fixed</code> position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.",
-        "One key difference from the <code>absolute</code> position is that the element won't move when the user scrolls.",
+        "One key difference between the <code>fixed</code> and <code>absolute</code> positions is that an element with a fixed position won't move when the user scrolls.",
         "<hr>",
         "The navigation bar in the code is labeled with an id of <code>navbar</code>. Change its <code>position</code> to <code>fixed</code>, and offset it 0 pixels from the <code>top</code> and 0 pixels from the <code>left</code>. Notice the (lack of) impact to the <code>h1</code> position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately."
       ],
@@ -1768,11 +1768,12 @@
         "Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.",
         "The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they \"cancel\" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.",
         "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 orange (#FFA500)</blockquote>",
+        "<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>",
+        "Note: This may be different that what many of us were taught in school, based on the outdated RYB color model with 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.",
         "<hr>",
-        "Change the <code>background-color</code> property of the <code>blue</code> and <code>orange</code> classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
+        "Change the <code>background-color</code> property of the <code>blue</code> and <code>yellow</code> classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
       ],
       "tests": [
         {
@@ -1783,9 +1784,9 @@
         },
         {
           "text":
-            "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.",
+            "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.",
           "testString":
-            "assert($('.orange').css('background-color') == 'rgb(255, 165, 0)', 'The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');"
+            "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.');"
         }
       ],
       "solutions": [],
@@ -1806,7 +1807,7 @@
             "  .blue {",
             "    background-color: #000000;",
             "  }",
-            "  .orange {",
+            "  .yellow {",
             "    background-color: #000000;",
             "  }",
             "  div {",
@@ -1816,7 +1817,7 @@
             "  }",
             "</style>",
             "<div class=\"blue\"></div>",
-            "<div class=\"orange\"></div>"
+            "<div class=\"yellow\"></div>"
           ],
           "head": [],
           "tail": []
@@ -3720,7 +3721,6 @@
             "<style>",
             "  .balls {",
             "    border-radius: 50%;",
-            "    top: 249px;",
             "    position: fixed;  ",
             "    width: 50px;",
             "    height: 50px;",