From 5bc2ceac97fb9f5712671da26959514b7faf5a5f Mon Sep 17 00:00:00 2001
From: The Coding Aviator <34807532+thecodingaviator@users.noreply.github.com>
Date: Sat, 9 Mar 2019 20:13:16 +0530
Subject: [PATCH] Added solution to Add Flex Superpowers to the Tweet Embed
 challenge (#34542)

* Update index.md

* Add full solution
---
 .../index.md                                  | 103 +++++++++++++++---
 1 file changed, 87 insertions(+), 16 deletions(-)

diff --git a/guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md b/guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md
index 1d692d8a2e..f2737ab664 100644
--- a/guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md
+++ b/guide/english/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md
@@ -3,28 +3,99 @@ title: Add Flex Superpowers to the Tweet Embed
 ---
 ## Add Flex Superpowers to the Tweet Embed
 
-Building on the <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md' target='_blank' rel='nofollow'>previous challenge</a>, you will need to add the property to the right selectors. Here the trick is identifying the right selector then all you need to add the <i>display: flex;</i> property.
+Building on the previous challenge, you will need to add the property to the right selectors. Here the trick is identifying the right selector then all you need to add the *display: flex;* property.
 
 The header will ensure the picture, name, handle, and follow buttons get repositioned horizonatally.
 
-```CSS
-header {
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header {
+    display: flex;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
     display: flex;
-}
-```
-Aligns the name and handle to look as one sentence.
-```CSS
-header .profile-name {
-    display:flex;
     margin-left: 10px;
   }
-```
-Adding the property to the follow button along with the margin will center the button to the right size.
-
-```CSS
-header .follow-btn {
-    display:flex;
+  header .follow-btn {
+    display: flex;
     margin: 0 0 0 auto;
   }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer {
+    display: flex;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+
 ```
-The same idea is used on the footer elements.