Керівник відділу випускників проводить нараду «Hero Panel» за участю керівника «Hero», «Hero Par» та батальйону. Створіть копію класу розділу перед зміною фону — оскільки він є спільним, зображення змінюватиметься на кожній сторінці, де його використовують. Ширина «Hero Panel» становить 30 відсотків; широке комбіноване поле збільшує її до 35.
BtnТой самий герой із комбінацією клавіш «Right» на секції, що переміщує панель на інший бік. Усе всередині залишається без змін — змінюється лише значення параметра justify-content секції.
Btn«Sec» — це смуга: 50 пікселів зверху та знизу, а також колір «Teal» або «Grey». «Inner» — це колонка з вмістом, що розміщена всередині неї: максимально 1296 пікселів, відступ 100 пікселів, проміжок 20 пікселів, відступ 25 пікселів на відстані 479 пікселів.
Основний абзац
Дві смуги завжди розташовані на відстані 100 пікселів одна від одної. Це виглядає правильно, коли колір змінюється, і виглядає вдвічі ширше, коли колір не змінюється — тому нижня смуга в парі одного кольору торкається верхньої, що обнуляє її верхнє відступлення. Нижча смуга має це відступлення.
Список з маркерів на елементі `ul`, маркер на кожному елементі та звичайний абзац `par` всередині нього. Атрибут `Bullets` встановлює відступ 22px та колір маркера; атрибут `Bullet` — відстань 8px між елементами. На блакитно-зеленій смузі використовуйте атрибути `Bullets + On Teal` та `Par + On Teal`, інакше маркери залишаться блакитно-зеленими на блакитно-зеленому тлі.
Хочете відчувати себе впевнено та підготовленими, коли виходите на роботу
Хочете спробувати створити власний стартап
Хочете дізнатися більше про бізнес та підприємництво
Хочете розвинути навички, які цінують роботодавці по всьому світу?
Хочете покращити своє резюме або профіль студента для подальшого навчання
Білий колір під білим, тому ця смуга перетинається. Увага: прихована ділянка не відображається, тому в «Навігаторі» смуга може, зрештою, стикатися зі смугою, що знаходиться на відстані двох позицій.
Використовуйте комбінований клас «touching», щоб прибрати верхнє відступлення, завдяки чому розділи виглядатимуть більш цілісно
Par + Primary — одна виділена рядок, а не абзац.
Par + On Teal — основний текст на тлі кольору «тіл». Якщо пропустити цю комбінацію, текст залишиться кольору «тіл» на тлі кольору «тіл».
Примітка + Про колір «тіл» — виноска розміром 12 пікселів.
Рядок піктограм, без блоку. Кожна комірка є елементом смуги. На білій смузі напис має мати вигляд «Bar Par + Dark». Ніколи не розміщуйте рядок піктограм усередині смуги — «Stats» є версією без блоку.
Значки чергуються: «Коло + бірюзовий» та «Коло + основний колір». На бірюзовому значку додайте «Коло + світлий», щоб змінити колір піктограми на білий. Функція «Два вгору» формує рядок розміром 2x2 на 479 пікселів замість одного стовпчика.
Сітка з чотирма стовпцями, відступ 30 пікселів. Картка = зображення картки + основний текст картки + заголовок картки. Зображення картки має фіксовану висоту 200 пікселів, завдяки чому всі картки мають однакову висоту. Для кольору «teal» застосуйте стилі «On Teal» та «Primary». Зверніть увагу: картки мають нижнє поле 10 пікселів, тому розділ, що закінчується карткою, розташовується на відстані 110 пікселів від наступного, а не 100 пікселів.
Я брав участь у реальних проєктах, пілотних проектах та партнерських ініціативах. І зрештою, завдяки рекомендаціям та моїй участі в програмі «Svitlo Graduates», я став фахівцем з автоматизації бізнес-процесів.
.png)
Програма «Svitlo Graduates» дала мені набагато більше, ніж просто інструменти для кар’єри, нові знайомства чи навіть неймовірну поїздку до Лондона. Вона дала мені віру в себе. Коли я дивлюся на себе зараз, то бачу, наскільки я виросла
Я був приємно здивований тим, скільки там було зустрічей. Найкориснішим для мене було створення власного профілю в LinkedIn.
Найбільше мені подобається відчуття спільності та бесіди про кар’єру з найрізноманітнішими спікерами, які розширюють кругозір і показують, скільки можливостей існує у світі.
Використовується гнучкий рядок замість 4-колонкової сітки, тому будь-яка кількість елементів розміщується в одному рядку. Дві колонки шириною 479 пікселів. Дочірніми елементами тут є «Bar Items», а не «Cards».
По всьому тексту використовується стиль «Manrope». Колір «бірюзовий» #0A3A40, «золотий» #E6A831, «біло-димчастий» #F2F2F2. Усі класи тексту мають нульові поля — проміжки забезпечуються за рахунок 20px відступу класу «Inner».
Par — 16 / 27,2, вага 400. Один елемент Par на кожен розділ із розривами рядків усередині нього; ніколи не розміщуйте два елементи Par поспіль.
Примітка — 12 / 19, вирівняно по центру.
«QuoteMark — це плаваюча золота вступна лапка розміром 80 пікселів, розташована в першому рядку абзацу. Це елемент типу span, а не block — розмістіть його першим у абзаці, і нехай текст обтікає його, як це зроблено тут.
«Wide Left» має значення 1,4fr / 1fr: текст розміщується у широкій колонці, а зображення — праворуч. Параметр «justify-items end» зміщує зображення до правого краю його комірки. Зображенням є «Img Big» із параметром «bttm shifted», що фіксує обрізку у верхній частині фотографії, коли інакше голова могла б бути обрізана.
«Wide Right» — це дзеркальне відображення: 1fr / 1,4fr, причому зображення спочатку розміщується в «Навігаторі», тож воно опиняється ліворуч. Той самий відступ у 60 пікселів, той самий одноколонний макет шириною 479 пікселів. Використовуйте той варіант, який розміщує зображення з потрібного вам боку — чергування їх у міру прокрутки сторінки дозволяє уникнути враження, що це шаблон.
У розділі «Заявки студентів» у правій колонці замість фотографії розміщена картка з датою наступного вебінару. Це може бути також смуга, відео або окрема картка — для Cols важливо лише те, щоб там було двоє дітей. Застосуйте до картки комбінацію «Заповнення», щоб вона займала всю колонку.
Субота, 27 вересня
18:00 Київ, 45 хвилин
Англійською та українською мовами
Для батьків та учнів
Пара додає пробіл у 20 пікселів і дозволяє кнопкам переноситися на наступний рядок. Елемент `Btn` має нульові поля, тому позиціонування здійснює рядок.
18 / 25, вага 700, колір «бірюзовий». Елемент H3 між елементом Head та його Par. Ніколи не називайте клас Sub — Webflow зарезервував цей ім’я, і клас не буде прив’язаний без попередження.
Золота версія. Вирівнюється по центру на відстані 479 пікселів.
Три колонки. При накладенні кнопка піднімається на 40 пікселів, щоб вона розташовувалася над фотографією. Якщо фіксоване обрізання на 200 пікселів обрізає об’єкт знімка, додайте «Card Img» із зсувом вліво або вниз, замість того щоб змінювати висоту.
Btn — це «золота пігулка»: радіус 6 пікселів, нульові відступи — її розміщення забезпечує рядок. Btn + hidden приховує кнопку лише на відстані 479 пікселів.
Коробка блакитного кольору з заокругленими кутами, радіус 15 пікселів. Кожна комірка — це елемент «Bar Item», що містить значення «Bar Num» та «Bar Par». Упорядковуються у стовпець шириною 479 пікселів. Для таких самих комірок без коробки використовуйте «Stats».
«Bar» + «Gold». Обидва класи тексту повинні мати атрибут «On Gold», інакше вони залишаться білими.
Та сама смуга зі значком сходинки та значком стрілки. Стрілка повертається на 90 градусів на відстані 479 пікселів, щоб вказувати вниз, коли смуга складається одна на одну.
Примітка — виноска розміром 12 пікселів. На бірюзовій смузі має бути напис «На бірюзовій».
Картка кольору «тіл» для дат і розкладів. «Date Head» — це золота наклейка, «Date Par» — рядок під нею. Максимальна ширина картки «Date Card» становить 400 пікселів, тому в стовпцях розміром 1fr / 1fr праворуч від неї залишається порожній простір — це ліва картка нижче, і саме через це рядок із двох карток виглядає незбалансованим. Додайте параметр «Fill», щоб картка заповнювала всю колонку, як це робить права картка. «wide» — це середнє значення, що дорівнює 450px. Права картка також містить групи («Groups») та окремі групи («Group») для кількох пар дат: усередині групи абзац потребує вирівнювання («Flush»), інакше поле «Date Par» розміром 16px накладається на пробіл зверху.
Date Head — золота етикетка
Дата Par — 16 / 24, білий, з власним нижнім полем 16 пікселів.
Понеділок
Дата Par + зливання всередині групи
Середа
Пробіл між групами забезпечує відступ у 4 пікселі
Субота
а функція «Groups» встановлює відступ у 20 пікселів між парами
Img Big — це обкладинка на всю ширину, 320 пікселів. Card Img — це версія картки розміром 200 пікселів. Обидві обрізаються як обкладинка — якщо обрізка вирізає об’єкт знімка, використовуйте зміщення вниз або вліво, але ніколи не змінюйте висоту. Обертка тут — Cols + separated.
Ліворуч: велике зображення. Праворуч: те саме фото зі зміщеним низом. Нижче: відео, порожнє поле формату 16:9 — вставте вбудований елемент із iframe всередині. Параметр «vertical» звужує його до 75% для кліпу у вертикальному форматі.
Доріжка прокрутки з фіксацією. Прокручує на одну картку вперед, чітко зупиняється на останній, реагує на дотик. Рейка утримує стрілки, доріжка прокрутки прокручується, картки розміщуються в «Rail Slide», стрілки — це «Rail Arrow» (+ «Попередня» ліворуч, + «Вихід» при досягненні кінця) із символом «Chev» всередині (+ «Назад» ліворуч). Скопіюйте весь блок і змініть картки — скрипт налаштовується автоматично.
«Rail Arrow» — це блакитно-зелене коло, яке зникає на блакитно-зеленій смузі — отже, тут потрібно використовувати колір «Primary», щоб воно стало золотистим, а «Chev» всередині — колір «Dark», щоб воно стало блакитно-зеленим. Для «Prev» потрібен власний колір «Primary» (Rail Arrow + Prev + Primary), оскільки ліва стрілка вже містить два класи. На білій смузі все це не потрібно: прості блакитно-зелені стрілки показано в наступному розділі.
Кожен слайд займає одну третину доріжки, за вирахуванням проміжків у 30 пікселів. При ширині 479 пікселів слайд займає всю ширину.
«Card», «Subhead + primary», «Par + On Teal» та «Card Img» — усі звичайні класи, нічого особливого в них немає.
Додавайте або видаляйте слайди на власний розсуд. Стрілки автоматично розраховують, на скільки потрібно прокрутити від першого слайда, тому нічого оновлювати не потрібно.
Смуга прокрутки прихована за допомогою скрипта, який вставляє одне правило, яке панель стилів Webflow не може записати.
На останній картці стрілка вправо тьмяніє і перестає реагувати — це налаштування «Rail Arrow + Off», додане скриптом.
Той самий блок, нічого не додано. На білому тлі звичайний шрифт «Rail Arrow» читається добре, тому не використовуються ні «Primary», ні «Chev Dark». Текст усередині карток знову набрано звичайним шрифтом «Par», а не «Par + On Teal».
Тут три слайди замість п’яти — стрілки визначають відстань від першого слайда, тому кількість не має значення.
Дві рейки на одній сторінці — це нормально. Скрипт прив’язує кожну з них до своїх стрілок.
На останній картці права стрілка тьмяніє — Rail Arrow + Off, додано скриптом.
На останній картці права стрілка тьмяніє — «Rail Arrow + Off», додано скриптом.
Ніколи не редагуйте жоден із цих класів, щоб виправити одну сторінку — вони використовуються на всіх сторінках. Додайте комбінацію вгорі та налаштуйте її стиль. Стилі «touching», «Flush», «Dark», «spread» та «wide» — усі вони походять саме звідси.
Для кожного нового комбо-елемента слід визначити власне правило розміром 479 пікселів, якщо змінюються його ширина, спосіб відображення або напрямок. Комбо-елемент без мобільного правила має пріоритет над мобільним правилом базового класу.
Все, що вище, — це каталог деталей. Все, що нижче, — це галерея: цілі секції, вже зібрані. Скопіюйте один варіант, поміняйте місцями текст і зображення — і готово.
Два-три речення для контексту, потім рядок із піктограмами, а потім решта тексту, якщо є що додати. Розміщуйте текст навколо піктограм, а не розміщуйте його повністю перед ними.
Друга половина тексту розміщується під рядком іконок. Обидві частини мають бути достатньо короткими, щоб рядок не «плавав» посеред великого масиву тексту.
Один рядок, що представляє чотири картки, наведені нижче.
Не більше двох рядків. Ширина зображення фіксована — 200 пікселів, тому кожна картка вирівнюється незалежно від довжини тексту.
Поміняйте місцями фотографію та два рядки — і листівка готова.
Вилучіть одну картку, щоб отримати три, додайте одну, щоб отримати п’ять — сітка складається з чотирьох рядів, після чого починається новий цикл.
Використовуйте «Three Up», якщо хочете, щоб у рядку було саме три.
Широка колонка призначена для прози. Використовуйте лише один елемент `par` із розривами рядків усередині, а не два елементи `par`, інакше абзаци опиняться на такій самій відстані один від одного, як заголовок від тексту.
Знайомтеся з командою«Цитата займає три або чотири рядки. Простір «Quote Mark» відкриває її, а текст обтікає золоту позначку.
«Слідкуйте, щоб ці три цитати були приблизно однакової довжини, інакше картки будуть розташовані на різній висоті».
«Додайтезображення картки над цитатою, якщо у вас є портретні фотографії; якщо їх немає — не додавайте».
Додайте зображення картки (Card Img) над цитатою, і картка перетвориться на відгук. Розмір зображення картки (Card Img) фіксований на рівні 200 пікселів з обрізкою, тому три портрети вирівнюються незалежно від їхнього початкового кадрування — якщо на якомусь із них обличчя обрізане, змістіть його вліво або вниз.
«Цитата з трьох-чотирьох рядків, що починається з лапок, розміщується так само, як і версія без фотографій».
«У цьомуваріанті використовується параметр Card Img із зміщенням вниз, що фіксує обрізку у верхній частині, завдяки чому обличчя залишається в межах прямокутника розміром 200 пікселів.
«Постарайтеся, щобці три цитати булиприблизно однакової довжини, інакше картки виходять різної висоти».
“ Дякую вам за те, що створили простір, який допомагає моєму синові формувати власну особистість. І досі він відвідує заняття з великим ентузіазмом. А той момент усвідомлення: «Я можу. Я здатний. Перед мною — цілий світ» — як же важливо для дитинства мати такі моменти.
Я гостро відчуваю, наскільки сьогодні дітям потрібне середовище для зростання та навчання, і як важливо показатиїм, що світ великий, що існує безліч можливостей, і що майбутнє не обмежується обставинами сьогодення.
Надя, мама 16-річного Гордія, учня «Світла» з 2023 року
Спочатку один рядок, а потім дві картки.
Вівторок, 15:00, Київ
Дев’яносто хвилин, у прямому ефірі
Четвер, 15:00, Київ
Дев’яносто хвилин, у прямому ефірі
Понеділок, 17:00, Київ
Дві години, наживо
Субота, 11:00, Київ
Практичний семінар (необов’язковий)
Текст ліворуч, відео праворуч. Вставте елемент «Embed» у поле «Video» разом із iframe з YouTube — це поле вже має співвідношення сторін 16:9 і радіус 15 пікселів, тому для iframe достатньо вказати ширину та висоту в розмірі 100 відсотків.
Спочатку одна лінія, потім ґудзики. Ця смужка біла під білою смужкою, саме тому вона виглядає так зворушливо.
