freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-us...

2.3 KiB

id title challengeType videoUrl localeTitle
587d781b367417b2b2512abb Create a Horizontal Line Using the hr Element 0 Criar uma linha horizontal usando o elemento hr

Description

Você pode usar a tag hr para adicionar uma linha horizontal na largura de seu elemento contido. Isso pode ser usado para definir uma alteração no tópico ou para separar visualmente grupos de conteúdo.

Instructions

Adicione uma tag hr abaixo do h4 que contém o título do cartão. Nota
Em HTML, hr é uma tag de fechamento automático e, portanto, não precisa de uma tag de fechamento separada.

Tests

tests:
  - text: Seu código deve adicionar uma tag <code>hr</code> à marcação.
    testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
  - text: A tag <code>hr</code> deve estar entre o título e o parágrafo.
    testString: 'assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi), "The <code>hr</code> tag should come between the title and the paragraph.");'

Challenge Seed

<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><s>Google</s>Alphabet</h4>

      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Solution

// solution required