Подсказка по коду из урока №6 Видео и картинка
Ниже я дублирую часть кода и его свойства, на тот случай, если вы забыли какое-то значение или как оно пишется. Также буду вставлять готовые решения, которые мы разобрали в рамках урока
/* Стили для видео */
.t331 video {
object-fit: cover;
object-position: top right;
}
/* Стили для изображения в потоках */
.t-feed__post-popup__cover-wrapper {
height: 200px;
}
.t-feed__post-popup__cover-wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
Подсказка по коду из урока №5 Соотношение сторон
Ниже я дублирую часть кода и его свойства, на тот случай, если вы забыли какое-то значение или как оно пишется. Также буду вставлять готовые решения, которые мы разобрали в рамках урока
.t774__imgwrapper {
padding: 0 !important;
width: 100%;
aspect-ratio: 2 / 1;
}
.t331 .t-popup__container {
height: 400px;
aspect-ratio: 1 / 1;
}
.t331__wrap-video {
height: 100% !important;
}
.t331__wrap-video > div {
height: 100% !important;
}
/* Варианты записи */
aspect-ratio: 3 / 6;
aspect-ratio: 1 / 2;
aspect-ratio: 0.5 / 1;
aspect-ratio: 0.5;
Подсказка по коду из урока урока №4 Калькулятор
Ниже я дублирую часть кода и его свойства, на тот случай, если вы забыли какое-то значение или как оно пишется. Также буду вставлять готовые решения, которые мы разобрали в рамках урока
.t754__parent {
max-width: calc(100vw - 60px);
padding: 0 !important;
}
.t754__col {
margin: 0 10px 30px 10px;
padding: 0 !important;
max-width: calc(100% / 4 - 20px);
float: left;
}
@media screen and (max-width: 768px){
.t754__parent {
max-width: calc(100vw - 20px);
}
.t754__col {
max-width: calc(100% / 2 - 20px);
}
}
Подсказка по коду из урока урока №3 по атрибуту карточки
Ниже я дублирую часть кода и его свойства, на тот случай, если вы забыли какое-то значение или как оно пишется. Также буду вставлять готовые решения, которые мы разобрали в рамках урока
[data-product-gen-uid="310967630292"]{
& {
outline: 2px solid red;
transition: all 0.2s ease-in;
}
& .js-store-prod-name{
font-size: 32px;
}
& .js-store-prod-descr{
font-size: 16px;
}
& .t-store__card__imgwrapper{
height: 200px;
padding: 0;
}
&:hover{
scale: 0.9;
}
@media screen and (max-width: 1200px){
& .js-store-prod-name{
color: red;
}
}
}