Адаптивная верстка

3 000 руб. за проект
05 февраля 2021, 20:56 • 22 отклика • 279 просмотров
Требуется сделать адаптивную верстку страницы каталога для дальнейшей передачи front-end разработчику https://www.figma.com/file/gDRXHwTeo20J0D2xev9L70/...
Только страница КАТАЛОГ

Так выглядит страница сейчас https://yummy-sneeze.surge.sh/goods

Три разрешения:
PC 1440x800+
iPad 1024x768
Moblie 320x..

Верстка в rem - 10px
Для всех экранов нужно создать media для указания font size (предварительные значения):
320 (1.4rem), 768 (1.4rem), 1024 (1.4rem), 1360(1.7rem), 1440(1.7rem), 1920(1.8rem), 2560(2rem)

Нужно использовать готовые решения (подробности расскажу исполнителю):
на select фильтров с доработкой - https://codepen.io/aaroniker/full/VGMwLd
на switch - https://codepen.io/aaroniker/full/LYGLoBE
на select модификации товара - https://codepen.io/aaroniker/full/MWgjERQ

на фоне градиент:

.css-selector {
background: linear-gradient(270deg, #CFDCE4
, #F6E6DC
, #FAF0E9
, #F5F5F1
, #C0D9C3
);
background-size: 1000% 1000%; -webkit-animation: AnimationName 49s ease infinite;
-moz-animation: AnimationName 49s ease infinite;
-o-animation: AnimationName 49s ease infinite;
animation: AnimationName 49s ease infinite;
}@-webkit-keyframes AnimationName {
0%{background-position:0% 7%}
50%{background-position:100% 94%}
100%{background-position:0% 7%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 7%}
50%{background-position:100% 94%}
100%{background-position:0% 7%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 7%}
50%{background-position:100% 94%}
100%{background-position:0% 7%}
}
@keyframes AnimationName {
0%{background-position:0% 7%}
50%{background-position:100% 94%}
100%{background-position:0% 7%}
}

Страницы будут еще, надеюсь на длительное сотрудничество.