Python для Back-end, ну или для Front-end, если компилировать в JS. Судя по вопросу, вы планируете стать Fullstack-разработчиком, а без JS тут никуда, лучше его поставьте в планы.
А дальше уже только JS и подстройка градиента с его помощью на основе позиции курсора и картинки позади, если есть такая задача. К CSS это не имеет отношения.
Тот же механизм применим и к варианту с маской (два блока на absolute). Наверное, так будет даже проще, ибо позицию маски полегче интерпретировать.
Update.
Там даже проще. Блок с прозрачным текстом, блок с картинкой, блок с белым текстом. Вот в таком порядке. Без масок и градиента.
SVG-картинкой или двумя текстовыми блоками поверх друг друга на absolute и через маску обрезать верхний блок. Либо же градиент на текст в качестве заливки + text-stroke.
Ох, у меня как раз почему-то встроенный observer в паре последних случаев совершенно не работал, поэтому приходилось либо быстрый фикс, как я описал в комментарии, либо через метод update().
$(document).on('shown.bs.tab', function (e) {
$(window).trigger('resize');
})
Swiper слушает событие ресайза окна. Инициализация в скрытом блоке, безусловно, будет неверной, поэтому нужно форсировать либо ресайз, чтобы Swiper пересчитал размеры, либо вызвать метод обновления через API самого Swiper. Первый вариант проще. Всё это привязываем к событию показа таба Bootstrap.
Оставьте float'ы для верстки текстовых блоков, для чего они и были задуманы. Для layout'ов используйте flex или grid. Float изучать, конечно, стоит, просто не в контексте построения layout'ов.
yalyublyusyr, уже несколько лет Photoshop — для обработки графики, Figma и т. д. для создания макетов сайтов, приложений UX/UI. В принципе, если вы нормальный специалист, то хоть в Illustrator делайте макеты. Просто в Figma это удобнее, она для этого предназначена, кроме того, облегчает командную работу, не говоря уже о создании UI Kit'ов и т. д.
А в ТЗ вы и не то увидите. Большинство людей до сих пор мониторы называют компьютерами.
Ну и у вас не закрыто значение атрибута.