{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Переверстал, заметки с тегом: благотворительность", "home_page_url": "https:\/\/pereverstal.by\/tags\/blagotvoritelnost\/", "feed_url": "https:\/\/pereverstal.by\/tags\/blagotvoritelnost\/json\/", "icon": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg", "author": { "name": "Автор блога", "url": "https:\/\/pereverstal.by\/", "avatar": "https:\/\/pereverstal.by\/user\/userpic@2x.jpg" }, "items": [ { "id": "111", "url": "https:\/\/pereverstal.by\/all\/pomozhem-lize\/", "title": "Поможем Лизе!", "content_html": "

Постоянный читатель прислал мне вот этот макет с просьбой переверстать<\/p>\n

\n\"\"\n<\/div>\n

Надо сказать, что этот дизайн не так уж и плох.
\nНесмотря на вырвиглазные цвета, ужасную типографику, растянутые логотипы,
\nполное отсутствие разумной структуры, стилистика макета хорошо узнаваема
\nи считываема — именно так оформляется большинство объявлений о пропаже человека
\nили призыве помочь. Можно за секунду понять тематику плаката,
\nи несмотря на весь ужас в оформлении, разобраться куда перечислять деньги.<\/p>\n

Но я все-таки попробую что-нибудь с ним сделать.<\/p>\n

Задача усложняется тем, что практически ничего
\nнельзя выкинуть из макета, чтобы получить больше свободы для верстки —
\nкаждый источник получения пожертвований важен.
\nПоэтому надо готовиться к тому, что верстать придется плотнячком.<\/p>\n

Начнем. Наберу текст, найду фотку в гугле.<\/h2>\n

Адрес PayPal сделаю QR-кодом — такой набор символов
\nникто набирать не станет.<\/p>\n

\n\"\"\n<\/div>\n

Попробую собрать внятную конструкцию<\/h2>\n
\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

После первых попыток пришел к выводу, что удобнее будет макет перевернуть
\n(листаем галерею).<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Не нравится, что заголовок мелкий, надо его сделать хорошо заметным —
\nобычно такие плакаты вешают на афишных тумбах.<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n

Покрасим заголовок<\/p>\n

\n\"\"\n<\/div>\n

Примерим<\/p>\n

\n\"\"\n<\/div>\n

Заголовок, несмотря на свою крупноту, плохо виден.<\/p>\n

Надо попробовать немного по-другому<\/h2>\n
\n\"\"\n<\/div>\n

Заодно парочку других цветов<\/p>\n

\n\"\"\n<\/div>\n
\n\"\"\n<\/div>\n

Примерим еще раз<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Ок. Надо сказать, что вертикальный формат дружил бы лучше с соседними
\nмакетами. Конечно, выделяться нужно по-максимуму, но если наш
\nгоризонтальный формат закроет своими краями соседей это будет не честно.<\/p>\n

Сделаю вертикальный формат.<\/h2>\n

Скопирую компоновку из горизонтального формата<\/p>\n

\n\"\"\n<\/div>\n

Не нравится, надо попробовать по-другому<\/p>\n

\n\"\"\n<\/div>\n

Хорошо, но заголовок с плашкой будет виден лучше.<\/p>\n

\n\"\"\n<\/div>\n

И парочку других цветов (листаем галерею)<\/p>\n

\n
\n\"\"\n\"\"\n<\/div>\n<\/div>\n

Примерим<\/p>\n

\n
\n\"\"\n\"\"\n\"\"\n<\/div>\n<\/div>\n", "date_published": "2020-05-23T20:27:20+03:00", "date_modified": "2020-05-23T20:45:08+03:00", "image": "https:\/\/pereverstal.by\/pictures\/Charity_process_2.jpg", "_date_published_rfc2822": "Sat, 23 May 2020 20:27:20 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "111", "_e2_data": { "is_favourite": false, "links_required": [ "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js", "system\/library\/fotorama\/fotorama.css", "system\/library\/fotorama\/fotorama.js" ], "og_images": [ "https:\/\/pereverstal.by\/pictures\/Charity_process_2.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_6.jpg", "https:\/\/pereverstal.by\/pictures\/ishodnik_1100.jpg", "https:\/\/pereverstal.by\/pictures\/ishodnik_1100_1.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_22.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_23.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_24.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert11.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert21.jpg", "https:\/\/pereverstal.by\/pictures\/ishodnik_1100_2.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_21.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_232.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_222.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_3.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_4.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_5.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_7_2.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_8.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_base_done_1.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+hor_zag_orange.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_1.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_3_2.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_4.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+hor_orange.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ_blue_hor.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+hor_green.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_process_vert_11.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_base_done21.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_121.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_321.jpg", "https:\/\/pereverstal.by\/pictures\/Charity_421.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+vert_orange.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+vert_blue.jpg", "https:\/\/pereverstal.by\/pictures\/in-situ+vert_green.jpg" ] } } ], "_e2_version": 3254, "_e2_ua_string": "E2 (v3254; Aegea)" }