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

2.7 KiB
Raw Blame History

id title challengeType videoUrl localeTitle
587d781b367417b2b2512abb Create a Horizontal Line Using the hr Element 0 Создание горизонтальной линии с использованием элемента hr

Description

Вы можете использовать тег hr чтобы добавить горизонтальную линию по ширине содержащего ее элемента. Это можно использовать для определения изменения темы или для визуального разделения групп контента.

Instructions

Добавьте hr тег под h4 который содержит название карты. Заметка
В HTML hr является самозакрывающимся тегом и поэтому не требует отдельного закрывающего тега.

Tests

tests:
  - text: Ваш код должен добавить метку <code>hr</code> к разметке.
    testString: 'assert($("hr").length == 1, "Your code should add an <code>hr</code> tag to the markup.");'
  - text: Тег <code>hr</code> должен находиться между заголовком и абзацем.
    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