From 4783deafdc7b5d7174a2e3f743ae8bb60e92160f Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sun, 27 Jan 2019 08:26:15 +0530
Subject: [PATCH] Added solution to Adjust the Color of Various Elements to
 Complementary Colors (#34362)

* Update index.md

* Update index.md

* Update index.md
---
 .../index.md                                  | 59 +++++++++++++------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors/index.md b/guide/english/certifications/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors/index.md
index 57540f6a44..c0bad66395 100644
--- a/guide/english/certifications/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors/index.md
+++ b/guide/english/certifications/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors/index.md
@@ -3,28 +3,49 @@ title: Adjust the Color of Various Elements to Complementary Colors
 ---
 ## Adjust the Color of Various Elements to Complementary Colors
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Hint
 
-## Hints
-Add the following code on the .blue-box and the corresponding values for each padding.
-Then change 0px to corresponding values of paddings.
+Change the colours of the given elements to the ones given in the problem.
 
-Top - 40px
-Right - 20px
-Bottom - 20px
-Left - 40px
+### Solution
 
+```css
 <style>
-.blue-box {
-        padding-top: 0px;
-        padding-right: 0px;
-        padding-bottom: 0px;
-        padding-left: 0px;
+  body {
+    background-color: white;
+  }
+  header {
+  background-color: #09A7A1;
+  color: white;
+  padding: 0.25em;
 }
+  h2 {
+    color: #09A7A1;
+  }  
+  button {
+    background-color: #FF790E;
+  }
+  footer {
+    background-color: #09A7A1;
+    color: white;
+    padding: 0.5em;
+  }
 </style>
-  
-
-
-<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>.
-
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+<header>
+  <h1>Cooking with FCC!</h1>
+</header>
+<main>
+  <article>
+    <h2>Machine Learning in the Kitchen</h2>
+    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
+    <button>Sign Up</button>
+  </article>
+  <article>
+    <h2>Bisection Vegetable Chopping</h2>
+    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
+    <button>Sign Up</button>
+  </article>
+</main>
+<br>
+<footer>&copy; 2018 FCC Kitchen</footer>
+```