freeCodeCamp/use-the-justify-content-property-in-the-tweet-embed.spanish.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.4 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 la propiedad justify-content en el Tweet Insertar

Description

El último desafío mostró un ejemplo de la propiedad justify-content . Para la inserción de tweets, esta propiedad se puede aplicar para alinear los elementos en el elemento .profile-name .

Instructions

Añadir la propiedad CSS justify-content de la cabecera del .profile-name del elemento y establezca el valor en cualquiera de las opciones desde el último desafío.

Tests

tests:
  - text: 'El elemento <code>.profile-name</code> debe tener la propiedad <code>.profile-name</code> <code>justify-content</code> establecida en cualquiera de estos valores: centro, inicio flexible, final flexible, espacio intermedio o espacio-alrededor.'
    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.4 KiB Raw Blame History