{"id":1238,"date":"2020-07-02T14:04:17","date_gmt":"2020-07-02T14:04:17","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1238"},"modified":"2020-07-20T08:14:28","modified_gmt":"2020-07-20T08:14:28","slug":"o%d0%b4%d0%bd%d0%be%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%87%d0%bd%d0%b8%d0%ba-%d0%bd%d0%b0-bootstrap-4","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1238","title":{"rendered":"O\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u043d\u0430 Bootstrap 4"},"content":{"rendered":"\n<p><a href=\"https:\/\/ru.wikipedia.org\/wiki\/Bootstrap_(%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA)\">\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Bootstrap<\/a>\u00a0\u2014\u00a0\u044d\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u0415\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443. Bootstrap \u2014 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439, \u043e \u0447\u0451\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 (\u043f\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043d\u0430 \u043d\u0430\u0447\u0430\u043b\u043e \u043c\u0430\u0440\u0442\u0430 2018-\u0433\u043e \u0433\u043e\u0434\u0430)\u00a0<a href=\"https:\/\/github.com\/search?o=desc&amp;q=stars%3A%3E1&amp;s=stars&amp;type=Repositories\">\u0432\u0442\u043e\u0440\u043e\u0435 \u043c\u0435\u0441\u0442\u043e<\/a>\u00a0\u043f\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0437\u0432\u0451\u0437\u0434 \u043d\u0430 GitHub.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/webt\/ju\/zs\/ts\/juzstszbbuntnj8mcr1ac1nknzu.jpeg\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0441\u0432\u043e\u0438\u0442\u044c Bootstrap, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0435\u0433\u043e \u0441\u0430\u043c\u0443\u044e \u0441\u0432\u0435\u0436\u0443\u044e, \u0447\u0435\u0442\u0432\u0451\u0440\u0442\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0437\u043d\u0430\u0447\u0438\u0442, \u044d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u0432\u0430\u0441. \u0417\u0434\u0435\u0441\u044c, \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u043c \u0441\u043a\u0432\u043e\u0437\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043e\u0441\u0432\u043e\u0438\u0442\u044c \u0437\u0430 \u043f\u043e\u043b\u0447\u0430\u0441\u0430, \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043e\u0441\u043d\u043e\u0432\u044b Bootstrap, \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0432\u0448\u0438\u0441\u044c \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432\u044b \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432 \u044d\u0442\u043e\u0442 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/p>\n\n\n\n<h2>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f<\/h2>\n\n\n\n<p>\u042d\u0442\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u043d\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u0432\u043b\u0430\u0434\u0435\u044e\u0449\u0438\u0445 \u043e\u0441\u043d\u043e\u0432\u0430\u043c\u0438 HTML, CSS \u0438 jQuery.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u044b\u0439 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442, \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Bootstrap \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ee3\/66d\/442\/ee366d442aee6425543d89a1e250c863.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0413\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Bootstrap<\/em><\/p>\n\n\n\n<h2>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Bootstrap<\/h2>\n\n\n\n<p>\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Bootstrap \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f&nbsp;<code>npm<\/code>. \u0422\u0443\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install bootstrap<\/code><\/pre>\n\n\n\n<p>Bootstrap \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0435\u0442\u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u0432 \u0442\u0435\u0433&nbsp;<code>&lt;head&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm\" crossorigin=\"anonymous\"><\/code><\/pre>\n\n\n\n<p>\u0421\u0432\u0435\u0436\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Bootstrap \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c&nbsp;<a href=\"http:\/\/getbootstrap.com\/\">\u043e\u0442\u0441\u044e\u0434\u0430<\/a>&nbsp;\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e.<\/p>\n\n\n\n<p>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0440\u0438\u0441\u0443\u043d\u043a\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/66f\/3d5\/552\/66f3d55523625c33f1d7d71ba82eefca.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/em><\/p>\n\n\n\n<h2>\u041e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u0445 Bootstrap 4<\/h2>\n\n\n\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Bootstrap 4 \u0432\u044b\u0448\u043b\u0430 \u0432 \u043a\u043e\u043d\u0446\u0435 \u044f\u043d\u0432\u0430\u0440\u044f \u0441\u0435\u0433\u043e \u0433\u043e\u0434\u0430. \u0422\u0435\u043f\u0435\u0440\u044c Bootstrap \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0431\u044b\u043b\u043e \u0432 \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u0410 \u0438\u043c\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u0431 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f\u0445 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445, \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<ul><li>Bootstrap 4 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043d \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 flexbox, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0432 Bootstrap 3 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f float. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 flexbox \u2014 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430&nbsp;<a href=\"https:\/\/scrimba.com\/p\/pL65cJ\/canLGCw\">\u044d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b<\/a>.<\/li><li>\u0412 Bootstrap 4, \u0432 CSS, \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f&nbsp;<code>rem<\/code>, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f&nbsp;<code>px<\/code>.&nbsp;<a href=\"https:\/\/zellwk.com\/blog\/media-query-units\/\">\u0417\u0434\u0435\u0441\u044c<\/a>&nbsp;\u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0435\u043c \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f.<\/li><li>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a \u043f\u0430\u043d\u0435\u043b\u0438 (panels), \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b.&nbsp;<a href=\"http:\/\/getbootstrap.com\/docs\/4.0\/migration\/#global-changes\">\u0422\u0443\u0442<\/a>&nbsp;\u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0432\u043d\u0435\u0441\u0451\u043d\u043d\u044b\u0445 \u0432 Bootstrap 4.<\/li><\/ul>\n\n\n\n<p>\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u0432 Bootstrap 4 \u043c\u043d\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 Bootstrap 3, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u2014 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c\u0438 \u043d\u043e\u0432\u0448\u0435\u0441\u0442\u0432\u0430\u043c\u0438. \u041c\u044b \u0436\u0435 \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u043d\u0430\u0448\u0438\u043c \u0443\u0447\u0435\u0431\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c.<\/p>\n\n\n\n<h2>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0435\u0442\u043e\u043a Bootstrap<\/h2>\n\n\n\n<p>\u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0441\u0435\u0442\u043e\u043a Bootstrap (Bootstrap Grid System) \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0430\u043a\u0435\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041e\u043d\u0430 \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u043e\u0432. \u0412 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 Bootstrap \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c \u0438\u043c\u0435\u043d\u0430 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (\u043d\u0430\u0434\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u0430&nbsp;<code>.xs<\/code>&nbsp;\u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442).<\/p>\n\n\n\n<p>\u0421\u0435\u0442\u043a\u0430 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0430 \u043d\u0430 12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a, \u044d\u0442\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0430\u044f \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043e\u0439 \u043c\u0430\u043a\u0435\u0442\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Bootstrap-\u0441\u0435\u0442\u043a\u0443, \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.row<\/code>&nbsp;\u043a \u0433\u043b\u0430\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b (\u0432\u043c\u0435\u0441\u0442\u043e \u0437\u0432\u0451\u0437\u0434\u043e\u0447\u043a\u0438 \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u043c\u0435\u043d\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u043b\u043e \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u0439 12-\u043a\u043e\u043b\u043e\u043d\u043e\u0447\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442):<\/p>\n\n\n\n<ul><li><code>col-lg-*<\/code>&nbsp;\u2014 \u043a\u043b\u0430\u0441\u0441, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0432\u0440\u043e\u0434\u0435 \u043d\u043e\u0443\u0442\u0431\u0443\u043a\u043e\u0432;<\/li><li><code>col-md-*<\/code>&nbsp;\u2014 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u043a \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u044b;<\/li><li><code>col-sm-*<\/code>&nbsp;\u2014 \u043a\u043b\u0430\u0441\u0441 \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u044b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u0435, \u043a\u0430\u043a \u0443 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u043e\u0432.<\/li><\/ul>\n\n\n\n<h2>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c<\/h2>\n\n\n\n<p>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438 \u0432 Bootstrap \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430&nbsp;<code>.navbar<\/code>. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u044d\u0442\u043e \u2014 \u043e\u0431\u0451\u0440\u0442\u043a\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043c\u0435\u0449\u0430\u044e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c. \u041d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c. \u041e\u043d\u0430 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043d\u0435 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/673\/afa\/a90\/673afaa9073f384063841e07bc5dcb26.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c<\/em><\/p>\n\n\n\n<p>\u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432&nbsp;<code>index.html<\/code>&nbsp;\u0442\u0435\u0433&nbsp;<code>&lt;nav&gt;<\/code>&nbsp;\u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c&nbsp;<code>.navbar<\/code>, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e, \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0434\u0440\u0443\u0433\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u0432\u0440\u043e\u0434\u0435&nbsp;<code>.navbar-brand<\/code>,&nbsp;<code>.navbar-toggler<\/code>&nbsp;\u0438&nbsp;<code>.nav-item<\/code>, \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u043e \u0441\u0430\u0439\u0442\u0443. \u041a\u043b\u0430\u0441\u0441&nbsp;<code>.fixed-top<\/code>&nbsp;\u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412\u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-lg fixed-top \">\n \u00a0\u00a0&lt;a class=\"navbar-brand\" href=\"#\">Home&lt;\/a>\n \u00a0\u00a0&lt;button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n \u00a0\u00a0\u00a0\u00a0&lt;span class=\"navbar-toggler-icon\">&lt;\/span>\n \u00a0\u00a0&lt;\/button>\n&lt;div class=\"collapse navbar-collapse \" id=\"navbarSupportedContent\">\n \u00a0\u00a0\u00a0\u00a0&lt;ul class=\"navbar-nav mr-4\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link\" href=\"#\">About&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" href=\"#\">Portfolio&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" href=\"#\">Team&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" href=\"#\">Post&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" href=\"#\">Contact&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0&lt;\/ul>\n \u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0&lt;\/div>\n&lt;\/nav><\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b&nbsp;<code>main.css<\/code>&nbsp;\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0435\u0433\u043e \u043a \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0432 \u0432 \u0442\u0435\u0433&nbsp;<code>&lt;head&gt;<\/code>&nbsp;\u0444\u0430\u0439\u043b\u0430&nbsp;<code>index.html<\/code>&nbsp;\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/main.css\"><\/code><\/pre>\n\n\n\n<p>\u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u044f \u0432 \u044d\u0442\u043e\u043c \u0444\u0430\u0439\u043b\u0435 CSS-\u043f\u0440\u0430\u0432\u0438\u043b\u0430. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u044d\u0442\u043e\u0442 CSS-\u0444\u0430\u0439\u043b \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0437\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar{\n background:#F97300;\n}\n.nav-link , .navbar-brand{\n color: #f4f4f4;\n cursor: pointer;\n}\n.nav-link{\n margin-right: 1em !important;\n}\n.nav-link:hover{\n background: #f4f4f4;\n color: #f97300;\n}\n.navbar-collapse{\n justify-content: flex-end;\n}\n.navbar-toggler{\n \u00a0background:#fff !important;\n}<\/code><\/pre>\n\n\n\n<p>\u041d\u043e\u0432\u0430\u044f \u0441\u0435\u0442\u043a\u0430 Bootstrap \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 flexbox, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044e \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043f\u0440\u0430\u0432\u0430, \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e&nbsp;<code>justify-content<\/code>&nbsp;\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043e&nbsp;<code>flex-end<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.navbar-collapse{\n justify-content: flex-end;\n}<\/code><\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u0430\u043c\u0438&nbsp;<code>.bg-light<\/code>&nbsp;(\u0441\u0432\u0435\u0442\u043b\u044b\u0439 \u0444\u043e\u043d),&nbsp;<code>.bg-dark<\/code>&nbsp;(\u0442\u0451\u043c\u043d\u044b\u0439 \u0444\u043e\u043d) \u0438&nbsp;<code>.bg-primary<\/code>&nbsp;(\u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0446\u0432\u0435\u0442 \u0444\u043e\u043d\u0430). \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.bg-dark{\nbackground-color:#343a40!important\n}\n.bg-primary{\nbackground-color:#343a40!important\n}<\/code><\/pre>\n\n\n\n<h2>\u0428\u0430\u043f\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0448\u0430\u043f\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u0435\u0433&nbsp;<code>&lt;header&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header class=\"header\">\n \u00a0\n&lt;\/header><\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043c\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0448\u0430\u043f\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0430 \u0432\u0441\u044e \u0432\u044b\u0441\u043e\u0442\u0443 \u043e\u043a\u043d\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0443\u0442 \u043d\u0430\u043c \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 jQuery. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b&nbsp;<code>main.js<\/code>&nbsp;\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0435\u0433\u043e \u043a&nbsp;<code>index.html<\/code>&nbsp;\u043f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c&nbsp;<code>&lt;body&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script type=\"text\/javascript\" src='js\/main.js'>&lt;\/script><\/code><\/pre>\n\n\n\n<p>\u0412 \u0444\u0430\u0439\u043b&nbsp;<code>main.js<\/code>&nbsp;\u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(document).ready(function(){\n $('.header').height($(window).height());\n})<\/code><\/pre>\n\n\n\n<p>\u041d\u0435\u043b\u0438\u0448\u043d\u0438\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0448\u0430\u043f\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043a\u0430\u043a\u0443\u044e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u0443\u044e \u0444\u043e\u043d\u043e\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*header style*\/\n.header{\n background-image: url('..\/images\/headerback.jpg');\n background-attachment: fixed;\n background-size: cover;\n background-position: center;\n}<\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0442 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/430\/250\/b69\/430250b69b6163597ac0c32516d30733.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0428\u0430\u043f\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441 \u0444\u043e\u043d\u043e\u0432\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c<\/em><\/p>\n\n\n\n<p>\u041f\u043e\u043a\u0430 \u0448\u0430\u043f\u043a\u0430 \u0441\u0430\u0439\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0443\u0441\u0442\u043e\u0432\u0430\u0442\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043d\u0435\u0451 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>, \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0432 \u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.overlay<\/code>, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0431\u043b\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043f\u043e\u0432\u0435\u0440\u0445 \u0444\u043e\u043d\u043e\u0432\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0448\u0430\u043f\u043a\u0438. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0442\u043e\u0442 \u0443\u0447\u0430\u0441\u0442\u043e\u043a \u0444\u0430\u0439\u043b\u0430&nbsp;<code>index.html<\/code>, \u0433\u0434\u0435 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b\u0438 \u0448\u0430\u043f\u043a\u0443, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header class=\"header\">\n \u00a0&lt;div class=\"overlay\">&lt;\/div>\n&lt;\/header><\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u0442\u0435\u043c, \u0432&nbsp;<code>main.css<\/code>, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.overlay{\n position: absolute;\n min-height: 100%;\n min-width: 100%;\n left: 0;\n top: 0;\n background: rgba(244, 244, 244, 0.79);\n}<\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0448\u0430\u043f\u043a\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0415\u0433\u043e \u043c\u044b \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u043c \u0432 \u043d\u043e\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c&nbsp;<code>.containter<\/code>. \u042d\u0442\u043e \u2014 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 Bootstrap, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043d\u0443\u0436\u0434 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0433\u043e \u043c\u0430\u043a\u0435\u0442\u0430. \u0412\u043e\u0442 \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u0448\u0430\u0433\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header class=\"header\">\n \u00a0&lt;div class=\"overlay\">&lt;\/div>\n \u00a0\u00a0&lt;div class=\"container\">\n \u00a0\u00a0\u00a0\n \u00a0\u00a0&lt;\/div>\n \u00a0\n&lt;\/header><\/code><\/pre>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u044e\u0434\u0430 \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043c \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.description<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"description text-center\">\n \u00a0\u00a0&lt;h3>&lt;font color=\"#3AC1EF\">\u258d\n \u00a0\u00a0\u00a0Hello ,Welcome To My officail Website\n \u00a0\u00a0\u00a0&lt;p>\n \u00a0\u00a0\u00a0cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n \u00a0\u00a0\u00a0proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;\/p>\n \u00a0\u00a0\u00a0&lt;button class=\"btn btn-outline-secondary\">See more&lt;\/button>\n \u00a0\u00a0&lt;\/font>&lt;\/h3>\n \u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u042d\u0442\u043e\u043c\u0443 \u0442\u0435\u0433\u0443 \u043c\u044b \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u043c \u0435\u0449\u0451 \u0438 \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.text-center<\/code>, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u044b\u0440\u043e\u0432\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043d\u043e\u043f\u043a\u0430. \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0435\u0451 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c.<\/p>\n\n\n\n<h2>\u041a\u043d\u043e\u043f\u043a\u0438<\/h2>\n\n\n\n<p>\u0412 Bootstrap \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043b\u0430\u0441\u0441\u043e\u0432, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u043c\u043e\u0436\u043d\u043e&nbsp;<a href=\"https:\/\/codepen.io\/Saidalmaghribi\/pen\/oEWgbw\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u041c\u044b, \u043a\u0430\u043a \u0432\u0438\u0434\u043d\u043e \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443&nbsp;<code>&lt;button&gt;<\/code>&nbsp;\u043a\u043b\u0430\u0441\u0441\u044b&nbsp;<code>.btn<\/code>&nbsp;\u0438 .<code>btn-outline-secondary<\/code>.<\/p>\n\n\n\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043b\u0430\u0441\u0441\u0430&nbsp;<code>.description<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.description{\n \u00a0\u00a0\u00a0position: absolute;\n \u00a0\u00a0\u00a0top: 30%;\n \u00a0\u00a0\u00a0margin: auto;\n \u00a0\u00a0\u00a0padding: 2em;\n}\n.description h1{\n color:#F97300 ;\n}\n.description p{\n color:#666;\n font-size: 20px;\n width: 50%;\n line-height: 1.5;\n}\n.description button{\n border:1px \u00a0solid #F97300;\n background:#F97300;\n color:#fff;\n}<\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0448\u0430\u043f\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/366\/13f\/ec6\/36613fec64f3642a5d5e39fae23b17db.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0428\u0430\u043f\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/em><\/p>\n\n\n\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b About<\/h2>\n\n\n\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c. \u041f\u0435\u0440\u0435\u0434 \u0432\u0430\u043c\u0438 \u2014 \u0440\u0430\u0437\u0434\u0435\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u043e \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f\u043c\u0438 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6c1\/37f\/e7c\/6c137fe7c6c6f75b69065a8db321978e.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0420\u0430\u0437\u0434\u0435\u043b About<\/em><\/p>\n\n\n\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0441\u0435\u0442\u043a\u0438 Bootstrap \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0435\u0442 \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0447\u0430\u0441\u0442\u0435\u0439. \u041f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c \u043a \u0440\u0430\u0431\u043e\u0442\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0430&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u043a\u043b\u0430\u0441\u0441&nbsp;<code>.row<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043c\u0430\u043a\u0435\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0430 \u0441\u043b\u0435\u0432\u0430, \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044e. \u0412\u0442\u043e\u0440\u0430\u044f \u0447\u0430\u0441\u0442\u044c, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0441\u043f\u0440\u0430\u0432\u0430, \u0432\u043c\u0435\u0441\u0442\u0438\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\"> \n \/\/ \u043b\u0435\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c\n&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-3.jpg\" class=\"img-fluid\">\n \u00a0\u00a0\u00a0&lt;span class=\"text-justify\">S.Web Developer&lt;\/span>\n &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u0410 \u0432\u043e\u0442 \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u0430\u043a\u0435\u0442\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-3.jpg\" class=\"img-fluid\">\n \u00a0\u00a0\u00a0&lt;span class=\"text-justify\">S.Web Developer&lt;\/span>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-8 col-md-8 col-sm-12 desc\">\n \u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0&lt;h3>&lt;font color=\"#3AC1EF\">\u258dD.John&lt;\/font>&lt;\/h3>\n \u00a0\u00a0\u00a0&lt;p>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n \u00a0\u00a0\u00a0\u00a0tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n \u00a0\u00a0\u00a0\u00a0quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n \u00a0\u00a0\u00a0\u00a0consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n \u00a0\u00a0\u00a0\u00a0cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n \u00a0\u00a0\u00a0\u00a0proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \u00a0\u00a0\u00a0&lt;\/p>\n \u00a0\u00a0&lt;\/div>\n \u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0448\u0438\u0440\u0438\u043d\u044b \u0441\u0442\u043e\u043b\u0431\u0446\u043e\u0432 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432&nbsp;<code>col-lg-*<\/code>,&nbsp;<code>col-md-*<\/code>&nbsp;\u0438&nbsp;<code>col-sm-*<\/code>.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u044d\u0442\u043e\u0433\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.about{\n margin: 4em 0;\n padding: 1em;\n position: relative;\n}\n.about h1{\n color:#F97300;\n margin: 2em;\n}\n.about img{\n height: 100%;\n \u00a0\u00a0\u00a0width: 100%;\n \u00a0\u00a0\u00a0border-radius: 50%\n}\n.about span{\n display: block;\n color: #888;\n position: absolute;\n left: 115px;\n}\n.about .desc{\n padding: 2em;\n border-left:4px solid #10828C;\n}\n.about .desc h3{\n color: #10828C;\n}\n.about .desc p{\n line-height:2;\n color:#888;\n}<\/code><\/pre>\n\n\n\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b Portfolio<\/h2>\n\n\n\n<p>\u0417\u0430\u0439\u043c\u0451\u043c\u0441\u044f \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u043c, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e \u043f\u043e\u0440\u0442\u0444\u043e\u043b\u0438\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0433\u0430\u043b\u0435\u0440\u0435\u044e \u0440\u0430\u0431\u043e\u0442.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/28d\/bf5\/29c\/28dbf529c3c54169aa4ef55b15f6e7e2.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0420\u0430\u0437\u0434\u0435\u043b Portfolio<\/em><\/p>\n\n\n\n<p>\u041f\u0440\u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043c\u0430\u043a\u0435\u0442\u0430 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0442\u0435 \u0436\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0441\u0435\u0442\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0432\u044b\u0448\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- portfolio -->\n&lt;div class=\"portfolio\">\n \u00a0\u00a0\u00a0\u00a0&lt;h1 class=\"text-center\">Portfolio&lt;\/h1>\n &lt;div class=\"container\">\n \u00a0&lt;div class=\"row\">\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port13.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port1.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port6.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port3.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port11.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/electric.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/Classic.jpg\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port1.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/portfolio\/port8.png\" class=\"img-fluid\">\n \u00a0\u00a0&lt;\/div>\n \u00a0&lt;\/div>\n &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430&nbsp;<code>.img-fluid<\/code>&nbsp;\u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u043c\u0438.<\/p>\n\n\n\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043d\u0430\u0448\u0435\u0439 \u0433\u0430\u043b\u0435\u0440\u0435\u0435, \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 4 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 (\u043d\u0430\u043f\u043e\u043c\u043d\u0438\u043c \u2014 \u043a\u043b\u0430\u0441\u0441&nbsp;<code>col-sm-12<\/code>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438, \u043a\u043b\u0430\u0441\u0441&nbsp;<code>col-md-4<\/code>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432,&nbsp;<code>col-lg-4<\/code>&nbsp;\u2014 \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438). \u041a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u043d\u0430 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 33.3% \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430-\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d (12 \u043a\u043e\u043b\u043e\u043d\u043e\u043a).<\/p>\n\n\n\n<p>\u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c \u0433\u0430\u043b\u0435\u0440\u0435\u044e \u0440\u0430\u0431\u043e\u0442:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/*Portfolio*\/\n.portfolio{\n margin: 4em 0;\n \u00a0\u00a0\u00a0position: relative; \n}\n.portfolio h1{\n color:#F97300;\n margin: 2em; \n}\n.portfolio img{\n \u00a0height: 15rem;\n \u00a0width: 100%;\n \u00a0margin: 1em;\n}<\/code><\/pre>\n\n\n\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b Blog \u0438 \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438<\/h2>\n\n\n\n<p>\u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u0430\u043d\u043e\u043d\u0441\u044b \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0438\u0437 \u0431\u043b\u043e\u0433\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0451\u0442 \u043d\u0430\u0448 \u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/be1\/ddc\/aae\/be1ddcaae471c7e9eb8145b91819b2e7.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0420\u0430\u0437\u0434\u0435\u043b Blog<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 (cards \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 Bootstrap).<\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443, \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043c\u0430\u043a\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.card<\/code>. \u0414\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b:<\/p>\n\n\n\n<ul><li><code>.card-header<\/code>: \u0448\u0430\u043f\u043a\u0430<\/li><li><code>.card-body<\/code>: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435<\/li><li><code>.card-title<\/code>: \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a<\/li><li><code>.card-footer<\/code>: \u043f\u043e\u0434\u0432\u0430\u043b<\/li><li><code>.card-image<\/code>: \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/li><\/ul>\n\n\n\n<p>HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Posts section -->\n&lt;div class=\"blog\">\n &lt;div class=\"container\">\n &lt;h1 class=\"text-center\">Blog&lt;\/h1>\n \u00a0&lt;div class=\"row\">\n \u00a0\u00a0&lt;div class=\"col-md-4 col-lg-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;div class=\"card\">\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-img\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/posts\/polit.jpg\" class=\"img-fluid\">\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-body\">\n \u00a0\u00a0\u00a0\u00a0&lt;h4 class=\"card-title\">Post Title&lt;\/h4>\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;p class=\"card-text\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-footer\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\" class=\"card-link\">Read more&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-md-4 col-lg-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;div class=\"card\">\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-img\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/posts\/images.jpg\" class=\"img-fluid\">\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-body\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h4 class=\"card-title\">Post Title&lt;\/h4>\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;p class=\"card-text\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-footer\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\" class=\"card-link\">Read more&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-md-4 col-lg-4 col-sm-12\">\n \u00a0\u00a0\u00a0&lt;div class=\"card\">\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-img\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/posts\/imag2.jpg\" class=\"img-fluid\">\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-body\">\n \u00a0\u00a0\u00a0\u00a0&lt;h4 class=\"card-title\">Post Title&lt;\/h4>\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;p class=\"card-text\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/p>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"card-footer\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;a href=\"\" class=\"card-link\">Read more&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;\/div>\n \u00a0&lt;\/div>\n &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.blog{\n margin: 4em 0;\n position: relative; \n}\n.blog h1{\n color:#F97300;\n margin: 2em; \n}\n.blog .card{\n box-shadow: 0 0 20px #ccc;\n}\n.blog .card img{\n width: 100%;\n height: 12em;\n}\n.blog .card-title{\n color:#F97300;\n \u00a0\n}\n.blog .card-body{\n padding: 1em;\n}<\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043d\u0430\u0448 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043d\u0438\u043a \u043f\u043e\u0441\u043b\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430 Blog:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/9d3\/1d0\/237\/9d31d0237e96c7b5e0ab27a0315c2106.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430 Blog<\/em><\/p>\n\n\n\n<h2>\u0420\u0430\u0437\u0434\u0435\u043b Team<\/h2>\n\n\n\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u044b \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/afe\/ec2\/18a\/afeec218a798e9cf73adbd86f07cb570.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0420\u0430\u0437\u0434\u0435\u043b Team<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0441\u0435\u0442\u043a\u043e\u0439, \u043f\u043e\u0440\u043e\u0432\u043d\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0432 \u0438\u043c\u0435\u044e\u0449\u0435\u0435\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0438 \u0441\u0440\u0435\u0434\u043d\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445) \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c 3 \u043a\u043e\u043b\u043e\u043d\u043a\u0438 \u0441\u0435\u0442\u043a\u0438, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 25% \u043e\u0431\u0449\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430.<\/p>\n\n\n\n<p>\u0412\u043e\u0442 HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0430:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Team section -->\n&lt;div class=\"team\">\n &lt;div class=\"container\">\n \u00a0\u00a0\u00a0&lt;h1 class=\"text-center\">Our Team&lt;\/h1>\n \u00a0&lt;div class=\"row\">\n \u00a0\u00a0&lt;div class=\"col-lg-3 col-md-3 col-sm-12 item\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-2.jpg\" class=\"img-fluid\" alt=\"team\">\n \u00a0\u00a0\u00a0&lt;div class=\"des\">\n \u00a0\u00a0\u00a0\u00a0\u00a0Sara\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;span class=\"text-muted\">Manager&lt;\/span>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-3 col-md-3 col-sm-12 item\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-3.jpg\" class=\"img-fluid\" alt=\"team\">\n \u00a0\u00a0\u00a0&lt;div class=\"des\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Chris\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;span class=\"text-muted\">S.enginner&lt;\/span>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-3 col-md-3 col-sm-12 item\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-2.jpg\" class=\"img-fluid\" alt=\"team\">\n \u00a0\u00a0\u00a0&lt;div class=\"des\">\n \u00a0\u00a0\u00a0\u00a0\u00a0Layla \n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;span class=\"text-muted\">Front End Developer&lt;\/span>\n \u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;div class=\"col-lg-3 col-md-3 col-sm-12 item\">\n \u00a0\u00a0\u00a0&lt;img align=\"center\" src=\"images\/team-3.jpg\" class=\"img-fluid\" alt=\"team\">\n \u00a0\u00a0\u00a0\u00a0&lt;div class=\"des\">\n \u00a0\u00a0\u00a0\u00a0\u00a0J.Jirard\n \u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;span class=\"text-muted\">Team Manger&lt;\/span>\n \u00a0\u00a0&lt;\/div>\n \u00a0&lt;\/div>\n &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u0410 \u0432\u043e\u0442 \u2014 \u0441\u0442\u0438\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.team{\n margin: 4em 0;\n position: relative; \u00a0\n}\n.team h1{\n color:#F97300;\n margin: 2em; \n}\n.team .item{\n position: relative;\n}\n.team .des{\n background: #F97300;\n color: #fff;\n text-align: center;\n border-bottom-left-radius: 93%;\n transition:.3s ease-in-out;\n}<\/code><\/pre>\n\n\n\n<p>\u0423\u043a\u0440\u0430\u0441\u0438\u043c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0435\u0439\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043a, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/219\/d16\/95b\/219d1695b12ad1dff0c25833aad14f38.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432&nbsp;<code>main.css<\/code>&nbsp;\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.team .item:hover .des{\n height: 100%;\n background:#f973007d;\n position: absolute;\n width: 89%;\n padding: 5em;\n top: 0;\n border-bottom-left-radius: 0;\n}<\/code><\/pre>\n\n\n\n<h2>\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438<\/h2>\n\n\n\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0444\u043e\u0440\u043c\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u043b\u0430\u0434\u0435\u043b\u044c\u0446\u0443 \u0441\u0430\u0439\u0442\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f. \u0422\u0443\u0442, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0438\u0445 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0441\u0442\u044c, \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 Bootstrap.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/767\/6a8\/68e\/7676a868ed9f4993061f4bb28f1c8e45.png\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u0424\u043e\u0440\u043c\u0430 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438<\/em><\/p>\n\n\n\n<p>\u041a\u0430\u043a \u0438 \u0432 Bootstrap 3, \u0432 Bootstrap 4 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.form-control<\/code>&nbsp;\u0434\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0443\u0442 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u043a\u043e\u0435-\u0447\u0442\u043e \u043d\u043e\u0432\u043e\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u2014 \u0432\u043c\u0435\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430&nbsp;<code>.input-group-addon<\/code>&nbsp;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0439 \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.input-group-prepend<\/code>&nbsp;(\u0434\u043b\u044f \u0437\u043d\u0430\u0447\u043a\u043e\u0432 \u0438 \u043c\u0435\u0442\u043e\u043a). \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043e\u0431 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432&nbsp;<a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/migration\/#input-groups\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>&nbsp;\u043a Bootstrap 4. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u043e \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u043a\u043b\u0430\u0441\u0441&nbsp;<code>.form-group<\/code>.<\/p>\n\n\n\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>index.html<\/code>&nbsp;\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Contact form -->\n&lt;div class=\"contact-form\">\n &lt;div class=\"container\">\n \u00a0&lt;form>\n \u00a0\u00a0&lt;div class=\"row\">\n \u00a0\u00a0\u00a0&lt;div class=\"col-lg-4 col-md-4 col-sm-12\">\n \u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1>Get in Touch&lt;\/h1> \n \u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0&lt;div class=\"col-lg-8 col-md-8 col-sm-12 right\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"text\" class=\"form-control form-control-lg\" placeholder=\"Your Name\" name=\"\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"email\" class=\"form-control form-control-lg\" placeholder=\"YourEmail@email.com\" name=\"email\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;textarea class=\"form-control form-control-lg\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/textarea>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" class=\"btn btn-secondary btn-block\" value=\"Send\" name=\"\">\n \u00a0\u00a0\u00a0&lt;\/div>\n \u00a0\u00a0&lt;\/div>\n \u00a0&lt;\/form>\n &lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u0412\u043e\u0442 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430 \u0441 \u0444\u043e\u0440\u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>main.css<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.contact-form{\n margin: 6em 0;\n position: relative; \u00a0\n}\n.contact-form h1{\n padding:2em 1px;\n color: #F97300; \n}\n.contact-form .right{\n max-width: 600px;\n}\n.contact-form .right .btn-secondary{\n background: \u00a0#F97300;\n color: #fff;\n border:0;\n}\n.contact-form .right .form-control::placeholder{\n color: #888;\n font-size: 16px;\n}<\/code><\/pre>\n\n\n\n<h2>\u0428\u0440\u0438\u0444\u0442\u044b<\/h2>\n\n\n\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u043c. \u041c\u044b, \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0432\u0448\u0438\u0441\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 Google Font API, \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0448\u0440\u0438\u0444\u0442 Raleway. \u041e\u043d \u0431\u0443\u0434\u0435\u0442 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u0441\u044f \u0437\u0434\u0435\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u0414\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0448\u0440\u0438\u0444\u0442\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>main.css<\/code>&nbsp;\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@import url('https:\/\/fonts.googleapis.com\/css?family=Raleway');<\/code><\/pre>\n\n\n\n<p>\u0417\u0430\u0442\u0435\u043c \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 HTML-\u0442\u0435\u0433\u043e\u0432:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>html,h1,h2,h3,h4,h5,h6,a{\n font-family: \"Raleway\";\n}<\/code><\/pre>\n\n\n\n<h2>\u042d\u0444\u0444\u0435\u043a\u0442\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/h2>\n\n\n\n<p>\u041d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ee3\/66d\/442\/ee366d442aee6425543d89a1e250c863.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>\u041f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438<\/em><\/p>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u0440\u0438 \u0449\u0435\u043b\u0447\u043a\u0430\u0445 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0430\u0441\u044c \u043a \u043d\u0443\u0436\u043d\u043e\u043c\u0443 \u0440\u0430\u0437\u0434\u0435\u043b\u0443, \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0440\u0438\u0431\u0435\u0433\u043d\u0443\u0442\u044c \u043a \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c jQuery. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439, \u0437\u043d\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u0442\u0443\u0442 \u043d\u0435\u0442 \u2014 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043d\u0438\u0436\u0435\u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b&nbsp;<code>main.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$(\".navbar a\").click(function(){\n \u00a0$(\"body,html\").animate({\n \u00a0\u00a0scrollTop:$(\"#\" + $(this).data('value')).offset().top\n \u00a0},1000)\n \u00a0\n })<\/code><\/pre>\n\n\n\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<code>data-value<\/code>&nbsp;\u043a \u043a\u0430\u0436\u0434\u043e\u0439 \u0438\u0437 \u0441\u0441\u044b\u043b\u043e\u043a \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0438 \u043f\u0440\u0438\u0432\u0435\u0434\u0438\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0432\u0438\u0434\u0443:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link\" data-value=\"about\" href=\"#\">About&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" data-value=\"portfolio\" href=\"#\">Portfolio&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" data-value=\"blog\" href=\"#\">Blog&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" data-value=\"team\" href=\"#\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Team&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;li class=\"nav-item\">\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;a class=\"nav-link \" data-value=\"contact\" href=\"#\">Contact&lt;\/a>\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/li><\/code><\/pre>\n\n\n\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u044d\u0442\u043e, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043b\u0438\u0448\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<code>id<\/code>&nbsp;\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u043e\u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043b\u0435\u0434\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u044b\u043b\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u043e \u0442\u043e\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0434\u0430\u043d\u043e \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435&nbsp;<code>data-value<\/code>&nbsp;\u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0430 About:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"about\" id=\"about\">&lt;\/div><\/code><\/pre>\n\n\n\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0448 \u043f\u0440\u0438\u043c\u0435\u0440 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043d.&nbsp;<a href=\"https:\/\/github.com\/hayanisaid\/bootstrap4-website\">\u0412\u043e\u0442<\/a>&nbsp;\u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 GitHub.<\/p>\n\n\n\n<h2>\u0418\u0442\u043e\u0433\u0438<\/h2>\n\n\n\n<p>Bootstrap 4 \u2014 \u044d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u041e\u043d \u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0432\u044b\u0441\u043e\u043a\u043e\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0441\u043e\u0447\u0435\u0442\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, Bootstrap \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u043c\u0430\u043a\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a Bootstrap\u00a0\u2014\u00a0\u044d\u0442\u043e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0441\u0430\u0439\u0442\u043e\u0432 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[101],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1238"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1238"}],"version-history":[{"count":2,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1238\/revisions"}],"predecessor-version":[{"id":1303,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1238\/revisions\/1303"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}