freeCodeCamp/use-the-justify-content-property-in-the-tweet-embed.portuguese.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.3 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		Use a propriedade justify-content no Tweet Incorporar

Description

O último desafio mostrou um exemplo da propriedade justify-content . Para a incorporação do tweet, essa propriedade pode ser aplicada para alinhar os itens no elemento .profile-name .

Instructions

Adicione a propriedade CSS justify-content ao elemento .profile-name do cabeçalho e defina o valor para qualquer uma das opções do último desafio.

Tests

tests:
  - text: 'O elemento <code>.profile-name</code> deve ter a propriedade <code>justify-content</code> definida para qualquer um desses valores: center, flex-start, flex-end, espaço-entre ou espaço-around.'
    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.3 KiB Raw Blame History