Добрый день!
Необходимо сверстать следующий код:
<div class="paragraph paragraph--type--svx-sim paragraph--view-mode--default">
<div class="row">
<div class="col-lg-6">
<div class="large-image"
style="background-image: url('/sites/default/files/2023-04/DA_RENDER_FOYER-IMAGE-WEB.jpg') ;display: block;width: 500px;height: 500px;">
</div>
<div class="small-image"
style="background-image: url('/sites/default/files/2023-04/DA_RENDER_PARK-IMAGE_web_square .jpg')">
</div>
</div>
<div class="col-lg-6">
<div class="field field--name-field-svx-sim-title field--type-string field--label-hidden field__item">Plan Your
Visit
</div>
<div
class="clearfix text-formatted field field--name-field-svx-sim-body field--type-text field--label-hidden field__item">
All the information you need for your visit to the Pavilion.
</div>
<div class="field field--name-field-svx-sim-link field--type-link field--label-hidden field__item"><a
href="
rbc.ru">Find out more</a></div>
</div>
</div>
</div>
Таким образом, чтобы он выглядел и вёл себя точно также (Parallax) как на сайте
thepavilionarts.au Требования:
1. Чистый SCSS с классом .paragraph--type--svx-sim на верхнем уровне и все остальные стили вложенные.
2. При изменении разметки необходимо выделить цветом наподобие гитхаба добавленные/изменённые элементы, чтобы я мог легко внести изменения в шаблон.
3. Если оригинальный сайт не использует JS для этого элемента также не использовать.
4. Желательно продемонстрировать результат на codepen
5. Вынести в начало SCSS и определить переменные, которые будут использоваться, например фон кнопки, цвета, размеры и жирность шрифтов, паддинги между элементами.
Можно:
1. Добавить/изменить элемент/класс в структуре, но желательно по минимуму
2. Не добавлять анимацию внутри кнопки, но тень при наведении добавить.
Скидывайте свои котировки на данную работу.