freeCodeCamp/use-the-justify-content-property-in-the-tweet-embed.arabic.md at 9706bc47ff7a17540b257f0e99079c684d728ce3

Files

ibqu 9706bc47ff Work on the space-evenly option for flexbox justify-content (#37797 )

This challenge requests setting the justify-content attribute to one of the possible values shown in the previous challenge. One of these values - space-evenly - doesn't actually work (at least for the English version).

In this commit I fix the space-evenly issues to some extent.

I cannot tick the box saying that all files changed are in the same world language. However, the changes made should be understandable in all languages.

There still is more to be done for languages other than English, like adding to the test text for Arabic, Portuguese, and Spanish, and adding descriptions for space-evenly in the previous challenge.

2019-11-21 12:46:46 -05:00

3.5 KiB

Raw Blame History

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
587d78ac367417b2b2512af7	Use the justify-content Property in the Tweet Embed	0		استخدم خاصية theify-content في تطبيق Tweet Tweet

Description

أظهر التحدي الأخير مثالاً على خاصية justify-content . لتضمين tweet ، يمكن تطبيق هذه الخاصية لمحاذاة العناصر في عنصر .profile-name ملف .profile-name .

Instructions

قم بإضافة خاصية CSS justify-content إلى عنوان اسم ملف .profile-name وتعيين القيمة إلى أي من الخيارات من التحدي الأخير.

Tests

tests:
  - text: 'يجب أن يكون لعنصر <code>.profile-name</code> خاصية ضبط <code>justify-content</code> المضبوطة على أي من هذه القيم: مركز ، أو بداية مرنة ، أو نهاية مرنة ، أو مسافة بينية ، أو مسافة.'
    testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, space-around, or space-evenly.");'

Challenge Seed

<style>
  body {
    font-family: Arial, sans-serif;
  }
  header, footer {
    display: flex;
    flex-direction: row;
  }
  header .profile-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 4px;
  }
  header .profile-name {
    display: flex;
    flex-direction: column;

    margin-left: 10px;
  }
  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 .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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>

Solution

// solution required

3.5 KiB Raw Blame History