{"draftJsState":{"blocks":[{"data":{"image":{"id":"5d7c6a30e882c300b33afd4c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5uhi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":344,"style":"BOLD"},{"length":5,"offset":360,"style":"BOLD"},{"length":4,"offset":367,"style":"BOLD"},{"length":14,"offset":386,"style":"BOLD"}],"text":"Существует довольно много шаблонов и учебных пособий для создания целевых страниц. Однако большинство из них имеют тенденцию слишком усложнять код или добавлять тяжелый дизайн (например, несколько страниц, форм и т. д.). К тому же, в большинстве случаев требуется очень простой и компактный дизайн. Кроме того, мы покажем вам, как использовать в основном CSS (Grid и Flex) для создания адаптивного UI вместо использования старых CSS-библиотек (таких как bootstrap). Итак, давайте приступим!","type":"unstyled","key":"dhbup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы собираемся создать базовый макет целевой страницы, ориентируясь на основные принципы, чтобы вы могли перенести его на желаемую целевую страницу. Вот пример результата:","type":"unstyled","key":"b76s1"},{"data":{"image":{"id":"5d82fb6898fe7900ac28ad6e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"17a8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Страница будет состоять из четырех основных компонентов: панель меню, изображение главной, сетка карточек и, наконец, footer.","type":"unstyled","key":"34j9o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"index.html довольно прост. Он содержит в основном теги div и общую структуру страницы:","type":"unstyled","key":"bhvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n Basic LP Layout\n \n\n\n \n

Making the world a better place

Team play

We work together to create impact

\n \n

Strategy

Every goal is part of our strategy

\n \n

Innovation

We're focused on thinking different

\n \n

\n \n\n\n","type":"blockquote","key":"4kag0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fomj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому мы сосредоточимся исключительно на стилизации (CSS).","type":"unstyled","key":"c90un"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили макетов с помощью сетки и Flex","type":"header-three","key":"62asd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":30,"style":"BOLD"},{"length":4,"offset":173,"style":"BOLD"}],"text":"Основное правило: используйте Grid, когда вам нужен дизайн в виде сеток, такие как таблицы, открытки, обложки альбомов (как в Instagram). Во всех других случаях используйте Flex.","type":"unstyled","key":"c3uv2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Панель меню","type":"unstyled","key":"2494i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":264,"style":"ITALIC"}],"text":"Мы будем использовать Flex, поэтому для нашей панели меню у нас будет строка в одном направлении. Поскольку мы используем тег

, удалим точки списка (стиль списка). Наконец, удалим все поля по умолчанию, установленные браузером, поэтому мы сбрасываем значение margin: 0. ","type":"unstyled","key":"f2jjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".main-nav {\n display: flex;\n list-style: none;\n margin: 0;\n font-size: 0.7em;\n}","type":"blockquote","key":"c113v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5617j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При изменении ширины нашего браузера мы видим, что часть навигационной панели вырезана, поэтому нам нужно изменить ее внешний вид при изменении ширины браузера: ","type":"unstyled","key":"4peov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media only screen and (max-width: 600px) {\n .main-nav {\n font-size: 0.5em;\n padding: 0;\n }\n}","type":"blockquote","key":"51n9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8gsc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":65,"style":"ITALIC"}],"text":"Для того чтобы опция «Contact» была прикреплена вправо установим margin-left: auto. Это автоматически установит максимальный запас слева от гиперссылки: ","type":"unstyled","key":"6t6in"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".push {\n margin-left: auto;\n}","type":"blockquote","key":"flivs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"97pma"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наконец, нам бы хотелось, чтобы навигационная панель оставалась прикрепленной кверху страницы. Кроме того, необходимо чтобы он отображался над всеми другими элементами (z-index): ","type":"unstyled","key":"bmntt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".sticky {\n position: fixed;\n z-index: 1;\n top: 0;\n width: 100%;\n}","type":"blockquote","key":"earf0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"483ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"Cover","type":"unstyled","key":"3eqsl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы используем Flex, поскольку стремимся к простоте (просто центрируем контент). После настройки нашего дисплея на адаптивность, нам нужно выровнить содержимое по центру по горизонтали внутри контейнера (ось X) и центрировать элементы по вертикали (ось Y). Мы хотим, чтобы изображение занимало весь экран, поэтому мы устанавливаем высоту 100vh, что означает 100% высоты просмотра: ","type":"unstyled","key":"enono"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n}","type":"blockquote","key":"8qrhu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6rgbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кроме того, мы хотели бы, чтобы текст обложки отображался над изображением и в центре: ","type":"unstyled","key":"2re2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".coverText {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n color: white;\n font-weight: bold;\n}","type":"blockquote","key":"7cv54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ilkr"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":14,"offset":43}],"inlineStyleRanges":[],"text":"Полную таблицу стилей CSS можно посмотреть по этой ссылке.","type":"unstyled","key":"49ma4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Сетка карточек","type":"unstyled","key":"2kspb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":99,"style":"ITALIC"},{"length":8,"offset":467,"style":"ITALIC"}],"text":"Как описано выше, мы хотим создать сетку карточек, поэтому на этот раз мы будем использовать Grid. grid-template-columns устанавливает стиль каждого столбца (или div). К вашему сведению: если бы мы просто установили 1fr, мы бы увидели только один блок в одном столбце. Таким образом, мы настроили его на повторение (точно так же, как при вводе 1fr 1fr…) и автоматическое заполнение дисплея с минимальным значением 350px на весь экран (1fr). Наконец, мы устанавливаем grid-gap (отступ между объектами сетки) равным 20px: ","type":"unstyled","key":"a0h12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".grid-wrapper {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n grid-gap: 10px;\n}","type":"blockquote","key":"7omu0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5a2ne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее стилизуем каждую карточку в сетке. Ниже приведен довольно простой способ установки поля для карточки и цвета фона: ","type":"unstyled","key":"fgqmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card {\n background-color: #444;\n margin: 50px;\n}","type":"blockquote","key":"br9a2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"frslh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":146,"style":"ITALIC"}],"text":"Необходимо сделать так, чтобы на каждой карточке было изображение, занимающее всю верхнюю область, а под ним - заголовок и абзац, а также кнопка «Learn more». Кроме того, изображения, заголовки и абзацы в карточке должны меняться в масштабе при изменении браузера, поэтому мы установим следующие значения: ","type":"unstyled","key":"76lb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card > img {\n max-width: 100%;\n height: auto;\n}\n\n.card h1 {\n font-size: 1.5rem;\n}\n\n.card p {\n font-size: 1rem;\n}","type":"blockquote","key":"26tdn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cj6ve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хотя изображение занимает 100% ширины карточки, добавим несколько приятных отступов в текстовую область карточки: ","type":"unstyled","key":"cs606"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".card > .text {\n padding: 0 20px 20px;\n}","type":"blockquote","key":"ibqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ehsa7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":86,"style":"ITALIC"}],"text":"Наконец, стилизуем дизайн кнопки, который находится внутри каждой карточки. Установим border: 0 (поскольку по умолчанию карточка отображается с рамкой) и добавим некоторые отступы, цвет и т. д. ","type":"unstyled","key":"8rfhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button {\n cursor: pointer;\n background: gray;\n border: 0;\n font-size: 1rem;\n color: white;\n padding: 10px;\n width: 100%;\n}\n\nbutton:hover {\n background-color: #e0d27b;\n}","type":"blockquote","key":"3u5sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"88qoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Footer","type":"unstyled","key":"bidr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И последнее, но не менее важное: наш footer. Сделаем размер внутреннего текста меньше, чем по умолчанию, и зальем footer цветом: ","type":"unstyled","key":"1iscs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"footer {\n text-align: center;\n padding: 3px;\n background-color: #30336b;\n}\n\nfooter p {\n font-size: 1rem;\n}","type":"blockquote","key":"f94lg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1fknp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следуя этой простой адаптивной компоновке, вы можете создать практически любую целевую страницу, какую пожелаете. Чтобы поднять этот макет на новый уровень, можете воспользоваться некоторыми библиотеками анимации:","type":"unstyled","key":"67g6c"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":11,"offset":0}],"inlineStyleRanges":[],"text":"Sweet Alert - позволяет добавить стильные оповещения.","type":"unordered-list-item","key":"7qhdk"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Typed.js - этот плагин для jQuery позволяет эмулировать эффект печатной машинки.","type":"unordered-list-item","key":"4dfaq"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":7,"offset":0},{"key":4,"length":1,"offset":7}],"inlineStyleRanges":[],"text":"Auroral - анимированные градиентные фоны.","type":"unordered-list-item","key":"d80qf"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":12,"offset":0}],"inlineStyleRanges":[],"text":"Owl Carousel - позволяет создать красивый адаптивный слайдер в виде карусели","type":"unordered-list-item","key":"cser3"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":11,"offset":0}],"inlineStyleRanges":[],"text":"Animate.css - добавляет анимацию стиля при загрузке элементов.","type":"unordered-list-item","key":"3snks"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":5,"offset":43}],"inlineStyleRanges":[],"text":"Чтобы скачать полный исходный код, нажмите здесь!","type":"unstyled","key":"dla0m"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":19,"offset":10}],"inlineStyleRanges":[],"text":"Источник: www.assafelovic.com.","type":"unstyled","key":"ags68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"mnzt7C5fVo725Yaujz0T"}],"entityMap":{"0":{"data":{"url":"https://github.com/assafelovic/Basic-Landing-Page-Layout/blob/master/style.css"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://sweetalert.js.org/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://compnot.ru/frontend/typed-js/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://lunarlogic.github.io/auroral/","url":"https://lunarlogic.github.io/auroral/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://lunarlogic.github.io/auroral/#agrabah"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://owlcarousel2.github.io/OwlCarousel2/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://daneden.github.io/animate.css/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://github.com/assafelovic/Basic-Landing-Page-Layout"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"http://www.assafelovic.com/","url":"http://www.assafelovic.com/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}