Адаптивна верстка цікавого сайту. Пояснення дій. HTML CSS JS FIGMA. Частина №4

Адаптивна верстка сайту на базі шаблону Чертоги Фрілансера 3. Пояснення дій. HTML CSS JS FIGMA. Слайдери, спойлери, меню бургер, анімації при скролі, підвантаження з JSON та інше!
👉 Усі частини майстер-класу: • Адаптивна верстка ціка...
👉 Що такє стартовий шаблон "Чертоги Фрілансера": template.fls.guru/template-do...
👉 Посилання на стартовий шаблон з напрацюваннями "Чертоги Фрілансера" 3 (патреон): / startovyi-v3-59380989
👉 Макет (відкритий доступ): / 88064356
👉 Результат верстки (Patreon - Junior): / rezultat-verstki-89199655
👉 Інші безкоштовні майстер-класи з верстки сайтів: • Адаптивная вёрстка лен...
🔴Канал з практикою без слів Code Only - / @codeonly
Курси:
🟢 Курс по верстці: edu.fls.guru/
🟢 Платні майстер-класи: master.fls.guru/
💪 ГетьТривогаЧелендж: t.me/freelancer_lifestyle/496
❤️ Отримати доступ к екстра-контенту + підтримати канал: / freelancerlifestyle
❤️ Спонсорувати канал: / @freelancerlifestyle
Корисні посилання:
👉 Безкоштовний курс по верстці: • БЕСПЛАТНЫЙ курс по вер...
👉 VS Code: • VS Code настройка уста...
👉 Как правильно навчатись: • Как правильно учиться ...
👉 План розвитку фронтенд розробника (+МАПА): • ПЛАН РАЗВИТИЯ ФРОНТЕНД...
🔴 Мапа каналу: miro.com/app/board/o9J_lZB3YKI=/
🔴 Instagram: / freelancer.lifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстці: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
👋 Мене звати Женя Андріканич, я IT - спеціалист, займаюсь розробкою сайтів.
Посилання на канал: / freelancerlifestyle
🤟 Живи, а працюй у вільний час! ©

[@gyurchenko77]

Дякую за матеріал українською.

[@UdavBlog]

Дякую за навчальний контент!

[@zinarazinkova6648]

Женя, дякую за крутезний майстер-клас. Я дуже багато чому навчилась, завдяки вашим відео з прикладами верстки.

[@const6185]

Спасибо!

[@user-bf6cp8ju1i]

Wonderful!!!

[@sergmalin210]

Євген чоловік. Чудово робить свою роботу.

[@user-cd7ut7wr4s]

я встроил в шаблон gsap, barba js, locomotive scroll, кому нужно пишите отправлю за спасибо) whoisleshalight) Героям слава! Жека знову ДЯКУЮ!

[@harpeter9752]

Якщо говорити про навчання практичної верстки - корисний матеріал. Зараз вже є Galaxy Fold з шириною екрану 280px. Хочеться бачити адаптив з врахуванням такого пристрою. Хай Бог тебе благослоить, збереже і дасть тобі мир

[@BRILLIANTIC1]

Дякую! Все вийшло. Зробили великий обсяг роботи. Єдиний момент, при завантажені на GitHub картинка з блоку talk типово знаходиться зліва, під текстовим блоком...)

[@SuperRAilya]

talk: 38:28 1:09:33 (комментарий для себя)

[@33mika777]

Привіт! На 52:46 для кониейнера та блоку з картинкою потрібно grid-area: 1 / 1 і питання вирішено :) для контенту потім z-index задати, щоб кнопки клікались. До кінця не переглянула ще. Можливо ви і використали це рішення.

[@33mika777]

Це замість transform translate чи position absolute. Grid - це магія. Батьківському display: grid Двом внутрішнім grid-area: 1 / 1

[@33mika777]

І воно 'триматиме' висоту. Не буде тієї проблеми, як з абсолютним позиціюнюванням.

[@33mika777]

Я знаю 3 способи вирішити цю задачку - винесення зображення за обмежуючий контейнер. Два на flex (один із вашого каналу) і один на grid. Grid оптимальніше - менше стилів.

[@SuperRAilya]

так не понятно. пожалуйста снимите видео. или скиньте ссылку где увидели этот способ. у меня не получилось так как вы описали

[@user-zj6zc2lz2u]

1:10 убрать block__container задать block__grid_2row_2coloumn auto auto / 1fr 1fr выравнивание justify-items end прижимаем содержимое в право в 1 колонке 1 ячейке max-wid block__container/2 кладем декор в 1 колонке 2 ячейке max-wid block__container/2 кладем контент в 2 колонку grid-row span 2 кладем картинку стилизуем

[@user-qv3ws8os4c]

Мобильная верстка немного отличается от макета. Заказчику объяснить, что так удобнее для пользования? Я возможно прослушал этот момент. А так спасибо за работу, наконец-то можно поверстать этот сайт самостоятельно

[@RomanPrykhodko-cx1rt]

Женя, ніде не знайшов інформації як зібрати проект на продакшн, тобто готові файли без сміття

[@FreelancerLifeStyle]

Для цього потрібні збірки gulp webpack або готові стартові шаблони як мій template.fls.guru/template-docs/dlya-chego-nuzhny-chertogi-frilansera-v3-prezentaciya-shablona-i-ego-vozmozhnostej.html

[@marikowka]

Доброго дня, шукаю ментора по верстці, можу виконувати якісь рутинні завдання, хочу вчитися і розвиватись

[@larasport654]

Привііііт