Теория
Теория

Испытание: карточка курса

В этом испытании вам нужно с нуля сверстать карточку курса. Используйте ту HTML-разметку, которую считаете нужной.

Адрес картинки-спрайта и подсказка есть в комментарии в CSS-коде. А вот используемые цвета:

#1abc9c
#16a085

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">
      <h1>Курс «Фоны»</h1>
      <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
      <a class="social social-fb" href="https://vk.com/htmlacademy"></a>
      <a class="social social-tw" href="https://www.facebook.com/htmlacademy"></a>
      <a class="social social-gp" href="https://twitter.com/htmlacademy_ru"></a>
    </div>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 280px;
  padding-top: 20px;
  padding-left: 20px;

  font-size: 14px;
  line-height: 1.2;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

.card {
  width: 200px;
  padding: 20px;

  color: white;

  background-color: #1abc9c;
}

.card h1 {
  margin: 0;
  margin-bottom: 20px;
  padding: 0;

  font-weight: normal;
  font-size: 20px;
}

.card p {
  margin: 10px 0;
  margin-bottom: 25px;
}

.social {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;

  vertical-align: middle;

  background: #16a085 url("social-challenge.png") no-repeat 0 0;
}

.social-fb {
  background-position: 0 0;
}

.social-tw {
  background-position: -30px 0;
}

.social-gp {
  background-position: -60px 0;
}

Минимальный вид табов

index.html

HTML

Испытание: карточка курса

Притормози, дружище