From 1c919b64a9cff976a1c0bee030b87f9ed7914c8a Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 19:24:05 +0530
Subject: [PATCH] Added solution to Create Visual Direction by Fading an
 Element from Left to Right challenge (#34509)

* Update index.md

* Update index.md
---
 .../index.md                                  | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right/index.md b/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right/index.md
index 09c76cf144..4e42c73ec3 100644
--- a/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right/index.md
+++ b/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right/index.md
@@ -3,8 +3,35 @@ title: Create Visual Direction by Fading an Element from Left to Right
 ---
 ## Create Visual Direction by Fading an Element from Left to Right
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Solution
 
-<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>.
+```html
+<style>
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+  #ball {
+    width: 70px;
+    height: 70px;
+    margin: 50px auto;
+    position: fixed;
+    left: 20%;
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    animation-name: fade;
+    animation-duration: 3s;
+  }
+
+  @keyframes fade {
+    50% {
+      left: 60%;
+      opacity: 0.1;
+    }
+  }
+
+</style>
+
+<div id="ball"></div>
+```