From dd9566e96ef2a5220c50082e9f4ad8f148ad8487 Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 19:40:54 +0530
Subject: [PATCH] Improved change the color using CSS guide article (#34284)

* Update index.md

* Update index.md
---
 .../change-the-color-of-text/index.md         | 50 ++++++++++++++++---
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/basic-css/change-the-color-of-text/index.md b/guide/english/certifications/responsive-web-design/basic-css/change-the-color-of-text/index.md
index b0f7f58884..834e8b7167 100644
--- a/guide/english/certifications/responsive-web-design/basic-css/change-the-color-of-text/index.md
+++ b/guide/english/certifications/responsive-web-design/basic-css/change-the-color-of-text/index.md
@@ -1,19 +1,53 @@
 ---
 title: Change the Color of Text
 ---
+
+![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use <a>**`Read-Search-Ask`**</a> if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:")
+
 ## Change the Color of Text
 
-You can change the color of text in CSS using the `color` property.
+## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1
 
-### EXAMPLE
+The color of text can be changed using the CSS `color` property.
 
-```
-color: red;
-```
+> _try to solve the problem now_
 
-## SOLUTION
+## Spoiler Alert!
 
-```
+![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
+
+**Solution ahead!**
+
+```html
 <h2 style="color: red;">CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
 ```
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->