Нормальное позиционирование 2

Создайте ве-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Блок</title> <style> body { background: #f7f9fa; } section { width: 300px; font-family: Arial Helvetica, sans-serif; color: #777; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .content { text-align: center; padding: 10px 20px 20px; } .content h2 { color: #333; margin-top: 0; font-weight: normal; } .content h2::after { content: ''; display: block; width: 30px; margin: 10px auto; border-bottom: 5px dotted #fd644a; } .content p { font-size: 0.8em; } .content button { background: #fd644a; color: #fff; border: none; padding: 10px 20px; margin-top: 10px; border-radius: 20px; } </style> </head> <body> <section> <img src="image/landscape.jpg" alt=""> <div class="content"> <h2>Туристический цикл</h2> <p>Большая часть территории однородно вызывает закрытый аквапарк.</p> <button>Подробнее</button> </div> </section> </body> </html>
Эта самостоятельная связана со следующим уроком: Нормальное позиционирование