Добрый день!

Необходимо сверстать следующий код:

<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. Не добавлять анимацию внутри кнопки, но тень при наведении добавить.

Скидывайте свои котировки на данную работу.

Опубликовано 1 год назад