From 58b636eb35748334d9d3d04ba4d0fd6e80ce69d8 Mon Sep 17 00:00:00 2001
From: Kevin Trang <44285042+KevinatorTrainer5@users.noreply.github.com>
Date: Wed, 27 Mar 2019 06:40:12 +1100
Subject: [PATCH] Added example, explanation and solution to "Use Hex Code to
 Mix Colors" (#34658)

* Added example, explanation and solution to "Use Hex Code to Mix Colors"

* Remove problem

* Remove redundancy

* Update index.md
---
 .../use-hex-code-to-mix-colors/index.md       | 62 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 3 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md
index 6bbfee9af0..f2b71328f4 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md
@@ -3,8 +3,64 @@ title: Use Hex Code to Mix Colors
 ---
 ## Use Hex Code to Mix Colors
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-hex-code-to-mix-colors/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## Hint
+In order to change the color of a class within the style element, we simply replace the color itself with the hexcode shown below.
 
-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+### Before
+```html
+<style>
+  .ClassName {
+    color: black;
+}
+</style>
+```
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+### After
+```html
+<style>
+  .ClassName {
+    color: #FFFFFF; /*this represents the hex code of the colour, white*/
+}
+</style>
+```
+
+**Note:** In the class,`.ClassName`, within the `<style>` element, the color has changed from a color of `black` into the hexcode, `#FFFFFF`, which shows that the color of the class `.ClassName` has changed from black to white in the `<style>` element.
+
+## Solution
+From the Problem above, we need to change `black` from the `color` element in the `<style>` element, into the given hex codes from the table based on the colour that the class needs. For example, the class `.red-text` clearly needs their `color` element to be changed from `black` into a red colour, where the table gives us the hex code of `#FF0000` for the colour red, which is shown below.
+
+### Before changing `color` of class `.red-text`
+```html
+<style>
+  .red-text {
+    color: black;
+}
+</style>
+```
+
+### After changing `color` of class `.red-text`
+```html
+<style>
+.red-text {
+  color: #FF0000; /* Color has changed into red when we used this hex code from the table*/
+}
+</style>
+```
+
+### Final Solution
+After changing `color` of other classes, the final solution reveals that we have changed the `color` element of these text classes with hex codes shown below:
+```html
+<style>
+  .red-text {
+    color: #FF0000;
+  }
+  .green-text {
+    color: #00FF00;
+  }
+  .dodger-blue-text {
+    color: #1E90FF;
+  }
+  .orange-text {
+    color: #FFA500;
+  }
+</style>