Оформите приведённый текст, чтобы он соответствовал рис. 1.
Рис. 1.
<blockquote>
<p>Алиса ни капельки не ушиблась; она моментально вскочила на ноги и
осмотрелась: первым делом она взглянула наверх, но там было совершенно
темно; зато впереди снова оказалось нечто вроде тоннеля, и где-то там вдали
мелькнула фигура Белого Кролика, который улепётывал во весь дух.</p>
<p class="author">Льюис Кэрролл. <cite>Алиса в стране чудес</cite> (перевод Бориса Заходера)</p>
</blockquote>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Цитата</title>
<style>
body {
background-color: #eaeaea;
}
blockquote {
background-color: #fff;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.2rem;
padding: 1rem 1rem 1rem 4rem;
border-radius: 5px;
position: relative;
overflow: hidden;
& > .author {
font-size: 1rem;
}
}
blockquote::before {
content: '“';
font-size: 4rem;
background-color: #bebebe;
color: #fff;
width: 50px; height: 50px;
box-sizing: border-box;
border-radius: 50%;
text-align: center;
padding-top: 6px;
position: absolute;
left: -5px;
}
</style>
</head>
<body>
<blockquote>
<p>Алиса ни капельки не ушиблась; она моментально вскочила на ноги и
осмотрелась: первым делом она взглянула наверх, но там было совершенно
темно; зато впереди снова оказалось нечто вроде тоннеля, и где-то там вдали
мелькнула фигура Белого Кролика, который улепётывал во весь дух.</p>
<p class="author">Льюис Кэрролл. <cite>Алиса в стране чудес</cite> (перевод Бориса Заходера)</p>
</blockquote>
</body>
</html>