Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz
Created August 27, 2024 09:40
Show Gist options
  • Save kianurivzzz/ede88c43cc0602eb118109baa0587613 to your computer and use it in GitHub Desktop.
Save kianurivzzz/ede88c43cc0602eb118109baa0587613 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/app.css">
<title>Цитата Михаила Булгакова</title>
</head>
<body>
<blockquote class="quote">
<p>— Достоевский умер, — сказала гражданка, но как-то не очень уверенно.</p>
<p>— Протестую! — горячо воскликнул Бегемот. — Достоевский бессмертен!</p>
<cite class="quote-author">Михаил Булгаков, «Мастер и Маргарита»</cite>
</blockquote>
</body>
</html>
.quote {
display: inline-block;
padding: 20px 30px;
/* Ниже можно написать решение */
/* Выше можно написать решение */
border: 1px solid #bbb;
border-radius: 50px 0;
}
.quote-author {
display: block;
/* Ниже можно написать решение) */
/* Выше можно написать решение */
}

Оформление текстового содержания — одна из самых частых задач для верстальщика. Недостаточно просто расставить блоки и прописать им стили. Помимо этого необходимо задать стили тексту так, чтобы он комфортно читался.

Оформите текстовое содержание цитаты. Некоторые стили для неё уже существуют. Ваша задача — работа с текстом. Для этого в HTML-разметке цитаты есть два класса: quote и quote-author. Откройте файл index.html и посмотрите на текущую вёрстку.

Задание

Оформите текст по следующим правилам:

Для класса quote установите правила:

Цвет текста: #404040

Жирное начертание шрифта. Используйте словесное описание в значении. Для этого воспользуйтесь свойством font-weight со значением bold

Размер текста: 20px

Выравнивание текста по центру

Для класса quote-author установите правила:

Нормальное начертание шрифта. Используйте словесное описание в значении. Для этого воспользуйтесь свойством font-weight со значением normal

Размер текста: 16px

Выравнивание текста по правому краю

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment