Разделы медицины

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

Рис. 1

Файлы
icon-heart.svg (1.34 KB)
icon-liver.svg (634 bytes)
icon-kidney.svg (1.01 KB)
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Карточка</title> <style> body { background-color: #e9f3fd; font-family: Arial, Helvetica, sans-serif; } .card { display: inline-block; width: 200px; background: #fff; padding: 1em; border-radius: 10px; margin-right: 10px; margin-bottom: 10px; } .card-icon { background-color: #2b89d8; width: 30px; padding: 10px; border-radius: 5px; } </style> </head> <body> <div class="card"> <div><img src="image/icon-heart.svg" alt="" class="card-icon"></div> <h2>Кардиология</h2> <p>Раздел медицины, который занимается изучением, диагностикой и лечением заболеваний сердца и сосудов.</p> </div> <div class="card"> <div><img src="image/icon-liver.svg" alt="" class="card-icon"></div> <h2>Гепатология</h2> <p>Раздел медицины, который занимается изучением, диагностикой и лечением заболеваний печени.</p> </div> <div class="card"> <div><img src="image/icon-kidney.svg" alt="" class="card-icon"></div> <h2>Нефрология</h2> <p>Раздел медицины, который занимается изучением, диагностикой и лечением заболеваний почек.</p> </div> </body> </html>
Эта самостоятельная связана со следующим уроком: Примеры поточной вёрстки