{"id":202408,"date":"2013-11-18T06:05:03","date_gmt":"2013-11-18T02:05:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=202408"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=202408","title":{"rendered":"<span class=\"post_title\">\u041a\u0430\u043a \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u0427\u0430\u0441\u0442\u044c 1<\/span>"},"content":{"rendered":"<div class=\"content html_format\"> \t\t\t\u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0435.<br \/>  \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML \u0438 CSS. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 CMS.<\/p>\n<h4>\u0427\u0430\u0441\u0442\u044c 1. \u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438<\/h4>\n<p>  \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u00ab\u0447\u0438\u0441\u0442\u044b\u043c\u00bb, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438 \u043b\u0435\u0433\u0447\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0443\u0436\u0434\u044b. \u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u0442\u0430\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u043e\u043f\u044b\u0442\u043d\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 psd \u0448\u0430\u0431\u043b\u043e\u043d <a href=\"http:\/\/www.pcklab.com\/item.php?id=16\">Corporate Blue<\/a> \u043e\u0442 \u0441\u0442\u0443\u0434\u0438\u0438 Pcklaboratory.<br \/>  <a name=\"habracut\"><\/a><br \/>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/6f8\/c13\/29b\/6f8c1329b9daed544646698108998966.png\" alt=\"image\"\/><\/p>\n<h5>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432<\/h5>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. <\/p>\n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 Whitesquare.<\/li>\n<li>\u0412 \u043d\u0435\u0439 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0444\u0430\u0439\u043b index.html.<\/li>\n<li>\u0412 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0430\u043f\u043a\u0443 css \u0441 \u043f\u0443\u0441\u0442\u044b\u043c \u0444\u0430\u0439\u043b\u043e\u043c styles.css.<\/li>\n<li>\u0412 \u043f\u0430\u043f\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u0443\u044e \u043f\u0430\u043f\u043a\u0443 images.<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/349\/627\/77c\/34962777c7d1f761d8f4eb4c306786b2.png\" alt=\"image\"\/><\/p>\n<h5>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0441\u043c\u043e\u0442\u0440<\/h5>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c psd \u0444\u0430\u0439\u043b \u0432 Photoshop. \u0412\u0430\u0436\u043d\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0435\u0449\u0438:<\/p>\n<ul>\n<li>\u041a\u0430\u043a \u0431\u0443\u0434\u0443\u0442 \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f?<\/li>\n<li>\u041a\u0430\u043a\u0438\u043c\u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438?<\/li>\n<li>\u041a\u0430\u043a\u043e\u0439 \u043c\u0430\u043a\u0435\u0442 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f?<\/li>\n<\/ul>\n<p>  \u0422\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e \u0441\u0435\u0431\u0435 \u043e\u0442\u0432\u0435\u0442\u0438\u0442\u0435 \u043d\u0430 \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b, \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043d\u0430\u0440\u0435\u0437\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u0438 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043f\u043e-\u043f\u043e\u0440\u044f\u0434\u043a\u0443.<\/p>\n<h5>\u041e\u0431\u0449\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h5>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u0449\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0441\u0430\u0439\u0442\u0430 \u0438 \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u0435\u0442\u043b\u043e-\u0441\u0435\u0440\u044b\u0439 \u0444\u043e\u043d \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0444\u043e\u043d \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043f\u0443\u0441\u0442\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0434\u0432\u0430 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439.<\/p>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<br \/>  \/<br \/>  \/<\/p>\n<p>  \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0443\u0441\u0442\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438\u0437 \u043c\u0430\u043a\u0435\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0434\u043d\u043e\u043f\u0438\u043a\u0441\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0435\u0440\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438<br \/>  \/images\/ sample.png<\/p>\n<p>  \u041f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u043a\u0443\u0441\u043e\u0447\u043a\u043e\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u043c \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u0435\u043d\u0438\u0435\u043c \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 \u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438.<br \/>  \/images\/bg.png<br \/>  \/images\/h1-bg.png<\/p>\n<p>  \u0418\u043a\u043e\u043d\u043a\u0438 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0441 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043b\u0435\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432 Photoshop, \u0430 \u043c\u043e\u0436\u043d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0440\u0435\u0437\u0430\u0442\u044c \u043f\u043e \u043e\u0434\u043d\u043e\u0439, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u043a\u043b\u0435\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"http:\/\/ru.spritegen.website-performance.org\/\">http:\/\/ru.spritegen.website-performance.org<\/a>. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430:<br \/>  \/images\/social.png<br \/>  \/images\/social-small.png<\/p>\n<p>  \u041e\u0431\u0449\u0435\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0440\u0438 \u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u0435\u043b\u043a\u0438\u0435 \u0438 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a \u0438\u043a\u043e\u043d\u043a\u0438, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u044b \u0438 \u0442.\u0434. \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 png, \u0430 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 jpg.<\/p>\n<h5>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438<\/h5>\n<p>  \u0418 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434. \u041d\u043e \u043d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0441 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e HTML, \u0430 \u0441 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043f\u0440\u0430\u0432\u0438\u043b \u0432 CSS.<\/p>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u0432\u0441\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0432 CSS, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0442\u0435\u0433\u0430.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0446\u0432\u0435\u0442\u0443 #f8f8f8. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u043d \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u0444\u043e\u043d\u043e\u0432\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f. \u041d\u0430\u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u0435\u0440\u0430\u044f \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u0430\u044f \u043f\u043e\u043b\u043e\u0441\u043a\u0430. \u041f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0435\u0435 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e border \u0434\u043b\u044f body.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0448\u0440\u0438\u0444\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0442\u0435\u043a\u0441\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0427\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u0432 Photoshop\u2019\u0435 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0448\u0440\u0438\u0444\u0442\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e Tahoma 12px \u0441 \u0446\u0432\u0435\u0442\u043e\u043c #8f8f8f. \u0422\u0430\u043a \u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u043c\u0430\u043a\u0435\u0442\u0435 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u044b \u0438\u043c\u0435\u044e\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b.<\/p>\n<p>  \u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0442\u0438\u043b\u0438 \u0432 styles.css:<\/p>\n<pre><code class=\"html\">body { \tcolor: #8f8f8f; \tfont: 12px Tahoma, sans-serif; \tbackground-color: #f8f8f8; \tborder-top: 5px solid #7e7e7e; \tmargin: 0; } input[type=&quot;text&quot;] { \tbackground-color: #f3f3f3; \tborder: 1px solid #e7e7e7; \theight: 30px; \tcolor: #b2b2b2; \tpadding: 0 10px; \tvertical-align: top; } button { \tcolor: #fff; \tbackground-color: #29c5e6; \tborder: none; \theight: 32px; \tfont-family: 'Oswald', sans-serif; } p { \tmargin: 20px 0; } <\/code><\/pre>\n<p>  \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u0435\u043c \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u00ab\u0441\u0442\u0438\u043b\u0438\u00bb.<\/p>\n<h5>\u041a\u0430\u0440\u043a\u0430\u0441 HTML<\/h5>\n<p>  \u0418 \u0432\u043e\u0442, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043f\u0440\u0430\u043a\u0442\u0438\u043a\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 HTML \u043a\u043e\u0434\u0430. \u0417\u0430\u043f\u0438\u0448\u0435\u043c \u0432 index.html \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-type&quot; content=&quot;text\/html; charset=utf-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt; \t&lt;title&gt;Whitesquare&lt;\/title&gt; \t&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/styles.css&quot; type=&quot;text\/css&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;http:\/\/fonts.googleapis.com\/css?family=Oswald:400,300&quot; type=&quot;text\/css&quot;&gt;  \t&lt;!--[if lt IE 9]&gt; \t&lt;script src=&quot;http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js&quot;&gt;&lt;\/script&gt; \t&lt;![endif]--&gt; &lt;\/head&gt; &lt;body&gt; &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 HTML5, \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0443 utf-8, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Whitesquare. \u0422\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u0430\u0448 \u0444\u0430\u0439\u043b \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432.<br \/>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u0431\u043b\u043e\u043a\u0435 \u0432 \u0441\u0435\u043a\u0446\u0438\u0438 head \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c Html5 \u0442\u0435\u0433\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 Internet Explorer \u043c\u0435\u043d\u044c\u0448\u0435 9 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u0435\u0442\u0430-\u0442\u0435\u0433 X-UA-Compatible \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442, \u0447\u0442\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Internet Explorer, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u044c \u0441\u0430\u0439\u0442 \u0441\u0430\u043c\u044b\u043c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.<\/p>\n<p>  \u0412\u0435\u0441\u044c html \u043a\u043e\u0434 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u0436\u0435 \u0444\u0430\u0439\u043b\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c html \u043a\u043e\u0434 \u0430\u0432\u0442\u043e\u0440 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442.<\/p>\n<h5>\u041c\u0430\u043a\u0435\u0442<\/h5>\n<p>   \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0434\u0432\u0443\u0445 \u043a\u043e\u043b\u043e\u043d\u043e\u043a: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430. \u041d\u0430\u0434 \u043d\u0438\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0448\u0430\u043f\u043a\u0430 (header), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0442\u0440\u0438 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u0430: \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0441 \u043f\u043e\u0438\u0441\u043a\u043e\u043c, \u043c\u0435\u043d\u044e \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u0441\u0430\u043c\u043e\u043c \u043d\u0438\u0437\u0443 \u043f\u043e\u0434 \u043a\u043e\u043b\u043e\u043d\u043a\u0430\u043c\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u044b\u0439 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u0444\u0443\u0442\u0435\u0440\u0430 (footer).<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/8da\/d85\/e59\/8dad85e59d6df64388a391a664e2c5d4.png\"\/><\/p>\n<p>  \u041e\u043f\u0438\u0448\u0435\u043c \u044d\u0442\u043e \u0432 \u0442\u0435\u0433\u0435 body:<\/p>\n<pre><code class=\"html\">&lt;body&gt; \t&lt;div id=&quot;wrapper&quot;&gt; \t\t&lt;header&gt;&lt;\/header&gt; \t\t&lt;nav&gt;&lt;\/nav&gt; \t\t&lt;div id=&quot;heading&quot;&gt;&lt;\/div&gt; \t\t&lt;aside&gt;&lt;\/aside&gt; \t\t&lt;section&gt;&lt;\/section&gt; \t&lt;\/div&gt; \t&lt;footer&gt;&lt;\/footer&gt; &lt;\/body&gt; <\/code><\/pre>\n<p>  Wrapper \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432 \u0438 \u0438\u0445 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0443\u043a\u0430\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0431\u043b\u043e\u043a\u043e\u0432:<\/p>\n<pre><code class=\"css\">#wrapper { \tmax-width: 960px; \tmargin: auto; } header { \tpadding: 20px 0; } <\/code><\/pre>\n<h5>\u041b\u043e\u0433\u043e\u0442\u0438\u043f<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/ad1\/e15\/d92\/ad1e15d92086ee83c396cb458509df2d.png\"\/><\/p>\n<p>  \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043b\u043e\u0433\u043e\u0442\u0438\u043f \u0432 \u0442\u0435\u0433 header:<\/p>\n<pre><code class=\"html\">&lt;header&gt; \t&lt;a href=&quot;\/&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;Whitesquare logo&quot;&gt;&lt;\/a&gt; &lt;\/header&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f.<\/p>\n<h5>\u041f\u043e\u0438\u0441\u043a<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/d87\/d55\/940\/d87d5594013f6e7b6632e278ae34ef8c.png\"\/><\/p>\n<p>  \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u043f\u043e\u0438\u0441\u043a\u0430 \u0432 \u0442\u0435\u0433 header:<\/p>\n<pre><code class=\"html\">&lt;header&gt; \u2026 &lt;form name=&quot;search&quot; action=&quot;#&quot; method=&quot;get&quot;&gt; \t&lt;input type=&quot;text&quot; name=&quot;q&quot; placeholder=&quot;Search&quot;&gt;&lt;button type=&quot;submit&quot;&gt;GO&lt;\/button&gt; &lt;\/form&gt; &lt;\/header&gt; <\/code><\/pre>\n<p>  \u0418 \u0441\u0442\u0438\u043b\u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0434\u043b\u044f \u043d\u0435\u0435:<\/p>\n<pre><code class=\"css\">form[name=&quot;search&quot;] { \tfloat: right; } <\/code><\/pre>\n<h5>\u041c\u0435\u043d\u044e<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage3\/5a0\/6f5\/c4c\/5a06f5c4c53d63441028da668014d382.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u0435\u043d\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 nav:<\/p>\n<pre><code class=\"html\">&lt;nav&gt; \t&lt;ul class=&quot;top-menu&quot;&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/home\/&quot;&gt;HOME&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li class=&quot;active&quot;&gt;ABOUT US&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/services\/&quot;&gt;SERVICES&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/partners\/&quot;&gt;PARTNERS&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/customers\/&quot;&gt;CUSTOMERS&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/projects\/&quot;&gt;PROJECTS&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/careers\/&quot;&gt;CAREERS&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/contact\/&quot;&gt;CONTACT&lt;\/a&gt;&lt;\/li&gt; \t&lt;\/ul&gt; &lt;\/nav&gt; <\/code><\/pre>\n<p>  CSS \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:<\/p>\n<pre><code class=\"css\">nav a { \ttext-decoration: none; }  nav ul { \tmargin: 0; \tpadding: 0; }  nav li { \tlist-style-position: inside; \tfont: 14px 'Oswald', sans-serif; \tpadding: 10px; }  .top-menu li { \tdisplay: inline-block; \tpadding: 10px 30px; \tmargin: 0; }  .top-menu li.active { \tbackground: #29c5e6; \tcolor: #fff; }  .top-menu a { \tcolor: #b2b2b2; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0439 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u044f, \u0443\u0431\u0440\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u043f\u0438\u0441\u043a\u0430, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e \u0438 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0448\u0440\u0438\u0444\u0442.<\/p>\n<h5>\u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/728\/e3b\/83b\/728e3b83b915a000db114952b08c9b4c.png\"\/><\/p>\n<p>  \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 div \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c heading<\/p>\n<pre><code class=\"html\">&lt;div id=&quot;heading&quot;&gt; \t&lt;h1&gt;ABOUT US&lt;\/h1&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u043c\u0435\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">#heading { \tbackground: transparent url(..\/images\/h1-bg.png); \tmargin: 30px 0; \tpadding-left: 20px; }  h1 { \tdisplay: inline-block; \tcolor: #7e7e7e; \tfont: 40px\/40px 'Oswald', sans-serif; \tbackground: url(..\/images\/bg.png); \tmargin: 0; \tpadding: 0 10px; } <\/code><\/pre>\n<p>  \u0420\u0438\u0441\u0443\u0435\u043c \u0441\u0435\u0440\u0443\u044e \u043f\u043e\u043b\u043e\u0441\u043a\u0443 \u0444\u043e\u043d\u043e\u043c \u043d\u0430 div\u2019e, \u0438 \u0432 \u043d\u0435\u0435 \u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0439 h1 \u0441 \u043d\u0443\u0436\u043d\u044b\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u043c \u0438 \u0444\u043e\u043d\u043e\u043c \u0446\u0432\u0435\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u043e\u0441\u044c \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 \u0434\u043b\u044f h1.<\/p>\n<h5>\u041a\u043e\u043b\u043e\u043d\u043a\u0438<\/h5>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438: <\/p>\n<pre><code class=\"css\">aside { \tfloat: left; \twidth: 250px; } section { \tmargin-left: 280px; \tpadding-bottom: 50px; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443 250 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430, \u043f\u0440\u0438\u0431\u0438\u043b\u0438 \u0435\u0433\u043e \u043a \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0438 \u043e\u0442\u043e\u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u0441 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c \u0432\u043f\u0440\u0430\u0432\u043e \u043d\u0430 280 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043e\u0442 \u043b\u0435\u0432\u043e\u0433\u043e \u043a\u0440\u0430\u044f. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0441\u043d\u0438\u0437\u0443.<\/p>\n<h5>\u041f\u043e\u0434\u043c\u0435\u043d\u044e<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/9d2\/568\/de6\/9d2568de6dcc13c044388e02ab540962.png\"\/><\/p>\n<p>  \u041f\u043e\u0434\u043c\u0435\u043d\u044e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0433\u043b\u0430\u0432\u043d\u043e\u043c\u0443 \u043c\u0435\u043d\u044e. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u0442\u0435\u0433\u0435 aside \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre><code class=\"html\">&lt;aside&gt; &lt;nav&gt; \t&lt;ul class=&quot;aside-menu&quot;&gt; \t\t&lt;li class=&quot;active&quot;&gt;LOREM IPSUM&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/donec\/&quot;&gt;DONEC TINCIDUNT LAOREET&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/vestibulum\/&quot;&gt;VESTIBULUM ELIT&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/etiam\/&quot;&gt;ETIAM PHARETRA&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/phasellus\/&quot;&gt;PHASELLUS PLACERAT&lt;\/a&gt;&lt;\/li&gt; \t\t&lt;li&gt;&lt;a href=&quot;\/cras\/&quot;&gt;CRAS ET NISI VITAE ODIO&lt;\/a&gt;&lt;\/li&gt; \t&lt;\/ul&gt; &lt;\/nav&gt; &lt;\/aside&gt; <\/code><\/pre>\n<p>  \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u043a \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">.aside-menu li { \tfont-weight: 300; \tlist-style-type: square; \tborder-top: 1px solid #e7e7e7; }  .aside-menu li:first-child { \tborder: none; }  .aside-menu li.active { \tcolor: #29c5e6; }  .aside-menu a { \tcolor: #8f8f8f; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u0442\u043e\u043d\u043a\u0438\u0439 \u0448\u0440\u0438\u0444\u0442 \u0438 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b. \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0435\u0439 \u0440\u0438\u0441\u0443\u0435\u043c \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e.<\/p>\n<h5>\u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430<\/h5>\n<p>  \u0412 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430 \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u0432 \u043c\u0430\u043a\u0435\u0442\u0435 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0436\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u0444\u0438\u0441\u043e\u0432. <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/219\/9c8\/5fd\/2199c85fd7c784db07825362e9127eda.png\"\/><\/p>\n<p>  \u0412 html \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"html\">&lt;h2&gt;OUR OFFICES&lt;\/h2&gt; &lt;p&gt;&lt;img src=&quot;images\/sample.png&quot; width=&quot;230&quot; height=&quot;180&quot; alt=&quot;Our offices&quot;&gt;&lt;\/p&gt; <\/code><\/pre>\n<p>  \u0412 \u0441\u0442\u0438\u043b\u044f\u0445 \u0443\u043a\u0430\u0436\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u044b, \u0446\u0432\u0435\u0442\u0430 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b:<\/p>\n<pre><code class=\"css\">aside &gt; h2 { \tbackground: #29c5e6; \tfont: 14px 'Oswald', sans-serif; \tcolor: #fff; \tpadding: 10px; \tmargin: 30px 0 0 0; }  aside &gt; p { \tbackground: #f3f3f3; \tborder: 1px solid #e7e7e7; \tpadding: 10px; \tmargin: 0; } <\/code><\/pre>\n<p>  \u0414\u0430\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u043c \u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430\u043c, \u043b\u0435\u0436\u0430\u0449\u0438\u043c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0430\u0439\u0434\u0431\u0430\u0440\u0430, \u043d\u043e \u043d\u0435 \u0433\u043b\u0443\u0431\u0436\u0435.<\/p>\n<h5>\u0426\u0438\u0442\u0430\u0442\u0430<\/h5>\n<p>  \u0412\u0451\u0440\u0441\u0442\u043a\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0438\u0442\u0430\u0442\u044b. <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/069\/472\/6a2\/0694726a2814d93d8fe254ed799e4aef.png\"\/><\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043e\u0434 \u0446\u0438\u0442\u0430\u0442\u044b \u0432 \u0440\u0430\u0437\u0434\u0435\u043b section<\/p>\n<pre><code class=\"html\">&lt;section&gt; &lt;blockquote&gt; \t&lt;p&gt; \t\t&ldquo;QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.&rdquo; \t&lt;\/p&gt; \t&lt;cite&gt;John Doe, Lorem Ipsum&lt;\/cite&gt; \t&lt;\/blockquote&gt; &lt;\/section&gt; <\/code><\/pre>\n<p>  \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">blockquote { \tmargin: 0; \tbackground: #29c5e6; \tpadding: 10px 20px; \tfont-family: 'Oswald', sans-serif; \tfont-weight: 300; }  blockquote p { \tcolor: #fff; \tfont-style: italic; \tfont-size: 33px; \tmargin: 0; }  blockquote cite { \tdisplay: block; \tfont-size: 20px; \tfont-style: normal; \tcolor: #1d8ea6; \tmargin: 0; \ttext-align: right; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043d\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e, \u0442\u0430\u043a \u0436\u0435 \u2014 \u0448\u0440\u0438\u0444\u0442\u044b, \u0444\u043e\u043d\u044b \u0438 \u043e\u0442\u0441\u0442\u0443\u043f\u044b.<\/p>\n<h5>\u041a\u043e\u043d\u0442\u0435\u043d\u0442<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/7ea\/e1a\/19d\/7eae1a19dae67c7115dc4623bd591c6f.png\"\/><\/p>\n<p>  \u0412\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u044b \u0443\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0440\u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444\u0430 \u0441 \u0441\u0430\u043c\u0438\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043f\u043e\u0441\u043b\u0435 <\/p>\n<blockquote><p>.<\/p>\n<pre><code class=\"html\">&lt;p&gt;Lorem ipsum dolor sit amet\u2026&lt;\/p&gt; &lt;p&gt;Donec vel nisl nibh\u2026&lt;\/p&gt; &lt;p&gt;Donec vel nisl nibh\u2026&lt;\/p&gt; <\/code><\/pre>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0446\u0435 \u0442\u0435\u043a\u0441\u0442\u0430 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 :<\/p>\n<pre><code class=\"html\">&lt;figure&gt; \t&lt;img src=&quot;images\/sample.png&quot; width=&quot;320&quot; height=&quot;175&quot; alt=&quot;&quot;&gt; &lt;\/figure&gt; &lt;figure&gt; \t&lt;img src=&quot;images\/sample.png&quot; width=&quot;320&quot; height=&quot;175&quot; alt=&quot;&quot;&gt; &lt;\/figure&gt; <\/code><\/pre>\n<p>  , \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">figure { \tdisplay: inline-block; \tmargin: 0; \tfont-family: 'Oswald', sans-serif; \tfont-weight: 300; }  figure img { \tdisplay: block; \tborder: 1px solid #fff; \toutline: 1px solid #c9c9c9; }  figure figcaption { \tfont-size: 16px; \tfont-weight: 300; \tmargin-top: 5px; }  figure figcaption span { \tdisplay: block; \tfont-size: 14px; \tcolor: #29c5e6; } section &gt; figure + figure { \tmargin-left: 28px; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0443\u0431\u0440\u0430\u043b\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043e\u0442\u0441\u0443\u043f\u044b \u0443 figure, \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u0438 \u0435\u0433\u043e \u043a\u0430\u043a \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u043d\u0443\u0436\u043d\u044b\u0439 \u0448\u0440\u0438\u0444\u0442. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u043a\u0430\u043a \u0431\u043b\u043e\u0447\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 \u0431\u0435\u043b\u043e\u0439 \u0440\u0430\u043c\u043a\u043e\u0439. \u0412\u0442\u043e\u0440\u0443\u044e \u0441\u0435\u0440\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 css-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e outline. \u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0434\u0430\u0435\u0442 \u043b\u0435\u0432\u044b\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0443 \u0432\u0441\u0435\u0445 figure \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 section.<\/p>\n<h5>\u0411\u043b\u043e\u043a \u00abOur team\u00bb<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/8ca\/5a4\/c2a\/8ca5a4c2a0e62c06b70048e9bf7cb701.png\"\/><\/p>\n<p>  \u041f\u0440\u0438 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a:<\/p>\n<pre><code class=\"html\">&lt;h2&gt;OUR TEAM&lt;\/h2&gt; <\/code><\/pre>\n<p>  \u0421\u043e \u0441\u0442\u0438\u043b\u0435\u043c:<\/p>\n<pre><code class=\"css\">section &gt; h2 { \tbackground: #29c5e6; \tfont: 30px 'Oswald', sans-serif; \tfont-weight: 300; \tcolor: #fff; \tpadding: 0 10px; \tmargin: 30px 0 0 0; } <\/code><\/pre>\n<p>  \u0410 \u0437\u0430\u0442\u0435\u043c \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430-\u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;team-row&quot;&gt; \t&lt;figure&gt; \t\t&lt;img src=&quot;images\/sample.png&quot; width=&quot;96&quot; height=&quot;96&quot; alt=&quot;&quot;&gt; \t\t&lt;figcaption&gt;John Doe&lt;span&gt;ceo&lt;\/span&gt;&lt;\/figcaption&gt; \t&lt;\/figure&gt; \t&lt;figure&gt; \t\t&lt;img src=&quot;images\/sample.png&quot; width=&quot;96&quot; height=&quot;96&quot; alt=&quot;&quot;&gt; \t\t&lt;figcaption&gt;Saundra Pittsley&lt;span&gt;team leader&lt;\/span&gt;&lt;\/figcaption&gt; \t&lt;\/figure&gt; \u2026 &lt;\/div&gt; &lt;div class=&quot;team-row&quot;&gt; \t&lt;figure&gt; \t\t&lt;img src=&quot;images\/sample.png&quot; width=&quot;96&quot; height=&quot;96&quot; alt=&quot;&quot;&gt; \t\t&lt;figcaption&gt;Ericka Nobriga&lt;span&gt;art director&lt;\/span&gt;&lt;\/figcaption&gt; \t&lt;\/figure&gt; \t&lt;figure&gt; \t\t&lt;img src=&quot;images\/sample.png&quot; width=&quot;96&quot; height=&quot;96&quot; alt=&quot;&quot;&gt; \t\t&lt;figcaption&gt;Cody Rousselle&lt;span&gt;senior ui designer&lt;\/span&gt;&lt;\/figcaption&gt; \t&lt;\/figure&gt; \u2026 &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 (figure) \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 (img), \u043f\u043e\u0434\u043f\u0438\u0441\u0438 (figcaption) \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 \u0438 \u0435\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u044c\u044e (div). \u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">figure figcaption { \tfont-size: 16px; \tfont-weight: 300; \tmargin-top: 5px; }  figure div { \tfont-size: 14px; \tcolor: #29c5e6; }  .team-row figure { \tmargin-top: 20px; }  .team-row figure + figure { \tmargin-left: 43px; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u0448\u0440\u0438\u0444\u0442 \u0438 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u0438, \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0446\u0432\u0435\u0442 \u0434\u043e\u043b\u0436\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0438 \u0443\u043a\u0430\u0437\u0430\u043b\u0438, \u0447\u0442\u043e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u043a\u0440\u043e\u043c\u0435 \u043f\u0435\u0440\u0432\u043e\u0439, \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043b\u0435\u0432\u0430.<\/p>\n<h5>\u0424\u0443\u0442\u0435\u0440<\/h5>\n<p>  \u0424\u0443\u0442\u0435\u0440 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0447\u0435\u0442\u044b\u0440\u0451\u0445 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432: \u043b\u0435\u043d\u0442\u044b \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430, \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430, \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430 \u0441 \u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u043e\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/f9b\/c37\/824\/f9bc37824c697d8cae75d77b5c26b0ce.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0444\u0443\u0442\u0435\u0440\u0430 \u0441 \u044d\u0442\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c\u0438:<\/p>\n<pre><code class=\"html\">&lt;footer&gt; \t&lt;div id=&quot;footer&quot;&gt; \t\t&lt;div id=&quot;twitter&quot;&gt;&lt;\/div&gt;  \t\t&lt;div id=&quot;sitemap&quot;&gt;&lt;\/div&gt; \t\t&lt;div id=&quot;social&quot;&gt;&lt;\/div&gt; \t\t&lt;div id=&quot;footer-logo&quot;&gt;&lt;\/div&gt; \t&lt;\/div&gt; &lt;\/footer&gt; <\/code><\/pre>\n<p>  \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u043a \u043d\u0435\u043c\u0443 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435: <\/p>\n<pre><code class=\"css\">footer { \tbackground: #7e7e7e; \tcolor: #dbdbdb; \tfont-size: 11px; }  #footer { \tmax-width: 960px; \tmargin: auto; \tpadding: 10px 0; \theight: 90px; } <\/code><\/pre>\n<p>  \u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0441 id=\u201dfooter\u201d \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 footer, \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u0433 footer \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0435\u0440\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u043e \u0432\u0441\u0435\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u0430 \u0447\u0435\u0440\u0435\u0437 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 div \u043e\u0442\u0446\u0435\u043d\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439 960 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e\u0442 div \u0437\u0430\u0434\u0430\u0435\u0442 \u043e\u0431\u043e\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c \u0432\u044b\u0441\u043e\u0442\u0443 90 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.<\/p>\n<h5>\u041b\u0435\u043d\u0442\u0430 \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430<\/h5>\n<p>  \u0412\u0435\u0440\u0441\u0442\u0430\u0435\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043b\u0435\u043d\u0442\u044b \u0422\u0432\u0438\u0442\u0442\u0435\u0440\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/e23\/491\/5ec\/e234915ece2470db55f7afee224a0927.png\"\/><\/p>\n<pre><code class=\"html\">&lt;div id=&quot;twitter&quot;&gt; \t&lt;h3&gt;TWITTER FEED&lt;\/h3&gt; \t&lt;time datetime=&quot;2012-10-23&quot;&gt;&lt;a href=&quot;#&quot;&gt;23 oct&lt;\/a&gt;&lt;\/time&gt; &lt;p&gt; \tIn ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug &lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"css\">footer h3 { \tfont: 14px 'Oswald', sans-serif; \tcolor: #fff; \tborder-bottom: 1px solid #919191; \tmargin: 0 0 10px 0; }  #twitter time a { \tcolor: #b4aeae; }  footer p { \tmargin: 5px 0; }  #twitter { \tfloat: left; \twidth: 300px; }  #twitter p { \tpadding-right: 15px; } <\/code><\/pre>\n<p>  \u0418\u0437 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0434\u0435\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435: \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043d\u0438\u0436\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0441\u0430\u043c \u0431\u043b\u043e\u043a \u0442\u0432\u0438\u0442\u0442\u0435\u0440\u0430, \u043a\u0430\u043a \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0435\u043c \u043f\u043e \u043b\u0435\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0438 \u0437\u0430\u0434\u0430\u0451\u043c \u0448\u0438\u0440\u0438\u043d\u0443.<\/p>\n<h5>\u041a\u0430\u0440\u0442\u0430 \u0441\u0430\u0439\u0442\u0430<\/h5>\n<p>  \u041a\u0430\u0440\u0442\u0430 \u0441\u0430\u0439\u0442\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u0434\u0432\u0430 \u0431\u043b\u043e\u043a\u0430 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/36c\/bf4\/582\/36cbf4582fb1a57847149147fbcf3bd2.png\"\/> <\/p>\n<pre><code class=\"html\">&lt;div id=&quot;sitemap&quot;&gt; \t&lt;h3&gt;SITEMAP&lt;\/h3&gt; \t&lt;div&gt; \t\t&lt;a href=&quot;\/home\/&quot;&gt;Home&lt;\/a&gt; \t\t&lt;a href=&quot;\/about\/&quot;&gt;About&lt;\/a&gt; \t\t&lt;a href=&quot;\/services\/&quot;&gt;Services&lt;\/a&gt; \t&lt;\/div&gt; \t&lt;div&gt; \t\t&lt;a href=&quot;\/partners\/&quot;&gt;Partners&lt;\/a&gt; \t\t&lt;a href=&quot;\/customers\/&quot;&gt;Support&lt;\/a&gt; \t\t&lt;a href=&quot;\/contact\/&quot;&gt;Contact&lt;\/a&gt; \t&lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0441\u044b\u043b\u043a\u0430\u043c \u0437\u0430\u0434\u0430\u0435\u043c \u0446\u0432\u0435\u0442 \u0438 \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043d\u0430\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0445.<br \/>  \u041a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u0438 \u0437\u0430\u0442\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e\u043c #sitemap div + div \u043e\u0442\u043e\u0434\u0432\u0438\u0433\u0430\u0435\u043c \u0432\u0442\u043e\u0440\u0443\u044e \u043a\u043e\u043b\u043e\u043d\u043a\u0443 \u043e\u0442 \u043f\u0435\u0440\u0432\u043e\u0439.<\/p>\n<pre><code class=\"css\">footer a { \tcolor: #dbdbdb; }  #sitemap { \twidth: 150px; \tfloat: left; \tmargin-left: 20px; \tpadding-right: 15px; }  #sitemap div { \tdisplay: inline-block; }  #sitemap div + div { \tmargin-left: 40px; }  #sitemap a { \tdisplay: block; \ttext-decoration: none; \tfont-size: 12px; \tmargin-bottom: 5px; }  #sitemap a:hover { \ttext-decoration: underline; } <\/code><\/pre>\n<h5>\u0421\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/318\/0bd\/e53\/3180bde5365ad4a49e650518b530934f.png\"\/><\/p>\n<p>  \u0412\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0431\u043e\u0440 \u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 <\/p>\n<pre><code class=\"html\">&lt;div id=&quot;social&quot;&gt; \t&lt;h3&gt;SOCIAL NETWORKS&lt;\/h3&gt; \t&lt;a href=&quot;http:\/\/twitter.com\/&quot; class=&quot;social-icon twitter&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/facebook.com\/&quot; class=&quot;social-icon facebook&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/plus.google.com\/&quot; class=&quot;social-icon google-plus&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/vimeo.com\/&quot; class=&quot;social-icon-small vimeo&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/youtube.com\/&quot; class=&quot;social-icon-small youtube&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/flickr.com\/&quot; class=&quot;social-icon-small flickr&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;http:\/\/instagram.com\/&quot; class=&quot;social-icon-small instagram&quot;&gt;&lt;\/a&gt; \t&lt;a href=&quot;\/rss\/&quot; class=&quot;social-icon-small rss&quot;&gt;&lt;\/a&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0418 \u0441\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0438\u0445:<\/p>\n<pre><code class=\"css\">#social { \tfloat: left; \tmargin-left: 20px; \twidth: 130px; }  .social-icon { \twidth: 30px; \theight: 30px; \tbackground: url(..\/images\/social.png) no-repeat; \tdisplay: inline-block; \tmargin-right: 10px; }  .social-icon-small  { \twidth: 16px; \theight: 16px; \tbackground: url(..\/images\/social-small.png) no-repeat; \tdisplay: inline-block; \tmargin: 5px 6px 0 0; }  .twitter { \tbackground-position: 0 0; }  .facebook { \tbackground-position: -30px 0; }  .google-plus { \tbackground-position: -60px 0; }  .vimeo { \tbackground-position: 0 0; }  .youtube { \tbackground-position: -16px 0; }  .flickr { \tbackground-position: -32px 0; }  .instagram { \tbackground-position: -48px 0; }  .rss { \tbackground-position: -64px 0; } <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043b\u0438 \u0442\u0435\u0445\u043d\u0438\u043a\u0443 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u2013 \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u0412\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u043b\u0438\u0441\u044c \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u043a\u043e\u043d\u043a\u0438 (.social-icon) \u0438 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 (.social-icon-small). \u041c\u044b \u0437\u0430\u0434\u0430\u043b\u0438 \u044d\u0442\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0441 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u043c \u0444\u043e\u043d\u043e\u043c. \u0410 \u0437\u0430\u0442\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e css \u0441\u0434\u0432\u0438\u043d\u0443\u043b\u0438 \u044d\u0442\u043e\u0442 \u0444\u043e\u043d \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u043e\u0441\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<h5>\u041a\u043e\u043f\u0438\u0440\u0430\u0439\u0442<\/h5>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/c05\/8b5\/503\/c058b55038e832fb39e6bef26deeb492.png\"\/><\/p>\n<p>  \u0411\u043b\u043e\u043a \u0441 \u043a\u043e\u043f\u0438\u0440\u0430\u0439\u0442\u043e\u043c \u0438 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u043c \u2013 \u044d\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0441\u043e \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u0438 \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043f\u043e\u0434 \u043d\u0438\u043c.<\/p>\n<pre><code class=\"html\">&lt;div id=&quot;footer-logo&quot;&gt; \t&lt;a href=&quot;\/&quot;&gt;&lt;img src=&quot;&quot; alt=&quot;Whitesquare logo&quot;&gt;&lt;\/a&gt; \t&lt;p&gt;Copyright &copy; 2012 Whitesquare. A &lt;a href=&quot;http:\/\/pcklab.com&quot;&gt;pcklab&lt;\/a&gt; creation&lt;\/p&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u0438 \u0434\u0435\u043b\u0430\u044e\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0431\u043b\u043e\u043a\u0430\u043c \u0441 \u0442\u043e\u0439 \u043b\u0438\u0448\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0435\u0439, \u0447\u0442\u043e \u0431\u043b\u043e\u043a \u043f\u0440\u0438\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e \u0438 \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0435\u0433\u043e \u0442\u0430\u043a \u0436\u0435 \u043f\u043e \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e:<\/p>\n<pre><code class=\"css\">#footer-logo { \tfloat: right; \tmargin-top: 20px; \tfont-size: 10px; \ttext-align: right; }<\/code><\/pre>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0448\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0435\u043d\u044b. \u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0447\u0430\u0442\u044c <a href=\"https:\/\/github.com\/Mirantus\/whitespace-native\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p><\/blockquote>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/202408\/\"> http:\/\/habrahabr.ru\/post\/202408\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\"> \t\t\t\u0423\u0432\u0430\u0436\u0430\u0435\u043c\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c, \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439 \u044f \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e \u0446\u0438\u043a\u043b \u0441\u0442\u0430\u0442\u0435\u0439, \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u043d\u044b\u0445 \u0432\u0451\u0440\u0441\u0442\u043a\u0435.<br \/>  \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u043e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u043d\u0430 \u0447\u0438\u0441\u0442\u043e\u043c HTML \u0438 CSS. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0447\u0430\u0441\u0442\u044f\u0445 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 CMS.<\/p>\n<h4>\u0427\u0430\u0441\u0442\u044c 1. \u0412\u0435\u0440\u0441\u0442\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438<\/h4>\n<p>  \u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043a\u043e\u0434 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u00ab\u0447\u0438\u0441\u0442\u044b\u043c\u00bb, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0438 \u043b\u0435\u0433\u0447\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043d\u0443\u0436\u0434\u044b. \u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u0442\u0430\u043a\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0435\u043c \u043f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u0434\u043e\u043f\u044b\u0442\u043d\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 psd \u0448\u0430\u0431\u043b\u043e\u043d <a href=\"http:\/\/www.pcklab.com\/item.php?id=16\">Corporate Blue<\/a> \u043e\u0442 \u0441\u0442\u0443\u0434\u0438\u0438 Pcklaboratory.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-202408","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/202408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=202408"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/202408\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=202408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=202408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=202408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}