From ed96df3be4a6bbf14c54adbfb5711ee32aa26b92 Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 19:37:39 +0530
Subject: [PATCH] Added solution to create visual balance challenge (#34304)

* Update index.md

* Added correct language

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

diff --git a/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property/index.md b/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property/index.md
index 1573a66d78..902d01c12b 100644
--- a/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property/index.md
+++ b/guide/english/certifications/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property/index.md
@@ -1,10 +1,63 @@
 ---
 title: Create Visual Balance Using the text-align Property
 ---
+
+![: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:")
+
 ## Create Visual Balance Using the text-align Property
 
-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint
 
-<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>.
+Use the `text-align` property.
 
-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+> _try to solve the problem now_
+
+## Spoiler Alert!
+
+![warning sign](//discourse-user-assets.s3.amazonaws.com/original/2X/2/2d6c412a50797771301e7ceabd554cef4edcd74d.gif)
+
+**Solution ahead!**
+
+The following lines of code solves the challenge:
+```html
+<style>
+  h4 {
+  text-align: center;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+
+  }
+  .fullCard {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+### Code Explanation:
+
+* The `h4{}` selects the `h4` element.
+* `text-align: center;` align the text in the `h4` to the center.
+* The `p{}` selects the `p` element.
+* `text-align: justify;` justifies the text in the `p`.